Kiu/VictoriaMetrics
Kiu/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-23 20:37:12 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat: add sortable columns (#2101)

Browse Source
This commit is contained in:
Yury Molodov 2022-01-25 18:48:28 +03:00 committed by GitHub
parent 2ef3fabcb8
commit e3995572bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/vmui/packages/vmui/src/components/Home/Views/TableView.tsx
View File

@ -1,4 +1,4 @@
import React, {FC, useMemo} from "preact/compat";
import React, {FC, useMemo, useState} from "preact/compat";
import {InstantMetricResult} from "../../../api/types";
import {InstantDataSeries} from "../../../types";
import Table from "@mui/material/Table";
@ -7,6 +7,7 @@ import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import makeStyles from "@mui/styles/makeStyles";
import {useSortedCategories} from "../../../hooks/useSortedCategories";
@ -26,12 +27,30 @@ const TableView: FC<GraphViewProps> = ({data}) => {
const sortedColumns = useSortedCategories(data);
const [orderBy, setOrderBy] = useState("");
const [orderDir, setOrderDir] = useState<"asc" | "desc">("asc");
const rows: InstantDataSeries[] = useMemo(() => {
return data?.map(d => ({
const rows = data?.map(d => ({
metadata: sortedColumns.map(c => d.metric[c.key] || "-"),
value: d.value ? d.value[1] : "-"
}));
}, [sortedColumns, data]);
const orderByValue = orderBy === "Value";
const rowIndex = sortedColumns.findIndex(c => c.key === orderBy);
if (!orderByValue && rowIndex === -1) return rows;
return rows.sort((a,b) => {
const n1 = orderByValue ? Number(a.value) : a.metadata[rowIndex];
const n2 = orderByValue ? Number(b.value) : b.metadata[rowIndex];
const asc = orderDir === "asc" ? n1 < n2 : n1 > n2;
return asc ? -1 : 1;
});
}, [sortedColumns, data, orderBy, orderDir]);
const sortHandler = (key: string) => {
setOrderDir((prev) => prev === "asc" && orderBy === key ? "desc" : "asc");
setOrderBy(key);
};
return (
<>
@ -41,8 +60,25 @@ const TableView: FC<GraphViewProps> = ({data}) => {
<TableHead>
<TableRow>
{sortedColumns.map((col, index) => (
<TableCell style={{textTransform: "capitalize"}} key={index}>{col.key}</TableCell>))}
<TableCell align="right">Value</TableCell>
<TableCell key={index} style={{textTransform: "capitalize"}}>
<TableSortLabel
active={orderBy === col.key}
direction={orderDir}
onClick={() => sortHandler(col.key)}
>
{col.key}
</TableSortLabel>
</TableCell>
))}
<TableCell align="right">
<TableSortLabel
active={orderBy === "Value"}
direction={orderDir}
onClick={() => sortHandler("Value")}
>
Value
</TableSortLabel>
</TableCell>
</TableRow>
</TableHead>
<TableBody>