From 3dfeabcec65cd1fa20a1ac5c1fe12c29e0dd8903 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 16 Oct 2024 12:41:15 +0200
Subject: [PATCH] simplify plotGrid, add cancel to metricSelect, improve
 metricPlot render logic

---
 web/frontend/src/Analysis.root.svelte         |  2 -
 web/frontend/src/Job.root.svelte              |  1 -
 web/frontend/src/Node.root.svelte             |  1 -
 web/frontend/src/Status.root.svelte           |  1 -
 web/frontend/src/Systems.root.svelte          |  9 ++-
 web/frontend/src/User.root.svelte             |  1 -
 web/frontend/src/generic/PlotGrid.svelte      | 45 ++---------
 .../src/generic/plots/MetricPlot.svelte       | 44 +++++------
 .../src/generic/select/MetricSelection.svelte |  1 +
 web/frontend/src/systems/NodeList.svelte      |  4 +-
 web/frontend/src/systems/NodeOverview.svelte  | 75 ++++++++-----------
 .../src/systems/nodelist/NodeInfo.svelte      | 20 ++---
 .../src/systems/nodelist/NodeListRow.svelte   | 40 ++++------
 13 files changed, 90 insertions(+), 154 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index d287cf3..c6dc424 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -519,7 +519,6 @@
     <Col>
       <PlotGrid
         let:item
