From 2f6e5a7648c61bf24f2e3b5c92e5684fc8e24513 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 14 Oct 2024 11:55:59 +0200
Subject: [PATCH] Move common logic into systems view again

- adds backend log if subcluster for node not configured
---
 internal/graph/schema.resolvers.go            |   7 +-
 web/frontend/src/Systems.root.svelte          | 245 +++++++++++++++-
 web/frontend/src/generic/PlotGrid.svelte      |   4 +-
 .../src/generic/plots/MetricPlot.svelte       |   2 +-
 web/frontend/src/generic/utils.js             |  15 +-
 web/frontend/src/systems/NodeList.svelte      | 271 ++++--------------
 web/frontend/src/systems/NodeOverview.svelte  | 243 +++-------------
 .../src/systems/nodelist/NodeInfo.svelte      |   2 +-
 .../src/systems/nodelist/NodeListRow.svelte   |   6 +-
 9 files changed, 350 insertions(+), 445 deletions(-)

diff --git a/internal/graph/schema.resolvers.go b/internal/graph/schema.resolvers.go
index 58d664b..73090a8 100644
--- a/internal/graph/schema.resolvers.go
+++ b/internal/graph/schema.resolvers.go
@@ -438,7 +438,7 @@ func (r *queryResolver) NodeMetrics(ctx context.Context, cluster string, nodes [
 
 	data, err := metricDataDispatcher.LoadNodeData(cluster, metrics, nodes, scopes, from, to, ctx)
 	if err != nil {
-		log.Warn("Error while loading node data")
+		log.Warn("error while loading node data")
 		return nil, err
 	}
 
@@ -448,7 +448,10 @@ func (r *queryResolver) NodeMetrics(ctx context.Context, cluster string, nodes [
 			Host:    hostname,
 			Metrics: make([]*model.JobMetricWithName, 0, len(metrics)*len(scopes)),
 		}
-		host.SubCluster, _ = archive.GetSubClusterByNode(cluster, hostname)
+		host.SubCluster, err = archive.GetSubClusterByNode(cluster, hostname)
+		if err != nil {
+			log.Warnf("error in nodeMetrics resolver: %s", err)
+		}
 
 		for metric, scopedMetrics := range metrics {
 			for _, scopedMetric := range scopedMetrics {
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index baef2d0..8ff25c8 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -9,36 +9,259 @@
  -->
 
 <script>
+  import { getContext } from "svelte";
+  import { queryStore, gql, getContextClient } from "@urql/svelte"
   import {
     Row,
     Col,
     Card,
+    Input,
+    InputGroup,
+    InputGroupText,
+    Icon,
+    Button,
+    Spinner,
   } from "@sveltestrap/sveltestrap";
 
+  import { init, checkMetricsDisabled } from "./generic/utils.js";
   import NodeOverview from "./systems/NodeOverview.svelte";
   import NodeList from "./systems/NodeList.svelte";
+  import MetricSelection from "./generic/select/MetricSelection.svelte";
+  import TimeSelection from "./generic/select/TimeSelection.svelte";
+  import Refresher from "./generic/helper/Refresher.svelte";
 
   export let displayType;
   export let cluster;
   export let from = null;
   export let to = null;
 
+  const { query: initq } = init();
+
   console.assert(
     displayType == "OVERVIEW" || displayType == "LIST",
     "Invalid nodes displayType provided!",
   );
+
+  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 globalMetrics = getContext("globalMetrics");
+  const displayNodeOverview = (displayType === 'OVERVIEW')
+
+  let nodeList;
+  let hostnameFilter = "";
+  let selectedMetric = ccconfig.system_view_selectedMetric || "";
+  let selectedMetrics = ccconfig.node_list_selectedMetrics || ['cpu_load', 'mem_bw', 'acc_utilization', 'net_bytes_in', 'net_bytes_out'];
+  let isMetricsSelectionOpen = false;
+
+  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
+            }
+          }
+        }
+      }
+    }
+  `
+
+  $: nodesQuery = queryStore({
+    client: client,
+    query: nodeQuery,
+    variables: {
+      cluster: cluster,
+      metrics: selectedMetrics,
+      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)
+
+  $: if (displayNodeOverview) {
+    selectedMetrics = [selectedMetric]
+  }
+
+  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.find(
+        (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>
 
-{#if displayType === 'OVERVIEW'}
-  <NodeOverview {cluster} {from} {to}/>
-{:else if displayType === 'LIST'}
-  <NodeList {cluster} {from} {to}/>
-{:else}
-<Row>
-  <Col>
-    <Card color="danger">
-      Unknown displayList type!
-    </Card>
-  </Col>
+<!-- ROW1: Tools-->
+<Row cols={{ xs: 2, lg: 4 }}>
+  {#if $initq.data}
+    <!-- List Metric Select Col-->
+    {#if !displayNodeOverview}
+      <Col>
+        <InputGroup>
+          <InputGroupText><Icon name="graph-up" /></InputGroupText>
+          <InputGroupText>Metrics</InputGroupText>
+          <Button 
+            outline
+            color="secondary"
+            on:click={() => (isMetricsSelectionOpen = true)}
+          >
+            Select for {cluster} ...
+          </Button>
+        </InputGroup>
+      </Col> 
+    {/if}
+    <!-- Node Col-->
+    <Col>
+      <InputGroup>
+        <InputGroupText><Icon name="hdd" /></InputGroupText>
+        <InputGroupText>Find Node(s)</InputGroupText>
+        <Input
+          placeholder="Filter hostname ..."
+          type="text"
+          title="Search with at least three characters ..."
+          bind:value={hostnameFilter}
+        />
+      </InputGroup>
+    </Col>
+    <!-- Range Col-->
+    <Col>
+      <TimeSelection bind:from bind:to />
+    </Col>
+    <!-- Overview Metric Col-->
+    {#if displayNodeOverview}
+      <Col class="mt-2 mt-lg-0">
+        <InputGroup>
+          <InputGroupText><Icon name="graph-up" /></InputGroupText>
+          <InputGroupText>Metric</InputGroupText>
+          <Input type="select" bind:value={selectedMetric}>
+            {#each systemMetrics as metric}
+              <option value={metric.name}
+                >{metric.name} {systemUnits[metric.name] ? "("+systemUnits[metric.name]+")" : ""}</option
+              >
+            {/each}
+          </Input>
+        </InputGroup>
+      </Col>
+    {/if}
+    <!-- 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>
+
+<!-- ROW2: Content-->
+{#if displayType !== "OVERVIEW" && displayType !== "LIST"}
+  <Row>
+    <Col>
+      <Card body color="danger">Unknown displayList type! </Card>
+    </Col>
+  </Row>
+{:else if $nodesQuery.error}
+  <Row>
+    <Col>
+      <Card body color="danger">{$nodesQuery.error.message}</Card>
+    </Col>
+  </Row>
+{:else if $nodesQuery.fetching }
+  <Row>
+    <Col>
+      <Spinner />
+    </Col>
+  </Row>
+{:else if $initialized && $nodesQuery?.data}
+  {#if displayNodeOverview}
+    <!-- ROW2-1: Node Overview (Grid Included)-->
+    <NodeOverview {ccconfig} {cluster} bind:selectedMetric data={filteredData}/>
+
+  {:else}
+    <!-- ROW2-2: Node List-->
+    <Row>
+      <Col>
+        <!-- <NodeList bind:nodesData={$nodesQuery.data} {cluster} {selectedMetrics} {systemUnits} bind:hostnameFilter/> -->
+      </Col>
+    </Row>
+
+    <MetricSelection
+      {cluster}
+      configName="node_list_selectedMetrics"
+      bind:metrics={selectedMetrics}
+      bind:isOpen={isMetricsSelectionOpen}
+    />
+  {/if}
 {/if}
diff --git a/web/frontend/src/generic/PlotGrid.svelte b/web/frontend/src/generic/PlotGrid.svelte
index 3bbee55..a56ffef 100644
--- a/web/frontend/src/generic/PlotGrid.svelte
+++ b/web/frontend/src/generic/PlotGrid.svelte
@@ -22,10 +22,10 @@
 
     function tile(items, itemsPerRow) {
         const rows = []
-        for (let ri = 0; ri < items.length; ri += itemsPerRow) {
+        for (let ri = 0; ri < items?.length; ri += itemsPerRow) {
             const row = []
             for (let ci = 0; ci < itemsPerRow; ci += 1) {
-                if (ri + ci < items.length)
+                if (ri + ci < items?.length)
                     row.push(items[ri + ci])
                 else
                     row.push({ _is_placeholder: true, ri, ci })
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index 09f313c..bf3dd45 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -227,7 +227,7 @@
 
     function update(u) {
       const { left, top } = u.cursor;
-      const width = u.over.querySelector(".u-legend").offsetWidth;
+      const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
       legendEl.style.transform =
         "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
     }
diff --git a/web/frontend/src/generic/utils.js b/web/frontend/src/generic/utils.js
index 57248fc..0e06c0f 100644
--- a/web/frontend/src/generic/utils.js
+++ b/web/frontend/src/generic/utils.js
@@ -303,8 +303,19 @@ export function stickyHeader(datatableHeaderSelector, updatePading) {
 
 export function checkMetricDisabled(m, c, s) { // [m]etric, [c]luster, [s]ubcluster
     const metrics = getContext("globalMetrics");
-    const result = metrics?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s)
-    return !result
+    const available = metrics?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s)
+    // Return inverse logic
+    return !available
+}
+
+export function checkMetricsDisabled(ma, c, s) { // [m]etric[a]rray, [c]luster, [s]ubcluster
+    let result = {};
+    const metrics = getContext("globalMetrics");
+    ma.forEach((m) => {
+        // Return named inverse logic: !available
+        result[m] = !(metrics?.find((gm) => gm.name === m)?.availability?.find((av) => av.cluster === c)?.subClusters?.includes(s))
+    });
+    return result
 }
 
 export function getStatsItems() {
diff --git a/web/frontend/src/systems/NodeList.svelte b/web/frontend/src/systems/NodeList.svelte
index a5538e9..935a068 100644
--- a/web/frontend/src/systems/NodeList.svelte
+++ b/web/frontend/src/systems/NodeList.svelte
@@ -1,5 +1,10 @@
 <!--
-    @component Main jobList component; lists jobs according to set filters
+    @component Cluster Per Node List component; renders current state of SELECTABLE metrics for ALL nodes
+
+    Properties:
+    - `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]
 
     Properties:
     - `sorting Object?`: Currently active sorting [Default: {field: "startTime", type: "col", order: "DESC"}]
