From 4a915fd2492b77f3c3124199cc4441987d75a9b5 Mon Sep 17 00:00:00 2001
From: jacovinus <jacovinus@gmail.com>
Date: Tue, 16 Jan 2024 20:42:33 +0100
Subject: [PATCH] fix: sort cols

---
 .../TotalsPanel/CardinalityTotals.tsx         | 23 +++++++++++++++----
 .../Cardinality/TotalsPanel/helper.tsx        |  1 -
 packages/main/plugins/Cardinality/api/mock.ts | 12 +++++-----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx
index 6149ca5d..f8ab8719 100644
--- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx
+++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx
@@ -19,20 +19,29 @@ export default function CardinalityTotals({ isLoading }) {
 
     const sortByProperty = useCallback(
         (column: string) => {
-            const numberCols = [];
+            const numberCols = [
+                "series_created",
+                "series_dropped",
+                "to_sec",
+                "from_sec",
+                "created_sec",
+            ];
+
+            const columnName = column.split(" ").join("_").toLocaleLowerCase();
 
             setTotals((prev) => {
                 let prevCols = [...prev];
-                if (numberCols.includes(column)) {
-                    return prevCols.sortColByNumber(column, sort);
+                if (numberCols.includes(columnName)) {
+                    return prevCols.sortColByNumber(columnName, sort);
                 }
-                return prevCols.sortColByString(column, sort);
+                return prevCols.sortColByString(columnName, sort);
             });
 
             setSort((prev) => (prev === "asc" ? "desc" : "asc"));
         },
         [totals]
     );
+
     return (
         <div className={cx(TotalRowStyle(theme))}>
             <div
@@ -50,7 +59,11 @@ export default function CardinalityTotals({ isLoading }) {
             <div className="table">
                 <div className="table-header">
                     {PROCESS_HEADERS?.map((header) => (
-                        <div key={header} className="cell">
+                        <div
+                            key={header}
+                            onClick={() => sortByProperty(header)}
+                            className="cell"
+                        >
                             {header}
                         </div>
                     ))}
diff --git a/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx b/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx
index 82feb8a6..83a3c901 100644
--- a/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx
+++ b/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx
@@ -52,7 +52,6 @@ const TYPES = (type: string) => {
 };
 
 export function TypeRenderer({ type, children }) {
-    console.log(type);
 
     return <span style={{ color: TYPES(type) }}>{children}</span>;
 }
diff --git a/packages/main/plugins/Cardinality/api/mock.ts b/packages/main/plugins/Cardinality/api/mock.ts
index 1247db27..4c33cc43 100644
--- a/packages/main/plugins/Cardinality/api/mock.ts
+++ b/packages/main/plugins/Cardinality/api/mock.ts
@@ -7,9 +7,9 @@ export const totalsMock: MaintainanceItem[] = [
         query: "{a=\"b\"}",
         type: "delete",
         status: "running",
-        created_sec: 1704359839,
-        from_sec: 1704240000,
-        to_sec: 1704326400,
+        created_sec: 1704359849,
+        from_sec: 1704240010,
+        to_sec: 1704326420,
         series_dropped: 150,
         series_created: 0,
         logs: [
@@ -39,9 +39,9 @@ export const totalsMock: MaintainanceItem[] = [
         query: "{__name=\"server\",type=\"clickhouse\",level=\"info\"}",
         type: "delete",
         status: "running",
-        created_sec: 1704359839,
-        from_sec: 1704240000,
-        to_sec: 1704326400,
+        created_sec: 1704359859,
+        from_sec: 1704240020,
+        to_sec: 1704326415,
         series_dropped: 150,
         series_created: 0,
         logs: [