fix: table details

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,15 +71,15 @@ export default function CardinalityTotals({ isLoading }) {
 
             {totals?.length > 0 && (
                 <TotalsTable
-                    headers={PROCESS_HEADERS}
+                    headers={headers}
                     sortByProperty={sortByProperty}
                     isLoading={isLoading}
                     totals={totals}
                     page={page}
                     setPage={setPage}
                     rowsPerPage={rowsPerPage}
                     setRowsPerPage={setRowsPerPage}
-                    Maintainance={Maintainance}
+                    Maintainance={maintenance}
                 />
             )}
         </div>

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 (
         <div className="table-row">
             {cellDataFormatted.map((col, key) => (
@@ -24,14 +26,15 @@ export function TotalsRow({
             ))}
 
             <div className="cell">
-
+                {(total["status"] === "success" ||
+                    total["status"] === "failed") && (
                     <UndoCardinalityDialog
                         id={total.id}
                         query={total.query}
                         isLoading={isLoading}
-                        undoAction={() => handleUndoFingerprints(total.id)}
+                        undoAction={() => undoActionCB(total.id)}
                     />
-
+                )}
             </div>
         </div>
     );

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 (
         <>
             <div className="table">
                 <div className="table-header">
                     {headers?.map((header) => (
                         <div
-                            key={header}
-                            onClick={() => sortByProperty(header)}
+                            key={header.value}
+                            onClick={() => sortByProperty(header.value)}
                             className="cell"
                         >
-                            {header}
+                            {header.text}
                         </div>
                     ))}
                 </div>

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",

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 (
-                <code style={{ fontFamily: "monospace" }}>
-                    {JSON.stringify(data)}
-                </code>
+                <Tooltip title={data.join("\n")}>
+                    <p>{data[0]}</p>
+                </Tooltip>
             );
+        case "query":
+            return <code style={{ fontFamily: "monospace" }}>{data}</code>;
         case "type":
         case "status":
             return <TypeRenderer type={data}>{data}</TypeRenderer>;
@@ -52,6 +59,5 @@ const TYPES = (type: string) => {
 };
 
 export function TypeRenderer({ type, children }) {
-
     return <span style={{ color: TYPES(type) }}>{children}</span>;
 }

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[];
 };

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;
-}
+    return { maintenance, undoActionCB };
+}