admin/monitoring: show-more button on smaller screens
Massimo Melina committed
Feb 13, 2024 at 11:31 UTC
145cac80916a6843bc6440f792492cfa2473d7da
1 file changed
+11
-9
admin/src/MonitorPage.ts
+11
-9
@@ -1,9 +1,9 @@
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 _ from "lodash"
4
-import { createElement as h, useMemo, Fragment } from "react"
4
+import { createElement as h, useMemo, Fragment, useState } from "react"
5
import { apiCall, useApiEvents, useApiEx, useApiList } from "./api"
6
-import { LinkOff, Lock, Block, FolderZip, Upload, Download } from '@mui/icons-material'
6
+import { LinkOff, Lock, Block, FolderZip, Upload, Download, ChevronRight } from '@mui/icons-material'
7
import { Box, Chip, ChipProps } from '@mui/material'
8
import { DataTable } from './DataTable'
9
import {
@@ -16,7 +16,7 @@ import {
16
createDurationFormatter,
17
formatTimestamp
18
} from "./misc"
19
-import { IconBtn, IconProgress, iconTooltip, usePauseButton, useBreakpoint, Country, hTooltip } from './mui'
19
+import { IconBtn, IconProgress, iconTooltip, usePauseButton, useBreakpoint, Country, hTooltip, Btn } from './mui'
20
import { Field, SelectField } from '@hfs/mui-grid-form'
21
import { StandardCSSProperties } from '@mui/system/styleFunctionSx/StandardCssProperties'
22
import { agentIcons } from './LogsPage'
@@ -34,23 +34,25 @@ function MoreInfo() {
34
const { data: connections } = useApiEvents('get_connection_stats')
35
if (status && connections)
36
Object.assign(status, connections)
37
+ const [allInfo, setAllInfo] = useState(false)
38
const xl = useBreakpoint('xl')
39
const md = useBreakpoint('md')
40
const sm = useBreakpoint('sm')
41
const formatDuration = createDurationFormatter({ maxTokens: 2, skipZeroes: true })
42
return element || h(Box, { display: 'flex', flexWrap: 'wrap', gap: '1em', mb: 2 },
42
- md && pair('started', {
43
+ (allInfo || md) && pair('started', {
44
label: "Uptime",
45
render: x => formatDuration(Date.now() - +new Date(x)),
46
title: x => "Started: " + formatTimestamp(x),
47
}),
47
- xl && pair('http', { label: "HTTP", render: port }),
48
- xl && pair('https', { label: "HTTPS", render: port }),
49
- sm && pair('connections'),
48
+ (allInfo || xl) && pair('http', { label: "HTTP", render: port }),
49
+ (allInfo || xl) && pair('https', { label: "HTTPS", render: port }),
50
+ (allInfo || sm) && pair('connections'),
51
pair('sent', { render: formatBytes, minWidth: '4em' }),
51
- sm && pair('got', { render: formatBytes, minWidth: '4em' }),
52
+ (allInfo || sm) && pair('got', { render: formatBytes, minWidth: '4em' }),
53
pair('outSpeed', { label: "Output speed", render: formatSpeedK }),
53
- md && pair('inSpeed', { label: "Input speed", render: formatSpeedK }),
54
+ (allInfo || md) && pair('inSpeed', { label: "Input speed", render: formatSpeedK }),
55
+ !xl && !allInfo && h(IconBtn, { size: 'small', icon: ChevronRight, title: "Show more", onClick: () => setAllInfo(true) }),
56
)
57
58
type Color = ChipProps['color']