@@ -14,134 +19,46 @@
  -->
 
 <script>
-  import { getContext } from "svelte";
   import {
-    queryStore,
     gql,
-    getContextClient,
     mutationStore,
   } from "@urql/svelte";
-  import { Row, Table, Card, Spinner } from "@sveltestrap/sveltestrap";
-  import { stickyHeader } from "../generic/utils.js";
-  import Pagination from "../generic/joblist/Pagination.svelte";
-  import JobListRow from "../generic/joblist/JobListRow.svelte";
+  import { Row, Table } from "@sveltestrap/sveltestrap";
+  import {
+    checkMetricsDisabled,
+    stickyHeader 
+  } from "../generic/utils.js";
+  import NodeListRow from "./nodelist/NodeListRow.svelte";
 
-  const ccconfig = getContext("cc-config"),
-    initialized = getContext("initialized"),
-    globalMetrics = getContext("globalMetrics");
+  export let cluster;
+  export let nodesData = null;
+  export let selectedMetrics = [];
+  export let systemUnits = null;
+  export let hostnameFilter = "";
 
-  export let sorting = { field: "startTime", type: "col", order: "DESC" };
-  export let matchedJobs = 0;
-  export let metrics = ccconfig.plot_list_selectedMetrics;
-  export let showFootprint;
+  // Always use ONE BIG list, but: Make copyable markers -> Nodeinfo ! (like in markdown)
 
