From 000bd3390c0abbe8ddf16ec54a113f99f4077b82 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Thu, 25 Jan 2024 17:14:33 +0100 Subject: [PATCH] fix: table details --- .../TotalsPanel/CardinalityTotals.tsx | 36 ++++++------ .../Cardinality/TotalsPanel/TotalsRow.tsx | 15 +++-- .../Cardinality/TotalsPanel/TotalsTable.tsx | 25 +++++++-- .../Cardinality/TotalsPanel/consts.tsx | 13 +++++ .../Cardinality/TotalsPanel/helper.tsx | 22 +++++--- .../plugins/Cardinality/TotalsPanel/types.ts | 6 +- .../Cardinality/TotalsPanel/useMaintenance.ts | 56 +++++++++++++++---- 7 files changed, 126 insertions(+), 47 deletions(-) diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index ee6fda17..ef58f7d4 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -5,17 +5,18 @@ import { useCallback, useEffect, useState } from "react"; import { totalsMock } from "../api/mock"; import { cx } from "@emotion/css"; -import { PROCESS_HEADERS, NUMBER_COLS } from "./consts"; +import { headers, NUMBER_COLS } from "./consts"; import { TotalRowStyle } from "./style"; import useTheme from "@ui/theme/useTheme"; import { getMaintenance, useMaintenance } from "./useMaintenance"; import "./array_helper.mjs"; import TotalsTable from "./TotalsTable"; + export default function CardinalityTotals({ isLoading }) { - const Maintainance = useMaintenance(); + const { maintenance } = useMaintenance(); const theme = useTheme(); - const [totals, setTotals] = useState(Maintainance ?? totalsMock); + const [totals, setTotals] = useState(maintenance ?? totalsMock); const [sort, setSort] = useState("asc"); const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); @@ -35,26 +36,27 @@ export default function CardinalityTotals({ isLoading }) { }, []); useEffect(() => { - setTotals(paginateTotals(Maintainance)); + setTotals(paginateTotals(maintenance)); }, [page]); const sortByProperty = useCallback( (column: string) => { - const columnName = column.split(" ").join("_").toLocaleLowerCase(); + + if (column !== "undo") { + setTotals(() => { + let items = [...maintenance]; - setTotals(() => { - let items = [...Maintainance]; + if (NUMBER_COLS.includes(column)) { + items.sortColByNumber(column, sort); + return paginateTotals(items); + } - if (NUMBER_COLS.includes(columnName)) { - items.sortColByNumber(columnName, sort); + items.sortColByString(column, sort); return paginateTotals(items); - } - - items.sortColByString(columnName, sort); - return paginateTotals(items); - }); + }); - setSort((prev) => (prev === "asc" ? "desc" : "asc")); + setSort((prev) => (prev === "asc" ? "desc" : "asc")); + } }, [totals] ); @@ -69,7 +71,7 @@ export default function CardinalityTotals({ isLoading }) { {totals?.length > 0 && ( )} diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx index 642d7888..b81f5ff4 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx @@ -1,20 +1,22 @@ import React from "react"; -import { useCardinalityRequest } from "../api/CardinalityRequest"; + import { type Total } from "../api/types"; import { CellFormatter, getCellData } from "./helper"; import { type MaintainanceActions } from "./types"; import { UndoCardinalityDialog } from "../CardinalityDialog"; - +import { useMaintenance } from "./useMaintenance"; export function TotalsRow({ headers, total, isLoading, }: Total & MaintainanceActions) { - const { handleUndoFingerprints } = useCardinalityRequest(); + //const { handleUndoFingerprints } = useCardinalityRequest(); const cellDataFormatted = getCellData(total, headers); + const { undoActionCB } = useMaintenance(); + return (
{cellDataFormatted.map((col, key) => ( @@ -24,14 +26,15 @@ export function TotalsRow({ ))}
- + {(total["status"] === "success" || + total["status"] === "failed") && ( handleUndoFingerprints(total.id)} + undoAction={() => undoActionCB(total.id)} /> - + )}
); diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx index 4019273d..4be23002 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx @@ -1,6 +1,23 @@ import { TotalsRow } from "./TotalsRow"; import TotalsPagination from "./Pagination"; +type totalHeader = { + value: string; + text: string; +}; + +type TotalsTableProps = { + headers: totalHeader[]; + sortByProperty: any; + isLoading: boolean; + totals: any; + page: number; + setPage: any; + rowsPerPage: number; + setRowsPerPage: any; + Maintainance: any; +}; + const TotalsTable = ({ headers, sortByProperty, @@ -11,18 +28,18 @@ const TotalsTable = ({ rowsPerPage, setRowsPerPage, Maintainance, -}) => { +}: TotalsTableProps) => { return ( <>
{headers?.map((header) => (
sortByProperty(header)} + key={header.value} + onClick={() => sortByProperty(header.value)} className="cell" > - {header} + {header.text}
))}
diff --git a/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx b/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx index 9e385101..110124c9 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx @@ -11,6 +11,19 @@ export const PROCESS_HEADERS = [ "Undo", ]; +export const headers = [ + {value: "status", text: "Status"}, + {value: "type", text: "Type"}, + {value: "query", text: "Query"}, + {value: "created_sec", text: "Created"}, + {value: "from_sec", text: "From"}, + {value: "to_sec", text: "To"}, + {value: "series_created", text: "Series created"}, + {value: "series_dropped", text: "Series dropped"}, + {value: "logs", text: "Logs"}, + {value: "undo", text: "Undo"}, +] + export const NUMBER_COLS = [ "series_created", "series_dropped", diff --git a/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx b/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx index 83a3c901..5fedc513 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx @@ -1,11 +1,17 @@ import { format } from "date-fns"; import React from "react"; import { type Total } from "../api/types"; +import { Tooltip } from "@mui/material"; -export const getCellData = (total: Total["total"], headers: string[]) => { +type cellHeader = { + value: string; + text: string; +}; + +export const getCellData = (total: Total["total"], headers: cellHeader[]) => { const cell_names = headers - ?.filter((h) => h !== "Undo") - ?.map((header) => header.toLowerCase().split(" ").join("_")); + ?.filter((h) => h.text !== "Undo") + ?.map((header) => header.value); return cell_names?.map((key) => ({ [key]: total[key] })); }; @@ -24,12 +30,13 @@ export function CellFormatter({ col }): React.ReactNode | string | number { case "to_sec": return format(data * 1000, "dd-MM-yyyy hh:mm:ss"); case "logs": - case "query": return ( - - {JSON.stringify(data)} - + +

{data[0]}

+ ); + case "query": + return {data}; case "type": case "status": return {data}; @@ -52,6 +59,5 @@ const TYPES = (type: string) => { }; export function TypeRenderer({ type, children }) { - return {children}; } diff --git a/packages/main/plugins/Cardinality/TotalsPanel/types.ts b/packages/main/plugins/Cardinality/TotalsPanel/types.ts index b3fa54c4..9f3094b7 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/types.ts +++ b/packages/main/plugins/Cardinality/TotalsPanel/types.ts @@ -1,4 +1,8 @@ +type TotalHeaders = { + value: string; + text: string; +}; export type MaintainanceActions = { isLoading: boolean; - headers: string[]; + headers: TotalHeaders[]; }; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts b/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts index c7fd7429..243ae9ea 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts +++ b/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts @@ -1,26 +1,60 @@ -import { useEffect, useState } from "react"; +import { createAlert } from "@ui/store/actions"; +import store from "@ui/store/store"; +import { useCallback, useEffect, useState } from "react"; // this is for test purposes export async function getMaintenance() { - return await fetch("http://localhost:8081/api/v1/maintenance") + return await fetch("http://localhost:8081/api/v1/maintenance"); } +export async function undoAction(id) { + return await fetch(`http://localhost:8081/api/v1/undo/${id}`) + .then((res) => { + if (res.status === 200) { + store.dispatch( + createAlert({ + type: "success", + message: "Successfully restored fingerprints", + }) + ); + + return res.json(); + } else { + store.dispatch( + createAlert({ + type: "error", + message: "Failed to restore fingerprints", + }) + ); + return { error: "Failed to restore fingerprints" }; + } + }) + .then((data) => { + return data; + }); +} -export function useMaintenance () { - +export function useMaintenance() { const [maintenance, setMaintenance] = useState([]); + const undoActionCB = useCallback( + async (id: string) => { + const undoData = await undoAction(id); + + if (!undoData.error) { + setMaintenance(undoData); + } + }, + [maintenance] + ); + useEffect(() => { getMaintenance() .then((res) => res.json()) .then((data) => { - setMaintenance(data); }); - },[]); + }, []); - - - - return maintenance; -} \ No newline at end of file + return { maintenance, undoActionCB }; +}