review handling of disabled metrics in frontend

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>