77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import type { MantineColor } from "@mantine/core";
|
|
import { Divider, Group, HoverCard, Indicator, RingProgress, Stack, Text } from "@mantine/core";
|
|
import { useColorScheme } from "@mantine/hooks";
|
|
import { IconHeartbeat } from "@tabler/icons-react";
|
|
|
|
import type { TdarrStatistics } from "@homarr/integrations";
|
|
import { useI18n } from "@homarr/translation/client";
|
|
|
|
interface HealthCheckStatusProps {
|
|
statistics: TdarrStatistics;
|
|
}
|
|
|
|
export function HealthCheckStatus(props: HealthCheckStatusProps) {
|
|
const colorScheme = useColorScheme();
|
|
const t = useI18n("widget.mediaTranscoding.healthCheck");
|
|
|
|
const indicatorColor = props.statistics.failedHealthCheckCount
|
|
? "red"
|
|
: props.statistics.stagedHealthCheckCount
|
|
? "yellow"
|
|
: "green";
|
|
|
|
return (
|
|
<HoverCard position="bottom" width={250} shadow="sm">
|
|
<HoverCard.Target>
|
|
<Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
|
|
<IconHeartbeat size={16} />
|
|
</Indicator>
|
|
</HoverCard.Target>
|
|
<HoverCard.Dropdown bg={colorScheme === "light" ? "gray.2" : "dark.8"}>
|
|
<Stack gap="sm" align="center">
|
|
<Group gap="xs">
|
|
<IconHeartbeat size={18} />
|
|
<Text size="sm">{t("title")}</Text>
|
|
</Group>
|
|
<Divider
|
|
style={{
|
|
alignSelf: "stretch",
|
|
}}
|
|
/>
|
|
<RingProgress
|
|
sections={[
|
|
{ value: props.statistics.stagedHealthCheckCount, color: textColor("yellow", colorScheme) },
|
|
{ value: props.statistics.totalHealthCheckCount, color: textColor("green", colorScheme) },
|
|
{ value: props.statistics.failedHealthCheckCount, color: textColor("red", colorScheme) },
|
|
]}
|
|
/>
|
|
<Group display="flex" w="100%">
|
|
<Stack style={{ flex: 1 }} gap={0} align="center">
|
|
<Text size="xs" c={textColor("yellow", colorScheme)}>
|
|
{props.statistics.stagedHealthCheckCount}
|
|
</Text>
|
|
<Text size="xs">{t("queued")}</Text>
|
|
</Stack>
|
|
<Stack style={{ flex: 1 }} gap={0} align="center">
|
|
<Text size="xs" c={textColor("green", colorScheme)}>
|
|
{props.statistics.totalHealthCheckCount}
|
|
</Text>
|
|
<Text size="xs">{t("status.healthy")}</Text>
|
|
</Stack>
|
|
<Stack style={{ flex: 1 }} gap={0} align="center">
|
|
<Text size="xs" c={textColor("red", colorScheme)}>
|
|
{props.statistics.failedHealthCheckCount}
|
|
</Text>
|
|
<Text size="xs">{t("status.unhealthy")}</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Stack>
|
|
</HoverCard.Dropdown>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
function textColor(color: MantineColor, theme: "light" | "dark") {
|
|
return `${color}.${theme === "light" ? 8 : 5}`;
|
|
}
|