feat(cluster-health): add visibility options (#3210)

packages/old-import/src/widgets/options.ts

@@ -157,6 +157,21 @@ const optionMapping: OptionMapping = {
     defaultTab: (oldOptions) => ("defaultTabState" in oldOptions ? oldOptions.defaultTabState : undefined),
     sectionIndicatorRequirement: (oldOptions) =>
       "sectionIndicatorColor" in oldOptions ? oldOptions.sectionIndicatorColor : undefined,
+    showUptime: () => undefined,
+    visibleClusterSections: (oldOptions) => {
+      if (!("showNode" in oldOptions)) return undefined;
+
+      const oldKeys = {
+        showNode: "node" as const,
+        showLXCs: "lxc" as const,
+        showVM: "qemu" as const,
+        showStorage: "storage" as const,
+      } satisfies Partial<Record<keyof typeof oldOptions, string>>;
+
+      return objectEntries(oldKeys)
+        .filter(([key]) => oldOptions[key])
+        .map(([_, section]) => section);
+    },
   },
   mediaTranscoding: {
     defaultView: (oldOptions) => oldOptions.defaultView,

packages/translation/src/lang/en.json

@@ -1757,12 +1757,18 @@
         "memory": {
           "label": "Show Memory Info"
         },
+        "showUptime": {
+          "label": "Show Uptime"
+        },
         "fileSystem": {
           "label": "Show Filesystem Info"
         },
         "defaultTab": {
           "label": "Default tab"
         },
+        "visibleClusterSections": {
+          "label": "Visible cluster sections"
+        },
         "sectionIndicatorRequirement": {
           "label": "Section indicator requirement"
         }

packages/widgets/src/health-monitoring/cluster/cluster-health.tsx

@@ -72,126 +72,156 @@ export const ClusterHealthMonitoring = ({
 
   const cpuPercent = maxCpu ? (usedCpu / maxCpu) * 100 : 0;
   const memPercent = maxMem ? (usedMem / maxMem) * 100 : 0;
+  const defaultValue = [options.visibleClusterSections.at(0) ?? "node"];
 
   const isTiny = width < 256;
   return (
     <Stack h="100%" p="xs" gap={isTiny ? "xs" : "md"}>
-      <Group justify="center" wrap="nowrap">
-        <Text fz={isTiny ? 8 : "xs"} tt="uppercase" fw={700} c="dimmed" ta="center">
-          {formatUptime(uptime, t)}
-        </Text>
-      </Group>
-      <SummaryHeader cpu={cpuPercent} memory={memPercent} isTiny={isTiny} />
-      <Accordion variant="contained" chevronPosition="right" multiple defaultValue={["node"]}>
-        <ResourceAccordionItem
-          value="node"
-          title={t("widget.healthMonitoring.cluster.resource.node.name")}
-          icon={IconServer}
-          badge={addBadgeColor({
-            activeCount: activeNodes,
-            totalCount: healthData.nodes.length,
-            sectionIndicatorRequirement: options.sectionIndicatorRequirement,
-          })}
-          isTiny={isTiny}
-        >
-          <ResourceTable type="node" data={healthData.nodes} isTiny={isTiny} />
-        </ResourceAccordionItem>
+      {options.showUptime && (
+        <Group justify="center" wrap="nowrap">
+          <Text fz={isTiny ? 8 : "xs"} tt="uppercase" fw={700} c="dimmed" ta="center">
+            {formatUptime(uptime, t)}
+          </Text>
+        </Group>
+      )}
+      <SummaryHeader
+        cpu={{
+          value: cpuPercent,
+          hidden: !options.cpu,
+        }}
+        memory={{
+          value: memPercent,
+          hidden: !options.memory,
+        }}
+        isTiny={isTiny}
+      />
+      {options.visibleClusterSections.length >= 1 && (
+        <Accordion variant="contained" chevronPosition="right" multiple defaultValue={defaultValue}>
+          {options.visibleClusterSections.includes("node") && (
+            <ResourceAccordionItem
+              value="node"
+              title={t("widget.healthMonitoring.cluster.resource.node.name")}
+              icon={IconServer}
+              badge={addBadgeColor({
+                activeCount: activeNodes,
+                totalCount: healthData.nodes.length,
+                sectionIndicatorRequirement: options.sectionIndicatorRequirement,
+              })}
+              isTiny={isTiny}
+            >
+              <ResourceTable type="node" data={healthData.nodes} isTiny={isTiny} />
+            </ResourceAccordionItem>
+          )}
 
-        <ResourceAccordionItem
-          value="qemu"
-          title={t("widget.healthMonitoring.cluster.resource.qemu.name")}
-          icon={IconDeviceLaptop}
-          badge={addBadgeColor({
-            activeCount: activeVMs,
-            totalCount: healthData.vms.length,
-            sectionIndicatorRequirement: options.sectionIndicatorRequirement,
-          })}
-          isTiny={isTiny}
-        >
-          <ResourceTable type="qemu" data={healthData.vms} isTiny={isTiny} />
-        </ResourceAccordionItem>
+          {options.visibleClusterSections.includes("qemu") && (
+            <ResourceAccordionItem
+              value="qemu"
+              title={t("widget.healthMonitoring.cluster.resource.qemu.name")}
+              icon={IconDeviceLaptop}
+              badge={addBadgeColor({
+                activeCount: activeVMs,
+                totalCount: healthData.vms.length,
+                sectionIndicatorRequirement: options.sectionIndicatorRequirement,
+              })}
+              isTiny={isTiny}
+            >
+              <ResourceTable type="qemu" data={healthData.vms} isTiny={isTiny} />
+            </ResourceAccordionItem>
+          )}
 
-        <ResourceAccordionItem
-          value="lxc"
-          title={t("widget.healthMonitoring.cluster.resource.lxc.name")}
-          icon={IconCube}
-          badge={addBadgeColor({
-            activeCount: activeLXCs,
-            totalCount: healthData.lxcs.length,
-            sectionIndicatorRequirement: options.sectionIndicatorRequirement,
-          })}
-          isTiny={isTiny}
-        >
-          <ResourceTable type="lxc" data={healthData.lxcs} isTiny={isTiny} />
-        </ResourceAccordionItem>
+          {options.visibleClusterSections.includes("lxc") && (
+            <ResourceAccordionItem
+              value="lxc"
+              title={t("widget.healthMonitoring.cluster.resource.lxc.name")}
+              icon={IconCube}
+              badge={addBadgeColor({
+                activeCount: activeLXCs,
+                totalCount: healthData.lxcs.length,
+                sectionIndicatorRequirement: options.sectionIndicatorRequirement,
+              })}
+              isTiny={isTiny}
+            >
+              <ResourceTable type="lxc" data={healthData.lxcs} isTiny={isTiny} />
+            </ResourceAccordionItem>
+          )}
 
-        <ResourceAccordionItem
-          value="storage"
-          title={t("widget.healthMonitoring.cluster.resource.storage.name")}
-          icon={IconDatabase}
-          badge={addBadgeColor({
-            activeCount: activeStorage,
-            totalCount: healthData.storages.length,
-            sectionIndicatorRequirement: options.sectionIndicatorRequirement,
-          })}
-          isTiny={isTiny}
-        >
-          <ResourceTable type="storage" data={healthData.storages} isTiny={isTiny} />
-        </ResourceAccordionItem>
-      </Accordion>
+          {options.visibleClusterSections.includes("storage") && (
+            <ResourceAccordionItem
+              value="storage"
+              title={t("widget.healthMonitoring.cluster.resource.storage.name")}
+              icon={IconDatabase}
+              badge={addBadgeColor({
+                activeCount: activeStorage,
+                totalCount: healthData.storages.length,
+                sectionIndicatorRequirement: options.sectionIndicatorRequirement,
+              })}
+              isTiny={isTiny}
+            >
+              <ResourceTable type="storage" data={healthData.storages} isTiny={isTiny} />
+            </ResourceAccordionItem>
+          )}
+        </Accordion>
+      )}
     </Stack>
   );
 };
 
 interface SummaryHeaderProps {
-  cpu: number;
-  memory: number;
+  cpu: { value: number; hidden: boolean };
+  memory: { value: number; hidden: boolean };
   isTiny: boolean;
 }
 
 const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
   const t = useI18n();
+
+  if (cpu.hidden && memory.hidden) return null;
+
   return (
     <Center>
       <Group wrap="wrap" justify="center" gap="xs">
-        <Flex direction="row">
-          <RingProgress
-            roundCaps
-            size={isTiny ? 32 : 48}
-            thickness={isTiny ? 2 : 4}
-            label={
-              <Center>
-                <IconCpu size={isTiny ? 12 : 20} />
-              </Center>
-            }
-            sections={[{ value: cpu, color: cpu > 75 ? "orange" : "green" }]}
-          />
-          <Stack align="center" justify="center" gap={0}>
-            <Text fw={500} size={isTiny ? "xs" : "sm"}>
-              {t("widget.healthMonitoring.cluster.summary.cpu")}
-            </Text>
-            <Text size={isTiny ? "8px" : "xs"}>{cpu.toFixed(1)}%</Text>
-          </Stack>
-        </Flex>
-        <Flex>
-          <RingProgress
-            roundCaps
-            size={isTiny ? 32 : 48}
-            thickness={isTiny ? 2 : 4}
-            label={
-              <Center>
-                <IconBrain size={isTiny ? 12 : 20} />
-              </Center>
-            }
-            sections={[{ value: memory, color: memory > 75 ? "orange" : "green" }]}
-          />
-          <Stack align="center" justify="center" gap={0}>
-            <Text size={isTiny ? "xs" : "sm"} fw={500}>
-              {t("widget.healthMonitoring.cluster.summary.memory")}
-            </Text>
-            <Text size={isTiny ? "8px" : "xs"}>{memory.toFixed(1)}%</Text>
-          </Stack>
-        </Flex>
+        {!cpu.hidden && (
+          <Flex direction="row">
+            <RingProgress
+              roundCaps
+              size={isTiny ? 32 : 48}
+              thickness={isTiny ? 2 : 4}
+              label={
+                <Center>
+                  <IconCpu size={isTiny ? 12 : 20} />
+                </Center>
+              }
+              sections={[{ value: cpu.value, color: cpu.value > 75 ? "orange" : "green" }]}
+            />
+            <Stack align="center" justify="center" gap={0}>
+              <Text fw={500} size={isTiny ? "xs" : "sm"}>
+                {t("widget.healthMonitoring.cluster.summary.cpu")}
+              </Text>
+              <Text size={isTiny ? "8px" : "xs"}>{cpu.value.toFixed(1)}%</Text>
+            </Stack>
+          </Flex>
+        )}
+        {!memory.hidden && (
+          <Flex>
+            <RingProgress
+              roundCaps
+              size={isTiny ? 32 : 48}
+              thickness={isTiny ? 2 : 4}
+              label={
+                <Center>
+                  <IconBrain size={isTiny ? 12 : 20} />
+                </Center>
+              }
+              sections={[{ value: memory.value, color: memory.value > 75 ? "orange" : "green" }]}
+            />
+            <Stack align="center" justify="center" gap={0}>
+              <Text size={isTiny ? "xs" : "sm"} fw={500}>
+                {t("widget.healthMonitoring.cluster.summary.memory")}
+              </Text>
+              <Text size={isTiny ? "8px" : "xs"}>{memory.value.toFixed(1)}%</Text>
+            </Stack>
+          </Flex>
+        )}
       </Group>
     </Center>
   );

packages/widgets/src/health-monitoring/index.ts

@@ -8,34 +8,92 @@ import { optionsBuilder } from "../options";
 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
   createOptions() {
-    return optionsBuilder.from((factory) => ({
-      fahrenheit: factory.switch({
-        defaultValue: false,
+    return optionsBuilder.from(
+      (factory) => ({
+        fahrenheit: factory.switch({
+          defaultValue: false,
+        }),
+        cpu: factory.switch({
+          defaultValue: true,
+        }),
+        memory: factory.switch({
+          defaultValue: true,
+        }),
+        showUptime: factory.switch({
+          defaultValue: true,
+        }),
+        fileSystem: factory.switch({
+          defaultValue: true,
+        }),
+        visibleClusterSections: factory.multiSelect({
+          options: [
+            {
+              value: "node",
+              label: (t) => t("widget.healthMonitoring.cluster.resource.node.name"),
+            },
+            {
+              value: "qemu",
+              label: (t) => t("widget.healthMonitoring.cluster.resource.qemu.name"),
+            },
+            {
+              value: "lxc",
+              label: (t) => t("widget.healthMonitoring.cluster.resource.lxc.name"),
+            },
+            {
+              value: "storage",
+              label: (t) => t("widget.healthMonitoring.cluster.resource.storage.name"),
+            },
+          ] as const,
+          defaultValue: ["node", "qemu", "lxc", "storage"] as const,
+        }),
+        defaultTab: factory.select({
+          defaultValue: "system",
+          options: [
+            { value: "system", label: "System" },
+            { value: "cluster", label: "Cluster" },
+          ] as const,
+        }),
+        sectionIndicatorRequirement: factory.select({
+          defaultValue: "all",
+          options: [
+            { value: "all", label: "All active" },
+            { value: "any", label: "Any active" },
+          ] as const,
+        }),
       }),
-      cpu: factory.switch({
-        defaultValue: true,
-      }),
-      memory: factory.switch({
-        defaultValue: true,
-      }),
-      fileSystem: factory.switch({
-        defaultValue: true,
-      }),
-      defaultTab: factory.select({
-        defaultValue: "system",
-        options: [
-          { value: "system", label: "System" },
-          { value: "cluster", label: "Cluster" },
-        ] as const,
-      }),
-      sectionIndicatorRequirement: factory.select({
-        defaultValue: "all",
-        options: [
-          { value: "all", label: "All active" },
-          { value: "any", label: "Any active" },
-        ] as const,
-      }),
-    }));
+      {
+        fahrenheit: {
+          shouldHide(_, integrationKinds) {
+            // File system is only shown on system health tab
+            return integrationKinds.every((kind) => kind === "proxmox") || integrationKinds.length === 0;
+          },
+        },
+        fileSystem: {
+          shouldHide(_, integrationKinds) {
+            // File system is only shown on system health tab
+            return integrationKinds.every((kind) => kind === "proxmox") || integrationKinds.length === 0;
+          },
+        },
+        showUptime: {
+          shouldHide(_, integrationKinds) {
+            // Uptime is only shown on cluster health tab
+            return !integrationKinds.includes("proxmox");
+          },
+        },
+        sectionIndicatorRequirement: {
+          shouldHide(_, integrationKinds) {
+            // Section indicator requirement is only shown on cluster health tab
+            return !integrationKinds.includes("proxmox");
+          },
+        },
+        visibleClusterSections: {
+          shouldHide(_, integrationKinds) {
+            // Cluster sections are only shown on cluster health tab
+            return !integrationKinds.includes("proxmox");
+          },
+        },
+      },
+    );
   },
   supportedIntegrations: getIntegrationKindsByCategory("healthMonitoring"),
   errors: {