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,17 +72,32 @@ 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"}>
+      {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={cpuPercent} memory={memPercent} isTiny={isTiny} />
+      )}
-      <Accordion variant="contained" chevronPosition="right" multiple defaultValue={["node"]}>
+      <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")}
@@ -96,7 +111,9 @@ export const ClusterHealthMonitoring = ({
             >
               <ResourceTable type="node" data={healthData.nodes} isTiny={isTiny} />
             </ResourceAccordionItem>
+          )}
 
+          {options.visibleClusterSections.includes("qemu") && (
             <ResourceAccordionItem
               value="qemu"
               title={t("widget.healthMonitoring.cluster.resource.qemu.name")}
@@ -110,7 +127,9 @@ export const ClusterHealthMonitoring = ({
             >
               <ResourceTable type="qemu" data={healthData.vms} isTiny={isTiny} />
             </ResourceAccordionItem>
+          )}
 
+          {options.visibleClusterSections.includes("lxc") && (
             <ResourceAccordionItem
               value="lxc"
               title={t("widget.healthMonitoring.cluster.resource.lxc.name")}
@@ -124,7 +143,9 @@ export const ClusterHealthMonitoring = ({
             >
               <ResourceTable type="lxc" data={healthData.lxcs} isTiny={isTiny} />
             </ResourceAccordionItem>
+          )}
 
+          {options.visibleClusterSections.includes("storage") && (
             <ResourceAccordionItem
               value="storage"
               title={t("widget.healthMonitoring.cluster.resource.storage.name")}
@@ -138,22 +159,28 @@ export const ClusterHealthMonitoring = ({
             >
               <ResourceTable type="storage" data={healthData.storages} isTiny={isTiny} />
             </ResourceAccordionItem>
+          )}
         </Accordion>
+      )}
     </Stack>
   );
 };
 
 interface SummaryHeaderProps {
-  cpu: number;
+  cpu: { value: number; hidden: boolean };
-  memory: number;
+  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">
+        {!cpu.hidden && (
           <Flex direction="row">
             <RingProgress
               roundCaps
@@ -164,15 +191,17 @@ const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
                   <IconCpu size={isTiny ? 12 : 20} />
                 </Center>
               }
-            sections={[{ value: cpu, color: cpu > 75 ? "orange" : "green" }]}
+              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.toFixed(1)}%</Text>
+              <Text size={isTiny ? "8px" : "xs"}>{cpu.value.toFixed(1)}%</Text>
             </Stack>
           </Flex>
+        )}
+        {!memory.hidden && (
           <Flex>
             <RingProgress
               roundCaps
@@ -183,15 +212,16 @@ const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
                   <IconBrain size={isTiny ? 12 : 20} />
                 </Center>
               }
-            sections={[{ value: memory, color: memory > 75 ? "orange" : "green" }]}
+              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.toFixed(1)}%</Text>
+              <Text size={isTiny ? "8px" : "xs"}>{memory.value.toFixed(1)}%</Text>
             </Stack>
           </Flex>
+        )}
       </Group>
     </Center>
   );

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

@@ -8,7 +8,8 @@ import { optionsBuilder } from "../options";
 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
   createOptions() {
-    return optionsBuilder.from((factory) => ({
+    return optionsBuilder.from(
+      (factory) => ({
         fahrenheit: factory.switch({
           defaultValue: false,
         }),
@@ -18,9 +19,33 @@ export const { definition, componentLoader } = createWidgetDefinition("healthMon
         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: [
@@ -35,7 +60,40 @@ export const { definition, componentLoader } = createWidgetDefinition("healthMon
             { 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: {