admin/logs: show-api toggle-button
Massimo Melina committed
Nov 23, 2023 at 01:12 UTC
e2226a445cc851f895868e1df76fe3175efca1a4
1 file changed
+17
-6
admin/src/LogsPage.ts
+17
-6
@@ -1,30 +1,40 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, Fragment, useState } from 'react';
3
+import { createElement as h, Fragment, useMemo, useState } from 'react';
4
import { Box, Tab, Tabs } from '@mui/material'
5
import { API_URL, useApiList } from './api'
6
import { DataTable } from './DataTable'
7
import { formatBytes, tryJson } from '@hfs/shared'
8
import { logLabels } from './OptionsPage'
9
-import { Flex, typedKeys, usePauseButton } from './misc';
9
+import { Flex, typedKeys, useBreakpoint, usePauseButton, useToggleButton } from './misc';
10
import { GridColDef } from '@mui/x-data-grid'
11
+import _ from 'lodash'
12
+import { SmartToy } from '@mui/icons-material'
13
14
export default function LogsPage() {
15
const [tab, setTab] = useState(0)
16
const files = typedKeys(logLabels)
17
const { pause, pauseButton } = usePauseButton()
18
+ const [showApi, showApiButton] = useToggleButton(v => ({
19
+ title: v ? "hide APIs" : "show APIs",
20
+ icon: SmartToy,
21
+ sx: { rotate: v ? '0deg' : '180deg' },
22
+ disabled: tab >= 2,
23
+ }), true)
24
+ const shorterLabels = !useBreakpoint('sm') && { error_log: "Errors" }
25
return h(Fragment, {},
26
h(Flex, { gap: 0 },
27
h(Tabs, { value: tab, onChange(ev,i){ setTab(i) } },
19
- files.map(f => h(Tab, { label: logLabels[f], key: f })) ),
28
+ files.map(f => h(Tab, { label: _.get(shorterLabels, f) || logLabels[f], key: f })) ),
29
h(Box, { flex: 1 }),
30
+ showApiButton,
31
pauseButton,
32
),
23
- h(LogFile, { key: tab, pause, file: files[tab] }), // without key, some state is accidentally preserved across files
33
+ h(LogFile, { key: tab, pause, showApi, file: files[tab] }), // without key, some state is accidentally preserved across files
34
)
35
}
36
27
-function LogFile({ file, pause }: { file: string, pause?: boolean }) {
37
+function LogFile({ file, pause, showApi }: { file: string, pause?: boolean, showApi: boolean }) {
38
const { list, error, connecting } = useApiList('get_log', { file }, {
39
invert: true,
40
pause,
@@ -34,6 +44,7 @@ function LogFile({ file, pause }: { file: string, pause?: boolean }) {
44
const notes = extra.dl ? "fully downloaded" : extra.ul ? "uploaded " + formatBytes(extra.size) : ''
45
if (notes)
46
x.notes = notes
47
+ return x
48
}
49
})
50
const tsColumn: GridColDef = {
@@ -47,7 +58,7 @@ function LogFile({ file, pause }: { file: string, pause?: boolean }) {
58
return h(DataTable, {
59
error,
60
loading: connecting,
50
- rows: list as any,
61
+ rows: useMemo(() => showApi ? list : list.filter(x => !x.uri.startsWith(API_URL)), [list, showApi]),
62
compact: true,
63
componentsProps: {
64
pagination: {