review handling of disabled metrics in frontend

web/frontend/src/generic/joblist/JobListRow.svelte

@@ -99,7 +99,7 @@
     })
   );
 
-  const refinedData = $derived($metricsQuery?.data?.jobMetrics ? sortAndSelectScope($metricsQuery.data.jobMetrics) : []);
+  const refinedData = $derived($metricsQuery?.data?.jobMetrics ? sortAndSelectScope(metrics, $metricsQuery.data.jobMetrics) : []);
 
   /* Effects */
   $effect(() => {
@@ -140,6 +140,26 @@
     });
   }
 
+  function sortAndSelectScope(metricList = [], jobMetrics = []) {
+    const pendingData = [];
+    metricList.forEach((metricName) => {
+      const pendingMetric = {
+        name: metricName,
+        disabled: checkMetricDisabled(
+          globalMetrics,
+          metricName,
+          job.cluster,
+          job.subCluster,
+        ),
+        data: null
+      };
+      const scopesData = jobMetrics.filter((jobMetric) => jobMetric.name == metricName)
+      if (scopesData.length > 0) pendingMetric.data = selectScope(scopesData)
+      pendingData.push(pendingMetric)
+    });
+    return pendingData;
+  };
+
   const selectScope = (jobMetrics) =>
     jobMetrics.reduce(
       (a, b) =>
@@ -152,30 +172,6 @@
             : a,
       jobMetrics[0],
     );
-
-  const sortAndSelectScope = (jobMetrics) =>
-    metrics
-      .map((name) => jobMetrics.filter((jobMetric) => jobMetric.name == name))
-      .map((jobMetrics) => ({
-        disabled: false,
-        data: jobMetrics.length > 0 ? selectScope(jobMetrics) : null,
-      }))
-      .map((jobMetric) => {
-        if (jobMetric.data) {
-          return {
-            name: jobMetric.data.name,
-            disabled: checkMetricDisabled(
-              globalMetrics,
-              jobMetric.data.name,
-              job.cluster,
-              job.subCluster,
-            ),
-            data: jobMetric.data,
-          };
-        } else {
-          return jobMetric;
-        }
-      });
 </script>
 
 <tr>
@@ -211,39 +207,36 @@
     {/if}
     {#each refinedData as metric, i (metric?.name || i)}
       <td>
-        {#key metric}
-          {#if metric?.data}
-            {#if metric?.disabled}
-              <Card body class="mx-2" color="info">
-                Metric <b>{metric.data.name}</b>: Disabled for subcluster <code>{job.subCluster}</code>
-              </Card>
-            {:else}
-              <MetricPlot
-                onZoom={(detail) => handleZoom(detail, metric.data.name)}
-                height={plotHeight}
-                timestep={metric.data.metric.timestep}
-                scope={metric.data.scope}
-                series={metric.data.metric.series}
-                statisticsSeries={metric.data.metric.statisticsSeries}
-                metric={metric.data.name}
-                cluster={clusterInfos.find((c) => c.name == job.cluster)}
-                subCluster={job.subCluster}
-                isShared={job.shared != "none"}
-                numhwthreads={job.numHWThreads}
-                numaccs={job.numAcc}
-                zoomState={zoomStates[metric.data.name] || null}
-                thresholdState={thresholdStates[metric.data.name] || null}
-              />
-            {/if}
-          {:else}
-            <Card body class="mx-2" color="warning">
-              <p>No dataset(s) returned for <b>{metrics[i]}</b></p>
-              <p class="mb-1">Metric or host was not found in metric store for cluster <b>{job.cluster}</b>:</p>
-              <p class="mb-1">Identical messages in <i>{metrics[i]} column</i>: Metric not found.</p>
-              <p class="mb-1">Identical messages in <i>job {job.jobId} row</i>: Host not found.</p>
-            </Card>
-          {/if}
-        {/key}
+        {#if metric?.disabled}
+          <Card body class="mx-2" color="info">
+            <p>No dataset(s) returned for <b>{metrics[i]}</b></p>
+            <p class="mb-1">Metric has been disabled for subcluster <b>{job.subCluster}</b>.</p>
+          </Card>
+        {:else if metric?.data}
+          <MetricPlot
+            onZoom={(detail) => handleZoom(detail, metric.data.name)}
+            height={plotHeight}
+            timestep={metric.data.metric.timestep}
+            scope={metric.data.scope}
+            series={metric.data.metric.series}
+            statisticsSeries={metric.data.metric.statisticsSeries}
+            metric={metric.data.name}
+            cluster={clusterInfos.find((c) => c.name == job.cluster)}
+            subCluster={job.subCluster}
+            isShared={job.shared != "none"}
+            numhwthreads={job.numHWThreads}
+            numaccs={job.numAcc}
+            zoomState={zoomStates[metric.data.name] || null}
+            thresholdState={thresholdStates[metric.data.name] || null}
+          />
+        {:else}
+          <Card body class="mx-2" color="warning">
+            <p>No dataset(s) returned for <b>{metrics[i]}</b></p>
+            <p class="mb-1">Metric or host was not found in metric store for cluster <b>{job.cluster}</b>:</p>
+            <p class="mb-1">Identical messages in <i>{metrics[i]} column</i>: Metric not found.</p>
+            <p class="mb-1">Identical messages in <i>job {job.jobId} row</i>: Host not found.</p>
+          </Card>
+        {/if}
       </td>
     {:else}
       <td>