gorkem-bwl
43284ae625
Removed description strings and divider lines from: - Server logs: 'System logs - last 1000 lines' and divider - Queue metrics: queue description and divider This cleans up the UI by removing redundant descriptive text that users can infer from the tab names and content context.
74 lines
1.9 KiB
React
74 lines
1.9 KiB
React
// Components
|
|
import Stack from "@mui/material/Stack";
|
|
import JobTable from "./components/JobTable";
|
|
import Metrics from "./components/Metrics";
|
|
import FailedJobTable from "./components/FailedJobTable";
|
|
import ButtonGroup from "@mui/material/ButtonGroup";
|
|
import Button from "@mui/material/Button";
|
|
import Typography from "@mui/material/Typography";
|
|
import Divider from "@mui/material/Divider";
|
|
|
|
// Utils
|
|
import { useState } from "react";
|
|
import { useFetchQueueData, useFlushQueue } from "../../../Hooks/logHooks";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
const QueueDetails = () => {
|
|
// Local state
|
|
const [trigger, setTrigger] = useState(false);
|
|
|
|
// Hooks
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const [jobs, metrics, isLoading, error] = useFetchQueueData(trigger);
|
|
const [flushQueue, isFlushing, flushError] = useFlushQueue();
|
|
|
|
if (isLoading) return <div>Loading...</div>;
|
|
if (error || flushError) return <div>Error: {error.message}</div>;
|
|
|
|
return (
|
|
<Stack gap={theme.spacing(4)}>
|
|
<Stack
|
|
gap={theme.spacing(20)}
|
|
mt={theme.spacing(10)}
|
|
>
|
|
<Metrics metrics={metrics} />
|
|
<JobTable jobs={jobs} />
|
|
<FailedJobTable metrics={metrics} />
|
|
|
|
<ButtonGroup
|
|
variant="contained"
|
|
color="accent"
|
|
sx={{
|
|
position: "sticky",
|
|
bottom: 0,
|
|
zIndex: 1000,
|
|
backgroundColor: theme.palette.primary.main,
|
|
p: theme.spacing(4),
|
|
border: `1px solid ${theme.palette.primary.lowContrast}`,
|
|
borderRadius: theme.spacing(2),
|
|
}}
|
|
>
|
|
<Button
|
|
onClick={() => {
|
|
setTrigger(!trigger);
|
|
}}
|
|
loading={isLoading}
|
|
>
|
|
{t("queuePage.refreshButton")}
|
|
</Button>
|
|
<Button
|
|
onClick={() => flushQueue(trigger, setTrigger)}
|
|
loading={isFlushing}
|
|
>
|
|
{t("queuePage.flushButton")}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default QueueDetails;
|