@peers-app/peers-ui 0.7.6 → 0.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/screens/console-logs/console-logs-list.js +21 -19
  2. package/package.json +3 -3
  3. package/src/screens/console-logs/console-logs-list.tsx +21 -18
package/dist/screens/console-logs/console-logs-list.js CHANGED
@@ -41,12 +41,12 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
41
41
  const lodash_1 = require("lodash");
42
42
  const react_1 = __importStar(require("react"));
43
43
  const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
44
+ const loading_indicator_1 = require("../../components/loading-indicator");
44
45
  const hooks_1 = require("../../hooks");
45
- const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
46
46
  const ui_loader_1 = require("../../ui-router/ui-loader");
47
+ const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
47
48
  const log_display_1 = require("./log-display");
48
49
  const log_filters_1 = require("./log-filters");
49
- const loading_indicator_1 = require("../../components/loading-indicator");
50
50
  const resizable_table_header_1 = require("./resizable-table-header");
51
51
  const windowHeight = () => window.innerHeight;
52
52
  const DEFAULT_COLUMNS = [
@@ -57,8 +57,7 @@ const DEFAULT_COLUMNS = [
57
57
  { key: 'message', label: 'Message', width: 600 },
58
58
  ];
59
59
  const ConsoleLogsList = () => {
60
- const logsObs = (0, hooks_1.useObservableState)([]);
61
- const logs = logsObs();
60
+ const logs = (0, hooks_1.useObservableState)([]);
62
61
  const [allLogsLoaded, setAllLogsLoaded] = (0, react_1.useState)(false);
63
62
  const [levelFilter, setLevelFilter] = (0, react_1.useState)('all');
64
63
  const [processFilter, setProcessFilter] = (0, react_1.useState)('all');
@@ -142,14 +141,15 @@ const ConsoleLogsList = () => {
142
141
  }
143
142
  // Load older logs (prepend to list)
144
143
  function prependLogs() {
145
- const oldestLog = logs[0];
144
+ const oldestLog = logs()[0];
146
145
  fetchLogs(oldestLog).then(fetchedLogs => {
147
146
  if (fetchedLogs.length === 0) {
148
147
  setAllLogsLoaded(true);
149
148
  }
150
149
  else {
151
- const _logs = (0, lodash_1.sortBy)([...logsObs(), ...fetchedLogs], 'timestamp');
152
- logsObs((0, lodash_1.uniqBy)(_logs, 'logId'));
150
+ let _logs = (0, lodash_1.sortBy)([...logs(), ...fetchedLogs], 'timestamp');
151
+ _logs = (0, lodash_1.uniqBy)(_logs, l => l.logId);
152
+ logs(_logs);
153
153
  }
154
154
  });
155
155
  return false;
@@ -163,7 +163,7 @@ const ConsoleLogsList = () => {
163
163
  }, [logs, levelFilter, processFilter, searchText]);
164
164
  // Reset when filters change
165
165
  (0, react_1.useEffect)(() => {
166
- logsObs([]);
166
+ logs([]);
167
167
  setAllLogsLoaded(false);
168
168
  updateLogCount();
169
169
  }, [levelFilter, processFilter, searchText]);
@@ -181,14 +181,13 @@ const ConsoleLogsList = () => {
181
181
  return;
182
182
  if (searchText && !log.message.toLowerCase().includes(searchText.toLowerCase()))
183
183
  return;
184
- // Don't add if already in list or if we're only showing a limited batch and this is older
185
- if (logs.find(l => l.logId === log.logId))
186
- return;
187
- if (logs.length > batchSize && (0, lodash_1.min)(logs.map(l => l.timestamp)) > log.timestamp)
184
+ // Don't add we're only showing a limited batch and this is older
185
+ if (logs().length > batchSize && (0, lodash_1.min)(logs().map(l => l.timestamp)) > log.timestamp)
188
186
  return;
189
187
  if (evt.op === 'insert') {
190
- const _logs = (0, lodash_1.sortBy)([...logsObs(), log], 'timestamp');
191
- logsObs(_logs);
188
+ let _logs = (0, lodash_1.sortBy)([...logs(), log], 'timestamp');
189
+ _logs = (0, lodash_1.uniqBy)(_logs, l => l.logId);
190
+ logs(_logs);
192
191
  scrollToBottom('smooth');
193
192
  }
194
193
  });
@@ -196,7 +195,7 @@ const ConsoleLogsList = () => {
196
195
  sub.unsubscribe();
197
196
  };
198
197
  });
