From 3e446019bea91aa28ffbda30416b1fe7b85cb243 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Thu, 4 Jan 2024 17:55:01 +0100 Subject: [PATCH 01/22] 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(); From a6e031e22e09841a987cbe64700d991eef611c01 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 5 Jan 2024 18:31:14 +0100 Subject: [PATCH 02/22] fix: undo request --- .../plugins/Cardinality/CardinalityTotals.tsx | 67 ++++++++--------- .../Cardinality/api/CardinalityRequest.tsx | 72 +++++++++++++++++-- packages/main/plugins/Cardinality/api/mock.ts | 11 ++- .../main/plugins/Cardinality/api/types.tsx | 1 + packages/main/views/Main/DesktopView.tsx | 9 +-- 5 files changed, 113 insertions(+), 47 deletions(-) diff --git a/packages/main/plugins/Cardinality/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/CardinalityTotals.tsx index 568fba49..f4ce9aa2 100644 --- a/packages/main/plugins/Cardinality/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/CardinalityTotals.tsx @@ -5,7 +5,7 @@ import { css, cx } from "@emotion/css"; import { Tooltip } from "@mui/material"; import ReplayIcon from '@mui/icons-material/Replay'; -import {format} from 'date-fns' +import { format } from 'date-fns' export const TotalRowStyle = css` @@ -69,6 +69,7 @@ export function Total(props: MaintainanceItem & MaintainanceActions) { const { id, type, + query, status, created_sec, from_sec, @@ -84,17 +85,18 @@ export function Total(props: MaintainanceItem & MaintainanceActions) {
{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")}
+
{query}
+
{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)}
- - + +
@@ -113,30 +115,31 @@ export default function CardinalityTotals() { {" "}
-
-
Status
-
Type
-
Created sec
-
From sec
-
To sec
-
Series Dropped
-
Series Created
-
Logs
-
Undo
-
- <> - {totals?.length ? ( - totals?.map((total,key) => ( - - )) - ) : ( - <> no totals - )} - +
+
Status
+
Type
+
Query
+
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/api/CardinalityRequest.tsx b/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx index 09e72338..573d445f 100644 --- a/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx +++ b/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx @@ -69,6 +69,70 @@ export const getDeletedFingerprints = async ( } }; +export const undoFingerPrintAction = async ( + id, + url, + setIsLoading, + headers, + auth, + setError +) => { + try { + const { u, p } = auth; + + const urlUndo = `${url}/api/v1/undo/${id}`; + await fetch(urlUndo, { + method: "POST", + + headers: { + ...headers, + Authorization: `Basic ${btoa(u + ":" + p)}`, + }, + }).then((response) => { + if ( + (response && response?.status === 500) || + response?.status === 400 + ) { + setError(response.statusText); + setIsLoading(false); + let error = response.text(); + store.dispatch( + createAlert({ + message: `Deleted fingerprints not undone, ${error}`, + type: "error", + }) + ); + } + + if ( + (response && response?.status === 200) || + response?.status === 200 + ) { + setIsLoading(false); + setError(""); + store.dispatch( + createAlert({ + message: `Undone deleted fingerprints`, + type: "success", + }) + ); + console.log(response); + } + }); + } catch (e) { + setError(JSON.stringify(e)); + setIsLoading(false); + store.dispatch( + createAlert({ + message: `Deleted fingerprints not undone`, + type: "error", + }) + ); + console.log(e); + setIsLoading(false); + } +}; + export const deleteFingerprints = async ( url, query, @@ -181,7 +245,7 @@ const requestCardinality = async ( setIsLoading(true); // set //this makes the multiple fetch requests - + try { const { u, p } = auth; const responses = await Promise.all( @@ -276,14 +340,10 @@ export const useCardinalityRequest = ( const { url, headers, user_pass } = useDataSourceData("logs"); - // const [isLoading, setIsLoading] = useState(false); // 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"); @@ -306,7 +366,6 @@ export const useCardinalityRequest = ( }; const handleGetDeletedFingerprints = async () => { - await getDeletedFingerprints( url, setError, @@ -315,7 +374,6 @@ 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 index 1e40967f..1247db27 100644 --- a/packages/main/plugins/Cardinality/api/mock.ts +++ b/packages/main/plugins/Cardinality/api/mock.ts @@ -1,7 +1,10 @@ +import { MaintainanceItem } from '../api/types' -export const totalsMock = [ + +export const totalsMock: MaintainanceItem[] = [ { id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + query: "{a=\"b\"}", type: "delete", status: "running", created_sec: 1704359839, @@ -17,6 +20,7 @@ export const totalsMock = [ }, { id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + query: "{a=\"b\"}", type: "delete", status: "running", created_sec: 1704359839, @@ -32,6 +36,7 @@ export const totalsMock = [ }, { id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + query: "{__name=\"server\",type=\"clickhouse\",level=\"info\"}", type: "delete", status: "running", created_sec: 1704359839, @@ -47,6 +52,7 @@ export const totalsMock = [ }, { id: "85331a29-ea2f-4d6c-89ae-fa87349e4d7f", + query: "{__name=\"server\",type=\"clickhouse\",level=\"debug\"}", type: "delete", status: "running", created_sec: 1704359839, @@ -60,4 +66,5 @@ export const totalsMock = [ "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 f50724b2..bc07e48e 100644 --- a/packages/main/plugins/Cardinality/api/types.tsx +++ b/packages/main/plugins/Cardinality/api/types.tsx @@ -7,6 +7,7 @@ export interface CardinalityRequest { export interface MaintainanceItem { id: string; + query: string; created_sec: number; // ts sec from_sec: number; // ts sec to_sec: number; // ts sec diff --git a/packages/main/views/Main/DesktopView.tsx b/packages/main/views/Main/DesktopView.tsx index 6bedc17f..8289ed4a 100644 --- a/packages/main/views/Main/DesktopView.tsx +++ b/packages/main/views/Main/DesktopView.tsx @@ -43,8 +43,8 @@ export function DesktopView({ const realMinWidth = !isSplit ? widthTotal : widthTotal / 4 > 370 - ? widthTotal / 4 - : 370; + ? widthTotal / 4 + : 370; setMinWidth(realMinWidth); }, [ setWidthLeft, @@ -102,10 +102,7 @@ export function DesktopView({ return ( - - {panelsRenderer(leftOpen, rightOpen)} - - + {panelsRenderer(leftOpen, rightOpen)} From 9fb9d69dc1bf1b48243954052308707ba350c46b Mon Sep 17 00:00:00 2001 From: jacovinus Date: Mon, 8 Jan 2024 17:55:40 +0100 Subject: [PATCH 03/22] fix: structure and styles --- .../main/plugins/Cardinality/Cardinality.tsx | 8 +- .../plugins/Cardinality/CardinalityDialog.tsx | 122 ++++++++++++++- .../plugins/Cardinality/CardinalityTotals.tsx | 147 ------------------ .../main/plugins/Cardinality/Configurator.tsx | 36 ++--- .../TotalsPanel/CardinalityTotals.tsx | 44 ++++++ .../Cardinality/TotalsPanel/TotalsRow.tsx | 38 +++++ .../Cardinality/TotalsPanel/consts.tsx | 12 ++ .../Cardinality/TotalsPanel/helper.tsx | 58 +++++++ .../plugins/Cardinality/TotalsPanel/style.tsx | 46 ++++++ .../plugins/Cardinality/TotalsPanel/types.ts | 4 + .../Cardinality/api/CardinalityRequest.tsx | 18 ++- .../main/plugins/Cardinality/api/types.tsx | 6 +- packages/main/views/Main/DesktopView.tsx | 2 +- 13 files changed, 362 insertions(+), 179 deletions(-) delete mode 100644 packages/main/plugins/Cardinality/CardinalityTotals.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/consts.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/helper.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/style.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/types.ts diff --git a/packages/main/plugins/Cardinality/Cardinality.tsx b/packages/main/plugins/Cardinality/Cardinality.tsx index 1b40e6d3..482d0e0b 100644 --- a/packages/main/plugins/Cardinality/Cardinality.tsx +++ b/packages/main/plugins/Cardinality/Cardinality.tsx @@ -6,8 +6,7 @@ import { useEffect, useState } from "react"; import useTheme from "@ui/theme/useTheme"; import CardinalitySeries from "./CardinalitySeries"; import useCardinalityHistory from "./history/useCardinalityHistory"; -import CardinalityTotals from "./CardinalityTotals"; - +import CardinalityTotals from "./TotalsPanel/CardinalityTotals"; export const setLocalTabsState = (value: number) => { try { @@ -46,7 +45,7 @@ export const Cardinality = () => { const onTabChange = (event: any, newValue: any) => { // console.log(tab) setActiveTab(() => newValue); - setLocalTabsState(newValue) + setLocalTabsState(newValue); }; useEffect(() => { @@ -95,7 +94,6 @@ export const Cardinality = () => { isLoading={isLoading} activeTab={activeTab} /> - )}
); @@ -123,7 +121,7 @@ export const CardinalityDashboardContainer = ({ isLoading={isLoading} /> )} - {activeTab === 1 && } + {activeTab === 1 && } ); }; diff --git a/packages/main/plugins/Cardinality/CardinalityDialog.tsx b/packages/main/plugins/Cardinality/CardinalityDialog.tsx index 13ef702a..41e8cbd6 100644 --- a/packages/main/plugins/Cardinality/CardinalityDialog.tsx +++ b/packages/main/plugins/Cardinality/CardinalityDialog.tsx @@ -16,7 +16,7 @@ import { Tooltip, Typography, } from "@mui/material"; - +import ReplayIcon from "@mui/icons-material/Replay"; import { ThemeProvider } from "@mui/styles"; import styled from "@emotion/styled"; import { DialogStyles } from "../settingsdialog/SettingsDialog"; @@ -57,6 +57,13 @@ export type CardinalityDialogProps = { labelsRelated?: string[]; }; +export type UndoCardinalityDialogProps = { + undoAction: (id: string) => void; + id: string; + query: string; + isLoading: boolean; +}; + export type LabelRelatedProps = { label: string; theme: QrynTheme; @@ -138,7 +145,7 @@ export default function CardinalityDialog({ isLoading, isCustom = false, query = "", - labelsRelated = [], + }: CardinalityDialogProps) { const [open, setOpen] = useState(false); const [confirmRemove, setConfirmRemove] = useState(false); @@ -275,3 +282,114 @@ export default function CardinalityDialog({ ); } + +export function UndoCardinalityDialog({ + undoAction, + id, + isLoading, + query = "", + +}: UndoCardinalityDialogProps) { + const [open, setOpen] = useState(false); + const [confirmRemove, setConfirmRemove] = useState(false); + const theme = useTheme(); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleConfirm = () => { + setConfirmRemove((prev) => !prev); + }; + async function handleUndoFingerprints() { + await undoAction(id); + + // this should give a response from the server + + setOpen(false); + } + return ( + +
+ +
+ +
+ + + + + <> + Are you sure you want to undo the + delete action for the query {query}? + + + + + +

+ Click Undo Delete Fingerprints to + undo the delete fingerprints action. +

+ + + + + + + Cancel + + + {!isLoading + ? "Undo Delete Fingerprints" + : "Undoing..."} + + + + +
+ + ); +} diff --git a/packages/main/plugins/Cardinality/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/CardinalityTotals.tsx deleted file mode 100644 index f4ce9aa2..00000000 --- a/packages/main/plugins/Cardinality/CardinalityTotals.tsx +++ /dev/null @@ -1,147 +0,0 @@ -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, - query, - 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}
-
{query}
-
{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
-
Query
-
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 28472834..04096ed1 100644 --- a/packages/main/plugins/Cardinality/Configurator.tsx +++ b/packages/main/plugins/Cardinality/Configurator.tsx @@ -1,5 +1,5 @@ import { cx, css } from "@emotion/css"; -import React, {useEffect} from "react"; +import React, { useEffect } from "react"; import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined"; import { Totals } from "./Totals"; import DayPicker from "./DayPicker"; @@ -24,7 +24,7 @@ type ConfiguratorProps = { limitEntriesItems: any; setHistoryItem: any; activeTab; - onTabChange : (event:any, tab:any) => void + onTabChange: (event: any, tab: any) => void; }; // we should simply add a switch to choose btween day and timeseconds @@ -40,8 +40,6 @@ export const StyledTabsCont = (theme: any) => css` } `; - - const Configurator: React.FC = ({ theme = useTheme(), focusLabelItems, @@ -49,7 +47,7 @@ const Configurator: React.FC = ({ limitEntriesItems, setHistoryItem, activeTab = 0, - onTabChange + onTabChange, }) => { // in this way we could set history as first values @@ -73,19 +71,20 @@ const Configurator: React.FC = ({ //a handler for making a get request to the api - const { handleCardinalityRequest, handleDelete, handleGetDeletedFingerprints } = - useCardinalityRequest(true); + const { + handleCardinalityRequest, + handleDelete, + handleGetDeletedFingerprints, + } = useCardinalityRequest(true); const { setTimeSeriesSelector, setFocusLabel, setLimitEntries, isLoading } = useCardinalityStore(); - //this feature is not implemented yet + //this feature is not implemented yet useEffect(() => { handleGetDeletedFingerprints(); }, []); - - - // console.log(handleGetDeletedFingerprints()) + // console.log(handleGetDeletedFingerprints()) const handleReset = () => { reset(); @@ -100,7 +99,6 @@ const Configurator: React.FC = ({ //this feature is not implemented yet - return (
@@ -182,14 +180,12 @@ const Configurator: React.FC = ({ />
- -
- - - - -
- +
+ + + + +
diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx new file mode 100644 index 00000000..1fb3b6c1 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -0,0 +1,44 @@ +/** + * Cardinality totals + * A view for the delete actions on the cardinality main view + */ +import { useState } from "react"; +import { totalsMock } from "../api/mock"; +import { cx } from "@emotion/css"; +import { PROCESS_HEADERS } from "./consts"; +import { TotalRowStyle } from "./style"; +import useTheme from "@ui/theme/useTheme"; +import { TotalsRow } from "./TotalsRow"; + +export default function CardinalityTotals({ isLoading }) { + const theme = useTheme(); + const [totals] = useState(totalsMock); + + return ( +
+
+
+ {PROCESS_HEADERS?.map((header) => ( +
+ {header} +
+ ))} +
+ <> + {totals?.length ? ( + totals?.map((total, key) => ( + + )) + ) : ( + <> no totals + )} + +
+
+ ); +} diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx new file mode 100644 index 00000000..37c460a7 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx @@ -0,0 +1,38 @@ +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 { Tooltip } from "@mui/material"; + +export function TotalsRow({ + headers, + total, + isLoading, +}: Total & MaintainanceActions) { + const { handleUndoFingerprints } = useCardinalityRequest(); + + const cellDataFormatted = getCellData(total, headers); + + return ( +
+ {cellDataFormatted.map((col, key) => ( +
+ +
+ ))} + +
+ + handleUndoFingerprints(total.id)} + /> + +
+
+ ); +} diff --git a/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx b/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx new file mode 100644 index 00000000..89432070 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx @@ -0,0 +1,12 @@ +export const PROCESS_HEADERS = [ + "Status", + "Type", + "Query", + "Created sec", + "From sec", + "To sec", + "Series created", + "Series dropped", + "Logs", + "Undo", +]; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx b/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx new file mode 100644 index 00000000..82feb8a6 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/helper.tsx @@ -0,0 +1,58 @@ +import { format } from "date-fns"; +import React from "react"; +import { type Total } from "../api/types"; + +export const getCellData = (total: Total["total"], headers: string[]) => { + const cell_names = headers + ?.filter((h) => h !== "Undo") + ?.map((header) => header.toLowerCase().split(" ").join("_")); + + return cell_names?.map((key) => ({ [key]: total[key] })); +}; + +export function CellFormatter({ col }): React.ReactNode | string | number { + const item = Object.keys(col)[0]; + + const data = col[item]; + + switch (item) { + case "series_dropped": + case "series_created": + return data; + case "created_sec": + case "from_sec": + case "to_sec": + return format(data * 1000, "dd-MM-yyyy hh:mm:ss"); + case "logs": + case "query": + return ( + + {JSON.stringify(data)} + + ); + case "type": + case "status": + return {data}; + default: + return data; + } +} + +const TYPES = (type: string) => { + switch (type) { + case "delete": + return "#dc143c"; + case "undo": + return "#b8860b"; + case "running": + return "#6495ed"; + default: + return ""; + } +}; + +export function TypeRenderer({ type, children }) { + console.log(type); + + return {children}; +} diff --git a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx new file mode 100644 index 00000000..64a5ccfa --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx @@ -0,0 +1,46 @@ +import { css } from "@emotion/css"; +import { QrynTheme } from "../../../theme/types"; + +export const TotalRowStyle = (theme: QrynTheme) => 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; + &:hover { + background: ${theme.deep}; + } + } + .cell { + display: table-cell; + font-size: 12px; + // margin: 10px; + padding: 10px; + max-width: 10%; + } + + button { + padding: 4px 12px; + color: white; + border: none; + background: theme.primary; + border-radius: 3px; + border-color: theme.primaryDark; + cursor: pointer; + outline: none; + } +`; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/types.ts b/packages/main/plugins/Cardinality/TotalsPanel/types.ts new file mode 100644 index 00000000..b3fa54c4 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/types.ts @@ -0,0 +1,4 @@ +export type MaintainanceActions = { + isLoading: boolean; + headers: string[]; +}; diff --git a/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx b/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx index 573d445f..eb689dcc 100644 --- a/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx +++ b/packages/main/plugins/Cardinality/api/CardinalityRequest.tsx @@ -17,6 +17,7 @@ export type CardinalityRequestResponse = { handleDelete?: (query: string, amount: number) => void; handleCardinalityRequest?: (params: any) => void; handleGetDeletedFingerprints?: () => void; + handleUndoFingerprints?: (id: string) => void; result?: any; }; @@ -78,9 +79,10 @@ export const undoFingerPrintAction = async ( setError ) => { try { + const { u, p } = auth; - const urlUndo = `${url}/api/v1/undo/${id}`; + const urlUndo = `${url}/api/v1/maintainance/${id}/undo`; await fetch(urlUndo, { method: "POST", @@ -376,6 +378,17 @@ export const useCardinalityRequest = ( ); }; + const handleUndoFingerprints = async (id) => { + await undoFingerPrintAction( + id, + url, + setIsLoading, + headers, + user_pass, + setError + ); + }; + const handleCardinalityRequest = async (params: any) => { const reqDate = date || dayjs().format(DATE_FORMAT); @@ -418,7 +431,8 @@ export const useCardinalityRequest = ( return { handleDelete, - handleGetDeletedFingerprints, + handleGetDeletedFingerprints, // this should be the list + handleUndoFingerprints, handleCardinalityRequest, }; }; diff --git a/packages/main/plugins/Cardinality/api/types.tsx b/packages/main/plugins/Cardinality/api/types.tsx index bc07e48e..b5b2896c 100644 --- a/packages/main/plugins/Cardinality/api/types.tsx +++ b/packages/main/plugins/Cardinality/api/types.tsx @@ -18,11 +18,13 @@ export interface MaintainanceItem { logs: string[]; } +export interface Total { + total: MaintainanceItem; +} + export type MaintenanceResponse = MaintainanceItem[]; export type MaintainanceItemUndoResponse = { code: number; message: string; }; - - diff --git a/packages/main/views/Main/DesktopView.tsx b/packages/main/views/Main/DesktopView.tsx index 8289ed4a..dc94c29c 100644 --- a/packages/main/views/Main/DesktopView.tsx +++ b/packages/main/views/Main/DesktopView.tsx @@ -20,7 +20,7 @@ export interface Props { } export function DesktopView({ theme, - isEmbed, + isSplit, settingsDialogOpen, }: Props) { From d39ea978224ce2687d12ed8dc01a858575e794db Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 9 Jan 2024 11:30:06 +0100 Subject: [PATCH 04/22] fix: dialog styles --- .../plugins/Cardinality/CardinalityDialog.tsx | 23 +++++++++++++++---- .../queryhistory/components/AlertDialog.tsx | 1 + 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/main/plugins/Cardinality/CardinalityDialog.tsx b/packages/main/plugins/Cardinality/CardinalityDialog.tsx index 41e8cbd6..523e8a56 100644 --- a/packages/main/plugins/Cardinality/CardinalityDialog.tsx +++ b/packages/main/plugins/Cardinality/CardinalityDialog.tsx @@ -29,6 +29,9 @@ const AlertCont = styled.div` background: ${({ theme }: any) => theme.shadow}; #alert-dialog-title { color: ${({ theme }: any) => theme.contrast}; + background: ${({theme}:any) => theme.deep}; + border: 2px solid ${({theme}:any) => theme.shadow}; + border-radius:8px; span { color: ${({ theme }: any) => theme.primary}; padding: 2px 4px; @@ -145,7 +148,6 @@ export default function CardinalityDialog({ isLoading, isCustom = false, query = "", - }: CardinalityDialogProps) { const [open, setOpen] = useState(false); const [confirmRemove, setConfirmRemove] = useState(false); @@ -288,7 +290,6 @@ export function UndoCardinalityDialog({ id, isLoading, query = "", - }: UndoCardinalityDialogProps) { const [open, setOpen] = useState(false); const [confirmRemove, setConfirmRemove] = useState(false); @@ -330,7 +331,7 @@ export function UndoCardinalityDialog({ color: theme.primary, cursor: "pointer", fontSize: "18px", - // background:"#b8860b" + // background:"#b8860b" }} fontSize={"small"} /> @@ -350,8 +351,20 @@ export function UndoCardinalityDialog({ <> - Are you sure you want to undo the - delete action for the query {query}? + Are you sure you want to undo the delete action + for the query{" "} + + {query} + {" "} + ? diff --git a/packages/main/plugins/queryhistory/components/AlertDialog.tsx b/packages/main/plugins/queryhistory/components/AlertDialog.tsx index f29fe1e3..36d84390 100644 --- a/packages/main/plugins/queryhistory/components/AlertDialog.tsx +++ b/packages/main/plugins/queryhistory/components/AlertDialog.tsx @@ -20,6 +20,7 @@ const AlertCont = styled.div` background: ${({ theme }: any) => theme.shadow}; #alert-dialog-title { color: ${({ theme }: any) => theme.contrast}; + background: ${({theme}:any) => theme.deep}; } #alert-dialog-description { color: ${({ theme }: any) => theme.lightContrast}; From 53ba86f7f927c37ca2c8648f2adbbb7ef166a9af Mon Sep 17 00:00:00 2001 From: jacovinus Date: Mon, 15 Jan 2024 18:43:41 +0100 Subject: [PATCH 05/22] feat: add sort by col array prop --- .../main/plugins/Cardinality/Configurator.tsx | 2 +- .../TotalsPanel/CardinalityTotals.tsx | 35 ++++++++++- .../Cardinality/TotalsPanel/array_helper.mts | 58 +++++++++++++++++++ .../plugins/Cardinality/TotalsPanel/style.tsx | 6 ++ 4 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts diff --git a/packages/main/plugins/Cardinality/Configurator.tsx b/packages/main/plugins/Cardinality/Configurator.tsx index 04096ed1..b240778d 100644 --- a/packages/main/plugins/Cardinality/Configurator.tsx +++ b/packages/main/plugins/Cardinality/Configurator.tsx @@ -183,7 +183,7 @@ const Configurator: React.FC = ({
- +
diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index 1fb3b6c1..6149ca5d 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -2,7 +2,7 @@ * Cardinality totals * A view for the delete actions on the cardinality main view */ -import { useState } from "react"; +import { useCallback, useState } from "react"; import { totalsMock } from "../api/mock"; import { cx } from "@emotion/css"; import { PROCESS_HEADERS } from "./consts"; @@ -10,12 +10,43 @@ import { TotalRowStyle } from "./style"; import useTheme from "@ui/theme/useTheme"; import { TotalsRow } from "./TotalsRow"; +import "./array_helper.mjs"; + export default function CardinalityTotals({ isLoading }) { const theme = useTheme(); - const [totals] = useState(totalsMock); + const [totals, setTotals] = useState(totalsMock); + const [sort, setSort] = useState("asc"); + + const sortByProperty = useCallback( + (column: string) => { + const numberCols = []; + + setTotals((prev) => { + let prevCols = [...prev]; + if (numberCols.includes(column)) { + return prevCols.sortColByNumber(column, sort); + } + return prevCols.sortColByString(column, sort); + }); + setSort((prev) => (prev === "asc" ? "desc" : "asc")); + }, + [totals] + ); return (
+
+ Deleted fingerprints in Maintainance mode +
{PROCESS_HEADERS?.map((header) => ( diff --git a/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts b/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts new file mode 100644 index 00000000..2ac30364 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts @@ -0,0 +1,58 @@ +export {}; + +declare global { + interface Array { + sortColByNumber(col: string, sort: string): Array; + sortColByString(col: string, sort: string): Array; + } +} + +if (!Array.prototype.sortColByNumber) { + Array.prototype.sortColByNumber = function ( + col: string, + sort: string + ): T[] { + // desc + if (sort === "asc") { + return this.sort((a, b) => a[col] - b[col]); + } + return this.sort((a, b) => b[col] - a[col]); + }; +} + +if (!Array.prototype.sortColByString) { + Array.prototype.sortColByString = function ( + col: string, + sort: string + ): T[] { + if (sort === "asc") { + return this.sort((a, b) => { + const colA = a[col].toUpperCase(); // ignore upper and lowercase + const colB = b[col].toUpperCase(); // ignore upper and lowercase + if (colA < colB) { + return -1; + } + if (colA > colB) { + return 1; + } + + // names must be equal + return 0; + }); + } + + return this.sort((a, b) => { + const colA = a[col].toUpperCase(); // ignore upper and lowercase + const colB = b[col].toUpperCase(); // ignore upper and lowercase + if (colB < colA) { + return -1; + } + if (colB > colA) { + return 1; + } + + // names must be equal + return 0; + }); + }; +} diff --git a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx index 64a5ccfa..5428afe5 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx @@ -14,9 +14,15 @@ export const TotalRowStyle = (theme: QrynTheme) => css` display: table-header-group; font-size: 10px; text-transform: uppercase; + .cell { font-size: 10px; letter-spacing: 1px; + cursor: pointer; + margin: 1px; + &:hover { + background: ${theme.deep}; + } } } .table-row { From 52f554a7138d29cbb32482bc4e1fa1cfee3e1f4b Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 16 Jan 2024 20:42:33 +0100 Subject: [PATCH 06/22] 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 (
{PROCESS_HEADERS?.map((header) => ( -
+
sortByProperty(header)} + className="cell" + > {header}
))} 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 {children}; } 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: [ From 5d260440a20778e443876785e3dff55e4edae610 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Thu, 18 Jan 2024 18:05:15 +0100 Subject: [PATCH 07/22] fix: sort by logs --- .../TotalsPanel/CardinalityTotals.tsx | 3 ++- .../Cardinality/TotalsPanel/TotalsRow.tsx | 6 +++--- .../Cardinality/TotalsPanel/array_helper.mts | 21 +++++++++++++++---- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index f8ab8719..c570d661 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -19,6 +19,7 @@ export default function CardinalityTotals({ isLoading }) { const sortByProperty = useCallback( (column: string) => { + const numberCols = [ "series_created", "series_dropped", @@ -72,8 +73,8 @@ export default function CardinalityTotals({ isLoading }) { {totals?.length ? ( totals?.map((total, key) => ( diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx index 37c460a7..642d7888 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/TotalsRow.tsx @@ -4,7 +4,7 @@ import { type Total } from "../api/types"; import { CellFormatter, getCellData } from "./helper"; import { type MaintainanceActions } from "./types"; import { UndoCardinalityDialog } from "../CardinalityDialog"; -import { Tooltip } from "@mui/material"; + export function TotalsRow({ headers, @@ -24,14 +24,14 @@ export function TotalsRow({ ))}
- + handleUndoFingerprints(total.id)} /> - +
); diff --git a/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts b/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts index 2ac30364..f884da03 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts +++ b/packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts @@ -27,8 +27,15 @@ if (!Array.prototype.sortColByString) { ): T[] { if (sort === "asc") { return this.sort((a, b) => { - const colA = a[col].toUpperCase(); // ignore upper and lowercase - const colB = b[col].toUpperCase(); // ignore upper and lowercase + let colA: string, colB: string; + if (Array.isArray(a[col])) { + colA = a[col]?.join("").toUpperCase(); + colB = b[col]?.join("").toUpperCase(); + } else { + colA = a[col].toUpperCase(); // ignore upper and lowercase + colB = b[col].toUpperCase(); // ignore upper and lowercase + } + if (colA < colB) { return -1; } @@ -42,8 +49,14 @@ if (!Array.prototype.sortColByString) { } return this.sort((a, b) => { - const colA = a[col].toUpperCase(); // ignore upper and lowercase - const colB = b[col].toUpperCase(); // ignore upper and lowercase + let colA: string, colB: string; + if (Array.isArray(a[col])) { + colA = a[col]?.join("").toUpperCase(); + colB = b[col]?.join("").toUpperCase(); + } else { + colA = a[col].toUpperCase(); // ignore upper and lowercase + colB = b[col].toUpperCase(); // ignore upper and lowercase + } if (colB < colA) { return -1; } From 0c124f89ad09504b3ede5aa9bd6427b0a1164ea5 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Sat, 20 Jan 2024 14:02:15 +0100 Subject: [PATCH 08/22] fix: header style --- .../Cardinality/TotalsPanel/CardinalityTotals.tsx | 12 ++---------- .../main/plugins/Cardinality/TotalsPanel/style.tsx | 11 ++++++++++- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index c570d661..e73e2cc7 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -45,17 +45,9 @@ export default function CardinalityTotals({ isLoading }) { return (
-
- Deleted fingerprints in Maintainance mode + Fingerprints in Maintainance mode
diff --git a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx index 5428afe5..94d20ff0 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx @@ -5,7 +5,14 @@ export const TotalRowStyle = (theme: QrynTheme) => css` display: flex; flex: 1; flex-direction: column; - + .total-rows-header { + text-align: center; + padding: 10px 0px; + margin: 0px 4px; + font-size: 12px; + border-radius: 3px; + background: ${theme.shadow}; + } .table { display: table; width: 100%; @@ -20,6 +27,8 @@ export const TotalRowStyle = (theme: QrynTheme) => css` letter-spacing: 1px; cursor: pointer; margin: 1px; + padding-top:20px; + padding-bottom:4px; &:hover { background: ${theme.deep}; } From ba6f75635bfa8b9a7ced0136fd544bcf2b8bc3bd Mon Sep 17 00:00:00 2001 From: jacovinus Date: Mon, 22 Jan 2024 18:14:16 +0100 Subject: [PATCH 09/22] fix: pagination and totals mock --- .../TotalsPanel/CardinalityTotals.tsx | 88 ++++++++++++++++--- .../plugins/Cardinality/TotalsPanel/style.tsx | 45 ++++++++-- .../Cardinality/TotalsPanel/useMaintenance.ts | 26 ++++++ 3 files changed, 141 insertions(+), 18 deletions(-) create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index e73e2cc7..74e47277 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -2,24 +2,45 @@ * Cardinality totals * A view for the delete actions on the cardinality main view */ -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { totalsMock } from "../api/mock"; import { cx } from "@emotion/css"; import { PROCESS_HEADERS } from "./consts"; import { TotalRowStyle } from "./style"; import useTheme from "@ui/theme/useTheme"; import { TotalsRow } from "./TotalsRow"; - +import { getMaintenance, useMaintenance } from "./useMaintenance"; import "./array_helper.mjs"; export default function CardinalityTotals({ isLoading }) { + const Maintainance = useMaintenance(); + const theme = useTheme(); - const [totals, setTotals] = useState(totalsMock); + const [totals, setTotals] = useState(Maintainance ?? totalsMock); const [sort, setSort] = useState("asc"); + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(10); + + function paginateTotals(data) { + const startIndex = page * rowsPerPage; + const endIndex = startIndex + rowsPerPage; + return data.slice(startIndex, endIndex); + } + + useEffect(() => { + getMaintenance() + .then((res) => res.json()) + .then((data) => { + setTotals(paginateTotals(data)); + }); + }, []); + + useEffect(() => { + setTotals(paginateTotals(Maintainance)); + }, [page]); const sortByProperty = useCallback( (column: string) => { - const numberCols = [ "series_created", "series_dropped", @@ -30,12 +51,16 @@ export default function CardinalityTotals({ isLoading }) { const columnName = column.split(" ").join("_").toLocaleLowerCase(); - setTotals((prev) => { - let prevCols = [...prev]; + setTotals(() => { + let items = [...Maintainance]; + if (numberCols.includes(columnName)) { - return prevCols.sortColByNumber(columnName, sort); + items.sortColByNumber(columnName, sort); + return paginateTotals(items); } - return prevCols.sortColByString(columnName, sort); + + items.sortColByString(columnName, sort); + return paginateTotals(items); }); setSort((prev) => (prev === "asc" ? "desc" : "asc")); @@ -45,10 +70,10 @@ export default function CardinalityTotals({ isLoading }) { return (
-
+
Fingerprints in Maintainance mode
+
{PROCESS_HEADERS?.map((header) => ( @@ -61,11 +86,12 @@ export default function CardinalityTotals({ isLoading }) {
))}
- <> + +
{totals?.length ? ( totals?.map((total, key) => ( no totals )} - +
+
); } + +export const TotalsPagination = ({ + page, + totalPages, + setPage, + rowsPerPage, + setRowsPerPage, +}) => { + return ( +
+ + + + + +

+ Page {page + 1} of {totalPages} +

+
+ ); +}; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx index 94d20ff0..64ab0677 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx @@ -13,6 +13,14 @@ export const TotalRowStyle = (theme: QrynTheme) => css` border-radius: 3px; background: ${theme.shadow}; } + .table-container { + display: flex; + flex-direction: column; + flex: 1; + width: 100%; + overflow-y: auto; + max-height: 600px; + } .table { display: table; width: 100%; @@ -27,15 +35,20 @@ export const TotalRowStyle = (theme: QrynTheme) => css` letter-spacing: 1px; cursor: pointer; margin: 1px; - padding-top:20px; - padding-bottom:4px; + padding-top: 20px; + padding-bottom: 4px; &:hover { background: ${theme.deep}; } } } - .table-row { + .table-body { display: table-row-group; + max-height: 600px; + overflow-y: auto; + } + .table-row { + display: table-row; &:hover { background: ${theme.deep}; } @@ -47,14 +60,36 @@ export const TotalRowStyle = (theme: QrynTheme) => css` padding: 10px; max-width: 10%; } + .table-footer { + display: flex; + font-size: 10px; + text-transform: uppercase; + align-items:center; + gap: 4px; + padding: 4px 0px; + margin: 0px 4px; + border-radius: 3px; + background: ${theme.shadow}; + + button { + padding: 4px 12px; + color: white; + border: none; + background: ${theme.primary}; + border-radius: 3px; + border-color: ${theme.primaryAccent}; + cursor: pointer; + outline: none; + } + } button { padding: 4px 12px; color: white; border: none; - background: theme.primary; + background: ${theme.primary}; border-radius: 3px; - border-color: theme.primaryDark; + border-color: ${theme.primaryAccent}; cursor: pointer; outline: none; } diff --git a/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts b/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts new file mode 100644 index 00000000..c7fd7429 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts @@ -0,0 +1,26 @@ +import { useEffect, useState } from "react"; + +// this is for test purposes +export async function getMaintenance() { + return await fetch("http://localhost:8081/api/v1/maintenance") +} + + +export function useMaintenance () { + + const [maintenance, setMaintenance] = useState([]); + + useEffect(() => { + getMaintenance() + .then((res) => res.json()) + .then((data) => { + + setMaintenance(data); + }); + },[]); + + + + + return maintenance; +} \ No newline at end of file From 029f7aede0dc22470dbe5829efcb016d1ace0218 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 23 Jan 2024 18:45:39 +0100 Subject: [PATCH 10/22] fix: pagination --- .../TotalsPanel/CardinalityTotals.tsx | 96 ++++--------------- .../Cardinality/TotalsPanel/Pagination.tsx | 60 ++++++++++++ .../Cardinality/TotalsPanel/TotalsTable.tsx | 53 ++++++++++ .../Cardinality/TotalsPanel/consts.tsx | 8 ++ .../plugins/Cardinality/TotalsPanel/style.tsx | 28 +++++- 5 files changed, 163 insertions(+), 82 deletions(-) create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/Pagination.tsx create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index 74e47277..ee6fda17 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -5,13 +5,12 @@ import { useCallback, useEffect, useState } from "react"; import { totalsMock } from "../api/mock"; import { cx } from "@emotion/css"; -import { PROCESS_HEADERS } from "./consts"; +import { PROCESS_HEADERS, NUMBER_COLS } from "./consts"; import { TotalRowStyle } from "./style"; import useTheme from "@ui/theme/useTheme"; -import { TotalsRow } from "./TotalsRow"; import { getMaintenance, useMaintenance } from "./useMaintenance"; import "./array_helper.mjs"; - +import TotalsTable from "./TotalsTable"; export default function CardinalityTotals({ isLoading }) { const Maintainance = useMaintenance(); @@ -41,20 +40,12 @@ export default function CardinalityTotals({ isLoading }) { const sortByProperty = useCallback( (column: string) => { - const numberCols = [ - "series_created", - "series_dropped", - "to_sec", - "from_sec", - "created_sec", - ]; - const columnName = column.split(" ").join("_").toLocaleLowerCase(); setTotals(() => { let items = [...Maintainance]; - if (numberCols.includes(columnName)) { + if (NUMBER_COLS.includes(columnName)) { items.sortColByNumber(columnName, sort); return paginateTotals(items); } @@ -71,73 +62,24 @@ export default function CardinalityTotals({ isLoading }) { return (
- Fingerprints in Maintainance mode + {totals?.length > 0 + ? "Fingerprints in Maintainance mode" + : "No Fingerprints in Maintainance mode"}
-
-
- {PROCESS_HEADERS?.map((header) => ( -
sortByProperty(header)} - className="cell" - > - {header} -
- ))} -
- -
- {totals?.length ? ( - totals?.map((total, key) => ( - - )) - ) : ( - <> no totals - )} -
-
- + {totals?.length > 0 && ( + + )}
); } - -export const TotalsPagination = ({ - page, - totalPages, - setPage, - rowsPerPage, - setRowsPerPage, -}) => { - return ( -
- - - - - -

- Page {page + 1} of {totalPages} -

-
- ); -}; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/Pagination.tsx b/packages/main/plugins/Cardinality/TotalsPanel/Pagination.tsx new file mode 100644 index 00000000..20785d7f --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/Pagination.tsx @@ -0,0 +1,60 @@ +import FastForwardOutlinedIcon from "@mui/icons-material/FastForwardOutlined"; +import FastRewindOutlinedIcon from "@mui/icons-material/FastRewindOutlined"; +import SkipNextOutlinedIcon from "@mui/icons-material/SkipNextOutlined"; +import SkipPreviousOutlinedIcon from "@mui/icons-material/SkipPreviousOutlined"; + +const TotalsPagination = ({ + page, + totalPages, + setPage, + rowsPerPage, + setRowsPerPage, +}) => { + return ( +
+ + +

+ Page {page + 1} of {totalPages} +

+ + +
+ ); +}; + +export default TotalsPagination; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx new file mode 100644 index 00000000..4019273d --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx @@ -0,0 +1,53 @@ +import { TotalsRow } from "./TotalsRow"; +import TotalsPagination from "./Pagination"; + +const TotalsTable = ({ + headers, + sortByProperty, + isLoading, + totals, + page, + setPage, + rowsPerPage, + setRowsPerPage, + Maintainance, +}) => { + return ( + <> +
+
+ {headers?.map((header) => ( +
sortByProperty(header)} + className="cell" + > + {header} +
+ ))} +
+ +
+ {totals?.map((total, key) => ( + + ))} +
+
+ + + + ); +}; + +export default TotalsTable; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx b/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx index 89432070..9e385101 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/consts.tsx @@ -10,3 +10,11 @@ export const PROCESS_HEADERS = [ "Logs", "Undo", ]; + +export const NUMBER_COLS = [ + "series_created", + "series_dropped", + "to_sec", + "from_sec", + "created_sec", +]; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx index 64ab0677..e29e702a 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx @@ -64,22 +64,40 @@ export const TotalRowStyle = (theme: QrynTheme) => css` display: flex; font-size: 10px; text-transform: uppercase; - align-items:center; + align-items: center; gap: 4px; - padding: 4px 0px; + padding: 4px 12px; margin: 0px 4px; + margin-top: 12px; border-radius: 3px; background: ${theme.shadow}; - + p { + margin: 0px 12px; + } + .disabled { + pointer-events: none; + opacity: 0.5; + } button { padding: 4px 12px; color: white; border: none; - background: ${theme.primary}; + font-size: 10px; + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + gap: 4px; + background: ${theme.shadow}; border-radius: 3px; - border-color: ${theme.primaryAccent}; + border: 1px solid ${theme.deep}; cursor: pointer; outline: none; + letter-spacing: 1px; + + :hover { + background: ${theme.deep}; + } } } From d72ef2443da1400bbc66e75bf3761e1c643f9930 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Thu, 25 Jan 2024 17:14:33 +0100 Subject: [PATCH 11/22] 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 }; +} From 5d63bd70ba48b9204dbc54cb3c0e63bca4176f9e Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 26 Jan 2024 18:38:15 +0100 Subject: [PATCH 12/22] fix: add search bar --- packages/main/.eslintrc.cjs | 2 +- packages/main/package.json | 1 + .../plugins/Cardinality/SeriesRowStyles.tsx | 9 +++ .../TotalsPanel/CardinalityTotals.tsx | 56 ++++++++++++++--- .../TotalsPanel/TableColHeader.tsx | 17 +++++ .../Cardinality/TotalsPanel/TotalsTable.tsx | 16 ++--- .../plugins/Cardinality/TotalsPanel/style.tsx | 23 ++++++- .../Cardinality/TotalsPanel/useMaintenance.ts | 7 ++- pnpm-lock.yaml | 62 +++++++++++++++++-- 9 files changed, 168 insertions(+), 25 deletions(-) create mode 100644 packages/main/plugins/Cardinality/TotalsPanel/TableColHeader.tsx diff --git a/packages/main/.eslintrc.cjs b/packages/main/.eslintrc.cjs index 9736d57d..aca78c0c 100644 --- a/packages/main/.eslintrc.cjs +++ b/packages/main/.eslintrc.cjs @@ -1,6 +1,6 @@ module.exports = { env: { browser: true, es2020: true }, - extends: ["plugin:@typescript-eslint/recommended"], + extends: ["plugin:@typescript-eslint/recommended","prettier"], parser: "@typescript-eslint/parser", parserOptions: { ecmaVersion: "latest", sourceType: "module" }, plugins: ["react-refresh"], diff --git a/packages/main/package.json b/packages/main/package.json index 5f7beef4..4c06d21f 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -75,6 +75,7 @@ "@vitejs/plugin-basic-ssl": "^1.0.2", "@vitejs/plugin-react": "^4.2.0", "eslint": "^8.54.0", + "eslint-config-prettier": "^9.1.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.3.5", "happy-dom": "^9.20.3", diff --git a/packages/main/plugins/Cardinality/SeriesRowStyles.tsx b/packages/main/plugins/Cardinality/SeriesRowStyles.tsx index 8ee26807..bf19be82 100644 --- a/packages/main/plugins/Cardinality/SeriesRowStyles.tsx +++ b/packages/main/plugins/Cardinality/SeriesRowStyles.tsx @@ -12,6 +12,15 @@ export const SeriesRowStyle = (theme: Partial) => css` width: auto; border-bottom: 1px solid ${theme.neutral}; } + .cell-column-header { + display: flex; + flex-direction: column; + } + .cell-column-name { + display: flex; + align-items: center; + justify-content: space-between; + } .cell-name { width: 60%; cursor: pointer; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx index ef58f7d4..8066f71e 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx @@ -20,8 +20,9 @@ export default function CardinalityTotals({ isLoading }) { const [sort, setSort] = useState("asc"); const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); + const [searchValue, setSearchValue] = useState(""); - function paginateTotals(data) { + function paginateTotals(data: Array) { const startIndex = page * rowsPerPage; const endIndex = startIndex + rowsPerPage; return data.slice(startIndex, endIndex); @@ -39,9 +40,27 @@ export default function CardinalityTotals({ isLoading }) { setTotals(paginateTotals(maintenance)); }, [page]); + const searchHandler = useCallback( + (text: string) => { + setSearchValue(text); + + const filteredData = maintenance.filter((item) => { + return item.query.toLowerCase().includes(text.toLowerCase()); + }); + + if (filteredData?.length > 0) { + setTotals(paginateTotals(filteredData)); + } + + if (text === "") { + setTotals(paginateTotals(maintenance)); + } + }, + [totals] + ); + const sortByProperty = useCallback( (column: string) => { - if (column !== "undo") { setTotals(() => { let items = [...maintenance]; @@ -63,11 +82,11 @@ export default function CardinalityTotals({ isLoading }) { return (
-
- {totals?.length > 0 - ? "Fingerprints in Maintainance mode" - : "No Fingerprints in Maintainance mode"} -
+ {totals?.length > 0 && ( ); } + +export const TotalRowsHeader = ({ + totalsLength, + searchHandler, + searchValue, +}) => { + return ( +
+
+ + searchHandler(e.target.value)} + placeholder="" + /> +
+ {totalsLength > 0 + ? "Fingerprints in Maintainance mode" + : "No Fingerprints in Maintainance mode"} +
+ ); +}; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TableColHeader.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TableColHeader.tsx new file mode 100644 index 00000000..6e9738d8 --- /dev/null +++ b/packages/main/plugins/Cardinality/TotalsPanel/TableColHeader.tsx @@ -0,0 +1,17 @@ +export type TableColHeaderProps = { + value: string; + text: string; + sortByProperty: (value: string) => void; +}; +const TableColHeader = ({ + value, + text, + sortByProperty, +}: TableColHeaderProps) => { + return ( +
sortByProperty(value)} className="cell"> + {text} +
+ ); +}; +export default TableColHeader; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx b/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx index 4be23002..8f436ec3 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx @@ -1,5 +1,6 @@ import { TotalsRow } from "./TotalsRow"; import TotalsPagination from "./Pagination"; +import TableColHeader from "./TableColHeader"; type totalHeader = { value: string; @@ -33,14 +34,13 @@ const TotalsTable = ({ <>
- {headers?.map((header) => ( -
sortByProperty(header.value)} - className="cell" - > - {header.text} -
+ {headers?.map(({ value, text }) => ( + ))}
diff --git a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx index e29e702a..d80c2576 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/style.tsx +++ b/packages/main/plugins/Cardinality/TotalsPanel/style.tsx @@ -7,11 +7,32 @@ export const TotalRowStyle = (theme: QrynTheme) => css` flex-direction: column; .total-rows-header { text-align: center; - padding: 10px 0px; + padding: 10px 20px; margin: 0px 4px; font-size: 12px; border-radius: 3px; background: ${theme.shadow}; + display: flex; + align-items: center; + justify-content: space-between; + .search-container { + display: flex; + align-items: center; + gap: 6px; + input { + background: ${theme.shadow}; + border: 1px solid ${theme.deep}; + color: ${theme.contrast}; + font-size: 10px; + padding: 5px 10px; + border-radius: 3px; + margin: 0px 4px; + :focus { + outline: none; + background: ${theme.deep}; + } + } + } } .table-container { display: flex; diff --git a/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts b/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts index 243ae9ea..3c8e415b 100644 --- a/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts +++ b/packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts @@ -7,7 +7,7 @@ export async function getMaintenance() { return await fetch("http://localhost:8081/api/v1/maintenance"); } -export async function undoAction(id) { +export async function undoAction(id: string) { return await fetch(`http://localhost:8081/api/v1/undo/${id}`) .then((res) => { if (res.status === 200) { @@ -17,7 +17,6 @@ export async function undoAction(id) { message: "Successfully restored fingerprints", }) ); - return res.json(); } else { store.dispatch( @@ -26,7 +25,9 @@ export async function undoAction(id) { message: "Failed to restore fingerprints", }) ); - return { error: "Failed to restore fingerprints" }; + return { + error: "Failed to restore fingerprints", + }; } }) .then((data) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f30539b5..b52ebdd6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true @@ -45,6 +45,12 @@ importers: '@emotion/styled': specifier: ^11.11.0 version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.39)(react@18.2.0) + '@floating-ui/react': + specifier: ^0.26.7 + version: 0.26.7(react-dom@18.2.0)(react@18.2.0) + '@floating-ui/react-dom': + specifier: ^2.0.7 + version: 2.0.7(react-dom@18.2.0)(react@18.2.0) '@microlink/react-json-view': specifier: latest version: 1.23.0(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) @@ -223,6 +229,9 @@ importers: eslint: specifier: ^8.54.0 version: 8.54.0 + eslint-config-prettier: + specifier: ^9.1.0 + version: 9.1.0(eslint@8.54.0) eslint-plugin-react-hooks: specifier: ^4.6.0 version: 4.6.0(eslint@8.54.0) @@ -850,6 +859,12 @@ packages: '@floating-ui/utils': 0.1.6 dev: false + /@floating-ui/core@1.6.0: + resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==} + dependencies: + '@floating-ui/utils': 0.2.1 + dev: false + /@floating-ui/dom@1.5.3: resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==} dependencies: @@ -857,21 +872,45 @@ packages: '@floating-ui/utils': 0.1.6 dev: false - /@floating-ui/react-dom@2.0.4(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==} + /@floating-ui/dom@1.6.0: + resolution: {integrity: sha512-SZ0BEXzsaaS6THZfZJUcAobbZTD+MvfGM42bxgeg0Tnkp4/an/avqwAXiVLsFtIBZtfsx3Ymvwx0+KnnhdA/9g==} + dependencies: + '@floating-ui/core': 1.6.0 + '@floating-ui/utils': 0.2.1 + dev: false + + /@floating-ui/react-dom@2.0.7(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-B5GJxKUyPcGsvE1vua+Abvw0t6zVMyTbtG+Jk7BoI4hfc5Ahv50dstRIAn0nS0274kR9gnKwxIXyGA8EzBZJrA==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@floating-ui/dom': 1.5.3 + '@floating-ui/dom': 1.6.0 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false + /@floating-ui/react@0.26.7(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-0uMI9IBJBPPt8N+8uRg4gazJvQReWTu/fVUHHLfAOuy1WB6f242jtjWm52hLJG8nzuZVuU+2crW4lJbJQoqeIA==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/react-dom': 2.0.7(react-dom@18.2.0)(react@18.2.0) + '@floating-ui/utils': 0.2.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tabbable: 6.2.0 + dev: false + /@floating-ui/utils@0.1.6: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} dev: false + /@floating-ui/utils@0.2.1: + resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} + dev: false + /@humanwhocodes/config-array@0.11.13: resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==} engines: {node: '>=10.10.0'} @@ -986,7 +1025,7 @@ packages: optional: true dependencies: '@babel/runtime': 7.23.5 - '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0)(react@18.2.0) + '@floating-ui/react-dom': 2.0.7(react-dom@18.2.0)(react@18.2.0) '@mui/types': 7.2.10(@types/react@18.2.39) '@mui/utils': 5.14.19(@types/react@18.2.39)(react@18.2.0) '@popperjs/core': 2.11.8 @@ -2447,6 +2486,15 @@ packages: optionalDependencies: source-map: 0.6.1 + /eslint-config-prettier@9.1.0(eslint@8.54.0): + resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==} + hasBin: true + peerDependencies: + eslint: '>=7.0.0' + dependencies: + eslint: 8.54.0 + dev: true + /eslint-plugin-react-hooks@4.6.0(eslint@8.54.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} engines: {node: '>=10'} @@ -4498,6 +4546,10 @@ packages: /symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + dev: false + /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true From 7b6938774ec794908d95dc7e74286b417941644b Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 6 Feb 2024 16:39:21 +0100 Subject: [PATCH 13/22] fix: update pnpm-lock --- pnpm-lock.yaml | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b52ebdd6..855df857 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,12 +45,6 @@ importers: '@emotion/styled': specifier: ^11.11.0 version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.39)(react@18.2.0) - '@floating-ui/react': - specifier: ^0.26.7 - version: 0.26.7(react-dom@18.2.0)(react@18.2.0) - '@floating-ui/react-dom': - specifier: ^2.0.7 - version: 2.0.7(react-dom@18.2.0)(react@18.2.0) '@microlink/react-json-view': specifier: latest version: 1.23.0(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0) @@ -890,19 +884,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@floating-ui/react@0.26.7(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-0uMI9IBJBPPt8N+8uRg4gazJvQReWTu/fVUHHLfAOuy1WB6f242jtjWm52hLJG8nzuZVuU+2crW4lJbJQoqeIA==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - '@floating-ui/react-dom': 2.0.7(react-dom@18.2.0)(react@18.2.0) - '@floating-ui/utils': 0.2.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - tabbable: 6.2.0 - dev: false - /@floating-ui/utils@0.1.6: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} dev: false @@ -4546,10 +4527,6 @@ packages: /symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} - /tabbable@6.2.0: - resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} - dev: false - /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true From b3bafb57ea59dad4cd24e9004f73186939163589 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 6 Feb 2024 17:47:02 +0100 Subject: [PATCH 14/22] fix: pagination, row size, table styles --- packages/main/plugins/Cardinality/CardinalityDialog.tsx | 6 +++++- .../main/plugins/Cardinality/TotalsPanel/Pagination.tsx | 2 +- packages/main/plugins/Cardinality/TotalsPanel/style.tsx | 5 +++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/main/plugins/Cardinality/CardinalityDialog.tsx b/packages/main/plugins/Cardinality/CardinalityDialog.tsx index 523e8a56..01026813 100644 --- a/packages/main/plugins/Cardinality/CardinalityDialog.tsx +++ b/packages/main/plugins/Cardinality/CardinalityDialog.tsx @@ -328,9 +328,13 @@ export function UndoCardinalityDialog({

- Page {page + 1} of {totalPages} + Page {Math.round(page) + 1} of {Math.round(totalPages)}