feat/fe/infrastructure details, resolves #1068

Client/src/App.jsx

@@ -39,6 +39,7 @@ import { getAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Infrastructure } from "./Pages/Infrastructure";
+import InfrastructureDetails from "./Pages/Infrastructure/Details";
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -48,6 +49,7 @@ function App() {
 	const MaintenanceWithAdminProp = withAdminProp(Maintenance);
 	const SettingsWithAdminProp = withAdminProp(Settings);
 	const AdvancedSettingsWithAdminProp = withAdminProp(AdvancedSettings);
+	const InfrastructureDetailsWithAdminProp = withAdminProp(InfrastructureDetails);
 	const mode = useSelector((state) => state.ui.mode);
 	const { authToken } = useSelector((state) => state.auth);
 	const dispatch = useDispatch();
@@ -128,6 +130,11 @@ function App() {
 						element={<ProtectedRoute Component={Infrastructure} />}
 					/>
 
+					<Route
+						path="infrastructure/:monitorId"
+						element={<ProtectedRoute Component={InfrastructureDetailsWithAdminProp} />}
+					/>
+
 					<Route
 						path="incidents/:monitorId?"
 						element={<ProtectedRoute Component={Incidents} />}

Client/src/Components/Charts/AreaChart/index.jsx

@@ -0,0 +1,157 @@
+import {
+	AreaChart,
+	Area,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+} from "recharts";
+import { createGradient } from "../Utils/gradientUtils";
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+import { useId } from "react";
+/**
+ * CustomAreaChart component for rendering an area chart with optional gradient and custom ticks.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Array} props.data - The data array for the chart.
+ * @param {string} props.xKey - The key for the x-axis data.
+ * @param {string} props.yKey - The key for the y-axis data.
+ * @param {Object} [props.xTick] - Custom tick component for the x-axis.
+ * @param {Object} [props.yTick] - Custom tick component for the y-axis.
+ * @param {string} [props.strokeColor] - The stroke color for the area.
+ * @param {string} [props.fillColor] - The fill color for the area.
+ * @param {boolean} [props.gradient=false] - Whether to apply a gradient fill.
+ * @param {string} [props.gradientDirection="vertical"] - The direction of the gradient.
+ * @param {string} [props.gradientStartColor] - The start color of the gradient.
+ * @param {string} [props.gradientEndColor] - The end color of the gradient.
+ * @param {Object} [props.customTooltip] - Custom tooltip component.
+ * @returns {JSX.Element} The rendered area chart component.
+ *
+ * @example
+ * // Example usage of CustomAreaChart
+ * import React from 'react';
+ * import CustomAreaChart from './CustomAreaChart';
+ * import { TzTick, PercentTick, InfrastructureTooltip } from './chartUtils';
+ *
+ * const data = [
+ *   { createdAt: '2023-01-01T00:00:00Z', cpu: { usage_percent: 0.5 } },
+ *   { createdAt: '2023-01-01T01:00:00Z', cpu: { usage_percent: 0.6 } },
+ *   // more data points...
+ * ];
+ *
+ * const MyChartComponent = () => {
+ *   return (
+ *     <CustomAreaChart
+ *       data={data}
+ *       xKey="createdAt"
+ *       yKey="cpu.usage_percent"
+ *       xTick={<TzTick />}
+ *       yTick={<PercentTick />}
+ *       strokeColor="#8884d8"
+ *       fillColor="#8884d8"
+ *       gradient={true}
+ *       gradientStartColor="#8884d8"
+ *       gradientEndColor="#82ca9d"
+ *       customTooltip={({ active, payload, label }) => (
+ *         <InfrastructureTooltip
+ *           label={label?.toString() ?? ""}
+ *           yKey="cpu.usage_percent"
+ *           yLabel="CPU Usage"
+ *           active={active}
+ *           payload={payload}
+ *         />
+ *       )}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyChartComponent;
+ */
+const CustomAreaChart = ({
+	data,
+	dataKey,
+	xKey,
+	yKey,
+	xTick,
+	yTick,
+	strokeColor,
+	fillColor,
+	gradient = false,
+	gradientDirection = "vertical",
+	gradientStartColor,
+	gradientEndColor,
+	customTooltip,
+	height = "100%",
+}) => {
+	const theme = useTheme();
+	const uniqueId = useId();
+	const gradientId = `gradient-${uniqueId}`;
+	return (
+		<ResponsiveContainer
+			width="100%"
+			height={height}
+			// FE team HELP!  Why does this overflow if set to 100%?
+		>
+			<AreaChart data={data}>
+				<XAxis
+					dataKey={xKey}
+					{...(xTick && { tick: xTick })}
+				/>
+				<YAxis
+					dataKey={yKey}
+					{...(yTick && { tick: yTick })}
+				/>
+				{gradient === true &&
+					createGradient({
+						id: gradientId,
+						startColor: gradientStartColor,
+						endColor: gradientEndColor,
+						direction: gradientDirection,
+					})}
+				<CartesianGrid
+					stroke={theme.palette.border.light}
+					strokeWidth={1}
+					strokeOpacity={1}
+					fill="transparent"
+					vertical={false}
+				/>
+				<Area
+					type="monotone"
+					dataKey={dataKey}
+					stroke={strokeColor}
+					fill={gradient === true ? `url(#${gradientId})` : fillColor}
+				/>
+				{customTooltip ? (
+					<Tooltip
+						cursor={{ stroke: theme.palette.border.light }}
+						content={customTooltip}
+						wrapperStyle={{ pointerEvents: "none" }}
+					/>
+				) : (
+					<Tooltip />
+				)}
+			</AreaChart>
+		</ResponsiveContainer>
+	);
+};
+
+CustomAreaChart.propTypes = {
+	data: PropTypes.array.isRequired,
+	dataKey: PropTypes.string.isRequired,
+	xTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
+	yTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
+	xKey: PropTypes.string.isRequired,
+	yKey: PropTypes.string.isRequired,
+	fillColor: PropTypes.string,
+	strokeColor: PropTypes.string,
+	gradient: PropTypes.bool,
+	gradientDirection: PropTypes.string,
+	gradientStartColor: PropTypes.string,
+	gradientEndColor: PropTypes.string,
+	customTooltip: PropTypes.func,
+	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default CustomAreaChart;

Client/src/Components/Charts/CustomGauge/index.css

@@ -0,0 +1,14 @@
+.radial-chart {
+	position: relative;
+	display: inline-block;
+}
+
+.radial-chart-base {
+	opacity: 0.3;
+}
+
+.radial-chart-progress {
+	transform: rotate(-90deg);
+	transform-origin: center;
+	transition: stroke-dashoffset 1.5s ease-in-out;
+}

Client/src/Components/Charts/CustomGauge/index.jsx

@@ -0,0 +1,113 @@
+import { useTheme } from "@emotion/react";
+import { useEffect, useState, useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import "./index.css";
+
+/**
+ * A Performant SVG based circular gauge
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {number} [props.progress=0] - Progress percentage (0-100)
+ * @param {number} [props.radius=60] - Radius of the gauge circle
+ * @param {string} [props.color="#000000"] - Color of the progress stroke
+ * @param {number} [props.strokeWidth=15] - Width of the gauge stroke
+ *
+ * @example
+ * <CustomGauge
+ *   progress={75}
+ *   radius={50}
+ *   color="#00ff00"
+ *   strokeWidth={10}
+ * />
+ *
+ * @returns {React.ReactElement} Rendered CustomGauge component
+ */
+const CustomGauge = ({
+	progress = 0,
+	radius = 60,
+	color = "#000000",
+	strokeWidth = 15,
+}) => {
+	// Calculate the length of the stroke for the circle
+	const { circumference, totalSize, strokeLength } = useMemo(
+		() => ({
+			circumference: 2 * Math.PI * radius,
+			totalSize: radius * 2 + strokeWidth * 2,
+			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+		}),
+		[radius, strokeWidth, progress]
+	);
+	const [offset, setOffset] = useState(circumference);
+	const theme = useTheme();
+
+	// Handle initial animation
+	useEffect(() => {
+		setOffset(circumference);
+		const timer = setTimeout(() => {
+			setOffset(circumference - strokeLength);
+		}, 100);
+
+		return () => clearTimeout(timer);
+	}, [progress, circumference, strokeLength]);
+
+	return (
+		<Box
+			className="radial-chart"
+			width={radius}
+			height={radius}
+		>
+			<svg
+				viewBox={`0 0 ${totalSize} ${totalSize}`}
+				width={radius}
+				height={radius}
+			>
+				<circle
+					className="radial-chart-base"
+					stroke={theme.palette.background.fill}
+					strokeWidth={strokeWidth}
+					fill="none"
+					cx={totalSize / 2} // Center the circle
+					cy={totalSize / 2} // Center the circle
+					r={radius}
+				/>
+				<circle
+					className="radial-chart-progress"
+					stroke={color}
+					strokeWidth={strokeWidth}
+					strokeDasharray={`${circumference} ${circumference}`}
+					strokeDashoffset={offset}
+					strokeLinecap="round"
+					fill="none"
+					cx={totalSize / 2}
+					cy={totalSize / 2}
+					r={radius}
+				/>
+			</svg>
+
+			<Typography
+				className="radial-chart-text"
+				style={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					...theme.typography.body2,
+					fill: theme.typography.body2.color,
+				}}
+			>
+				{`${progress.toFixed(2)}%`}
+			</Typography>
+		</Box>
+	);
+};
+
+export default CustomGauge;
+
+CustomGauge.propTypes = {
+	progress: PropTypes.number,
+	radius: PropTypes.number,
+	color: PropTypes.string,
+	strokeWidth: PropTypes.number,
+};