From c8068f45eb05d7058ed2a26c96b2d1f0726e1ee1 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 19 Jun 2023 16:11:16 +0200
Subject: [PATCH] Rework disabled metrics, fix systems

- Unify warning card texts
- Broader use of checkMetricDisabled function
---
 web/frontend/src/Analysis.root.svelte    |  3 +-
 web/frontend/src/Job.root.svelte         |  7 ++-
 web/frontend/src/Node.root.svelte        | 22 +++++--
 web/frontend/src/PlotTable.svelte        | 11 +++-
 web/frontend/src/Systems.root.svelte     | 32 +++++------
 web/frontend/src/joblist/Row.svelte      | 73 ++++++------------------
 web/frontend/src/plots/MetricPlot.svelte |  2 +-
 7 files changed, 62 insertions(+), 88 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 42100cf..2e6f5b5 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -227,12 +227,13 @@
             <PlotTable
                 let:item
                 let:width
+                renderFor="analysis"
                 items={metricsInHistograms.map(metric => ({ metric, ...binsFromFootprint(
                     $footprintsQuery.data.footprints.nodehours,
                     $footprintsQuery.data.footprints.metrics.find(f => f.metric == metric).data, numBins) }))}
                 itemsPerRow={ccconfig.plot_view_plotsPerRow}>
-                <h4>Average Distribution of '{item.metric}'</h4>
 
+                <h4>Average Distribution of '{item.metric}'</h4>
                 <Histogram
                     width={width} height={250}
                     min={item.min} max={item.max}
diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index 9c74b78..438a277 100644
--- a/web/frontend/src/Job.root.svelte
+++ b/web/frontend/src/Job.root.svelte
@@ -102,7 +102,7 @@
             data: grouped.find((group) => 
                 group[0].name == metric
             ),
-            disabled: checkMetricDisabled(metric, $initq.data.job.cluster, $initq.data.job.subCluster) 
+            disabled: checkMetricDisabled(metric, $initq.data.job.cluster, $initq.data.job.subCluster)
         }))
 </script>
 
@@ -140,7 +140,7 @@
                 width={polarPlotSize} height={polarPlotSize}
                 metrics={ccconfig[`job_view_polarPlotMetrics:${$initq.data.job.cluster}`] || ccconfig[`job_view_polarPlotMetrics`]}
                 cluster={$initq.data.job.cluster}
-                jobMetrics={$jobMetrics.data.jobMetrics} />
+                jobMetrics={$jobMetrics.data.jobMetrics}/>
         </Col>
         <Col>
             <Roofline
@@ -190,6 +190,7 @@
             <PlotTable
                 let:item
                 let:width
