|
| 1 | +import Stack from "@mui/material/Stack"; |
| 2 | +import { nsclientApi, useGetMetricsQuery } from "../api/api.ts"; |
| 3 | +import { |
| 4 | + Table, |
| 5 | + TableBody, |
| 6 | + TableCell, |
| 7 | + TableContainer, |
| 8 | + TableHead, |
| 9 | + TableRow, |
| 10 | + TextField, |
| 11 | + ToggleButton, |
| 12 | + ToggleButtonGroup, |
| 13 | +} from "@mui/material"; |
| 14 | +import { Toolbar } from "./atoms/Toolbar.tsx"; |
| 15 | +import { Spacing } from "./atoms/Spacing.tsx"; |
| 16 | +import { RefreshButton } from "./atoms/RefreshButton.tsx"; |
| 17 | +import { useAppDispatch } from "../store/store.ts"; |
| 18 | +import { useState } from "react"; |
| 19 | +import CloseIcon from "@mui/icons-material/Close"; |
| 20 | +import { parseMetrics } from "../metric_parser.ts"; |
| 21 | + |
| 22 | +export default function Metrics() { |
| 23 | + const dispatch = useAppDispatch(); |
| 24 | + const [filter, setFilter] = useState<string>(""); |
| 25 | + const { data: metrics } = useGetMetricsQuery(); |
| 26 | + |
| 27 | + const result = parseMetrics(metrics); |
| 28 | + const filteredMetrics = result.metrics.filter((m) => filter === "" || m.key.includes(filter)); |
| 29 | + |
| 30 | + const onRefresh = () => { |
| 31 | + dispatch(nsclientApi.util.invalidateTags(["Metrics"])); |
| 32 | + }; |
| 33 | + |
| 34 | + const sortedMetrics = filteredMetrics.sort((a, b) => a.key.localeCompare(b.key)); |
| 35 | + |
| 36 | + return ( |
| 37 | + <Stack direction="column"> |
| 38 | + <Toolbar> |
| 39 | + <TextField |
| 40 | + label="Filter" |
| 41 | + variant="standard" |
| 42 | + size="small" |
| 43 | + value={filter} |
| 44 | + onChange={(e) => setFilter(e.target.value)} |
| 45 | + /> |
| 46 | + <ToggleButtonGroup value={filter} exclusive onChange={(_e, f) => setFilter(f)} aria-label="text alignment"> |
| 47 | + {result.modules.map((m) => ( |
| 48 | + <ToggleButton value={m}>{m}</ToggleButton> |
| 49 | + ))} |
| 50 | + <ToggleButton value=""> |
| 51 | + <CloseIcon /> |
| 52 | + </ToggleButton> |
| 53 | + </ToggleButtonGroup> |
| 54 | + <Spacing /> |
| 55 | + <RefreshButton onRefresh={onRefresh} /> |
| 56 | + </Toolbar> |
| 57 | + <TableContainer sx={{ width: "100%" }}> |
| 58 | + <Table> |
| 59 | + <TableHead> |
| 60 | + <TableRow> |
| 61 | + <TableCell>Module</TableCell> |
| 62 | + <TableCell>Type</TableCell> |
| 63 | + <TableCell>Instance</TableCell> |
| 64 | + <TableCell>Metric</TableCell> |
| 65 | + <TableCell align="right">Value</TableCell> |
| 66 | + </TableRow> |
| 67 | + </TableHead> |
| 68 | + <TableBody> |
| 69 | + {sortedMetrics.map((m) => ( |
| 70 | + <TableRow hover key={m.key} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}> |
| 71 | + <TableCell>{m.module}</TableCell> |
| 72 | + <TableCell>{m.type}</TableCell> |
| 73 | + <TableCell>{m.instance}</TableCell> |
| 74 | + <TableCell>{m.metric}</TableCell> |
| 75 | + <TableCell align="right">{m.value}</TableCell> |
| 76 | + </TableRow> |
| 77 | + ))} |
| 78 | + </TableBody> |
| 79 | + </Table> |
| 80 | + </TableContainer> |
| 81 | + </Stack> |
| 82 | + ); |
| 83 | +} |
0 commit comments