-  let usePaging = ccconfig.job_list_usePaging
-  let itemsPerPage = usePaging ? ccconfig.plot_list_jobsPerPage : 10;
-  let page = 1;
-  let paging = { itemsPerPage, page };
-  let filter = [];
-  let triggerMetricRefresh = false;
-
-  function getUnit(m) {
-    const rawUnit = globalMetrics.find((gm) => gm.name === m)?.unit
-    return (rawUnit?.prefix ? rawUnit.prefix : "") + (rawUnit?.base ? rawUnit.base : "")
-  } 
-
-  const client = getContextClient();
-  const query = gql`
-    query (
-      $filter: [JobFilter!]!
-      $sorting: OrderByInput!
-      $paging: PageRequest!
-    ) {
-      jobs(filter: $filter, order: $sorting, page: $paging) {
-        items {
-          id
-          jobId
-          user
-          project
-          cluster
-          subCluster
-          startTime
-          duration
-          numNodes
-          numHWThreads
-          numAcc
-          walltime
-          resources {
-            hostname
-          }
-          SMT
-          exclusive
-          partition
-          arrayJobId
-          monitoringStatus
-          state
-          tags {
-            id
-            type
-            name
-            scope
-          }
-          userData {
-            name
-          }
-          metaData
-          footprint {
-            name
-            stat
-            value
-          }
-        }
-        count
-        hasNextPage
-      }
-    }
-  `;
-
-  $: jobsStore = queryStore({
-    client: client,
-    query: query,
-    variables: { paging, sorting, filter },
-  });
-
-  let jobs = []
-  $: if ($initialized && $jobsStore.data) {
-    jobs = [...$jobsStore.data.jobs.items]
-  }
-
-  $: matchedJobs = $jobsStore.data != null ? $jobsStore.data.jobs.count : -1;
-
-  // Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
-  export function refreshJobs() {
-    jobsStore = queryStore({
-      client: client,
-      query: query,
-      variables: { paging, sorting, filter },
-      requestPolicy: "network-only",
-    });
-  }
-
-  export function refreshAllMetrics() {
-    // Refresh Job Metrics (Downstream will only query for running jobs)
-    triggerMetricRefresh = true
-    setTimeout(function () {
-      triggerMetricRefresh = false;
-    }, 100);
-  }
-
-  // (Re-)query and optionally set new filters; Query will be started reactively.
-  export function queryJobs(filters) {
-    if (filters != null) {
-      let minRunningFor = ccconfig.plot_list_hideShortRunningJobs;
-      if (minRunningFor && minRunningFor > 0) {
-        filters.push({ minRunningFor });
-      }
-      filter = filters;
-    }
-    page = 1;
-    paging = paging = { page, itemsPerPage };
-  }
+  $: nodes = nodesData.nodeMetrics
+    .filter(
+      (h) =>
+        h.host.includes(hostnameFilter) &&
+        h.metrics.some(
+          (m) => selectedMetrics.includes(m.name) && m.scope == "node",
+        ),
+    )
+    .map((h) => ({
+      host: h.host,
+      subCluster: h.subCluster,
+      data: h.metrics.find(
+        (m) => selectedMetrics.includes(m.name) && m.scope == "node",
+      ),
+      disabled: checkMetricsDisabled(
+        selectedMetrics,
+        cluster,
+        h.subCluster,
+      ),
+    }))
+    .sort((a, b) => a.host.localeCompare(b.host))
 
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
@@ -155,53 +72,19 @@
     });
   };
 
