fix: mock processed template

packages/main/plugins/Cardinality/Cardinality.tsx

@@ -2,16 +2,53 @@ import Configurator from "./Configurator";
 import { setIsCardinality } from "./store/setIsCardinality";
 import { useDispatch, useSelector } from "react-redux";
 import { useCardinalityData } from "./api/useCardinalityData";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import useTheme from "@ui/theme/useTheme";
 import CardinalitySeries from "./CardinalitySeries";
 import useCardinalityHistory from "./history/useCardinalityHistory";
+import CardinalityTotals from "./CardinalityTotals";
+
+
+export const setLocalTabsState = (value: number) => {
+    try {
+        const localTabs = JSON.parse(
+            localStorage.getItem("localCardinalityTabsState") || "{}"
+        );
+
+        localTabs["value"] = value;
+
+        localStorage.setItem("localTabsState", JSON.stringify(localTabs));
+    } catch (e) {
+        console.log(e);
+    }
+};
+
+export const getLocalTabsState = () => {
+    try {
+        const tabsState = JSON.parse(
+            localStorage.getItem("localCardinalityTabsState") || "{}"
+        );
+
+        return tabsState.value || 0;
+    } catch (e) {
+        console.log(e);
+        return 0;
+    }
+};
 
 export const Cardinality = () => {
     const dispatch: any = useDispatch();
     const theme = useTheme();
     const isCardinality = useSelector((store: any) => store.isCardinality);
 
+    const [activeTab, setActiveTab] = useState(getLocalTabsState());
+
+    const onTabChange = (event: any, newValue: any) => {
+        //   console.log(tab)
+        setActiveTab(() => newValue);
+        setLocalTabsState(newValue)
+    };
+
     useEffect(() => {
         dispatch(setIsCardinality(true));
         return () => {
@@ -26,7 +63,6 @@ export const Cardinality = () => {
         limitEntriesItems,
         historyManager,
     } = useCardinalityHistory();
-
 
     const { totalSeries, formattedSeries, isLoading } = useCardinalityData(
         historyManager,
@@ -48,15 +84,46 @@ export const Cardinality = () => {
                 focusLabelItems={focusLabelItems}
                 timeSeriesSelectorItems={timeSeriesSelectorItems}
                 limitEntriesItems={limitEntriesItems}
+                onTabChange={onTabChange}
+                activeTab={activeTab}
                 percent={35}
             />
             {!isLoading && (
-                <CardinalitySeries
+                <CardinalityDashboardContainer
                     formattedSeries={formattedSeries}
                     isCardinality={isCardinality}
                     isLoading={isLoading}
+                    activeTab={activeTab}
                 />
+
             )}
         </div>
     );
 };
+
+export type DarboardContainerProps = {
+    formattedSeries: any;
+    isCardinality: boolean;
+    isLoading: boolean;
+    activeTab: number;
+};
+
+export const CardinalityDashboardContainer = ({
+    formattedSeries,
+    isCardinality,
+    isLoading,
+    activeTab,
+}: DarboardContainerProps) => {
+    return (
+        <>
+            {activeTab === 0 && (
+                <CardinalitySeries
+                    formattedSeries={formattedSeries}
+                    isCardinality={isCardinality}
+                    isLoading={isLoading}
+                />
+            )}
+            {activeTab === 1 && <CardinalityTotals />}
+        </>
+    );
+};

packages/main/plugins/Cardinality/CardinalitySeries.tsx

@@ -10,6 +10,7 @@ type CardinalitySeriesProps = {
     formattedSeries: any;
     isCardinality: boolean;
     isLoading: boolean;
+
 };
 // This component is used to display the series data in the cardinality rows
 const CardinalitySeries: React.FC<CardinalitySeriesProps> = ({

packages/main/plugins/Cardinality/CardinalityTotals.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { MaintainanceItem } from "./api/types";
+import { totalsMock } from "./api/mock";
+import { css, cx } from "@emotion/css";
+import { Tooltip } from "@mui/material";
+import ReplayIcon from '@mui/icons-material/Replay';
+
+import {format} from 'date-fns'
+
+
+export const TotalRowStyle = css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    .table {
+        display: table;
+        width: 100%;
+    }
+    .table-header {
+        display:table-header-group;
+        font-size:10px;
+        text-transform:uppercase;
+        .cell {
+            font-size:10px;
+            letter-spacing: 1px;
+            
+        }
+    }
+    .table-row {
+        display: table-row-group;
+        border-bottom: 1px solid gray;
+        transform: perspective(1px) translateZ(0);
+        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+        
+        &:hover {
+            background: black;
+        }
+    }
+    .cell {
+        display: table-cell;
+        font-size: 12px;
+      //  margin: 10px;
+        padding: 10px;
+        max-width: 10%;
+        
+    }
+
+    button {
+        padding: 4px 12px;
+        color:white;
+        border:none;
+        background: #01686a;
+        border-radius: 3px;
+        border-color: hsl(180, 62%, 33%);
+        cursor: pointer;
+        outline:none;
+       
+       
+    }
+    
+`;
+
+export type MaintainanceActions = {
+    undoAction: (id: string, type: string, status: string) => void;
+};
+
+export function Total(props: MaintainanceItem & MaintainanceActions) {
+    const {
+        id,
+        type,
+        status,
+        created_sec,
+        from_sec,
+        to_sec,
+        series_dropped,
+        series_created,
+        logs,
+        undoAction,
+    } = props;
+    // here we should cancel the action with a button
+
+    return (
+        <div className="table-row">
+            <div className="cell">{status}</div>
+            <div className="cell"> {type} </div>
+            <div className="cell">{format(created_sec*1000,"dd-MM-yyyy hh:mm:ss")}</div>
+            <div className="cell"> {format(from_sec*1000,"dd-MM-yyyy hh:mm:ss") } </div>
+            <div className="cell"> {format(to_sec*1000,"dd-MM-yyyy hh:mm:ss")}</div>
+            <div className="cell"> {series_dropped} </div>
+            <div className="cell"> {series_created}</div>
+            <div className="cell"> <code>{JSON.stringify(logs)}</code> </div>
+            <div className="cell">
+              <Tooltip title="undo action">
+                <button onClick={() => undoAction(id, type, status)}>
+                  <ReplayIcon style={{width:'14px', height:'14px'}}/>
+                </button>                
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
+
+export default function CardinalityTotals() {
+    const [totals, setTotals] = useState(totalsMock);
+    const onUndoAction = (id: string, type: string, status: string) => {
+        console.log(id, type, status);
+        setTotals(totalsMock);
+    };
+
+    return (
+        <>
+            {" "}
+            <div className={cx(TotalRowStyle)}>
+                <div className="table">
+                <div className="table-header">
+                    <div className="cell">Status</div>
+                    <div className="cell">Type</div>
+                    <div className="cell">Created sec</div>
+                    <div className="cell">From sec</div>
+                    <div className="cell">To sec</div>
+                    <div className="cell">Series Dropped</div>
+                    <div className="cell">Series Created</div>
+                    <div className="cell">Logs</div>
+                    <div className="cell">Undo</div>
+                </div>
+                <>
+                    {totals?.length ? (
+                        totals?.map((total,key) => (
+                            <Total
+                                undoAction={onUndoAction}
+                                key={key}
+                                {...total}
+                            />
+                        ))
+                    ) : (
+                        <> no totals </>
+                    )}
+                </>
+                </div>
+            </div>
+        </>
+    );
+}

packages/main/plugins/Cardinality/Configurator.tsx

@@ -1,5 +1,5 @@
-import { cx } from "@emotion/css";
-import React from "react";
+import { cx, css } from "@emotion/css";
+import React, {useEffect} from "react";
 import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined";
 import { Totals } from "./Totals";
 import DayPicker from "./DayPicker";
@@ -10,6 +10,11 @@ import { ConfigContainerStyles } from "./ConfigContainerStyles";
 import { useCardinalityRequest } from "./api/CardinalityRequest";
 import useCardinalityStore from "./store/CardinalityStore";
 import CardinalityDialog from "./CardinalityDialog";
+import {
+    StyledTabs,
+    StyledTab,
+} from "@ui/main/components/QueryItem/StyledTabs";
+
 type ConfiguratorProps = {
     theme: any;
     percent?: number;
@@ -18,16 +23,33 @@ type ConfiguratorProps = {
     timeSeriesSelectorItems: any;
     limitEntriesItems: any;
     setHistoryItem: any;
+    activeTab;
+    onTabChange : (event:any, tab:any) => void
 };
 
 // we should simply add a switch to choose btween day and timeseconds
 
+export const StyledTabsCont = (theme: any) => css`
+    background: ${theme.WidgetBg};
+    .MuiTabs-root {
+        height: 20px !important;
+        min-height: 20px;
+    }
+    .MuiButtonBase-root {
+        min-height: 0;
+    }
+`;
+
+
+
 const Configurator: React.FC<ConfiguratorProps> = ({
     theme = useTheme(),
     focusLabelItems,
     timeSeriesSelectorItems,
     limitEntriesItems,
     setHistoryItem,
+    activeTab = 0,
+    onTabChange
 }) => {
     // in this way we could set history as first values
 
@@ -51,10 +73,20 @@ const Configurator: React.FC<ConfiguratorProps> = ({
 
     //a handler for making a get request to the api
 
-    const { handleCardinalityRequest, handleDelete } =
+    const { handleCardinalityRequest, handleDelete, handleGetDeletedFingerprints } =
         useCardinalityRequest(true);
     const { setTimeSeriesSelector, setFocusLabel, setLimitEntries, isLoading } =
         useCardinalityStore();
+
+        //this feature is not implemented yet
+    useEffect(() => {
+        handleGetDeletedFingerprints();
+    }, []);
+
+
+
+   // console.log(handleGetDeletedFingerprints())
+
     const handleReset = () => {
         reset();
         localStorage.setItem("labelValuePairs", "");
@@ -66,10 +98,8 @@ const Configurator: React.FC<ConfiguratorProps> = ({
         });
     };
 
-    // this feature is not implemented yet
-    // useEffect(() => {
-    //     handleGetDeletedFingerprints();
-    // }, []);
+    //this feature is not implemented yet
+
 
     return (
         <div className={cx(ConfigContainerStyles(theme))}>
@@ -151,6 +181,16 @@ const Configurator: React.FC<ConfiguratorProps> = ({
                         text={"quota"}
                     />
                 </div>
+                <div className="buttons-group">
+
+                <div className={cx(StyledTabsCont(theme))}>
+                <StyledTabs value={activeTab} onChange={onTabChange}>
+                    <StyledTab label="List" />
+                    <StyledTab label="Processed" />
+                </StyledTabs>
+            </div>
+
+                </div>
 
                 <div className="buttons-group">
                     {query !== "" && (