review handling of disabled metrics in frontend

web/frontend/src/systems/NodeOverview.svelte

@@ -110,7 +110,7 @@
         };
       });
     };
-    
+
     let pendingMapped = [];
     if (rawData.length > 0) {
       pendingMapped = rawData.map((h) => ({
@@ -120,12 +120,11 @@
         data: h.metrics.filter(
           (m) => m?.name == selectedMetric && m.scope == "node",
         ),
-        // TODO: Move To New Func Variant With Disabled Check on WHole Cluster Level: This never Triggers!
         disabled: checkMetricDisabled(globalMetrics, selectedMetric, cluster, h.subCluster),
       }))
       .sort((a, b) => a.host.localeCompare(b.host))
     }
-    
+
     return pendingMapped;
   }
 </script>
@@ -162,35 +161,32 @@
               </Badge>
             </span>
           </div>
-          {#if item?.data}
-            {#if item.disabled === true}
-              <!-- TODO: Will never be Shown: Overview Single Metric Return Will be Null, see Else Case-->
-              <Card body class="mx-3" color="info"
-                >Metric disabled for subcluster <code
-                  >{selectedMetric}:{item.subCluster}</code
-                ></Card
-              >
-            {:else if item.disabled === false}
-              <!-- "No Data"-Warning included in MetricPlot-Component   -->
-              <!-- #key: X-axis keeps last selected timerange otherwise -->
-              {#key item.data[0].metric.series[0].data.length}
-                <MetricPlot
-                  timestep={item.data[0].metric.timestep}
-                  series={item.data[0].metric.series}
-                  metric={item.data[0].name}
-                  {cluster}
-                  subCluster={item.subCluster}
-                  forNode
-                  enableFlip
-                />
-              {/key}
-            {:else}
-              <Card body class="mx-3" color="info">
-                Global Metric List Not Initialized
-                Can not determine {selectedMetric} availability: Please Reload Page
-              </Card>
-            {/if}
+          {#if item?.disabled}
+            <Card color="info">
+              <CardHeader class="mb-0">
+                <b>Disabled Metric</b>
+              </CardHeader>
+              <CardBody>
+                <p>No dataset(s) returned for <b>{selectedMetric}</b></p>
+                <p class="mb-1">Metric has been disabled for subcluster <b>{item.subCluster}</b>.</p>
+              </CardBody>
+            </Card>
+          {:else if item?.data}
+            <!-- "Empty Series"-Warning included in MetricPlot-Component   -->
+            <!-- #key: X-axis keeps last selected timerange otherwise -->
+            {#key item.data[0].metric.series[0].data.length}
+              <MetricPlot
+                timestep={item.data[0].metric.timestep}
+                series={item.data[0].metric.series}
+                metric={item.data[0].name}
+                {cluster}
+                subCluster={item.subCluster}
+                forNode
+                enableFlip
+              />
+            {/key}
           {:else}
+            <!-- Should Not Appear -->
             <Card color="warning">
               <CardHeader class="mb-0">
                 <b>Missing Metric</b>
@@ -205,10 +201,22 @@
       {/each}
     {/key}
   </Row>
+{:else if hostnameFilter || hoststateFilter != 'all'}
+  <Row class="mx-1">
+    <Card class="px-0">
+      <CardHeader>
+        <b>Empty Filter Return</b>
+      </CardHeader>
+      <CardBody>
+        <p>No datasets returned for <b>{selectedMetric}</b>.</p>
+        <p class="mb-1">Hostname filter and/or host state filter returned no matches.</p>
+      </CardBody>
+    </Card>
+  </Row>
 {:else}
-  <Row>
-    <Card color="warning">
-      <CardHeader class="mb-0">
+  <Row class="mx-1">
+    <Card class="px-0" color="warning">
+      <CardHeader>
         <b>Missing Metric</b>
       </CardHeader>
       <CardBody>

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -72,10 +72,30 @@
   );
 
   const extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
-  const refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(nodeData.metrics) : []);
+  const refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(selectedMetrics, nodeData.metrics) : []);
   const dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled?.data?.metric?.series?.length > 0)));
 
   /* Functions */
+  function sortAndSelectScope(metricList = [], nodeMetrics = []) {
+    const pendingData = [];
+    metricList.forEach((metricName) => {
+      const pendingMetric = {
+        name: metricName,
+        disabled: checkMetricDisabled(
+          globalMetrics,
+          metricName,
+          cluster,
+          nodeData.subCluster,
+        ),
+        data: null
+      };
+      const scopesData = nodeMetrics.filter((nodeMetric) => nodeMetric.name == metricName)
+      if (scopesData.length > 0) pendingMetric.data = selectScope(scopesData)
+      pendingData.push(pendingMetric)
+    });
+    return pendingData;
+  };
+
   const selectScope = (nodeMetrics) =>
     nodeMetrics.reduce(
       (a, b) =>
@@ -83,29 +103,6 @@
       nodeMetrics[0],
     );
 
