add scopes, paging and backend filtering to nodeList

web/frontend/src/systems/NodeOverview.svelte

@@ -3,50 +3,153 @@
 
     Properties:
     - `ccconfig Object?`: The ClusterCockpit Config Context [Default: null]
-    - `data Object?`: The GQL nodeMetrics data [Default: null]
     - `cluster String`: The cluster to show status information for
     - `selectedMetric String?`: The selectedMetric input [Default: ""]
  -->
 
  <script>
-  import { Row, Col, Card } from "@sveltestrap/sveltestrap";
+  import { queryStore, gql, getContextClient } from "@urql/svelte";
+  import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap";
+  import { init, checkMetricsDisabled } from "../generic/utils.js";
   import MetricPlot from "../generic/plots/MetricPlot.svelte";
 
   export let ccconfig = null;
-  export let data = null;
   export let cluster = "";
-  export let selectedMetric = "";
+  export const subCluster = "";
+  export let selectedMetrics = null;
+  export let hostnameFilter = "";
+  export let from = null;
+  export let to = null;
 
+  const { query: initq } = init();
+  const client = getContextClient();
+  const nodeQuery = gql`
+    query ($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
+      nodeMetrics(
+        cluster: $cluster
+        metrics: $metrics
+        from: $from
+        to: $to
+      ) {
+        host
+        subCluster
+        metrics {
+          name
+          scope
+          metric {
+            timestep
+            unit {
+              base
+              prefix
+            }
+            series {
+              statistics {
+                min
+                avg
+                max
+              }
+              data
+            }
+          }
+        }
+      }
+    }
+  `
+
+  $: selectedMetric = selectedMetrics[0] ? selectedMetrics[0] : "";
+
+  $: nodesQuery = queryStore({
+    client: client,
+    query: nodeQuery,
+    variables: {
+      cluster: cluster,
+      metrics: selectedMetrics,
+      from: from.toISOString(),
+      to: to.toISOString(),
+    },
+  });
+
+  let rawData = []
+  $: if ($initq.data && $nodesQuery?.data) {
+    rawData = $nodesQuery?.data?.nodeMetrics.filter((h) => {
+      if (h.subCluster === '') { // Exclude nodes with empty subCluster field
+        console.warn('subCluster not configured for node', h.host)
+        return false
+      } else {
+        return h.metrics.some(
+          (m) => selectedMetrics.includes(m.name) && m.scope == "node",
+        )
+      }
+    })
+  }
+
+  let mappedData = []
+  $: if (rawData?.length > 0) {
+    mappedData = rawData.map((h) => ({
+      host: h.host,
+      subCluster: h.subCluster,
+      data: h.metrics.filter(
+        (m) => selectedMetrics.includes(m.name) && m.scope == "node",
+      ),
+      disabled: checkMetricsDisabled(
+        selectedMetrics,
+        cluster,
+        h.subCluster,
+      ),
+    }))
+    .sort((a, b) => a.host.localeCompare(b.host))
+  }
+
+  let filteredData = []
+  $: if (mappedData?.length > 0) {
+    filteredData = mappedData.filter((h) =>
+      h.host.includes(hostnameFilter)
+    )
+  }
 </script>
 
-<!-- PlotGrid flattened into this component -->
-<Row cols={{ xs: 1, sm: 2, md: 3, lg: ccconfig.plot_view_plotsPerRow}}>
-  {#each data as item (item.host)}
-    <Col class="px-1">
-      <h4 style="width: 100%; text-align: center;">
-        <a
-          style="display: block;padding-top: 15px;"
-          href="/monitoring/node/{cluster}/{item.host}"
-          >{item.host} ({item.subCluster})</a
-        >
-      </h4>
-      {#if item?.disabled[selectedMetric]}
-        <Card body class="mx-3" color="info"
-          >Metric disabled for subcluster <code
-            >{selectedMetric}:{item.subCluster}</code
-          ></Card
-        >
-      {:else}
-        <!-- "No Data"-Warning included in MetricPlot-Component -->
-        <MetricPlot
-          timestep={item.data[0].metric.timestep}
-          series={item.data[0].metric.series}
-          metric={item.data[0].name}
-          {cluster}
-          subCluster={item.subCluster}
-          forNode
-        />
-      {/if}
+{#if $nodesQuery.error}
+  <Row>
+    <Col>
+      <Card body color="danger">{$nodesQuery.error.message}</Card>
     </Col>
-  {/each}
-</Row>
+  </Row>
+{:else if $nodesQuery.fetching }
+  <Row>
+    <Col>
+      <Spinner />
+    </Col>
+  </Row>
+{:else if filteredData?.length > 0}
+  <!-- PlotGrid flattened into this component -->
+  <Row cols={{ xs: 1, sm: 2, md: 3, lg: ccconfig.plot_view_plotsPerRow}}>
+    {#each filteredData as item (item.host)}
+      <Col class="px-1">
+        <h4 style="width: 100%; text-align: center;">
+          <a
+            style="display: block;padding-top: 15px;"
+            href="/monitoring/node/{cluster}/{item.host}"
+            >{item.host} ({item.subCluster})</a
+          >
+        </h4>
+        {#if item?.disabled[selectedMetric]}
+          <Card body class="mx-3" color="info"
+            >Metric disabled for subcluster <code
+              >{selectedMetric}:{item.subCluster}</code
+            ></Card
+          >
+        {:else}
+          <!-- "No Data"-Warning included in MetricPlot-Component -->
+          <MetricPlot
+            timestep={item.data[0].metric.timestep}
+            series={item.data[0].metric.series}
+            metric={item.data[0].name}
+            {cluster}
+            subCluster={item.subCluster}
+            forNode
+          />
+        {/if}
+      </Col>
+    {/each}
+  </Row>
+{/if}