Meier Lukas
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { ScrollArea, Tabs } from "@mantine/core";
|
|
import dayjs from "dayjs";
|
|
import duration from "dayjs/plugin/duration";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import type { IntegrationKind } from "@homarr/definitions";
|
|
import { useI18n } from "@homarr/translation/client";
|
|
|
|
import type { WidgetComponentProps } from "../definition";
|
|
import { ClusterHealthMonitoring } from "./cluster/cluster-health";
|
|
import { SystemHealthMonitoring } from "./system-health";
|
|
|
|
dayjs.extend(duration);
|
|
|
|
const isClusterIntegration = (integration: { kind: IntegrationKind }) =>
|
|
integration.kind === "proxmox" || integration.kind === "mock";
|
|
|
|
export default function HealthMonitoringWidget(props: WidgetComponentProps<"healthMonitoring">) {
|
|
const [integrations] = clientApi.integration.byIds.useSuspenseQuery(props.integrationIds);
|
|
const t = useI18n();
|
|
|
|
const clusterIntegrationId = integrations.find(isClusterIntegration)?.id;
|
|
|
|
if (!clusterIntegrationId) {
|
|
return <SystemHealthMonitoring {...props} />;
|
|
}
|
|
|
|
const otherIntegrationIds = integrations
|
|
// We want to have the mock integration also in the system tab, so we use it for both
|
|
.filter((integration) => integration.kind !== "proxmox")
|
|
.map((integration) => integration.id);
|
|
if (otherIntegrationIds.length === 0) {
|
|
return <ClusterHealthMonitoring {...props} integrationId={clusterIntegrationId} />;
|
|
}
|
|
|
|
return (
|
|
<ScrollArea h="100%">
|
|
<Tabs defaultValue={props.options.defaultTab} variant="outline">
|
|
<Tabs.List grow>
|
|
<Tabs.Tab value="system" fz="xs">
|
|
<b>{t("widget.healthMonitoring.tab.system")}</b>
|
|
</Tabs.Tab>
|
|
<Tabs.Tab value="cluster" fz="xs">
|
|
<b>{t("widget.healthMonitoring.tab.cluster")}</b>
|
|
</Tabs.Tab>
|
|
</Tabs.List>
|
|
<Tabs.Panel value="system">
|
|
<SystemHealthMonitoring {...props} integrationIds={otherIntegrationIds} />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="cluster">
|
|
<ClusterHealthMonitoring integrationId={clusterIntegrationId} {...props} />
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
</ScrollArea>
|
|
);
|
|
}
|