network charts

client/src/Components/v2/monitors/charts/HistogramInfrastructure.tsx

@@ -93,7 +93,7 @@ const createGradient = ({
 );
 
 export const HistogramInfrastructure = ({
-	range,
+	dateRange,
 	title,
 	type,
 	idx: _idx,
@@ -107,8 +107,9 @@ export const HistogramInfrastructure = ({
 	gradientEndColor,
 	strokeColor,
 	fillColor,
+	yAxisFormatter,
 }: {
-	range: string;
+	dateRange: string;
 	title: string;
 	type: string;
 	idx: number | null;
@@ -122,6 +123,7 @@ export const HistogramInfrastructure = ({
 	gradientEndColor?: string;
 	strokeColor: string;
 	fillColor?: string;
+	yAxisFormatter?: (value: number) => string;
 }) => {
 	const theme = useTheme();
 	const uniqueId = useId();
@@ -160,11 +162,14 @@ export const HistogramInfrastructure = ({
 						tick={(props) => (
 							<XTick
 								{...props}
-								range={range}
+								range={dateRange}
 							/>
 						)}
 					/>
-					<YAxis domain={type === "temp" ? tempYDomain : yDomain} />
+					<YAxis
+						domain={type === "temp" ? tempYDomain : yDomain}
+						tickFormatter={yAxisFormatter}
+					/>
 
 					<CartesianGrid
 						stroke={theme.palette.divider}

client/src/Pages/Infrastructure/Details/Components/Charts.tsx

@@ -50,10 +50,10 @@ const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 
 export const InfraDetailsCharts = ({
 	checks,
-	range,
+	dateRange,
 }: {
 	checks: HardwareCheckStats[];
-	range: string;
+	dateRange: string;
 }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -63,7 +63,6 @@ export const InfraDetailsCharts = ({
 		[theme, checks, t]
 	);
 
-	console.log(checks);
 	return (
 		<Grid
 			container
@@ -76,7 +75,7 @@ export const InfraDetailsCharts = ({
 						key={`${config.type}-${config.idx ?? ""}`}
 					>
 						<HistogramInfrastructure
-							range={range}
+							dateRange={dateRange}
 							title={config.title}
 							type={config.type}
 							idx={config.idx}

client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx

@@ -0,0 +1,107 @@
+import Grid from "@mui/material/Grid2";
+import { HistogramInfrastructure } from "@/Components/v2/monitors";
+
+import { useTranslation } from "react-i18next";
+import type { HardwareCheckStats } from "@/Types/Monitor";
+import { useMemo } from "react";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+const formatBytesToMB = (value: number) =>
+	`${(value / (1024 * 1024)).toFixed(2)} MB`;
+
+interface ChartConfig {
+	title: string;
+	type: string;
+	dataKeys: string[];
+	strokeColor: string;
+	gradientStartColor: string;
+	idx: number | null;
+	interfaceName?: string;
+}
+
+const getChartConfigs = (
+	theme: any,
+	checks: HardwareCheckStats[],
+	t: any
+): ChartConfig[] => {
+	const configs: ChartConfig[] = [];
+
+	const netInterfaces = checks[0]?.net || [];
+
+	netInterfaces.forEach((iface, idx) => {
+		configs.push(
+			{
+				title: t("pages.infrastructure.charts.labels.netBytesSent", {
+					name: iface.name,
+				}),
+				type: "netBytesSent",
+				dataKeys: [`net[${idx}].bytesSentPerSecond`],
+				strokeColor: theme.palette.primary.main,
+				gradientStartColor: theme.palette.primary.main,
+				idx,
+				interfaceName: iface.name,
+			},
+			{
+				title: t("pages.infrastructure.charts.labels.netBytesRecv", {
+					name: iface.name,
+				}),
+				type: "netBytesRecv",
+				dataKeys: [`net[${idx}].deltaBytesRecv`],
+				strokeColor: theme.palette.success.main,
+				gradientStartColor: theme.palette.success.main,
+				idx,
+				interfaceName: iface.name,
+			}
+		);
+	});
+
+	return configs;
+};
+
+export const InfraNetworkCharts = ({
+	checks,
+	dateRange,
+}: {
+	checks: HardwareCheckStats[];
+	dateRange: string;
+}) => {
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const { t } = useTranslation();
+	const chartConfigs = useMemo(
+		() => getChartConfigs(theme, checks, t),
+		[theme, checks, t]
+	);
+
+	return (
+		<Grid
+			container
+			spacing={theme.spacing(8)}
+		>
+			{chartConfigs.map((config) => {
+				return (
+					<Grid
+						size={isSmall ? 12 : 6}
+						key={`${config.type}-${config.interfaceName ?? config.idx ?? ""}`}
+					>
+						<HistogramInfrastructure
+							dateRange={dateRange}
+							title={config.title}
+							type={config.type}
+							idx={config.idx}
+							checks={checks}
+							xKey="bucketDate"
+							dataKeys={config.dataKeys}
+							gradient={true}
+							gradientStartColor={config.gradientStartColor}
+							gradientEndColor="#ffffff"
+							strokeColor={config.strokeColor}
+							yAxisFormatter={formatBytesToMB}
+						/>
+					</Grid>
+				);
+			})}
+		</Grid>
+	);
+};

client/src/Pages/Infrastructure/Details/Components/TabNetwork.tsx

@@ -1,3 +1,29 @@
-export const TabNetwork = () => {
-	return <div>Network Content</div>;
+import Stack from "@mui/material/Stack";
+import { InfraNetworkCharts } from "./ChartsNetwork";
+
+import { useTheme } from "@mui/material";
+import type { HardwareStats } from "@/Types/Monitor";
+
+export const TabNetwork = ({
+	stats,
+	dateRange,
+}: {
+	stats: HardwareStats | undefined;
+	dateRange: string;
+}) => {
+	const theme = useTheme();
+
+	if (!stats) {
+		return null;
+	}
+
+	const checks = stats?.checks || [];
+	return (
+		<Stack gap={theme.spacing(8)}>
+			<InfraNetworkCharts
+				checks={checks}
+				dateRange={dateRange}
+			/>
+		</Stack>
+	);
 };

client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx

@@ -9,9 +9,11 @@ import type { HardwareStats, Monitor } from "@/Types/Monitor";
 export const TabOverview = ({
 	monitor,
 	stats,
+	dateRange,
 }: {
 	monitor: Monitor | undefined;
 	stats: HardwareStats | undefined;
+	dateRange: string;
 }) => {
 	const theme = useTheme();
 	if (!monitor) {
@@ -25,7 +27,7 @@ export const TabOverview = ({
 			<InfraDetailsGauges snapshot={monitor.recentChecks?.[0]} />
 			<InfraDetailsCharts
 				checks={checks}
-				range={"recent"}
+				dateRange={dateRange}
 			/>
 		</Stack>
 	);

client/src/Pages/Infrastructure/Details/index.tsx

@@ -59,6 +59,12 @@ const InfrastructureDetails = () => {
 				monitor={monitor}
 				monitorStats={monitorStats}
 			/>
+			<HeaderTimeRange
+				isLoading={monitorIsLoading}
+				hasDateRange={true}
+				dateRange={dateRange}
+				setDateRange={setDateRange}
+			/>
 			<Tabs
 				value={selectedTab}
 				onChange={(_e, value) => {
@@ -72,9 +78,15 @@ const InfrastructureDetails = () => {
 				<TabOverview
 					monitor={monitor}
 					stats={stats}
+					dateRange={dateRange}
+				/>
+			)}
+			{selectedTab === 1 && (
+				<TabNetwork
+					stats={stats}
+					dateRange={dateRange}
 				/>
 			)}
-			{selectedTab === 1 && <TabNetwork />}
 		</BasePage>
 	);
 };

client/src/locales/en.json

@@ -322,7 +322,9 @@
 					"memory": "Memory usage",
 					"cpu": "CPU usage",
 					"temp": "Temp",
-					"disk": "Disk usage"
+					"disk": "Disk usage",
+					"netBytesSent": "{{name}} - Bytes Sent",
+					"netBytesRecv": "{{name}} - Bytes Received"
 				}
 			}
 		}