199
- }, [logs, levelFilter, processFilter, searchText]);
198
+ }, [levelFilter, processFilter, searchText]);
200
199
  function scrollToBottom(behavior, delay = 100) {
201
200
  setTimeout(() => {
202
201
  logsEndRef.current?.scrollIntoView({ behavior });
@@ -207,7 +206,7 @@ const ConsoleLogsList = () => {
207
206
  try {
208
207
  const table = await (0, peers_sdk_1.ConsoleLogs)();
209
208
  await table.deleteOldLogs(Date.now());
210
- logsObs([]);
209
+ logs([]);
211
210
  setAllLogsLoaded(true);
212
211
  setTotalLogCount(0);
213
212
  }
@@ -216,6 +215,7 @@ const ConsoleLogsList = () => {
216
215
  }
217
216
  }
218
217
  }
218
+ const _logs = (0, lodash_1.uniqBy)(logs(), l => l.logId);
219
219
  return (react_1.default.createElement("div", { className: "container-fluid", style: { height: 'calc(100vh - 100px)', display: 'flex', flexDirection: 'column' } },
220
220
  react_1.default.createElement(log_filters_1.LogFilters, { levelFilter: levelFilter, setLevelFilter: setLevelFilter, processFilter: processFilter, setProcessFilter: setProcessFilter, searchText: searchText, setSearchText: setSearchText }),
221
221
  react_1.default.createElement("div", { ref: containerRef, style: {
@@ -234,15 +234,17 @@ const ConsoleLogsList = () => {
234
234
  display: 'flex',
235
235
  flexDirection: 'column-reverse',
236
236
  } },
237
- react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: logs.length, next: prependLogs, style: { display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }, inverse: true, hasMore: !allLogsLoaded, loader: react_1.default.createElement(loading_indicator_1.LoadingIndicator, null), scrollableTarget: "scrollableLogsDiv", endMessage: react_1.default.createElement(react_1.Fragment, null,
237
+ react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: _logs.length, next: prependLogs, style: { display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }, inverse: true, hasMore: !allLogsLoaded, loader: react_1.default.createElement(loading_indicator_1.LoadingIndicator, null), scrollableTarget: "scrollableLogsDiv", endMessage: react_1.default.createElement(react_1.Fragment, null,
238
238
  react_1.default.createElement("div", { className: "d-flex justify-content-center p-3" },
239
239
  react_1.default.createElement("div", { className: "text-muted" },
240
240
  react_1.default.createElement("i", null, "beginning of logs")))) },
241
241
  react_1.default.createElement("div", { ref: logsEndRef }),
242
- logs.length === 0 && allLogsLoaded ? (react_1.default.createElement("div", { className: "text-center p-5 text-muted" },
242
+ _logs.length === 0 && allLogsLoaded ? (react_1.default.createElement("div", { className: "text-center p-5 text-muted" },
243
243
  react_1.default.createElement("i", { className: "bi bi-inbox display-1" }),
244
244
  react_1.default.createElement("p", { className: "mt-2" }, "No logs found"))) : (react_1.default.createElement("table", { className: "table table-sm table-hover mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
245
- react_1.default.createElement("tbody", null, logs.map((log) => (react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
245
+ react_1.default.createElement("tbody", null, _logs.map((log) => (
246
+ // log.logId
247
+ react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
246
248
  react_1.default.createElement("div", { style: {
247
249
  position: 'fixed',
248
250
  bottom: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@peers-app/peers-ui",
3
- "version": "0.7.6",
3
+ "version": "0.7.7",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "peerDependencies": {
29
29
  "bootstrap": "^5.3.3",
30
- "@peers-app/peers-sdk": "^0.7.6",
30
+ "@peers-app/peers-sdk": "^0.7.7",
31
31
  "react": "^18.0.0",
32
32
  "react-dom": "^18.0.0"
33
33
  },
@@ -57,7 +57,7 @@
57
57
  "jest": "^29.7.0",
58
58
  "jest-environment-jsdom": "^30.0.5",
59
59
  "path-browserify": "^1.0.1",
60
- "@peers-app/peers-sdk": "0.7.6",
60
+ "@peers-app/peers-sdk": "0.7.7",
61
61
  "react": "^18.0.0",
62
62
  "react-dom": "^18.0.0",
63
63
  "string-width": "^7.1.0",
package/src/screens/console-logs/console-logs-list.tsx CHANGED
@@ -2,12 +2,12 @@ import { ConsoleLogs, DataFilter, IConsoleLog } from "@peers-app/peers-sdk";
2
2
  import { min, sortBy, uniqBy } from 'lodash';
3
3
  import React, { Fragment, useEffect, useMemo, useState } from 'react';
4
4
  import InfiniteScroll from 'react-infinite-scroll-component';
5
+ import { LoadingIndicator } from '../../components/loading-indicator';
5
6
  import { useObservable, useObservableState } from "../../hooks";
6
- import { colorMode } from '../settings/color-mode-dropdown';
7
7
  import { registerInternalPeersUI } from "../../ui-router/ui-loader";
8
+ import { colorMode } from '../settings/color-mode-dropdown';
8
9
  import { LogDisplay } from './log-display';
9
10
  import { LogFilters } from './log-filters';
10
- import { LoadingIndicator } from '../../components/loading-indicator';
11
11
  import { ResizableTableHeader } from './resizable-table-header';
12
12
 
13
13
  const windowHeight = () => window.innerHeight;
@@ -27,8 +27,7 @@ const DEFAULT_COLUMNS: Column[] = [
27
27
  ];
28
28
 
29
29
  export const ConsoleLogsList = () => {
30
- const logsObs = useObservableState<IConsoleLog[]>([]);
31
- const logs = logsObs();
30
+ const logs = useObservableState<IConsoleLog[]>([]);
32
31
  const [allLogsLoaded, setAllLogsLoaded] = useState(false);
33
32
  const [levelFilter, setLevelFilter] = useState<string>('all');
34
33
  const [processFilter, setProcessFilter] = useState<string>('all');
@@ -132,13 +131,14 @@ export const ConsoleLogsList = () => {
132
131
 
133
132
  // Load older logs (prepend to list)
134
133
  function prependLogs() {
135
- const oldestLog = logs[0];
134
+ const oldestLog = logs()[0];
136
135
  fetchLogs(oldestLog).then(fetchedLogs => {
137
136
  if (fetchedLogs.length === 0) {
138
137
  setAllLogsLoaded(true);
139
138
  } else {
140
- const _logs = sortBy([...logsObs(), ...fetchedLogs], 'timestamp');
141
- logsObs(uniqBy(_logs, 'logId'));
139
+ let _logs = sortBy([...logs(), ...fetchedLogs], 'timestamp');
140
+ _logs = uniqBy(_logs, l => l.logId);
141
+ logs(_logs);
142
142
  }
143
143
  });
144
144
  return false;
@@ -154,7 +154,7 @@ export const ConsoleLogsList = () => {
154
154
 
155
155
  // Reset when filters change
156
156
  useEffect(() => {
157
- logsObs([]);
157
+ logs([]);
158
158
  setAllLogsLoaded(false);
159
159
  updateLogCount();
160
160
  }, [levelFilter, processFilter, searchText]);
@@ -173,13 +173,13 @@ export const ConsoleLogsList = () => {
173
173
  if (processFilter !== 'all' && log.process !== processFilter) return;
174
174
  if (searchText && !log.message.toLowerCase().includes(searchText.toLowerCase())) return;
175
175
 
176
- // Don't add if already in list or if we're only showing a limited batch and this is older
177
- if (logs.find(l => l.logId === log.logId)) return;
178
- if (logs.length > batchSize && min(logs.map(l => l.timestamp))! > log.timestamp) return;
176
+ // Don't add we're only showing a limited batch and this is older
177
+ if (logs().length > batchSize && min(logs().map(l => l.timestamp))! > log.timestamp) return;
179
178
 
180
179
  if (evt.op === 'insert') {
181
- const _logs = sortBy([...logsObs(), log], 'timestamp');
182
- logsObs(_logs);
180
+ let _logs = sortBy([...logs(), log], 'timestamp');
181
+ _logs = uniqBy(_logs, l => l.logId);
182
+ logs(_logs);
183
183
  scrollToBottom('smooth');
184
184
  }
185
185
  });
@@ -188,7 +188,7 @@ export const ConsoleLogsList = () => {
188
188
  sub.unsubscribe();
189
189
  };
190
190
  });
191
- }, [logs, levelFilter, processFilter, searchText]);
191
+ }, [levelFilter, processFilter, searchText]);
192
192
 
193
193
  function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
194
194
  setTimeout(() => {
@@ -201,7 +201,7 @@ export const ConsoleLogsList = () => {
201
201
  try {
202
202
  const table = await ConsoleLogs();
203
203
  await table.deleteOldLogs(Date.now());
204
- logsObs([]);
204
+ logs([]);
205
205
  setAllLogsLoaded(true);
206
206
  setTotalLogCount(0);
207
207
  } catch (err) {
@@ -210,6 +210,8 @@ export const ConsoleLogsList = () => {
210
210
  }
211
211
  }
212
212
 
213
+ const _logs = uniqBy(logs(), l => l.logId);
214
+
213
215
  return (
214
216
  <div className="container-fluid" style={{ height: 'calc(100vh - 100px)', display: 'flex', flexDirection: 'column' }}>
215
217
  <LogFilters
@@ -251,7 +253,7 @@ export const ConsoleLogsList = () => {
251
253
  }}
252
254
  >
253
255
  <InfiniteScroll
254
- dataLength={logs.length}
256
+ dataLength={_logs.length}
255
257
  next={prependLogs}
256
258
  style={{ display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }}
257
259
  inverse={true}
@@ -269,7 +271,7 @@ export const ConsoleLogsList = () => {
269
271
  }
270
272
  >
271
273
  <div ref={logsEndRef} />
272
- {logs.length === 0 && allLogsLoaded ? (
274
+ {_logs.length === 0 && allLogsLoaded ? (
273
275
  <div className="text-center p-5 text-muted">
274
276
  <i className="bi bi-inbox display-1"></i>
275
277
  <p className="mt-2">No logs found</p>
@@ -277,7 +279,8 @@ export const ConsoleLogsList = () => {
277
279
  ) : (
278
280
  <table className="table table-sm table-hover mb-0" style={{ fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' }}>
279
281
  <tbody>
280
- {logs.map((log) => (
282
+ {_logs.map((log) => (
283
+ // log.logId
281
284
  <LogDisplay key={log.logId} log={log} columns={columns} />
282
285
  ))}
283
286
  </tbody>