simplify plotGrid, add cancel to metricSelect, improve metricPlot render logic

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>

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>

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>

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}