add tooltips to metricConfig, rendered in metricSelect, rework availability display

web/frontend/src/Jobs.root.svelte

@@ -60,6 +60,8 @@
   let presetProject = $derived(filterPresets?.project ? filterPresets.project : "");
   let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
   let selectedSubCluster = $derived(filterPresets?.partition ? filterPresets.partition : null);
+  const maxClusters = $derived($initq?.data?.clusters?.length || 0);
+  const maxSubClusters = $derived($initq?.data?.clusters?.find((c) => c.name == selectedCluster)?.subClusters?.length || 0);
   let metrics = $derived.by(() => {
     if (thisInit && ccconfig) {
       if (selectedCluster) {
@@ -243,6 +245,8 @@
     presetMetrics={metrics}
     cluster={selectedCluster}
     subCluster={selectedSubCluster}
+    {maxClusters}
+    {maxSubClusters}
     configName="metricConfig_jobListMetrics"
     footprintSelect
     {globalMetrics}

web/frontend/src/Systems.root.svelte

@@ -63,8 +63,9 @@
   let pendingHostnameFilter = $state("");
   let isMetricsSelectionOpen = $state(false);
 
-  /* Derived Init Return */
+  /* Derived Init Returns */
   const thisInit = $derived($initq?.data ? true : false);
+  const maxSubClusters = $derived($initq?.data?.clusters?.find((c) => c.name == cluster)?.subClusters?.length || 0);
 
   /* Derived States */
   const ccconfig = $derived(thisInit ? getContext("cc-config") : null);
@@ -284,6 +285,7 @@
     {cluster}
     {subCluster}
     {globalMetrics}
+    maxSubClusters={subCluster? null: maxSubClusters}
     configName="nodeList_selectedMetrics"
     applyMetrics={(newMetrics) => 
       selectedMetrics = [...newMetrics]

web/frontend/src/User.root.svelte

@@ -90,6 +90,8 @@
   const shortDuration = $derived(ccconfig?.jobList_hideShortRunningJobs);
   let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
   let selectedSubCluster = $derived(filterPresets?.partition ? filterPresets.partition : null);
+  const maxClusters = $derived($initq?.data?.clusters?.length || 0);
+  const maxSubClusters = $derived($initq?.data?.clusters?.find((c) => c.name == selectedCluster)?.subClusters?.length || 0);
   let metrics = $derived.by(() => {
     if (thisInit && ccconfig) {
       if (selectedCluster) {
@@ -531,6 +533,8 @@
     presetMetrics={metrics}
     cluster={selectedCluster}
     subCluster={selectedSubCluster}
+    {maxClusters}
+    {maxSubClusters}
     configName="metricConfig_jobListMetrics"
     footprintSelect
     {globalMetrics}

web/frontend/src/generic/select/MetricSelection.svelte

@@ -22,6 +22,8 @@
     ModalFooter,
     Button,
     ListGroup,
+    Icon,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
@@ -33,6 +35,8 @@
     presetMetrics = [],
     cluster = null,
     subCluster = null,
+    maxClusters = null,
+    maxSubClusters = null,
     footprintSelect = false,
     configName,
     globalMetrics,
@@ -86,20 +90,47 @@
     return availableMetrics;
   }
 
+  function printAvailabilityCount(metric, cluster) {
+    const avail = globalMetrics.find((gm) => gm.name === metric)?.availability
+    if (avail) {
+      if (!cluster) {
+        return `${avail.length} / ${maxClusters} Cluster`
+      } else {
+        const subAvail = avail.find((av) => av.cluster === cluster)?.subClusters
+        if (subAvail) {
+          return `${subAvail.length} / ${maxSubClusters} SubCluster`
+        } else {
+          return `0 / ${maxSubClusters} SubCluster`
+        }
+      }
+    }
+    return `0 / ${maxClusters} Cluster`
+  }
+
   function printAvailability(metric, cluster) {
     const avail = globalMetrics.find((gm) => gm.name === metric)?.availability
     if (avail) {
       if (!cluster) {
-        return avail.map((av) => av.cluster).join(', ')
+        console.log(metric, avail.map((av) => av.cluster))
+        return avail.map((av) => av.cluster)
       } else {
         const subAvail = avail.find((av) => av.cluster === cluster)?.subClusters
         if (subAvail) {
-          return subAvail.join(', ')
+          console.log(metric, subAvail)
+          return subAvail
         } else {
-          return `Not available for ${cluster}`
+          return [`Not available for ${cluster}`]
         }
       }
     }
+    return [`Not available for ${cluster}`]
+  }
+
+  function printTooltip(metric) {
+    const toolt = globalMetrics.find((gm) => gm.name === metric)?.tooltip
+    if (toolt) {
+      return toolt
+    }
     return ""
   }
 
@@ -172,7 +203,7 @@
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
-  <ModalHeader>Configure columns (Metric availability shown)</ModalHeader>
+  <ModalHeader>Configure columns</ModalHeader>
   <ModalBody>
     <ListGroup>
       {#if footprintSelect}
@@ -213,9 +244,34 @@
             />
           {/if}
           {metric}
-          <span style="float: right; text-align: justify;">
-            {printAvailability(metric, cluster)}
-          </span>
+          {#if maxClusters !== null || maxSubClusters !== null}
+            <span style="float: right;" class="ms-1">
+              <Button id={`${metric}-avail-info`} outline color="secondary" size="sm" class="ml-2">
+                <b>{ printAvailabilityCount(metric, cluster) }</b>
+              </Button>
+              <Tooltip target={`${metric}-avail-info`} placement="right">
+                <b>Availability</b>
+                <ul style="text-align: left; padding-left: 1.0rem; margin-bottom: 0.25rem;">
+                  {#each printAvailability(metric, cluster) as avail}
+                    <li>{avail}</li>
+                  {/each}
+                </ul>
+              </Tooltip>
+            </span>
+          {/if}
+          {#if printTooltip(metric) !== ""}
+            <span style="float: right;">
+              <Button id={`${metric}-kind-info`} outline color="secondary" size="sm" class="ml-2">
+                <Icon name="info-square" />
+              </Button>
+              <Tooltip target={`${metric}-kind-info`} placement="right">
+                <b>Information</b>
+                <p style="text-align: left; margin-bottom: 0.25rem;">
+                  { printTooltip(metric) }
+                </p>
+              </Tooltip>
+            </span>
+          {/if}
         </li>
       {/each}
     </ListGroup>

web/frontend/src/generic/utils.js

@@ -81,6 +81,7 @@ export function init(extraInitQuery = "") {
             name
             scope
             footprint
+            tooltip
             unit { base, prefix }
             availability { cluster, subClusters }
         }