Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bca1ad
feat(logs): user-selectable logs limit
MacDada Apr 22, 2024
94b0f50
perf(logs): extracted var to optimize a loop
MacDada Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion src/components/logs-page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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> {
Expand All @@ -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">
Expand Down Expand Up @@ -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)],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should slice logs here, this will happen automatically once new log record arrives, and then handler can be simplified to
store.setState({logsLimit: parseInt(e.target.value)})

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will happen automatically once new log record arrives

yep, but I think it's better for the user experience, if the slice is also done immediately upon selecting the option from the menu

it doesn't matter for 100 -> 1000 change, but it does in the case of changing 1000 -> 100 ;)

i don't think the extra slicing complicates this code so much, to make a worse UI instead…

});
}}
>
{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
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2534,7 +2534,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",
Expand Down
1 change: 1 addition & 0 deletions src/initialState.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
}
},
"logs": [],
"logsLimit": 100,
"extensions": [],
"theme": "light",
"missingTranslations": {},
Expand Down
1 change: 1 addition & 0 deletions src/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
5 changes: 2 additions & 3 deletions src/ws-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down