FE log component implementation

client/src/Pages/Logs/Logs/index.jsx

@@ -0,0 +1,93 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Select from "../../../Components/Inputs/Select";
+import Typography from "@mui/material/Typography";
+
+import { useFetchLogs } from "../../../Hooks/logHooks";
+import { useTheme } from "@emotion/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const formatLog = (theme, log, idx) => {
+	const levelColors = {
+		info: theme.palette.success.main,
+		warn: theme.palette.warning.main,
+		error: theme.palette.error.main,
+		debug: theme.palette.accent.main,
+	};
+
+	const color = levelColors[log.level] || theme.palette.primary.contrastText;
+
+	return (
+		<span key={idx}>
+			<span>[{log.timestamp}]</span>{" "}
+			<span style={{ color, fontWeight: "bold" }}>{log.level.toUpperCase()}</span>
+			{": "}
+			{`(${log.service})`}
+			{`(${log.method})`}
+			{": "}
+			{log.message}
+			<br />
+		</span>
+	);
+};
+
+const Logs = () => {
+	// Local state
+	const [logLevel, setLogLevel] = useState("all");
+
+	// Hooks
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const [logs, isLoading, error] = useFetchLogs();
+	// Setup
+	const LOG_LEVELS = [
+		{ _id: "all", name: t("logsPage.logLevelSelect.values.all") },
+		{ _id: "info", name: t("logsPage.logLevelSelect.values.info") },
+		{ _id: "warn", name: t("logsPage.logLevelSelect.values.warn") },
+		{ _id: "error", name: t("logsPage.logLevelSelect.values.error") },
+		{ _id: "debug", name: t("logsPage.logLevelSelect.values.debug") },
+	];
+	return (
+		<Stack>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(4)}
+			>
+				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
+				<Select
+					items={LOG_LEVELS}
+					value={logLevel}
+					onChange={(e) => {
+						setLogLevel(e.target.value);
+					}}
+				/>
+			</Stack>
+			<Box
+				component="pre"
+				sx={{
+					fontFamily: "monospace",
+					color: theme.palette.primary.contrastText,
+					padding: 2,
+					borderRadius: 1,
+					overflowX: "auto",
+					whiteSpace: "pre-wrap",
+					wordWrap: "break-word",
+				}}
+			>
+				<code>
+					{logs
+						?.filter((log) => {
+							if (logLevel === "all") return true;
+							return log.level === logLevel;
+						})
+						.reverse()
+						.map((log, idx) => formatLog(theme, log, idx))}
+				</code>
+			</Box>
+		</Stack>
+	);
+};
+
+export default Logs;

client/src/Pages/Logs/Queue/components/Metrics/index.jsx

@@ -23,8 +23,6 @@ const Metrics = ({ metrics = {} }) => {
 			return { key, title: camelToTitle(key), value: metrics[key] };
 		});
 
-	console.log(JSON.stringify(data, null, 2));
-
 	return (
 		<Stack gap={theme.spacing(2)}>
 			<Typography variant="h2">{t("queuePage.metricsTable.title")}</Typography>

client/src/Pages/Logs/index.jsx

@@ -4,6 +4,7 @@ import Breadcrumbs from "../../Components/Breadcrumbs";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Queue from "./Queue";
+import LogsComponent from "./Logs";
 
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
@@ -14,7 +15,7 @@ const Logs = () => {
 	const theme = useTheme();
 
 	// Local state
-	const [value, setValue] = useState(0);
+	const [value, setValue] = useState(1);
 
 	// Handlers
 	const handleChange = (event, newValue) => {
@@ -33,7 +34,7 @@ const Logs = () => {
 				<Tab label={t("logsPage.tabs.logs")} />
 			</Tabs>
 			{value === 0 && <Queue />}
-			{value === 1 && <div>Not yet</div>}
+			{value === 1 && <LogsComponent />}
 		</Stack>
 	);
 };