From d87e39b2c11d09de35e1395a1cc0b71959f87182 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Thu, 4 Jan 2024 17:55:01 +0100 Subject: [PATCH] fix: mock processed template --- .../main/plugins/Cardinality/Cardinality.tsx | 73 ++++++++- .../plugins/Cardinality/CardinalitySeries.tsx | 1 + .../plugins/Cardinality/CardinalityTotals.tsx | 144 ++++++++++++++++++ .../main/plugins/Cardinality/Configurator.tsx | 54 ++++++- .../Cardinality/api/CardinalityRequest.tsx | 7 +- packages/main/plugins/Cardinality/api/mock.ts | 63 ++++++++ .../main/plugins/Cardinality/api/types.tsx | 27 +++- .../plugins/Cardinality/useConfigurator.tsx | 4 +- 8 files changed, 358 insertions(+), 15 deletions(-) create mode 100644 packages/main/plugins/Cardinality/CardinalityTotals.tsx create mode 100644 packages/main/plugins/Cardinality/api/mock.ts diff --git a/packages/main/plugins/Cardinality/Cardinality.tsx b/packages/main/plugins/Cardinality/Cardinality.tsx index 972a8fc7..1b40e6d3 100644 --- a/packages/main/plugins/Cardinality/Cardinality.tsx +++ b/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 && ( - + )} ); }; + +export type DarboardContainerProps = { + formattedSeries: any; + isCardinality: boolean; + isLoading: boolean; + activeTab: number; +}; + +export const CardinalityDashboardContainer = ({ + formattedSeries, + isCardinality, + isLoading, + activeTab, +}: DarboardContainerProps) => { + return ( + <> + {activeTab === 0 && ( + + )} + {activeTab === 1 && } + + ); +}; diff --git a/packages/main/plugins/Cardinality/CardinalitySeries.tsx b/packages/main/plugins/Cardinality/CardinalitySeries.tsx index 3308efe1..58c0b7a1 100644 --- a/packages/main/plugins/Cardinality/CardinalitySeries.tsx +++ b/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 = ({ diff --git a/packages/main/plugins/Cardinality/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/CardinalityTotals.tsx new file mode 100644 index 00000000..568fba49 --- /dev/null +++ b/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 ( +
+
{status}
+
{type}
+
{format(created_sec*1000,"dd-MM-yyyy hh:mm:ss")}
+
{format(from_sec*1000,"dd-MM-yyyy hh:mm:ss") }
+
{format(to_sec*1000,"dd-MM-yyyy hh:mm:ss")}
+
{series_dropped}
+
{series_created}
+
{JSON.stringify(logs)}
+
+ + + +
+
+ ); +} + +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 ( + <> + {" "} +
+
+
+
Status
+
Type
+
Created sec
+
From sec
+
To sec
+
Series Dropped
+
Series Created
+
Logs
+
Undo
+
+ <> + {totals?.length ? ( + totals?.map((total,key) => ( + + )) + ) : ( + <> no totals + )} + +
+
+ + ); +} diff --git a/packages/main/plugins/Cardinality/Configurator.tsx b/packages/main/plugins/Cardinality/Configurator.tsx index 71f41906..28472834 100644 --- a/packages/main/plugins/Cardinality/Configurator.tsx +++ b/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 = ({ 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 = ({ //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 = ({ }); }; - // this feature is not implemented yet - // useEffect(() => { - // handleGetDeletedFingerprints(); - // }, []); + //this feature is not implemented yet + return (
@@ -151,6 +181,16 @@ const Configurator: React.FC = ({ text={"quota"} />
+
+ +
+ + + + +
+ +
{query !== "" && ( diff --git a/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx b/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx index bb0bd830..09e72338 100644 --- a/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx +++ b/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx @@ -46,7 +46,7 @@ export const getDeletedFingerprints = async ( try { setIsLoading(true); - const urlDelete = deleteEndpoint + "/loki/api/v1/delete"; + const urlDelete = deleteEndpoint + "/loki/api/v1/maintenance"; const { u, p } = auth; await fetch(urlDelete, { method: "GET", @@ -281,6 +281,9 @@ export const useCardinalityRequest = ( // const [error, setError] = useState(""); // const [tsdbStatus, setTsdbStatus] = useState({}); + + + const handleDelete = async (query, amount) => { const locale = moment.tz.guess(true); const mDay = moment.tz(reqDate, locale).add(1, "day"); @@ -303,6 +306,7 @@ export const useCardinalityRequest = ( }; const handleGetDeletedFingerprints = async () => { + await getDeletedFingerprints( url, setError, @@ -311,6 +315,7 @@ export const useCardinalityRequest = ( headers, user_pass ); + }; const handleCardinalityRequest = async (params: any) => { diff --git a/packages/main/plugins/Cardinality/api/mock.ts b/packages/main/plugins/Cardinality/api/mock.ts new file mode 100644 index 00000000..1e40967f --- /dev/null +++ b/packages/main/plugins/Cardinality/api/mock.ts @@ -0,0 +1,63 @@ + +export const totalsMock = [ + { + id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + type: "delete", + status: "running", + created_sec: 1704359839, + from_sec: 1704240000, + to_sec: 1704326400, + series_dropped: 150, + series_created: 0, + logs: [ + "INFO starting", + "INFO processing day 1", + "INFO backing up data", + ], + }, + { + id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + type: "delete", + status: "running", + created_sec: 1704359839, + from_sec: 1704240000, + to_sec: 1704326400, + series_dropped: 120, + series_created: 0, + logs: [ + "INFO starting", + "INFO processing day 1", + "INFO backing up data", + ], + }, + { + id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + type: "delete", + status: "running", + created_sec: 1704359839, + from_sec: 1704240000, + to_sec: 1704326400, + series_dropped: 150, + series_created: 0, + logs: [ + "INFO starting", + "INFO processing day 1", + "INFO backing up data", + ], + }, + { + id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + type: "delete", + status: "running", + created_sec: 1704359839, + from_sec: 1704240000, + to_sec: 1704326400, + series_dropped: 132, + series_created: 0, + logs: [ + "INFO starting", + "INFO processing day 1", + "INFO backing up data", + ], + }, +]; \ No newline at end of file diff --git a/packages/main/plugins/Cardinality/api/types.tsx b/packages/main/plugins/Cardinality/api/types.tsx index dc5cdbd6..f50724b2 100644 --- a/packages/main/plugins/Cardinality/api/types.tsx +++ b/packages/main/plugins/Cardinality/api/types.tsx @@ -1,6 +1,27 @@ export interface CardinalityRequest { topN: number; match: string | null; - date:string | null; - focusLabel: string | null -} \ No newline at end of file + date: string | null; + focusLabel: string | null; +} + +export interface MaintainanceItem { + id: string; + created_sec: number; // ts sec + from_sec: number; // ts sec + to_sec: number; // ts sec + series_dropped: number; + series_created: number; + type: string; // types? delete + status: string; // statuses? pending + logs: string[]; +} + +export type MaintenanceResponse = MaintainanceItem[]; + +export type MaintainanceItemUndoResponse = { + code: number; + message: string; +}; + + diff --git a/packages/main/plugins/Cardinality/useConfigurator.tsx b/packages/main/plugins/Cardinality/useConfigurator.tsx index 21d27a16..a9ee4886 100644 --- a/packages/main/plugins/Cardinality/useConfigurator.tsx +++ b/packages/main/plugins/Cardinality/useConfigurator.tsx @@ -21,7 +21,9 @@ const useConfigurator = ({setHistoryItem}:useConfiguratorProps) => { } = useCardinalityStore(); const { total: totalSeries } = useCardinalityStore(); -const {handleCardinalityRequest} = useCardinalityRequest(); +const {handleCardinalityRequest + +} = useCardinalityRequest();