Move common logic into systems view again

- adds backend log if subcluster for node not configured

web/frontend/src/systems/NodeOverview.svelte

@@ -2,210 +2,47 @@
     @component Cluster Per Node Overview component; renders current state of ONE metric for ALL nodes
 
     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
-    - `from Date?`: Custom Time Range selection 'from' [Default: null]
-    - `to Date?`: Custom Time Range selection 'to' [Default: null]
+    - `selectedMetric String?`: The selectedMetric input [Default: ""]
  -->
 
  <script>
   import { getContext } from "svelte";
-  import {
-    Row,
-    Col,
-    Input,
-    InputGroup,
-    InputGroupText,
-    Icon,
-    Spinner,
-    Card,
-  } from "@sveltestrap/sveltestrap";
-  import {
-    queryStore,
-    gql,
-    getContextClient,
-  } from "@urql/svelte";
-  import {
-    init,
-    checkMetricDisabled,
-  } from "../generic/utils.js";
+  import { Card } from "@sveltestrap/sveltestrap";
   import PlotGrid from "../generic/PlotGrid.svelte";
   import MetricPlot from "../generic/plots/MetricPlot.svelte";
-  import TimeSelection from "../generic/select/TimeSelection.svelte";
-  import Refresher from "../generic/helper/Refresher.svelte";
 
-  export let cluster;
-  export let from = null;
-  export let to = null;
+  export let ccconfig = null;
+  export let data = null;
+  export let cluster = "";
+  export let selectedMetric = "";
 
-  const { query: initq } = init();
-
-  if (from == null || to == null) {
-    to = new Date(Date.now());
-    from = new Date(to.getTime());
-    from.setHours(from.getHours() - 12);
-  }
-
-  const initialized = getContext("initialized");
-  const ccconfig = getContext("cc-config");
   const clusters = getContext("clusters");
-  const globalMetrics = getContext("globalMetrics");
-
-  let hostnameFilter = "";
-  let selectedMetric = ccconfig.system_view_selectedMetric;
-
-  const client = getContextClient();
-  $: nodesQuery = queryStore({
-    client: client,
-    query: 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
-              }
-            }
-          }
-        }
-      }
-    `,
-    variables: {
-      cluster: cluster,
-      metrics: [selectedMetric],
-      from: from.toISOString(),
-      to: to.toISOString(),
-    },
-  });
-
-  let systemMetrics = [];
-  let systemUnits = {};
-  function loadMetrics(isInitialized) {
-    if (!isInitialized) return
-    systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
-    for (let sm of systemMetrics) {
-      systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
-    }
-  }
-
-  $: loadMetrics($initialized)
-
 </script>
 
-<Row cols={{ xs: 2, lg: 4 }}>
-  {#if $initq.error}
-    <Card body color="danger">{$initq.error.message}</Card>
-  {:else if $initq.fetching}
-    <Spinner />
-  {:else}
-    <!-- Node Col-->
-    <Col>
-      <InputGroup>
-        <InputGroupText><Icon name="hdd" /></InputGroupText>
-        <InputGroupText>Find Node</InputGroupText>
-        <Input
-          placeholder="hostname..."
-          type="text"
-          bind:value={hostnameFilter}
-        />
-      </InputGroup>
-    </Col>
-    <!-- Range Col-->
-    <Col>
-      <TimeSelection bind:from bind:to />
-    </Col>
-    <!-- Metric Col-->
-    <Col class="mt-2 mt-lg-0">
-      <InputGroup>
-        <InputGroupText><Icon name="graph-up" /></InputGroupText>
-        <InputGroupText>Metric</InputGroupText>
-        <select class="form-select" bind:value={selectedMetric}>
-          {#each systemMetrics as metric}
-            <option value={metric.name}
-              >{metric.name} {systemUnits[metric.name] ? "("+systemUnits[metric.name]+")" : ""}</option
-            >
-          {/each}
-        </select>
-      </InputGroup>
-    </Col>
-    <!-- Refresh Col-->
-    <Col class="mt-2 mt-lg-0">
-      <Refresher
-        on:refresh={() => {
-          const diff = Date.now() - to;
-          from = new Date(from.getTime() + diff);
-          to = new Date(to.getTime() + diff);
-        }}
-      />
-    </Col>
-  {/if}
-</Row>
-<br />
-{#if $nodesQuery.error}
-  <Row>
-    <Col>
-      <Card body color="danger">{$nodesQuery.error.message}</Card>
-    </Col>
-  </Row>
-{:else if $nodesQuery.fetching || $initq.fetching}
-  <Row>
-    <Col>
-      <Spinner />
-    </Col>
-  </Row>
-{:else}
-  <PlotGrid
-    let:item
-    renderFor="systems"
-    itemsPerRow={ccconfig.plot_view_plotsPerRow}
-    items={$nodesQuery.data.nodeMetrics
-      .filter(
-        (h) =>
-          h.host.includes(hostnameFilter) &&
-          h.metrics.some(
-            (m) => m.name == selectedMetric && m.scope == "node",
-          ),
-      )
-      .map((h) => ({
-        host: h.host,
-        subCluster: h.subCluster,
-        data: h.metrics.find(
-          (m) => m.name == selectedMetric && m.scope == "node",
-        ),
-        disabled: checkMetricDisabled(
-          selectedMetric,
-          cluster,
-          h.subCluster,
-        ),
-      }))
-      .sort((a, b) => a.host.localeCompare(b.host))}
-  >
-    <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
+<PlotGrid
+  let:item
+  renderFor="systems"
+  itemsPerRow={ccconfig.plot_view_plotsPerRow}
+  items={data}
+>
+  <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?.data}
+    {#if item?.disabled[selectedMetric]}
+      <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
+        >Metric disabled for subcluster <code
+          >{selectedMetric}:{item.subCluster}</code
+        ></Card
       >
-    </h4>
-    {#if item.disabled === false && item.data}
+    {:else}
       <MetricPlot
         timestep={item.data.metric.timestep}
         series={item.data.metric.series}
@@ -214,19 +51,13 @@
         subCluster={item.subCluster}
         forNode={true}
       />
-    {:else if item.disabled === true && item.data}
-      <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
-        >Metric disabled for subcluster <code
-          >{selectedMetric}:{item.subCluster}</code
-        ></Card
-      >
-    {:else}
-      <Card
-        style="margin-left: 2rem;margin-right: 2rem;"
-        body
-        color="warning"
-        >No dataset returned for <code>{selectedMetric}</code></Card
-      >
     {/if}
-  </PlotGrid>
-{/if}
+  {:else}
+    <Card
+      style="margin-left: 2rem;margin-right: 2rem;"
+      body
+      color="warning"
+      >No dataset returned for <code>{selectedMetric}</code></Card
+    >
+  {/if}
+</PlotGrid>