admin/monitor: temporary half-workaround for column-menus' bug

Massimo Melina committed Mar 16, 2022 at 11:02 UTC c15ac9ad783331ab531d19613136b4af9a116c68
2 files changed +73 -71
admin/src/MonitorPage.ts
+71 -70
@@ -68,6 +68,76 @@ function Connections() {
68 const rows = useMemo(()=>
69 list?.filter((x:any) => !filtered || x.path).map((x:any,id:number) => ({ id, ...x })),
70 [!paused && list, filtered]) //eslint-disable-line
71 + // memoizing the table will work around a little DataGrid's bug https://github.com/mui/mui-x/issues/4139
72 + const table = useMemo(() => h(DataGrid, {
73 + pageSize: 25,
74 + rows,
75 + columns: [
76 + {
77 + field: 'ip',
78 + headerName: "Address",
79 + flex: 1,
80 + maxWidth: 400,
81 + valueGetter: ({ row, value }) => (row.v === 6 ? `[${value}]` : value) + ' :' + row.port
82 + },
83 + {
84 + field: 'started',
85 + headerName: "Started",
86 + width: 130,
87 + valueGetter: ({ value }) => new Date(value).toLocaleTimeString()
88 + },
89 + {
90 + field: 'path',
91 + headerName: "File",
92 + flex: 1,
93 + renderCell: ({ value }) => {
94 + if (!value) return
95 + const i = value?.lastIndexOf('/')
96 + return h(Fragment, {}, value.slice(i + 1),
97 + i > 0 && h(Box, { ml: 2, color: 'text.secondary' }, value.slice(0, i)))
98 + }
99 + },
100 + {
101 + field: 'v',
102 + headerName: "Protocol",
103 + align: 'center',
104 + hide: true,
105 + renderCell: ({ value, row }) => h(Fragment, {},
106 + "IPv" + value,
107 + row.secure && iconTooltip(Lock, "HTTPS", { opacity: .5 })
108 + )
109 + },
110 + {
111 + field: 'outSpeed',
112 + headerName: "Speed",
113 + valueGetter: ({ value }) => value ? formatBytes(value * 1000, "B/s", 1000) : ''
114 + },
115 + {
116 + field: 'sent',
117 + headerName: "Total",
118 + valueGetter: ({ value }) => formatBytes(value)
119 + },
120 + {
121 + field: "Actions ",
122 + width: 80,
123 + align: 'center',
124 + renderCell({ row }) {
125 + return h('div', {},
126 + h(IconBtn, {
127 + icon: Delete,
128 + title: "Disconnect",
129 + onClick: () => apiCall('disconnect', _.pick(row, ['ip', 'port'])),
130 + }),
131 + h(IconBtn, {
132 + icon: Block,
133 + title: "Block IP",
134 + onClick: () => blockIp(row.ip),
135 + }),
136 + )
137 + }
138 + }
139 + ]
140 + }), [rows])
141 return h(Fragment, {},
142 h(Box, { display: 'flex', alignItems: 'center' },
143 h(SelectField as Field<boolean>, {
@@ -87,76 +157,7 @@ function Connections() {
157 }
158 }),
159 ),
90 - error ? h(Alert, { severity: 'error' }, error) :
91 - h(DataGrid, {
92 - pageSize: 25,
93 - rows,
94 - columns: [
95 - {
96 - field: 'ip',
97 - headerName: "Address",
98 - flex: 1,
99 - maxWidth: 400,
100 - valueGetter: ({ row, value }) => (row.v === 6 ? `[${value}]` : value) + ' :' + row.port
101 - },
102 - {
103 - field: 'started',
104 - headerName: "Started",
105 - width: 130,
106 - valueGetter: ({ value }) => new Date(value).toLocaleTimeString()
107 - },
108 - {
109 - field: 'path',
110 - headerName: "File",
111 - flex: 1,
112 - renderCell: ({ value }) => {
113 - if (!value) return
114 - const i = value?.lastIndexOf('/')
115 - return h(Fragment, {}, value.slice(i + 1),
116 - i > 0 && h(Box, { ml: 2, color: 'text.secondary' }, value.slice(0, i)))
117 - }
118 - },
119 - {
120 - field: 'v',
121 - headerName: "Protocol",
122 - align: 'center',
123 - hide: true,
124 - renderCell: ({ value, row }) => h(Fragment, {},
125 - "IPv" + value,
126 - row.secure && iconTooltip(Lock, "HTTPS", { opacity: .5 })
127 - )
128 - },
129 - {
130 - field: 'outSpeed',
131 - headerName: "Speed",
132 - valueGetter: ({ value }) => value ? formatBytes(value * 1000, "B/s", 1000) : ''
133 - },
134 - {
135 - field: 'sent',
136 - headerName: "Total",
137 - valueGetter: ({ value }) => formatBytes(value)
138 - },
139 - {
140 - field: "Actions ",
141 - width: 80,
142 - align: 'center',
143 - renderCell({ row }) {
144 - return h('div', {},
145 - h(IconBtn, {
146 - icon: Delete,
147 - title: "Disconnect",
148 - onClick: () => apiCall('disconnect', _.pick(row, ['ip', 'port'])),
149 - }),
150 - h(IconBtn, {
151 - icon: Block,
152 - title: "Block IP",
153 - onClick: () => blockIp(row.ip),
154 - }),
155 - )
156 - }
157 - }
158 - ]
159 - })
160 + error ? h(Alert, { severity: 'error' }, error) : table
161 )
162 }
163
todo.md
+2 -1
@@ -6,7 +6,7 @@
6 - admin: in a group, show linked accounts
7 - admin/config: use filepicker for https files
8 - admin: warn in case of items with same name
9 -- allowed referer
9 +- command line help --help
10 - admin/plugins
11 - show list of available plugins (skip -disabled)
12 - enable/disable (disable_plugins, no dir rename)
@@ -20,6 +20,7 @@
20 - admin: improve masks editor
21 - publish to npm (so people can "npm install hfs")
22 - frontend search supporting masks
23 +- use dialogs instead of side-forms on mobile (admin/fs+accounts)
24 - remove seconds from time
25 - update tests to SRP login
26 - upload