Merge pull request #3249 from bluewave-labs/feat/v2-logs

Feat/v2 logs

Author: ajhollid

client/package-lock.json

@@ -34,6 +34,7 @@
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
 		"mui-color-input": "^7.0.0",
+		"pretty-bytes": "^7.1.0",
 		"pretty-ms": "^9.3.0",
 		"react": "18.3.1",
 		"react-dom": "^18.2.0",

client/package.json

@@ -1,3 +1,5 @@
+import { BaseChart } from "@/Components/v2/design-elements";
+import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
@@ -104,3 +106,50 @@ export const Gauge = ({
 		</Box>
 	);
 };
+
+export const DetailGauge = ({
+	title,
+	progress,
+	upperLabel,
+	upperValue,
+	lowerLabel,
+	lowerValue,
+}: {
+	title: string;
+	progress: number;
+	upperLabel?: string;
+	upperValue?: string | number;
+	lowerLabel?: string;
+	lowerValue?: string | number;
+}) => {
+	const theme = useTheme();
+	return (
+		<BaseChart
+			icon={null}
+			title={title}
+			maxWidth={225}
+		>
+			<Stack
+				alignItems={"center"}
+				mb={theme.spacing(4)}
+				gap={theme.spacing(4)}
+			>
+				<Gauge progress={progress} />
+			</Stack>
+			<Stack
+				direction={"row"}
+				justifyContent={"space-between"}
+			>
+				<Typography>{upperLabel}</Typography>
+				<Typography>{upperValue}</Typography>
+			</Stack>
+			<Stack
+				direction={"row"}
+				justifyContent={"space-between"}
+			>
+				<Typography>{lowerLabel}</Typography>
+				<Typography>{lowerValue}</Typography>
+			</Stack>
+		</BaseChart>
+	);
+};

client/src/Components/v2/design-elements/Gauge.tsx

@@ -29,6 +29,7 @@ import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
 import { useTranslation } from "react-i18next";
 import { useState, Fragment, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
+import type { SxProps, Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 export type Header<T> = {
@@ -47,6 +48,7 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	renderExpandedContent?: (row: T) => React.ReactNode;
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
+	getRowSx?: (row: T) => SxProps<Theme>;
 };
 
 export function DataTable<
@@ -64,6 +66,7 @@ export function DataTable<
 	renderExpandedContent,
 	emptyViewText,
 	emptyViewPositive,
+	getRowSx,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -204,6 +207,7 @@ export function DataTable<
 								<TableRow
 									sx={{
 										cursor: onRowClick ? "pointer" : "default",
+										...(getRowSx?.(row) as object),
 									}}
 									onClick={() => {
 										if (expandableRows) handleExpand(row);

client/src/Components/v2/design-elements/Table.tsx

@@ -19,6 +19,9 @@ const initialState = {
 	infrastructure: {
 		rowsPerPage: 5,
 	},
+	logs: {
+		rowsPerPage: 15,
+	},
 	sidebar: {
 		collapsed: false,
 	},
@@ -41,9 +44,10 @@ const uiSlice = createSlice({
 		},
 		setRowsPerPage: (state, action) => {
 			const { table, value } = action.payload;
-			if (state[table]) {
-				state[table].rowsPerPage = value;
+			if (!state[table]) {
+				state[table] = {};
 			}
+			state[table].rowsPerPage = value;
 		},
 		toggleSidebar: (state) => {
 			state.sidebar.collapsed = !state.sidebar.collapsed;

client/src/Features/UI/uiSlice.js

@@ -1,60 +1,12 @@
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { BaseChart, Gauge } from "@/Components/v2/design-elements";
+import { DetailGauge } from "@/Components/v2/design-elements";
 
 import { useTranslation } from "react-i18next";
 import { getGbs, getFrequency } from "@/Utils/InfraUtils";
 import { useTheme } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { CheckSnapshot } from "@/Types/Check";
 
-const InfraDetailGauge = ({
-	title,
-	progress,
-	upperLabel,
-	upperValue,
-	lowerLabel,
-	lowerValue,
-}: {
-	title: string;
-	progress: number;
-	upperLabel?: string;
-	upperValue?: string | number;
-	lowerLabel?: string;
-	lowerValue?: string | number;
-}) => {
-	const theme = useTheme();
-	return (
-		<BaseChart
-			icon={null}
-			title={title}
-			maxWidth={225}
-		>
-			<Stack
-				alignItems={"center"}
-				mb={theme.spacing(4)}
-				gap={theme.spacing(4)}
-			>
-				<Gauge progress={progress} />
-			</Stack>
-			<Stack
-				direction={"row"}
-				justifyContent={"space-between"}
-			>
-				<Typography>{upperLabel}</Typography>
-				<Typography>{upperValue}</Typography>
-			</Stack>
-			<Stack
-				direction={"row"}
-				justifyContent={"space-between"}
-			>
-				<Typography>{lowerLabel}</Typography>
-				<Typography>{lowerValue}</Typography>
-			</Stack>
-		</BaseChart>
-	);
-};
-
 export const InfraDetailsGauges = ({
 	snapshot,
 }: {
@@ -74,15 +26,15 @@ export const InfraDetailsGauges = ({
 			spacing={theme.spacing(8)}
 			alignItems={"center"}
 		>
-			<InfraDetailGauge
+			<DetailGauge
 				title={t("pages.infrastructure.gauges.memory.title")}
 				progress={(snapshot?.memory?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.memory.upperLabel")}
 				upperValue={getGbs(snapshot?.memory?.used_bytes || 0)}
 				lowerLabel={t("pages.infrastructure.gauges.memory.lowerLabel")}
 				lowerValue={getGbs(snapshot?.memory?.total_bytes || 0)}
 			/>
-			<InfraDetailGauge
+			<DetailGauge
 				title={t("pages.infrastructure.gauges.cpu.title")}
 				progress={(snapshot?.cpu?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.cpu.upperLabel")}
@@ -92,7 +44,7 @@ export const InfraDetailsGauges = ({
 			/>
 			{snapshot?.disk?.map((disk, idx) => {
 				return (
-					<InfraDetailGauge
+					<DetailGauge
 						key={disk?.device || 0 + idx}
 						// title={`Disk ${idx} usage`}
 						title={t("pages.infrastructure.gauges.disk.title", { idx })}