diff --git a/client/src/Pages/Logs/Diagnostics/components/gauges/index.jsx b/client/src/Pages/Logs/Diagnostics/components/gauges/index.jsx deleted file mode 100644 index b19893ed6..000000000 --- a/client/src/Pages/Logs/Diagnostics/components/gauges/index.jsx +++ /dev/null @@ -1,188 +0,0 @@ -import Stack from "@mui/material/Stack"; -import CustomGauge from "@/Components/v1/Charts/CustomGauge/index.jsx"; -import Typography from "@mui/material/Typography"; - -// Utils -import { useTheme } from "@emotion/react"; -import PropTypes from "prop-types"; -import { getPercentage, formatBytes } from "../../utils/utils.js"; -import { useTranslation } from "react-i18next"; -import { Box } from "@mui/material"; - -const BaseContainer = ({ children }) => { - const theme = useTheme(); - return ( - - {children} - - ); -}; - -const InfrastructureStyleGauge = ({ - value, - heading, - metricOne, - valueOne, - metricTwo, - valueTwo, -}) => { - const theme = useTheme(); - - const MetricRow = ({ label, value }) => ( - - {label} - - {value} - - - ); - - return ( - - - - - - {heading} - - - - - {metricTwo && valueTwo && ( - - )} - - - - ); -}; - -const Gauges = ({ diagnostics, isLoading }) => { - const heapTotalSize = getPercentage( - diagnostics?.v8HeapStats?.totalHeapSizeBytes, - diagnostics?.v8HeapStats?.heapSizeLimitBytes - ); - - const heapUsedSize = getPercentage( - diagnostics?.v8HeapStats?.usedHeapSizeBytes, - diagnostics?.v8HeapStats?.heapSizeLimitBytes - ); - - const actualHeapUsed = getPercentage( - diagnostics?.v8HeapStats?.usedHeapSizeBytes, - diagnostics?.v8HeapStats?.totalHeapSizeBytes - ); - - const theme = useTheme(); - const { t } = useTranslation(); - - return ( - - - - - - - ); -}; - -Gauges.propTypes = { - diagnostics: PropTypes.object, - isLoading: PropTypes.bool, -}; - -InfrastructureStyleGauge.propTypes = { - value: PropTypes.number, - heading: PropTypes.string, - metricOne: PropTypes.string, - valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - metricTwo: PropTypes.string, - valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), -}; - -BaseContainer.propTypes = { - children: PropTypes.node.isRequired, -}; - -export default Gauges; diff --git a/client/src/Pages/Logs/Diagnostics/components/stats/index.jsx b/client/src/Pages/Logs/Diagnostics/components/stats/index.jsx deleted file mode 100644 index 13ed63618..000000000 --- a/client/src/Pages/Logs/Diagnostics/components/stats/index.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Typography from "@mui/material/Typography"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; -import CircularProgress from "@mui/material/CircularProgress"; - -import { useTheme } from "@emotion/react"; -import PropTypes from "prop-types"; - -import { getHumanReadableDuration } from "../../../../../Utils/timeUtilsLegacy.js"; -import { formatBytes } from "../../utils/utils.js"; -import { useTranslation } from "react-i18next"; - -const StatsCard = ({ title, value, unit = "", isLoading }) => { - const theme = useTheme(); - return ( - - {isLoading ? ( - - - - ) : ( - - - {title} - - - {value} {unit} - - - )} - - ); -}; - -StatsCard.propTypes = { - title: PropTypes.string, - value: PropTypes.string, - unit: PropTypes.string, - isLoading: PropTypes.bool, -}; - -const Stats = ({ diagnostics, isLoading }) => { - const theme = useTheme(); - const { t } = useTranslation(); - return ( - - - - - - - - - - - ); -}; - -Stats.propTypes = { - diagnostics: PropTypes.object, - isLoading: PropTypes.bool, -}; - -export default Stats; diff --git a/client/src/Pages/Logs/Diagnostics/index.jsx b/client/src/Pages/Logs/Diagnostics/index.jsx deleted file mode 100644 index 194e13821..000000000 --- a/client/src/Pages/Logs/Diagnostics/index.jsx +++ /dev/null @@ -1,77 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Box from "@mui/material/Box"; -import Gauges from "./components/gauges/index.jsx"; -import Button from "@mui/material/Button"; -import StatBox from "@/Components/v1/StatBox/index.jsx"; -import StatusBoxes from "@/Components/v1/StatusBoxes/index.jsx"; -import { useTheme } from "@emotion/react"; -import { useTranslation } from "react-i18next"; -import { useFetchDiagnostics } from "../../../Hooks/logHooks.js"; -import { getHumanReadableDuration } from "../../../Utils/timeUtilsLegacy.js"; -import { formatBytes, getPercentage } from "./utils/utils.js"; - -const Diagnostics = () => { - // Local state - - // Hooks - const theme = useTheme(); - const { t } = useTranslation(); - const [diagnostics, fetchDiagnostics, isLoading, error] = useFetchDiagnostics(); - // Setup - return ( - - - - - - - - - - - - - - - ); -}; - -export default Diagnostics; diff --git a/client/src/Pages/Logs/Diagnostics/utils/utils.js b/client/src/Pages/Logs/Diagnostics/utils/utils.js deleted file mode 100644 index a3b75631f..000000000 --- a/client/src/Pages/Logs/Diagnostics/utils/utils.js +++ /dev/null @@ -1,16 +0,0 @@ -export const getPercentage = (value, total) => { - if (!value || !total) return 0; - return (value / total) * 100; -}; - -export const formatBytes = (bytes) => { - if (!bytes) return "N/A"; - - if (bytes === 0) return "0 Bytes"; - - if (bytes >= 1024 * 1024 * 1024) { - return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`; - } - - return `${(bytes / (1024 * 1024)).toFixed(2)} MB`; -}; diff --git a/client/src/Pages/Logs/Logs/index.jsx b/client/src/Pages/Logs/Logs/index.jsx deleted file mode 100644 index d0319a387..000000000 --- a/client/src/Pages/Logs/Logs/index.jsx +++ /dev/null @@ -1,176 +0,0 @@ -import Stack from "@mui/material/Stack"; -import Box from "@mui/material/Box"; -import Select from "@/Components/v1/Inputs/Select/index.jsx"; -import Typography from "@mui/material/Typography"; -import DataTable from "@/Components/v1/Table/index.jsx"; -import Pagination from "@/Components/v1/Table/TablePagination/index.jsx"; - -import { useFetchLogs } from "../../../Hooks/logHooks.js"; -import { useTheme } from "@emotion/react"; -import { useState } from "react"; -import { useTranslation } from "react-i18next"; - -const LevelBadge = ({ level }) => { - const theme = useTheme(); - - 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[level] || theme.palette.primary.contrastText; - - return ( - - {level} - - ); -}; - -const formatTimestamp = (timestamp) => { - if (!timestamp) return "-"; - const date = new Date(timestamp); - return date.toLocaleString(); -}; - -const Logs = () => { - const [logLevel, setLogLevel] = useState("all"); - const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(15); - - const theme = useTheme(); - const { t } = useTranslation(); - const [logs, isLoading, error] = useFetchLogs(); - - 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") }, - ]; - - const headers = [ - { - id: "timestamp", - content: t("logsPage.table.timestamp"), - render: (row) => ( - - {formatTimestamp(row.timestamp)} - - ), - }, - { - id: "level", - content: t("logsPage.table.level"), - render: (row) => , - }, - { - id: "service", - content: t("logsPage.table.service"), - render: (row) => ( - {row.service || "-"} - ), - }, - { - id: "method", - content: t("logsPage.table.method"), - render: (row) => ( - {row.method || "-"} - ), - }, - { - id: "message", - content: t("logsPage.table.message"), - render: (row) => ( - - {row.message || "-"} - - ), - }, - ]; - - const filteredLogs = logs - ?.filter((log) => { - if (logLevel === "all") return true; - return log.level === logLevel; - }) - .reverse() - .map((log, idx) => ({ ...log, id: idx })); - - const paginatedLogs = filteredLogs?.slice( - page * rowsPerPage, - page * rowsPerPage + rowsPerPage - ); - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - const handleLogLevelChange = (e) => { - setLogLevel(e.target.value); - setPage(0); - }; - - return ( - - - {t("logsPage.logLevelSelect.title")} -