-  function updateConfiguration(value, page) {
+  function updateConfiguration(value) {
     updateConfigurationMutation({
-      name: "plot_list_jobsPerPage",
+      name: "node_list_selectedMetrics",
       value: value,
     }).subscribe((res) => {
       if (res.fetching === false && !res.error) {
-        jobs = [] // Empty List
-        paging = { itemsPerPage: value, page: page }; // Trigger reload of jobList
+        console.log('Selected Metrics for Node List Updated')
       } else if (res.fetching === false && res.error) {
         throw res.error;
       }
     });
   }
 
-  if (!usePaging) {
-    let scrollMultiplier = 1
-    window.addEventListener('scroll', () => {
-      let {
-        scrollTop,
-        scrollHeight,
-        clientHeight
-      } = document.documentElement;
-
-      // Add 100 px offset to trigger load earlier
-      if (scrollTop + clientHeight >= scrollHeight - 100 && $jobsStore.data != null && $jobsStore.data.jobs.hasNextPage) {
-        let pendingPaging = { ...paging }
-        scrollMultiplier += 1
-        pendingPaging.itemsPerPage = itemsPerPage * scrollMultiplier
-        paging = pendingPaging
-      };
-    });
-  };
-
-  let plotWidth = null;
-  let tableWidth = null;
-  let jobInfoColumnWidth = 250;
-
-  $: if (showFootprint) {
-    plotWidth = Math.floor(
-      (tableWidth - jobInfoColumnWidth) / (metrics.length + 1) - 10,
-    );
-  } else {
-    plotWidth = Math.floor(
-      (tableWidth - jobInfoColumnWidth) / metrics.length - 10,
-    );
-  }
-
   let headerPaddingTop = 0;
   stickyHeader(
     ".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
@@ -210,89 +93,43 @@
 </script>
 
 <Row>
-  <div class="col cc-table-wrapper" bind:clientWidth={tableWidth}>
+  <div class="col cc-table-wrapper">
     <Table cellspacing="0px" cellpadding="0px">
       <thead>
         <tr>
           <th
             class="position-sticky top-0"
             scope="col"
-            style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px"
+            style="padding-top: {headerPaddingTop}px"
           >
-            Job Info
+            Node Info
           </th>
-          {#if showFootprint}
-            <th
-              class="position-sticky top-0"
-              scope="col"
-              style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
-            >
-              Job Footprint
-            </th>
-          {/if}
-          {#each metrics as metric (metric)}
+
+          {#each selectedMetrics as metric (metric)}
             <th
               class="position-sticky top-0 text-center"
               scope="col"
-              style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
+              style="padding-top: {headerPaddingTop}px"
             >
-              {metric}
-              {#if $initialized}
-                ({getUnit(metric)})
-              {/if}
+              {metric} ({systemUnits[metric]})
             </th>
           {/each}
         </tr>
       </thead>
       <tbody>
-        {#if $jobsStore.error}
-          <tr>
-            <td colspan={metrics.length + 1}>
-              <Card body color="danger" class="mb-3"
-                ><h2>{$jobsStore.error.message}</h2></Card
-              >
-            </td>
-          </tr>
+        {#each nodes as node (node)}
+          {node}
+          <!-- <NodeListRow {node} {selectedMetrics} /> -->
         {:else}
-          {#each jobs as job (job)}
-            <JobListRow bind:triggerMetricRefresh {job} {metrics} {plotWidth} {showFootprint} />
-          {:else}
-            <tr>
-              <td colspan={metrics.length + 1}> No jobs found </td>
-            </tr>
-          {/each}
-        {/if}
-        {#if $jobsStore.fetching || !$jobsStore.data}
           <tr>
-            <td colspan={metrics.length + 1}>
-              <div style="text-align:center;">
-                <Spinner secondary />
-              </div>
-            </td>
+            <td>No nodes found </td>
           </tr>
-        {/if}
+        {/each}
       </tbody>
     </Table>
   </div>
 </Row>
 
-{#if usePaging}
-  <Pagination
-    bind:page
-    {itemsPerPage}
-    itemText="Jobs"
-    totalItems={matchedJobs}
-    on:update-paging={({ detail }) => {
-      if (detail.itemsPerPage != itemsPerPage) {
-        updateConfiguration(detail.itemsPerPage.toString(), detail.page);
-      } else {
-        jobs = []
-        paging = { itemsPerPage: detail.itemsPerPage, page: detail.page };
-      }
-    }}
-  />
-{/if}
-
 <style>
   .cc-table-wrapper {
     overflow: initial;
diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte
index b5d1d0b..5bf6268 100644
--- a/web/frontend/src/systems/NodeOverview.svelte
+++ b/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>
diff --git a/web/frontend/src/systems/nodelist/NodeInfo.svelte b/web/frontend/src/systems/nodelist/NodeInfo.svelte
index 0aee223..07fd993 100644
--- a/web/frontend/src/systems/nodelist/NodeInfo.svelte
+++ b/web/frontend/src/systems/nodelist/NodeInfo.svelte
@@ -1,5 +1,5 @@
 <!--
-    @component Displays job metaData, serves links to detail pages
+    @component Displays node info, serves link to signle node page
 
     Properties:
     - `job Object`: The Job Object (GraphQL.Job)
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index 1832a94..3feac5c 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -1,5 +1,5 @@
 <!-- 
-    @component Data row for a single job displaying metric plots
+    @component Data row for a single node displaying metric plots
 
     Properties:
     - `job Object`: The job object (GraphQL.Job)
@@ -15,9 +15,9 @@
   import { getContext } from "svelte";
   import { Card, Spinner } from "@sveltestrap/sveltestrap";
   import { maxScope, checkMetricDisabled } from "../../generic/utils.js";
-  import JobInfo from "./NodeInfo.svelte";
   import MetricPlot from "../../generic/plots/MetricPlot.svelte";
-  import JobFootprint from "../../generic/helper/JobFootprint.svelte";
+  
+  import NodeInfo from "./NodeInfo.svelte";
 
   export let job;
   export let metrics;