Merge pull request #3968 from bluewave-labs/feat/dashboard-add-redux-state

feat: remove mock data and add redux state to dashboard page

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 (
 		<DashboardCard title={t("pages.dashboard.cards.monitorStatus")}>
-			<Stack gap={theme.spacing(SPACING.SM)}>
-				<Stack
-					direction="row"
-					alignItems="baseline"
-					gap={theme.spacing(SPACING.XS)}
+			{total === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
 				>
-					<Typography
-						fontSize={typographyLevels.xxl}
-						fontWeight={500}
-						color={theme.palette.text.primary}
+					{t("pages.dashboard.noData")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(SPACING.SM)}>
+					<Stack
+						direction="row"
+						alignItems="baseline"
+						gap={theme.spacing(SPACING.XS)}
 					>
-						{up}
-					</Typography>
-					<Typography
-						fontSize={typographyLevels.m}
-						color={theme.palette.text.secondary}
-					>
-						{t("pages.dashboard.monitorStatus.ofUp", { total })}
-					</Typography>
+						<Typography
+							fontSize={typographyLevels.xxl}
+							fontWeight={500}
+							color={theme.palette.text.primary}
+						>
+							{up}
+						</Typography>
+						<Typography
+							fontSize={typographyLevels.m}
+							color={theme.palette.text.secondary}
+						>
+							{t("pages.dashboard.monitorStatus.ofUp", { total })}
+						</Typography>
+					</Stack>
+					<ProgressBar fillRatio={ratio} />
 				</Stack>
-				<ProgressBar fillRatio={ratio} />
-			</Stack>
+			)}
 		</DashboardCard>
 	);
 };

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 (
 		<DashboardCard title={t("pages.dashboard.cards.monitorsByType")}>
-			<Stack gap={theme.spacing(LAYOUT.SM)}>
-				{monitorsByType.map(({ type, count }) => (
-					<BarRow
-						key={type}
-						label={getMonitorTypeLabel(type, t)}
-						value={String(count)}
-						fillRatio={count / maxCount}
-						valueColor={theme.palette.text.primary}
-					/>
-				))}
-			</Stack>
+			{monitorsByType.length === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.noData")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{monitorsByType.map(({ type, count }) => (
+						<BarRow
+							key={type}
+							label={getMonitorTypeLabel(type, t)}
+							value={String(count)}
+							fillRatio={count / maxCount}
+							valueColor={theme.palette.text.primary}
+						/>
+					))}
+				</Stack>
+			)}
 		</DashboardCard>
 	);
 };

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<MonitorTypeCount[]>(() => {
+		const countMap = new Map<MonitorTypeCount["type"], number>();
+		(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 (
 		<BasePage headerKey="dashboard">
@@ -35,8 +37,8 @@ const Dashboard = () => {
 				gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }}
 				gap={theme.spacing(LAYOUT.MD)}
 			>
-				<MonitorStatusCard summary={MOCK_SUMMARY} />
-				<MonitorsByTypeCard monitorsByType={MOCK_MONITORS_BY_TYPE} />
+				<MonitorStatusCard summary={summary} />
+				<MonitorsByTypeCard monitorsByType={monitorsByType} />
 			</Box>
 		</BasePage>
 	);

client/src/Pages/Dashboard/types.ts

@@ -1,6 +0,0 @@
-import type { MonitorType } from "@/Types/Monitor";
-
-export interface DashboardTypeCount {
-	type: MonitorType;
-	count: number;
-}

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[];

client/src/locales/en.json

@@ -1911,6 +1911,7 @@
 			}
 		},
 		"dashboard": {
+			"noData": "No data available at this moment.",
 			"monitorStatus": {
 				"ofUp": "of {{total}} up"
 			},