-  const sortAndSelectScope = (allNodeMetrics) =>
-    selectedMetrics
-      .map((selectedName) => allNodeMetrics.filter((nodeMetric) => nodeMetric.name == selectedName))
-      .map((matchedNodeMetrics) => ({
-        disabled: false,
-        data: matchedNodeMetrics.length > 0 ? selectScope(matchedNodeMetrics) : null,
-      }))
-      .map((scopedNodeMetric) => {
-        if (scopedNodeMetric?.data) {
-          return {
-            disabled: checkMetricDisabled(
-              globalMetrics,
-              scopedNodeMetric.data.name,
-              cluster,
-              nodeData.subCluster,
-            ),
-            data: scopedNodeMetric.data,
-          };
-        } else {
-          return scopedNodeMetric;
-        }
-      });
-
   function buildExtendedLegend() {
     let pendingExtendedLegendData = null
     // Build Extended for allocated nodes [Commented: Only Build extended Legend For Shared Nodes]
@@ -171,68 +168,59 @@
     {/if}
   </td>
   {#each refinedData as metricData, i (metricData?.data?.name || i)}
-    {#key metricData}
-      <td>
-        {#if metricData?.disabled}
-          <Card body class="mx-2" color="info"
-            >Metric <b>{selectedMetrics[i]}</b> disabled for subcluster <code
-              >{nodeData.subCluster}</code
-            ></Card
-          >
-        {:else if !metricData?.data}
-          <Card body class="mx-2" color="warning">
-              <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
-              <p class="mb-1">Metric was not found in metric store for cluster <b>{cluster}</b>.</p>
-          </Card>
-        {:else if !metricData?.data?.name}
-          <Card body class="mx-2" color="warning"
-            >Metric without name for subcluster <code
-              >{`Metric Index ${i}`}:{nodeData.subCluster}</code
-            ></Card
-          >
-        {:else if !!metricData.data?.metric.statisticsSeries}
-          <!-- "No Data"-Warning included in MetricPlot-Component -->
-            <MetricPlot
-              {cluster}
-              subCluster={nodeData.subCluster}
-              metric={metricData.data.name}
-              scope={metricData.data.scope}
-              timestep={metricData.data.metric.timestep}
-              series={metricData.data.metric.series}
-              statisticsSeries={metricData.data?.metric.statisticsSeries}
-              useStatsSeries={!!metricData.data?.metric.statisticsSeries}
-              height={175}
-              {plotSync}
-              forNode
-            />
-          <div class="my-2"></div>
-          {#key extendedLegendData}
-            <MetricPlot
-              {cluster}
-              subCluster={nodeData.subCluster}
-              metric={metricData.data.name}
-              scope={metricData.data.scope}
-              timestep={metricData.data.metric.timestep}
-              series={metricData.data.metric.series}
-              height={175}
-              {extendedLegendData}
-              {plotSync}
-              forNode
-            />
-          {/key}
-        {:else}
-            <MetricPlot
-              {cluster}
-              subCluster={nodeData.subCluster}
-              metric={metricData.data.name}
-              scope={metricData.data.scope}
-              timestep={metricData.data.metric.timestep}
-              series={metricData.data.metric.series}
-              height={375}
-              forNode
-            />
-        {/if}
-      </td>
-    {/key}
+    <td>
+      {#if metricData?.disabled}
+        <Card body class="mx-2" color="info">
+          <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
+          <p class="mb-1">Metric has been disabled for subcluster <b>{nodeData.subCluster}</b>.</p>
+        </Card>
+      {:else if !metricData?.data}
+        <Card body class="mx-2" color="warning">
+          <p>No dataset(s) returned for <b>{selectedMetrics[i]}</b></p>
+          <p class="mb-1">Metric was not found in metric store for cluster <b>{cluster}</b>.</p>
+        </Card>
+      {:else if !!metricData.data?.metric.statisticsSeries}
+        <!-- "No Data"-Warning included in MetricPlot-Component -->
+          <MetricPlot
+            {cluster}
+            subCluster={nodeData.subCluster}
+            metric={metricData.data.name}
+            scope={metricData.data.scope}
+            timestep={metricData.data.metric.timestep}
+            series={metricData.data.metric.series}
+            statisticsSeries={metricData.data?.metric.statisticsSeries}
+            useStatsSeries={!!metricData.data?.metric.statisticsSeries}
+            height={175}
+            {plotSync}
+            forNode
+          />
+        <div class="my-2"></div>
+        {#key extendedLegendData}
+          <MetricPlot
+            {cluster}
+            subCluster={nodeData.subCluster}
+            metric={metricData.data.name}
+            scope={metricData.data.scope}
+            timestep={metricData.data.metric.timestep}
+            series={metricData.data.metric.series}
+            height={175}
+            {extendedLegendData}
+            {plotSync}
+            forNode
+          />
+        {/key}
+      {:else}
+          <MetricPlot
+            {cluster}
+            subCluster={nodeData.subCluster}
+            metric={metricData.data.name}
+            scope={metricData.data.scope}
+            timestep={metricData.data.metric.timestep}
+            series={metricData.data.metric.series}
+            height={375}
+            forNode
+          />
+      {/if}
+    </td>
   {/each}
 </tr>