diff --git a/client/src/Components/Sidebar/index.jsx b/client/src/Components/Sidebar/index.jsx index 06a140c54..e9f0d3ad7 100644 --- a/client/src/Components/Sidebar/index.jsx +++ b/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: }, { name: t("menu.maintenance"), path: "maintenance", icon: }, + { name: t("menu.logs"), path: "logs", icon: }, { name: t("menu.settings"), diff --git a/client/src/Components/StatusBoxes/index.jsx b/client/src/Components/StatusBoxes/index.jsx index 40ea2d182..d97bb6211 100644 --- a/client/src/Components/StatusBoxes/index.jsx +++ b/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 ( diff --git a/client/src/Pages/Queue/components/FailedJobTable/index.jsx b/client/src/Pages/Logs/Queue/components/FailedJobTable/index.jsx similarity index 93% rename from client/src/Pages/Queue/components/FailedJobTable/index.jsx rename to client/src/Pages/Logs/Queue/components/FailedJobTable/index.jsx index d7284f9da..94fc2f5c3 100644 --- a/client/src/Pages/Queue/components/FailedJobTable/index.jsx +++ b/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"; diff --git a/client/src/Pages/Queue/components/JobTable/index.jsx b/client/src/Pages/Logs/Queue/components/JobTable/index.jsx similarity index 93% rename from client/src/Pages/Queue/components/JobTable/index.jsx rename to client/src/Pages/Logs/Queue/components/JobTable/index.jsx index f4aa0768c..e27dd103f 100644 --- a/client/src/Pages/Queue/components/JobTable/index.jsx +++ b/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(); diff --git a/client/src/Pages/Logs/Queue/components/Metrics/index.jsx b/client/src/Pages/Logs/Queue/components/Metrics/index.jsx new file mode 100644 index 000000000..52117cd3b --- /dev/null +++ b/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 ( + + {t("queuePage.metricsTable.title")} + + {data.map((metric) => { + return ( + + ); + })} + + + ); +}; +export default Metrics; diff --git a/client/src/Pages/Queue/components/MetricsTable/index.jsx b/client/src/Pages/Logs/Queue/components/MetricsTable/index.jsx similarity index 95% rename from client/src/Pages/Queue/components/MetricsTable/index.jsx rename to client/src/Pages/Logs/Queue/components/MetricsTable/index.jsx index 818b4e543..204b90035 100644 --- a/client/src/Pages/Queue/components/MetricsTable/index.jsx +++ b/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"; diff --git a/client/src/Pages/Queue/index.jsx b/client/src/Pages/Logs/Queue/index.jsx similarity index 82% rename from client/src/Pages/Queue/index.jsx rename to client/src/Pages/Logs/Queue/index.jsx index eb732560c..729f87fe3 100644 --- a/client/src/Pages/Queue/index.jsx +++ b/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
Loading...
; if (error || flushError) return
Error: {error.message}
; return ( - + - { + 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 ( + + + + + + + {value === 0 && } + {value === 1 &&
Not yet
} + + ); +}; + +export default Logs; diff --git a/client/src/Pages/Settings/SettingsDev.jsx b/client/src/Pages/Settings/SettingsDev.jsx deleted file mode 100644 index 721a17d5c..000000000 --- a/client/src/Pages/Settings/SettingsDev.jsx +++ /dev/null @@ -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 ( - - - - {t("settingsDev")} - - {t("settingsDevDescription")} - - - - - - ); -}; - -export default SettingsDev; diff --git a/client/src/Pages/Settings/index.jsx b/client/src/Pages/Settings/index.jsx index ef57a16c7..0cd954e52 100644 --- a/client/src/Pages/Settings/index.jsx +++ b/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} /> - + { const AdminCheckedRegister = withAdminCheck(AuthRegister); @@ -187,9 +187,10 @@ const Routes = () => { path="account/team" element={} /> + } + path="logs" + element={} /> diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js index 58d9943be..ae014432d 100644 --- a/client/src/Utils/Theme/globalTheme.js +++ b/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": { diff --git a/client/src/assets/icons/logs.svg b/client/src/assets/icons/logs.svg new file mode 100644 index 000000000..e1adcb390 --- /dev/null +++ b/client/src/assets/icons/logs.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 14317e689..0856592fc 100644 --- a/client/src/locales/en.json +++ b/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",