dev: updated mui-x lib
Massimo Melina committed
Jun 21, 2023 at 23:09 UTC
4e9c78792f52d032c947773df84a8d1e141cbebc
2 files changed
+101
-102
admin/package.json
+1
-1
@@ -15,7 +15,7 @@
15
"@mui/icons-material": "^5.8.4",
16
"@mui/lab": "^5.0.0-alpha.94",
17
"@mui/material": "^5.10.0",
18
- "@mui/x-data-grid": "^5.15.1",
18
+ "@mui/x-data-grid": "^6.8.0",
19
"@gregoranders/csv": "^0.0.12",
20
"react": "^18.2.0",
21
"react-dom": "^18.2.0",
admin/src/MonitorPage.ts
+100
-101
@@ -8,7 +8,6 @@ import { Alert, Box, Chip, ChipProps } from '@mui/material'
8
import { DataGrid } from "@mui/x-data-grid"
9
import { formatBytes, IconBtn, IconProgress, iconTooltip, manipulateConfig, useBreakpoint } from "./misc"
10
import { Field, SelectField } from '@hfs/mui-grid-form'
11
-import { GridColumns } from '@mui/x-data-grid/models/colDef/gridColDef'
11
import { StandardCSSProperties } from '@mui/system/styleFunctionSx/StandardCssProperties'
12
13
export default function MonitorPage() {
@@ -85,101 +84,6 @@ function Connections() {
84
const rows = useMemo(() =>
85
list?.filter((x: any) => !filtered || x.path).map((x: any, id: number) => ({ id, ...x })),
86
[!paused && list, filtered]) //eslint-disable-line
88
- // if I don't memo 'columns', it won't keep hiding status
89
- const columns = useMemo<GridColumns<any>>(() => [
90
- {
91
- field: 'ip',
92
- headerName: "Address",
93
- flex: 1,
94
- maxWidth: 400,
95
- valueGetter: ({ row, value }) => (row.v === 6 ? `[${value}]` : value) + ' :' + row.port
96
- },
97
- {
98
- field: 'user',
99
- headerName: "User",
100
- },
101
- {
102
- field: 'started',
103
- headerName: "Started",
104
- type: 'dateTime',
105
- width: 130,
106
- valueFormatter: ({ value }) => new Date(value as string).toLocaleTimeString()
107
- },
108
- {
109
- field: 'path',
110
- headerName: "File",
111
- flex: 1,
112
- renderCell({ value, row }) {
113
- if (!value) return
114
- if (row.archive)
115
- return h(Fragment, {},
116
- h(FolderZip, { sx: { mr: 1 } }),
117
- row.archive,
118
- h(Box, { ml: 2, color: 'text.secondary' }, value)
119
- )
120
- const i = value?.lastIndexOf('/')
121
- return h(Fragment, {},
122
- row.op && h(IconProgress, {
123
- icon: row.op === 'upload' ? Upload : Download,
124
- progress: row.opProgress,
125
- offset: row.opOffset,
126
- addTitle: row.opTotal && h('div', {}, "Total: " + formatBytes(row.opTotal)),
127
- sx: { mr: 1 }
128
- }),
129
- value.slice(i + 1),
130
- i > 0 && h(Box, { ml: 2, color: 'text.secondary' }, value.slice(0, i))
131
- )
132
- }
133
- },
134
- {
135
- field: 'v',
136
- headerName: "Protocol",
137
- align: 'center',
138
- hide: true,
139
- renderCell: ({ value, row }) => h(Fragment, {},
140
- "IPv" + value,
141
- row.secure && iconTooltip(Lock, "HTTPS", { opacity: .5 })
142
- )
143
- },
144
- {
145
- field: 'outSpeed',
146
- headerName: "Speed",
147
- type: 'number',
148
- renderCell: ({ value, row }) => formatSpeed(Math.max(value||0, row.inSpeed||0))
149
- },
150
- {
151
- field: 'sent',
152
- headerName: "Sent",
153
- type: 'number',
154
- renderCell: ({ value, row}) => formatBytes(Math.max(value||0, row.got||0))
155
- },
156
- {
157
- field: 'agent',
158
- headerName: "Agent",
159
- },
160
- {
161
- field: "Actions",
162
- width: 80,
163
- align: 'center',
164
- hideSortIcons: true,
165
- disableColumnMenu: true,
166
- renderCell({ row }) {
167
- return h('div', {},
168
- h(IconBtn, {
169
- icon: Delete,
170
- title: "Disconnect",
171
- onClick: () => apiCall('disconnect', _.pick(row, ['ip', 'port'])),
172
- }),
173
- h(IconBtn, {
174
- icon: Block,
175
- title: "Block IP",
176
- disabled: row.ip === props?.you,
177
- onClick: () => blockIp(row.ip),
178
- }),
179
- )
180
- }
181
- }
182
- ], [props])
87
return h(Fragment, {},
88
h(Box, { display: 'flex', alignItems: 'center' },
89
h(SelectField as Field<boolean>, {
@@ -200,8 +104,107 @@ function Connections() {
104
}),
105
),
106
error ? h(Alert, { severity: 'error' }, error)
203
- : h(DataGrid, { rows, columns,
107
+ : h(DataGrid, {
108
+ rows,
109
localeText: filtered ? { noRowsLabel: "No downloads at the moment" } : undefined,
110
+ initialState: {
111
+ columns: {
112
+ columnVisibilityModel: { v: false },
113
+ }
114
+ },
115
+ columns: [
116
+ {
117
+ field: 'ip',
118
+ headerName: "Address",
119
+ flex: 1,
120
+ maxWidth: 400,
121
+ valueGetter: ({ row, value }) => (row.v === 6 ? `[${value}]` : value) + ' :' + row.port
122
+ },
123
+ {
124
+ field: 'user',
125
+ headerName: "User",
126
+ },
127
+ {
128
+ field: 'started',
129
+ headerName: "Started",
130
+ type: 'dateTime',
131
+ width: 130,
132
+ valueFormatter: ({ value }) => new Date(value as string).toLocaleTimeString()
133
+ },
134
+ {
135
+ field: 'path',
136
+ headerName: "File",
137
+ flex: 1,
138
+ renderCell({ value, row }) {
139
+ if (!value) return
140
+ if (row.archive)
141
+ return h(Fragment, {},
142
+ h(FolderZip, { sx: { mr: 1 } }),
143
+ row.archive,
144
+ h(Box, { ml: 2, color: 'text.secondary' }, value)
145
+ )
146
+ const i = value?.lastIndexOf('/')
147
+ return h(Fragment, {},
148
+ row.op && h(IconProgress, {
149
+ icon: row.op === 'upload' ? Upload : Download,
150
+ progress: row.opProgress,
151
+ offset: row.opOffset,
152
+ addTitle: row.opTotal && h('div', {}, "Total: " + formatBytes(row.opTotal)),
153
+ sx: { mr: 1 }
154
+ }),
155
+ value.slice(i + 1),
156
+ i > 0 && h(Box, { ml: 2, color: 'text.secondary' }, value.slice(0, i))
157
+ )
158
+ }
159
+ },
160
+ {
161
+ field: 'v',
162
+ headerName: "Protocol",
163
+ align: 'center',
164
+ renderCell: ({ value, row }) => h(Fragment, {},
165
+ "IPv" + value,
166
+ row.secure && iconTooltip(Lock, "HTTPS", { opacity: .5 })
167
+ )
168
+ },
169
+ {
170
+ field: 'outSpeed',
171
+ headerName: "Speed",
172
+ type: 'number',
173
+ renderCell: ({ value, row }) => formatSpeed(Math.max(value||0, row.inSpeed||0))
174
+ },
175
+ {
176
+ field: 'sent',
177
+ headerName: "Sent",
178
+ type: 'number',
179
+ renderCell: ({ value, row}) => formatBytes(Math.max(value||0, row.got||0))
180
+ },
181
+ {
182
+ field: 'agent',
183
+ headerName: "Agent",
184
+ },
185
+ {
186
+ field: "Actions",
187
+ width: 80,
188
+ align: 'center',
189
+ hideSortIcons: true,
190
+ disableColumnMenu: true,
191
+ renderCell({ row }) {
192
+ return h('div', {},
193
+ h(IconBtn, {
194
+ icon: Delete,
195
+ title: "Disconnect",
196
+ onClick: () => apiCall('disconnect', _.pick(row, ['ip', 'port'])),
197
+ }),
198
+ h(IconBtn, {
199
+ icon: Block,
200
+ title: "Block IP",
201
+ disabled: row.ip === props?.you,
202
+ onClick: () => blockIp(row.ip),
203
+ }),
204
+ )
205
+ }
206
+ }
207
+ ]
208
})
209
)
210
}
@@ -213,7 +216,3 @@ function blockIp(ip: string) {
216
function formatSpeed(value: number) {
217
return !value ? '' : formatBytes(value * 1000, { post: "B/s", k: 1000, digits: 1 })
218
}
216
-
217
-function isLocalHost(ip: string) {
218
- return ip === '::1' || ip.endsWith('127.0.0.1')
219
-}
\ No newline at end of file