From 31400a25023e780bc2fc0a742149e82484596f82 Mon Sep 17 00:00:00 2001 From: Malena Aguiar Date: Wed, 16 Sep 2026 13:26:41 -0600 Subject: [PATCH] remove mock data and add redux state --- .../components/cards/MonitorStatusCard.tsx | 53 +++++++++++-------- .../components/cards/MonitorsByTypeCard.tsx | 37 ++++++++----- client/src/Pages/Dashboard/index.tsx | 42 ++++++++------- client/src/Pages/Dashboard/types.ts | 6 --- client/src/Types/Monitor.ts | 5 ++ client/src/locales/en.json | 1 + 6 files changed, 83 insertions(+), 61 deletions(-) delete mode 100644 client/src/Pages/Dashboard/types.ts diff --git a/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx b/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx index 10016e8f2..502810eac 100644 --- a/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx +++ b/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx @@ -9,41 +9,50 @@ import { useTranslation } from "react-i18next"; import type { MonitorsSummary } from "@/Types/Monitor"; interface MonitorStatusCardProps { - summary: MonitorsSummary; + summary: MonitorsSummary | null; } export const MonitorStatusCard = ({ summary }: MonitorStatusCardProps) => { const theme = useTheme(); const { t } = useTranslation(); - const up = summary.upMonitors; - const total = summary.totalMonitors; + const up = summary?.upMonitors ?? 0; + const total = summary?.totalMonitors ?? 0; const ratio = total > 0 ? up / total : 0; return ( - - - + ) : ( + + - {up} - - - {t("pages.dashboard.monitorStatus.ofUp", { total })} - + + {up} + + + {t("pages.dashboard.monitorStatus.ofUp", { total })} + + + - - + )} ); }; diff --git a/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx b/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx index 2922f708f..db77ea05d 100644 --- a/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx +++ b/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx @@ -1,14 +1,16 @@ import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard"; import { BarRow } from "@/Pages/Dashboard/components/cards/BarRow"; import { useTranslation } from "react-i18next"; import { useTheme } from "@mui/material/styles"; -import type { DashboardTypeCount } from "@/Pages/Dashboard/types"; +import type { MonitorTypeCount } from "@/Types/Monitor"; import { getMonitorTypeLabel } from "@/Types/Monitor"; import { LAYOUT } from "@/Utils/Theme/constants"; +import { typographyLevels } from "@/Utils/Theme/Palette"; interface MonitorsByTypeCardProps { - monitorsByType: DashboardTypeCount[]; + monitorsByType: MonitorTypeCount[]; } export const MonitorsByTypeCard = ({ monitorsByType }: MonitorsByTypeCardProps) => { @@ -19,17 +21,26 @@ export const MonitorsByTypeCard = ({ monitorsByType }: MonitorsByTypeCardProps) return ( - - {monitorsByType.map(({ type, count }) => ( - - ))} - + {monitorsByType.length === 0 ? ( + + {t("pages.dashboard.noData")} + + ) : ( + + {monitorsByType.map(({ type, count }) => ( + + ))} + + )} ); }; diff --git a/client/src/Pages/Dashboard/index.tsx b/client/src/Pages/Dashboard/index.tsx index 9d48fb5a4..845f4ab8c 100644 --- a/client/src/Pages/Dashboard/index.tsx +++ b/client/src/Pages/Dashboard/index.tsx @@ -1,32 +1,34 @@ +import { useMemo } from "react"; import Box from "@mui/material/Box"; import { useTheme } from "@mui/material/styles"; import { BasePage } from "@/Components/design-elements/BasePage"; import { LAYOUT } from "@/Utils/Theme/constants"; +import { useMonitorListController } from "@/Hooks/useMonitorListController"; +import { MonitorTypes, type MonitorTypeCount } from "@/Types/Monitor"; import { MonitorStatusCard } from "@/Pages/Dashboard/components/cards/MonitorStatusCard"; import { MonitorsByTypeCard } from "@/Pages/Dashboard/components/cards/MonitorsByTypeCard"; -import type { MonitorsSummary } from "@/Types/Monitor"; -import type { DashboardTypeCount } from "@/Pages/Dashboard/types"; - -const MOCK_SUMMARY: MonitorsSummary = { - totalMonitors: 12, - upMonitors: 10, - downMonitors: 1, - pausedMonitors: 1, - initializingMonitors: 0, - maintenanceMonitors: 0, - breachedMonitors: 0, -}; - -const MOCK_MONITORS_BY_TYPE: DashboardTypeCount[] = [ - { type: "http", count: 7 }, - { type: "ping", count: 3 }, - { type: "port", count: 2 }, -]; const Dashboard = () => { const theme = useTheme(); + const { monitors, summary } = useMonitorListController({ + types: [...MonitorTypes], + checksLimit: 1, + refreshInterval: 30000, + rowsPerPageTable: "monitors", + rowsPerPageDefault: 100, + }); + + const monitorsByType = useMemo(() => { + const countMap = new Map(); + (monitors ?? []).forEach((m) => + countMap.set(m.type, (countMap.get(m.type) ?? 0) + 1) + ); + return [...countMap.entries()] + .map(([type, count]) => ({ type, count })) + .sort((a, b) => b.count - a.count); + }, [monitors]); return ( @@ -35,8 +37,8 @@ const Dashboard = () => { gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }} gap={theme.spacing(LAYOUT.MD)} > - - + + ); diff --git a/client/src/Pages/Dashboard/types.ts b/client/src/Pages/Dashboard/types.ts deleted file mode 100644 index 1b9b75d60..000000000 --- a/client/src/Pages/Dashboard/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { MonitorType } from "@/Types/Monitor"; - -export interface DashboardTypeCount { - type: MonitorType; - count: number; -} diff --git a/client/src/Types/Monitor.ts b/client/src/Types/Monitor.ts index 664077ea0..778b434ac 100644 --- a/client/src/Types/Monitor.ts +++ b/client/src/Types/Monitor.ts @@ -192,6 +192,11 @@ export interface MonitorsSummary { breachedMonitors: number; } +export interface MonitorTypeCount { + type: MonitorType; + count: number; +} + export interface MonitorsWithChecksResponse { count: number; monitors: MonitorWithChecks[]; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index e9ec4110e..75e695c70 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1911,6 +1911,7 @@ } }, "dashboard": { + "noData": "No data available at this moment.", "monitorStatus": { "ofUp": "of {{total}} up" },