105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import { BaseBox } from "@/Components/v2/design-elements";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import type { MonitorStatus } from "@/Types/Monitor";
|
|
import type { SxProps } from "@mui/material/styles";
|
|
import { getStatusPalette, getValuePalette } from "@/Utils/MonitorUtils";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export const ValueTypes = ["positive", "negative", "neutral"] as const;
|
|
export type ValueType = (typeof ValueTypes)[number];
|
|
|
|
export const StatusLabel = ({
|
|
status,
|
|
isActive,
|
|
sx,
|
|
}: {
|
|
status: MonitorStatus;
|
|
isActive?: boolean;
|
|
sx?: SxProps;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const palette = getStatusPalette(status);
|
|
|
|
const determineStatus = (
|
|
isActive: boolean | undefined,
|
|
status: MonitorStatus
|
|
): string => {
|
|
if (isActive === false) {
|
|
return t("pages.common.monitors.status.paused");
|
|
}
|
|
|
|
if (status === true) {
|
|
return t("pages.common.monitors.status.up");
|
|
}
|
|
if (status === false) {
|
|
return t("pages.common.monitors.status.down");
|
|
}
|
|
return t("pages.common.monitors.status.initializing");
|
|
};
|
|
|
|
return (
|
|
<BaseBox
|
|
sx={{
|
|
display: "inline-flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: theme.spacing(3, 5),
|
|
color: theme.palette[palette].main,
|
|
borderColor:
|
|
theme.palette.mode === "dark"
|
|
? "rgba(255, 255, 255, 0.08)"
|
|
: "rgba(0, 0, 0, 0.08)",
|
|
...sx,
|
|
}}
|
|
>
|
|
<Box
|
|
width={7}
|
|
height={7}
|
|
bgcolor={theme.palette[palette].light}
|
|
borderRadius="50%"
|
|
marginRight="5px"
|
|
/>
|
|
<Typography textTransform={"capitalize"}>
|
|
{determineStatus(isActive, status)}
|
|
</Typography>
|
|
</BaseBox>
|
|
);
|
|
};
|
|
|
|
export const ValueLabel = ({ value, text }: { value: ValueType; text: string }) => {
|
|
const theme = useTheme();
|
|
const palette = getValuePalette(value);
|
|
const transformedText = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
|
|
|
|
return (
|
|
<BaseBox
|
|
sx={{
|
|
display: "inline-flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: theme.spacing(3, 5),
|
|
color: theme.palette[palette].main,
|
|
borderColor:
|
|
theme.palette.mode === "dark"
|
|
? "rgba(255, 255, 255, 0.08)"
|
|
: "rgba(0, 0, 0, 0.08)",
|
|
}}
|
|
>
|
|
<Box
|
|
width={7}
|
|
height={7}
|
|
bgcolor={theme.palette[palette].light}
|
|
borderRadius="50%"
|
|
marginRight="5px"
|
|
/>
|
|
{transformedText}
|
|
</BaseBox>
|
|
);
|
|
};
|