feat(logs): user-selectable logs limit (#1999)

* feat(logs): user-selectable logs limit

When viewing debug logs, the current buffer limit of a 100 is full pretty quick.

I'm adding an option for the user to choose a bigger limit (up to a 1000).

* perf(logs): extracted var to optimize a loop

https://github.com/nurikk/zigbee2mqtt-frontend/pull/1999/commits/
9bca1ad#r1574572268

src/components/logs-page/index.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'unistore/react';
 import actions, { UtilsApi } from '../../actions/actions';
-import { GlobalState, LogMessage } from '../../store';
+import store, { GlobalState, LogMessage } from '../../store';
 import cx from 'classnames';
 import escapeRegExp from 'lodash/escapeRegExp';
 import { BridgeApi } from '../../actions/BridgeApi';
@@ -71,6 +71,7 @@ export function LogRow(props: LogRowProps): JSX.Element {
 }
 
 const logLevels = [ALL, 'debug', 'info', 'warning', 'error'];
+const logLimits = [100, 200, 500, 1000];
 
 type PropsFromStore = Pick<GlobalState, 'bridgeInfo' | 'logs'>;
 class LogsPage extends Component<PropsFromStore & BridgeApi & UtilsApi & WithTranslation<'logs'>, LogsPageState> {
@@ -83,6 +84,7 @@ class LogsPage extends Component<PropsFromStore & BridgeApi & UtilsApi & WithTra
             t,
         } = this.props;
         const { search } = this.state;
+        const { logsLimit } = store.getState();
         return (
             <div className="card">
                 <div className="card-body">
@@ -125,6 +127,28 @@ class LogsPage extends Component<PropsFromStore & BridgeApi & UtilsApi & WithTra
                                 onChange={updateBridgeConfig}
                             />
                         </div>
+                        <div className="col-12 col-sm-4 col-xxl-4">
+                            <label htmlFor="logs-limit" className="form-label">
+                                {t('logs_limit')}
+                            </label>
+                            <select
+                                id="logs-limit"
+                                className="form-select"
+                                onChange={(e) => {
+                                    const limit = parseInt(e.target.value);
+                                    store.setState({
+                                        logsLimit: limit,
+                                        logs: [...store.getState().logs.slice(-limit)],
+                                    });
+                                }}
+                            >
+                                {logLimits.map((limit) => (
+                                    <option key={limit} value={limit} selected={limit == logsLimit}>
+                                        {limit}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
                         <div className="col-12">
                             <label htmlFor="reset">&nbsp;</label>
                             <input

src/i18n/locales/en.json

@@ -2535,7 +2535,8 @@
   "logs": {
     "empty_logs_message": "Nothing to display",
     "filter_by_text": "Filter by text",
-    "show_only": "Show only"
+    "show_only": "Show only",
+    "logs_limit": "Logs limit"
   },
   "map": {
     "help_coordinator_link_description": "Solid lines are the link to the Coordinator",

src/initialState.json

@@ -23,6 +23,7 @@
         }
     },
     "logs": [],
+    "logsLimit": 100,
     "extensions": [],
     "theme": "light",
     "missingTranslations": {},

src/store.ts

@@ -67,6 +67,7 @@ export interface GlobalState extends WithDevices, WithDeviceStates, WithGroups,
     bridgeConfig: BridgeConfig;
     bridgeState: BridgeState;
     logs: LogMessage[];
+    logsLimit: number;
     extensions: Extension[];
     theme: Theme;
     missingTranslations: Map<string, unknown>;

src/ws-client.ts

@@ -15,7 +15,6 @@ import keyBy from 'lodash/keyBy';
 import { GraphI } from './components/map/types';
 import local from 'store2';
 
-const MAX_LOGS_RECORDS_IN_BUFFER = 100;
 const TOKEN_LOCAL_STORAGE_ITEM_NAME = "z2m-token-v2";
 const AUTH_FLAG_LOCAL_STORAGE_ITEM_NAME = "z2m-auth-v2";
 const UNAUTHORIZED_ERROR_CODE = 4401;
@@ -193,8 +192,8 @@ class Api {
 
             case "bridge/logging":
                 {
-                    const { logs } = store.getState();
-                    const newLogs = [...logs.slice(-MAX_LOGS_RECORDS_IN_BUFFER)];
+                    const { logs, logsLimit } = store.getState();
+                    const newLogs = [...logs.slice(-logsLimit)];
                     newLogs.push({ ...(data.payload as unknown as LogMessage), timestamp: new Date() } as LogMessage);
                     store.setState({ logs: newLogs });
                     const log = data.payload as unknown as LogMessage;