+                renderFor="job"
                 items={orderAndMap(groupByScope($jobMetrics.data.jobMetrics), selectedMetrics)}
                 itemsPerRow={ccconfig.plot_view_plotsPerRow}>
                 {#if item.data}
@@ -203,7 +204,7 @@
                         width={width}
                         isShared={($initq.data.job.exclusive != 1)}/>
                 {:else}
-                    <Card body color="warning">No data for <code>{item.metric}</code></Card>
+                    <Card body color="warning">No dataset returned for <code>{item.metric}</code></Card>
                 {/if}
             </PlotTable>
         {/if}
diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index a805e67..ef4a00c 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { init } from './utils.js'
+    import { init, checkMetricDisabled } from './utils.js'
     import { Row, Col, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
     import { queryStore, gql, getContextClient } from '@urql/svelte'
     import TimeSelection from './filters/TimeSelection.svelte'
@@ -100,13 +100,23 @@
             <PlotTable
                 let:item
                 let:width
+                renderFor="node"
                 itemsPerRow={ccconfig.plot_view_plotsPerRow}
-                items={$nodesQuery.data.nodeMetrics[0].metrics.sort((a, b) => a.name.localeCompare(b.name))}>
+                items={$nodesQuery.data.nodeMetrics[0].metrics
+                .map(m => ({ ...m, disabled: checkMetricDisabled(m.name, cluster, $nodesQuery.data.nodeMetrics[0].subCluster)}))
+                .sort((a, b) => a.name.localeCompare(b.name))}>
+
                 <h4 style="text-align: center; padding-top:15px;">{item.name} {metricUnits[item.name]}</h4>
-                <MetricPlot
-                    width={width} height={300} metric={item.name} timestep={item.metric.timestep}
-                    cluster={clusters.find(c => c.name == cluster)} subCluster={$nodesQuery.data.nodeMetrics[0].subCluster}
-                    series={item.metric.series} />
+                {#if item.disabled === false && item.metric}
+                    <MetricPlot
+                        width={width} height={300} metric={item.name} timestep={item.metric.timestep}
+                        cluster={clusters.find(c => c.name == cluster)} subCluster={$nodesQuery.data.nodeMetrics[0].subCluster}
+                        series={item.metric.series} />
+                {:else if item.disabled === true && item.metric}
+                    <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info">Metric disabled for subcluster <code>{item.name}:{$nodesQuery.data.nodeMetrics[0].subCluster}</code></Card>
+                {:else}
+                    <Card style="margin-left: 2rem;margin-right: 2rem;" body color="warning">No dataset returned for <code>{item.name}</code></Card>
+                {/if}
             </PlotTable>
         {/if}
     </Col>
diff --git a/web/frontend/src/PlotTable.svelte b/web/frontend/src/PlotTable.svelte
index d46eb19..854784d 100644
--- a/web/frontend/src/PlotTable.svelte
+++ b/web/frontend/src/PlotTable.svelte
@@ -10,7 +10,9 @@
     export let itemsPerRow
     export let items
     export let padding = 10
+    export let renderFor
 
+    let rows = []
     let tableWidth = 0
     const isPlaceholder = x => x._is_placeholder === true
 
@@ -30,8 +32,13 @@
         return rows
     }
 
-    // Analysis Implements PlotTable: Disable flag can not be present, add to row if not defined explicitly (Helps with systems view also) 
-    $: rows = tile(items.filter(item => (item.disabled !== null && item.disabled === false)), itemsPerRow)
+
+    $: if (renderFor === 'job') {
+        rows = tile(items.filter(item => item.disabled === false), itemsPerRow)
+    } else {
+        rows = tile(items, itemsPerRow)
+    }
+
     $: plotWidth = (tableWidth / itemsPerRow) - (padding * itemsPerRow)
 </script>
 
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index 899fb4b..fcca95e 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { init } from './utils.js'
+    import { init, checkMetricDisabled } from './utils.js'
     import { Row, Col, Input, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
     import { queryStore, gql, getContextClient } from '@urql/svelte'
     import TimeSelection from './filters/TimeSelection.svelte'
@@ -114,25 +114,21 @@
             <PlotTable
                 let:item
                 let:width
+                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(function (h) {
-                        let thisConfig = metricConfig(cluster, selectedMetric)
-                        let thisSCIndex = thisConfig.subClusters.findIndex(sc => sc.name == h.subCluster)
-                        // Metric remove == true
-                        if (thisSCIndex >= 0) {
-                            if (thisConfig.subClusters[thisSCIndex].remove == true) {
-                                return { host: h.host, subCluster: h.subCluster, data: null, removed: true }
-                            }
-                        }
-                        // Else
-                        return { host: h.host, subCluster: h.subCluster, data: h.metrics.find(m => m.name == selectedMetric && m.scope == 'node'), removed: false }
-                    })
-                    .sort((a, b) => a.host.localeCompare(b.host))}>
+                    .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></h4>
-                    {#if item.removed == false && item.data != null}
+                    {#if item.disabled === false && item.data}
                         <MetricPlot
                             width={width}
                             height={plotHeight}
@@ -141,10 +137,10 @@
                             metric={item.data.name}
                             cluster={clusters.find(c => c.name == cluster)}
                             subCluster={item.subCluster} />
-                    {:else if item.removed == true && item.data == null}
-                        <Card body color="info">Metric '{ selectedMetric }' disabled for subcluster '{ item.subCluster }'</Card>
+                    {: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 body color="warning">Missing Full Dataset</Card>
+                        <Card style="margin-left: 2rem;margin-right: 2rem;" body color="warning">No dataset returned for <code>{selectedMetric}</code></Card>
                     {/if}
             </PlotTable>
         {/if}
diff --git a/web/frontend/src/joblist/Row.svelte b/web/frontend/src/joblist/Row.svelte
index b4375bc..35910bc 100644
--- a/web/frontend/src/joblist/Row.svelte
+++ b/web/frontend/src/joblist/Row.svelte
@@ -14,7 +14,7 @@
     import { Card, Spinner } from "sveltestrap";
     import MetricPlot from "../plots/MetricPlot.svelte";
     import JobInfo from "./JobInfo.svelte";
-    import { maxScope } from "../utils.js";
+    import { maxScope, checkMetricDisabled } from "../utils.js";
 
     export let job;
     export let metrics;
@@ -85,56 +85,17 @@
             jobMetrics[0]
         );
 
-    const sortAndSelectScope = (jobMetrics) =>
-        metrics
-            .map(function (name) {
-                // Get MetricConf for this selected/requested metric
-                let thisConfig = metricConfig(cluster, name);
-                let thisSCIndex = -1
-                if (thisConfig) {
-                    thisSCIndex = thisConfig.subClusters.findIndex(
-                        (sc) => sc.name == job.subCluster
-                    );
-                };
-                // Check if Subcluster has MetricConf: If not found (index == -1), no further remove flag check required
-                if (thisSCIndex >= 0) {
-                    // SubCluster Config present: Check if remove flag is set
-                    if (thisConfig.subClusters[thisSCIndex].remove == true) {
-                        // Return null data and informational flag
-                        return { removed: true, data: null };
-                    } else {
-                        // load and return metric, if data available
-                        let thisMetric = jobMetrics.filter(
-                            (jobMetric) => jobMetric.name == name
-                        ); // Returns Array
-                        if (thisMetric.length > 0) {
-                            return { removed: false, data: thisMetric };
-                        } else {
-                            return { removed: false, data: null };
-                        }
-                    }
-                } else {
-                    // No specific subCluster config: 'remove' flag not set, deemed false -> load and return metric, if data available
-                    let thisMetric = jobMetrics.filter(
-                        (jobMetric) => jobMetric.name == name
-                    ); // Returns Array
-                    if (thisMetric.length > 0) {
-                        return { removed: false, data: thisMetric };
-                    } else {
-                        return { removed: false, data: null };
-                    }
-                }
-            })
-            .map(function (jobMetrics) {
-                if (jobMetrics.data != null && jobMetrics.data.length > 0) {
-                    return {
-                        removed: jobMetrics.removed,
-                        data: selectScope(jobMetrics.data),
-                    };
-                } else {
-                    return jobMetrics;
-                }
-            });
+
+    const sortAndSelectScope = (jobMetrics) => metrics
+        .map(name => jobMetrics.filter(jobMetric => jobMetric.name == name))
+        .map(jobMetrics => ({ disabled: false, data: jobMetrics.length > 0 ? selectScope(jobMetrics) : null }))
+        .map(jobMetric => {
+            if (jobMetric.data) {
+                return { disabled: checkMetricDisabled(jobMetric.data.name, job.cluster, job.subCluster), data: jobMetric.data }
+            } else {
+                return jobMetric
+            }
+        })
 
     if (job.monitoringStatus) refresh();
 </script>
@@ -163,7 +124,7 @@
         {#each sortAndSelectScope($metricsQuery.data.jobMetrics) as metric, i (metric || i)}
             <td>
                 <!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
-                {#if metric.removed == false && metric.data != null}
+                {#if metric.disabled == false && metric.data}
                     <MetricPlot
                         width={plotWidth}
                         height={plotHeight}
@@ -176,12 +137,10 @@
                         subCluster={job.subCluster}
                         isShared={(job.exclusive != 1)}
                     />
-                {:else if metric.removed == true && metric.data == null}
-                    <Card body color="info"
-                        >Metric disabled for subcluster '{job.subCluster}'</Card
-                    >
+                {:else if metric.disabled == true && metric.data}
+                    <Card body color="info">Metric disabled for subcluster <code>{metric.data.name}:{job.subCluster}</code></Card>
                 {:else}
-                    <Card body color="warning">Missing Full Dataset</Card>
+                    <Card body color="warning">No dataset returned</Card>
                 {/if}
             </td>
         {/each}
diff --git a/web/frontend/src/plots/MetricPlot.svelte b/web/frontend/src/plots/MetricPlot.svelte
index f559859..d6f3ffe 100644
--- a/web/frontend/src/plots/MetricPlot.svelte
+++ b/web/frontend/src/plots/MetricPlot.svelte
@@ -320,7 +320,7 @@
 {#if series[0].data.length > 0}
     <div bind:this={plotWrapper} class="cc-plot"></div>
 {:else}
-    <Card style="margin-left: 2rem;margin-right: 2rem;" body color="warning">Cannot render plot: No series data found for <code>{metric}</code></Card>
+    <Card style="margin-left: 2rem;margin-right: 2rem;" body color="warning">Cannot render plot: No series data returned for <code>{metric}</code></Card>
 {/if}
 <style>
     .cc-plot {