-        renderFor="analysis"
         items={metricsInHistograms.map((metric) => ({
           metric,
           ...binsFromFootprint(
@@ -563,7 +562,6 @@
       <PlotGrid
         let:item
         let:width
-        renderFor="analysis"
         items={metricsInScatterplots.map(([m1, m2]) => ({
           m1,
           f1: $footprintsQuery.data.footprints.metrics.find(
diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index bb48479..04e9cf9 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -351,7 +351,6 @@
     {:else if $initq?.data && $jobMetrics?.data?.jobMetrics}
       <PlotGrid
         let:item
-        renderFor="job"
         items={orderAndMap(
           groupByScope($jobMetrics.data.jobMetrics),
           selectedMetrics,
diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index 8d0e749..bbbcb0f 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -191,7 +191,6 @@
     {:else}
       <PlotGrid
         let:item
-        renderFor="node"
         itemsPerRow={ccconfig.plot_view_plotsPerRow}
         items={$nodeMetricsData.data.nodeMetrics[0].metrics
           .map((m) => ({
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index e49d11a..65d3091 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -645,7 +645,6 @@
     {#key $mainQuery.data.stats[0].histMetrics}
       <PlotGrid
         let:item
-        renderFor="user"
         items={$mainQuery.data.stats[0].histMetrics}
         itemsPerRow={2}
       >
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index f2ef4ea..e1da89f 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -45,7 +45,7 @@
   if (from == null || to == null) {
     to = new Date(Date.now());
     from = new Date(to.getTime());
-    from.setHours(from.getHours() - 4);
+    from.setHours(from.getHours() - 2);
   }
 
   const initialized = getContext("initialized");
@@ -61,6 +61,7 @@
   // Todo: Add Idle State Filter (== No allocated Jobs)
   // Todo: NodeList: Mindestens Accelerator Scope ... "Show Detail" Switch?
   // Todo: Review performance // observed high client-side load frequency
+  //       Is Svelte {#each} -> <MetricPlot/> -> onMount() related : Cannot be skipped ...
   
   const client = getContextClient();
   const nodeQuery = gql`
@@ -245,13 +246,13 @@
       <Spinner />
     </Col>
   </Row>
-{:else if $initialized && $nodesQuery?.data}
+{:else if filteredData?.length > 0}
   {#if displayNodeOverview}
     <!-- ROW2-1: Node Overview (Grid Included)-->
-    <NodeOverview {cluster} {ccconfig} data={filteredData} bind:selectedMetric/>
+    <NodeOverview {cluster} {ccconfig} data={filteredData}/>
   {:else}
     <!-- ROW2-2: Node List (Grid Included)-->
-    <NodeList {cluster} {selectedMetrics} {systemUnits} data={filteredData}/>
+    <NodeList {cluster} {selectedMetrics} {systemUnits} data={filteredData} bind:selectedMetric/>
   {/if}
 {/if}
 
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 57f2f28..1d911ba 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -267,7 +267,6 @@
     {#key $stats.data.jobsStatistics[0].histMetrics}
       <PlotGrid
         let:item
-        renderFor="user"
         items={$stats.data.jobsStatistics[0].histMetrics}
         itemsPerRow={3}
       >
diff --git a/web/frontend/src/generic/PlotGrid.svelte b/web/frontend/src/generic/PlotGrid.svelte
index a56ffef..5152e0d 100644
--- a/web/frontend/src/generic/PlotGrid.svelte
+++ b/web/frontend/src/generic/PlotGrid.svelte
@@ -4,7 +4,6 @@
     Properties:
     - `itemsPerRow Number`: Elements to render per row
     - `items [Any]`: List of plot components to render
-    - `renderFor String`:   If 'job', filter disabled metrics
  -->
 
  <script>
@@ -15,43 +14,13 @@
 
     export let itemsPerRow
     export let items
-    export let renderFor
-
-    let rows = [];
-    const isPlaceholder = x => x._is_placeholder === true;
-
-    function tile(items, itemsPerRow) {
-        const rows = []
-        for (let ri = 0; ri < items?.length; ri += itemsPerRow) {
-            const row = []
-            for (let ci = 0; ci < itemsPerRow; ci += 1) {
-                if (ri + ci < items?.length)
-                    row.push(items[ri + ci])
-                else
-                    row.push({ _is_placeholder: true, ri, ci })
-            }
-            rows.push(row)
-        }
-        return rows
-    }
-
-    $: if (renderFor === 'job') {
-        rows = tile(items.filter(item => item.disabled === false), itemsPerRow)
-    } else {
-        rows = tile(items, itemsPerRow)
-    }
-
 </script>
 
-{#each rows as row}
-  <Row cols={{ xs: 1, sm: 1, md: 2, lg: itemsPerRow}}>
-    {#each row as item (item)}
-      <Col class="px-1">
-        {#if !isPlaceholder(item)}
-          <slot item={item}/>
-        {/if}
-      </Col>
-    {/each}
-  </Row>
-{/each}
+<Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>
+  {#each items as item}
+    <Col class="px-1">
+      <slot {item}/>
+    </Col>
+  {/each}
+</Row>
 
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index bf3dd45..d3af6f9 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -11,7 +11,7 @@
     - `series [GraphQL.Series]`: The metric data object
     - `useStatsSeries Bool?`: If this plot uses the statistics Min/Max/Median representation; automatically set to according bool [Default: null]
     - `statisticsSeries [GraphQL.StatisticsSeries]?`: Min/Max/Median representation of metric data [Default: null]
-    - `cluster GraphQL.Cluster`: Cluster Object of the parent job
+    - `cluster String`: Cluster name of the parent job / data
     - `subCluster String`: Name of the subCluster of the parent job
     - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly [Default: false]
     - `forNode Bool?`: If this plot is used for node data display; will ren[data, err := metricdata.LoadNodeData(cluster, metrics, nodes, scopes, from, to, ctx)](https://github.com/ClusterCockpit/cc-backend/blob/9fe7cdca9215220a19930779a60c8afc910276a3/internal/graph/schema.resolvers.go#L391-L392)der x-axis as negative time with $now as maximum [Default: false]
@@ -117,13 +117,13 @@
 
   export let metric;
   export let scope = "node";
-  export let width = null;
+  export let width = 0;
   export let height = 300;
   export let timestep;
   export let series;
   export let useStatsSeries = null;
   export let statisticsSeries = null;
-  export let cluster;
+  export let cluster = "";
   export let subCluster;
   export let isShared = false;
   export let forNode = false;
@@ -522,17 +522,9 @@
   }
 
   onMount(() => {
-    // Setup Wrapper
-    if (series[0].data.length > 0) {
-      if (forNode) {
-        plotWrapper.style.paddingTop = "0.5rem"
-        plotWrapper.style.paddingBottom = "0.5rem"
-      }
-      plotWrapper.style.backgroundColor = backgroundColor();
-      plotWrapper.style.borderRadius = "5px";
+    if (plotWrapper) {
+      render(width, height);
     }
-    // Init Plot
-    render(width, height);
   });
 
   onDestroy(() => {
@@ -540,22 +532,20 @@
     if (uplot) uplot.destroy();
   });
 
-  // This updates it on all size changes
-  // Condition for reactive triggering (eg scope change)
-  $: if (series[0].data.length > 0) {
+  // This updates plot on all size changes if wrapper (== data) exists
+  $: if (plotWrapper) {
     onSizeChange(width, height);
   }
 
 </script>
 
-<!-- Define Wrapper and NoData Card within $width -->
-<div bind:clientWidth={width}>
-  {#if series[0].data.length > 0}
-    <div bind:this={plotWrapper}/>
-  {:else}
-    <Card class="mx-4" body color="warning"
-      >Cannot render plot: No series data returned for <code>{metric}</code></Card
-    >
-  {/if}
-</div>
-
+<!-- Define $width Wrapper and NoData Card -->
+{#if series[0].data.length > 0}
+  <div bind:this={plotWrapper} bind:clientWidth={width}
+        style="background-color: {backgroundColor()};" class={forNode ? 'py-2 rounded' : 'rounded'}
+  />
+{:else}
+  <Card body color="warning" class="mx-4"
+    >Cannot render plot: No series data returned for <code>{metric}</code></Card
+  >
+{/if}
diff --git a/web/frontend/src/generic/select/MetricSelection.svelte b/web/frontend/src/generic/select/MetricSelection.svelte
index b65b407..71b42b8 100644
--- a/web/frontend/src/generic/select/MetricSelection.svelte
+++ b/web/frontend/src/generic/select/MetricSelection.svelte
@@ -178,6 +178,7 @@
   </ModalBody>
   <ModalFooter>
     <Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
+    <Button color="secondary" on:click={() => (isOpen = !isOpen)}>Cancel</Button>
   </ModalFooter>
 </Modal>
 
diff --git a/web/frontend/src/systems/NodeList.svelte b/web/frontend/src/systems/NodeList.svelte
index 54f7530..b8eacdf 100644
--- a/web/frontend/src/systems/NodeList.svelte
+++ b/web/frontend/src/systems/NodeList.svelte
@@ -36,7 +36,7 @@
           <th
             class="position-sticky top-0 text-capitalize"
             scope="col"
-            style="padding-top: {headerPaddingTop}px"
+            style="padding-top: {headerPaddingTop}px;"
           >
             {cluster} Node Info
           </th>
@@ -53,7 +53,7 @@
         </tr>
       </thead>
       <tbody>
-        {#each data as nodeData (nodeData)}
+        {#each data as nodeData (nodeData.host)}
           <NodeListRow {nodeData} {cluster} {selectedMetrics}/>
         {:else}
           <tr>
diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte
index 7ad711d..9e02f10 100644
--- a/web/frontend/src/systems/NodeOverview.svelte
+++ b/web/frontend/src/systems/NodeOverview.svelte
@@ -9,9 +9,7 @@
  -->
 
  <script>
-  import { getContext } from "svelte";
-  import { Card } from "@sveltestrap/sveltestrap";
-  import PlotGrid from "../generic/PlotGrid.svelte";
+  import { Row, Col, Card } from "@sveltestrap/sveltestrap";
   import MetricPlot from "../generic/plots/MetricPlot.svelte";
 
   export let ccconfig = null;
@@ -19,45 +17,36 @@
   export let cluster = "";
   export let selectedMetric = "";
 
-  const clusters = getContext("clusters");
 </script>
 
-<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[0]}
-    {#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
-      >
-    {:else}
-      <MetricPlot
-        timestep={item.data[0].metric.timestep}
-        series={item.data[0].metric.series}
-        metric={item.data[0].name}
-        cluster={clusters.find((c) => c.name == cluster)}
-        subCluster={item.subCluster}
-        forNode={true}
-      />
-    {/if}
-  {:else}
-    <Card
-      style="margin-left: 2rem;margin-right: 2rem;"
-      body
-      color="warning"
-      >No dataset returned for <code>{selectedMetric}</code></Card
-    >
-  {/if}
-</PlotGrid>
+<!-- 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}
+    </Col>
+  {/each}
+</Row>
\ No newline at end of file
diff --git a/web/frontend/src/systems/nodelist/NodeInfo.svelte b/web/frontend/src/systems/nodelist/NodeInfo.svelte
index 2a40c7a..d0ea2b9 100644
--- a/web/frontend/src/systems/nodelist/NodeInfo.svelte
+++ b/web/frontend/src/systems/nodelist/NodeInfo.svelte
@@ -56,7 +56,7 @@
 
 </script>
 
-<Card class="pb-2">
+<Card class="pb-3">
   <CardHeader class="d-inline-flex justify-content-between align-items-end">
     <div>
       <h5 class="mb-0">
@@ -106,7 +106,7 @@
       <hr class="mt-0 mb-3"/>
       <p>
         {#if $nodeJobsData.data.jobs.count > 0}
-          <InputGroup class="justify-content-between">
+          <InputGroup size="sm" class="justify-content-between">
             <InputGroupText>
               <Icon name="activity"/>
             </InputGroupText>
@@ -116,11 +116,11 @@
             <Input class="flex-grow-1" style="background-color: white;" type="text" value="{$nodeJobsData.data.jobs.count} Jobs" disabled />
             <a title="Show jobs running on this node" href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-primary" role="button" aria-disabled="true" >
               <Icon name="view-list" /> 
-              Show List
+              List
             </a>
           </InputGroup>
         {:else}
-          <InputGroup class="justify-content-between">
+          <InputGroup size="sm" class="justify-content-between">
             <InputGroupText>
               <Icon name="activity" />
             </InputGroupText>
@@ -132,30 +132,30 @@
         {/if}
       </p>
       <p>
-        <InputGroup class="justify-content-between">
+        <InputGroup size="sm" class="justify-content-between">
           <InputGroupText>
             <Icon name="people"/>
           </InputGroupText>
           <InputGroupText class="flex-fill">
-            Users on Node
+            Show Users on Node
           </InputGroupText>
           <a title="Show jobs running on this node" href="/monitoring/users/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-primary" role="button" aria-disabled="true" >
             <Icon name="view-list" /> 
-            Show List
+            List
           </a>
         </InputGroup>
       </p>
       <p>
-        <InputGroup class="justify-content-between">
+        <InputGroup size="sm" class="justify-content-between">
           <InputGroupText>
             <Icon name="journals"/>
           </InputGroupText>
           <InputGroupText class="flex-fill">
-            Projects on Node
+            Show Projects on Node
           </InputGroupText>
           <a title="Show projects active on this node" href="/monitoring/projects/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-primary" role="button" aria-disabled="true" >
             <Icon name="view-list" /> 
-            Show List
+            List
           </a>
         </InputGroup>
       </p>
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index 5e9a31b..a510b0e 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -24,32 +24,24 @@
   <td>
     <NodeInfo {cluster} subCluster={nodeData.subCluster} hostname={nodeData.host} />
   </td>
-  {#each sortOrder(nodeData?.data) as metricData}
+  {#each sortOrder(nodeData?.data) as metricData (metricData.name)}
     <td>
-      {#if metricData}
-        {#if nodeData?.disabled[metricData.name]}
-          <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
-            >Metric disabled for subcluster <code
-              >{metricData.name}:{nodeData.subCluster}</code
-            ></Card
-          >
-        {:else}
-          <MetricPlot
-            timestep={metricData.metric.timestep}
-            series={metricData.metric.series}
-            metric={metricData.name}
-            {cluster}
-            subCluster={nodeData.subCluster}
-            forNode={true}
-          />
-        {/if}
-      {:else}
-        <Card
-          style="margin-left: 2rem;margin-right: 2rem;"
-          body
-          color="warning"
-          >No dataset returned for <code>{metricData.name}</code></Card
+      {#if nodeData?.disabled[metricData.name]}
+        <Card body class="mx-3" color="info"
+          >Metric disabled for subcluster <code
+            >{metricData.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}
+          {cluster}
+          subCluster={nodeData.subCluster}
+          forNode
+        />
       {/if}
     </td>
   {/each}