add scopes, paging and backend filtering to nodeList

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

@@ -9,6 +9,7 @@
 
 <script>
   import { Card } from "@sveltestrap/sveltestrap";
+  import { maxScope, checkMetricDisabled } from "../../generic/utils.js";
   import MetricPlot from "../../generic/plots/MetricPlot.svelte";
   import NodeInfo from "./NodeInfo.svelte";
 
@@ -16,28 +17,55 @@
   export let nodeData;
   export let selectedMetrics;
 
-  const sortOrder = (nodeMetrics) =>
-    selectedMetrics.map((name) => nodeMetrics.find((nodeMetric) => nodeMetric.name == name));
+  // Helper
+  const selectScope = (nodeMetrics) =>
+    nodeMetrics.reduce(
+      (a, b) =>
+        maxScope([a.scope, b.scope]) == a.scope ? b : a,
+      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(
+              scopedNodeMetric.data.name,
+              cluster,
+              nodeData.subCluster,
+            ),
+            data: scopedNodeMetric.data,
+          };
+        } else {
+          return scopedNodeMetric;
+        }
+      });
 </script>
 
 <tr>
   <td>
     <NodeInfo {cluster} subCluster={nodeData.subCluster} hostname={nodeData.host} />
   </td>
-  {#each sortOrder(nodeData?.data) as metricData (metricData.name)}
+  {#each sortAndSelectScope(nodeData?.metrics) as metricData (metricData.data.name)}
     <td>
-      {#if nodeData?.disabled[metricData.name]}
+      {#if metricData?.disabled}
         <Card body class="mx-3" color="info"
           >Metric disabled for subcluster <code
-            >{metricData.name}:{nodeData.subCluster}</code
+            >{metricData.data.name}:{nodeData.subCluster}</code
           ></Card
         >
       {:else}
         <!-- "No Data"-Warning included in MetricPlot-Component -->
         <MetricPlot
-          timestep={metricData.metric.timestep}
-          series={metricData.metric.series}
-          metric={metricData.name}
+          timestep={metricData.data.metric.timestep}
+          series={metricData.data.metric.series}
+          metric={metricData.data.name}
           {cluster}
           subCluster={nodeData.subCluster}
           forNode