move queue to logs

client/src/Components/Sidebar/index.jsx

@@ -8,7 +8,6 @@ import {
 	ListItemButton,
 	ListItemIcon,
 	ListItemText,
-	ListSubheader,
 	Menu,
 	MenuItem,
 	Stack,
@@ -39,6 +38,7 @@ import Docs from "../../assets/icons/docs.svg?react";
 import StatusPages from "../../assets/icons/status-pages.svg?react";
 import Discussions from "../../assets/icons/discussions.svg?react";
 import Notifications from "../../assets/icons/notifications.svg?react";
+import Logs from "../../assets/icons/logs.svg?react";
 
 import "./index.css";
 
@@ -64,6 +64,7 @@ const getMenu = (t) => [
 
 	{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
 	{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
+	{ name: t("menu.logs"), path: "logs", icon: <Logs /> },
 
 	{
 		name: t("menu.settings"),

client/src/Components/StatusBoxes/index.jsx

@@ -4,7 +4,7 @@ import SkeletonLayout from "./skeleton";
 // Utils
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-const StatusBoxes = ({ shouldRender, flexWrap = "nowrap", children }) => {
+const StatusBoxes = ({ shouldRender = true, flexWrap = "nowrap", children }) => {
 	const theme = useTheme();
 	if (!shouldRender) {
 		return (

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

@@ -1,10 +1,10 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import DataTable from "../../../../Components/Table";
+import DataTable from "../../../../../Components/Table";
 
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import { TypeToPathMap } from "../../../../Utils/monitorUtils";
+import { TypeToPathMap } from "../../../../../Utils/monitorUtils";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 

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

@@ -1,13 +1,13 @@
 import Stack from "@mui/material/Stack";
-import DataTable from "../../../../Components/Table";
+import DataTable from "../../../../../Components/Table";
 import Typography from "@mui/material/Typography";
 // Utils
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { TypeToPathMap } from "../../../../Utils/monitorUtils";
+import { TypeToPathMap } from "../../../../../Utils/monitorUtils";
 import { useTranslation } from "react-i18next";
-import { createHeaderFactory } from "../../../../Components/Table/TableUtils";
+import { createHeaderFactory } from "../../../../../Components/Table/TableUtils";
 
 const JobTable = ({ jobs = [] }) => {
 	const theme = useTheme();

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

@@ -0,0 +1,45 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import StatBox from "../../../../../Components/StatBox";
+import StatusBoxes from "../../../../../Components/StatusBoxes";
+
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@emotion/react";
+
+const camelToTitle = (str) => {
+	return str
+		.replace(/([A-Z])/g, " $1")
+		.toLowerCase()
+		.replace(/^./, (m) => m.toUpperCase());
+};
+
+const Metrics = ({ metrics = {} }) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	const data = Object.keys(metrics)
+		.filter((key) => key !== "jobsWithFailures")
+		.map((key) => {
+			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>
+			<StatusBoxes flexWrap="wrap">
+				{data.map((metric) => {
+					return (
+						<StatBox
+							key={metric.key}
+							heading={metric.title}
+							subHeading={metric.value}
+						/>
+					);
+				})}
+			</StatusBoxes>
+		</Stack>
+	);
+};
+export default Metrics;

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

@@ -1,6 +1,6 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import DataTable from "../../../../Components/Table";
+import DataTable from "../../../../../Components/Table";
 
 // Utils
 import { useTranslation } from "react-i18next";

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

@@ -1,15 +1,14 @@
 // Components
 import Stack from "@mui/material/Stack";
-import Breadcrumbs from "../../Components/Breadcrumbs";
 import JobTable from "./components/JobTable";
-import MetricsTable from "./components/MetricsTable";
+import Metrics from "./components/Metrics";
 import FailedJobTable from "./components/FailedJobTable";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "@mui/material/Button";
 
 // Utils
 import { useState } from "react";
-import { useFetchQueueData, useFlushQueue } from "../../Hooks/queueHooks";
+import { useFetchQueueData, useFlushQueue } from "../../../Hooks/queueHooks";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
 
@@ -23,15 +22,13 @@ const QueueDetails = () => {
 	const [jobs, metrics, isLoading, error] = useFetchQueueData(trigger);
 	const [flushQueue, isFlushing, flushError] = useFlushQueue();
 
-	const BREADCRUMBS = [{ name: t("queuePage.title"), path: "/queue" }];
 	if (isLoading) return <div>Loading...</div>;
 	if (error || flushError) return <div>Error: {error.message}</div>;
 
 	return (
 		<Stack gap={theme.spacing(20)}>
-			<Breadcrumbs list={BREADCRUMBS} />
+			<Metrics metrics={metrics} />
 			<JobTable jobs={jobs} />
-			<MetricsTable metrics={metrics} />
 			<FailedJobTable metrics={metrics} />
 
 			<ButtonGroup

client/src/Pages/Logs/index.jsx

@@ -0,0 +1,41 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Breadcrumbs from "../../Components/Breadcrumbs";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Queue from "./Queue";
+
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+const Logs = () => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	// Local state
+	const [value, setValue] = useState(0);
+
+	// Handlers
+	const handleChange = (event, newValue) => {
+		setValue(newValue);
+	};
+
+	const BREADCRUMBS = [{ name: t("logsPage.title"), path: "/logs" }];
+	return (
+		<Stack gap={theme.spacing(20)}>
+			<Breadcrumbs list={BREADCRUMBS} />
+			<Tabs
+				value={value}
+				onChange={handleChange}
+			>
+				<Tab label={t("logsPage.tabs.queue")} />
+				<Tab label={t("logsPage.tabs.logs")} />
+			</Tabs>
+			{value === 0 && <Queue />}
+			{value === 1 && <div>Not yet</div>}
+		</Stack>
+	);
+};
+
+export default Logs;

client/src/Pages/Settings/SettingsDev.jsx

@@ -1,37 +0,0 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import ConfigBox from "../../Components/ConfigBox";
-// Utils
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import Link from "../../Components/Link";
-
-const SettingsDev = ({ isAdmin, HEADER_SX }) => {
-	const { t } = useTranslation();
-
-	if (!isAdmin) return null;
-
-	return (
-		<ConfigBox>
-			<Box>
-				<Typography
-					component="h1"
-					variant="h2"
-				>
-					{t("settingsDev")}
-				</Typography>
-				<Typography sx={HEADER_SX}>{t("settingsDevDescription")}</Typography>
-			</Box>
-			<Box>
-				<Link
-					level="secondary"
-					label={t("settingsDevViewJobQueueDetails")}
-					url="/queue"
-					external={false}
-				/>
-			</Box>
-		</ConfigBox>
-	);
-};
-
-export default SettingsDev;

client/src/Pages/Settings/index.jsx

@@ -8,7 +8,6 @@ import SettingsPagespeed from "./SettingsPagespeed";
 import SettingsDemoMonitors from "./SettingsDemoMonitors";
 import SettingsAbout from "./SettingsAbout";
 import SettingsEmail from "./SettingsEmail";
-import SettingsDev from "./SettingsDev";
 import Button from "@mui/material/Button";
 // Utils
 import { settingsValidation } from "../../Validation/validation";
@@ -209,10 +208,7 @@ const Settings = () => {
 				emailPasswordHasBeenReset={emailPasswordHasBeenReset}
 				setEmailPasswordHasBeenReset={setEmailPasswordHasBeenReset}
 			/>
-			<SettingsDev
-				isAdmin={isAdmin}
-				HEADER_SX={HEADING_SX}
-			/>
+
 			<SettingsAbout />
 			<Stack
 				direction="row"

client/src/Routes/index.jsx

@@ -51,7 +51,7 @@ import ProtectedRoute from "../Components/ProtectedRoute";
 import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance";
 import withAdminCheck from "../Components/HOC/withAdminCheck";
 import BulkImport from "../Pages/Uptime/BulkImport";
-import Queue from "../Pages/Queue";
+import Logs from "../Pages/Logs";
 
 const Routes = () => {
 	const AdminCheckedRegister = withAdminCheck(AuthRegister);
@@ -187,9 +187,10 @@ const Routes = () => {
 					path="account/team"
 					element={<Account open={"team"} />}
 				/>
+
 				<Route
-					path="queue"
-					element={<Queue />}
+					path="logs"
+					element={<Logs />}
 				/>
 			</Route>
 

client/src/Utils/Theme/globalTheme.js

@@ -407,6 +407,7 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+
 		MuiTab: {
 			styleOverrides: {
 				root: ({ theme }) => ({
@@ -475,6 +476,8 @@ const baseTheme = (palette) => ({
 		MuiTabs: {
 			styleOverrides: {
 				root: ({ theme }) => ({
+					height: "34px",
+					minHeight: "34px",
 					display: "inline-flex",
 					borderRadius: 0,
 					"& .MuiTabs-indicator": {

client/src/assets/icons/logs.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M21 5C21 6.65685 16.9706 8 12 8C7.02944 8 3 6.65685 3 5M21 5C21 3.34315 16.9706 2 12 2C7.02944 2 3 3.34315 3 5M21 5V19C21 20.66 17 22 12 22C7 22 3 20.66 3 19V5M21 12C21 13.66 17 15 12 15C7 15 3 13.66 3 12"
+        stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

client/src/locales/en.json

@@ -30,9 +30,6 @@
 	"settingsRemoveAllMonitorsDialogTitle": "Do you want to remove all monitors?",
 	"settingsRemoveAllMonitorsDialogConfirm": "Yes, remove all monitors",
 	"settingsAbout": "About",
-	"settingsDev": "Developer",
-	"settingsDevDescription": "Developer settings",
-	"settingsDevViewJobQueueDetails": "View job queue details",
 	"settingsDevelopedBy": "Developed by Bluewave Labs.",
 	"settingsSave": "Save",
 	"settingsSuccessSaved": "Settings saved successfully",
@@ -431,6 +428,7 @@
 		"statusPages": "Status pages",
 		"maintenance": "Maintenance",
 		"integrations": "Integrations",
+		"logs": "Logs",
 		"settings": "Settings",
 		"support": "Support",
 		"discussions": "Discussions",
@@ -756,6 +754,13 @@
 	"settingsEmailPool": "Enable connection pooling: Reuse existing connections to improve performance",
 	"sendTestNotifications": "Send test notifications",
 	"selectAll": "Select all",
+	"logsPage": {
+		"title": "Logs",
+		"tabs": {
+			"queue": "Job queue",
+			"logs": "Logs"
+		}
+	},
 	"queuePage": {
 		"title": "Queue",
 		"refreshButton": "Refresh",