Merge branch 'dev' into migrate_svelte5

web/frontend/src/generic/filters/Cluster.svelte

@@ -43,26 +43,31 @@
   <ModalBody>
     {#if $initialized}
       <h4>Cluster</h4>
-      <ListGroup>
-        <ListGroupItem
-          disabled={disableClusterSelection}
-          active={pendingCluster == null}
-          on:click={() => ((pendingCluster = null), (pendingPartition = null))}
-        >
-          Any Cluster
-        </ListGroupItem>
-        {#each clusters as cluster}
+      {#if disableClusterSelection}
+        <Button color="info" class="w-100 mb-2" disabled><b>Info: Cluster Selection Disabled in This View</b></Button>
+        <Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {cluster}</b></Button>
+      {:else}
+        <ListGroup>
           <ListGroupItem
             disabled={disableClusterSelection}
-            active={pendingCluster == cluster.name}
-            on:click={() => (
-              (pendingCluster = cluster.name), (pendingPartition = null)
-            )}
+            active={pendingCluster == null}
+            on:click={() => ((pendingCluster = null), (pendingPartition = null))}
           >
-            {cluster.name}
+            Any Cluster
           </ListGroupItem>
-        {/each}
-      </ListGroup>
+          {#each clusters as cluster}
+            <ListGroupItem
+              disabled={disableClusterSelection}
+              active={pendingCluster == cluster.name}
+              on:click={() => (
+                (pendingCluster = cluster.name), (pendingPartition = null)
+              )}
+            >
+              {cluster.name}
+            </ListGroupItem>
+          {/each}
+        </ListGroup>
+      {/if}
     {/if}
     {#if $initialized && pendingCluster != null}
       <br />

web/frontend/src/generic/plots/Polar.svelte

@@ -2,123 +2,75 @@
     @component Polar Plot based on chart.js Radar
 
     Properties:
-    - `footprintData [Object]?`: job.footprint content, evaluated in regards to peak config in jobSummary.svelte [Default: null]
-    - `metrics [String]?`: Metric names to display as polar plot [Default: null]
-    - `cluster GraphQL.Cluster?`: Cluster Object of the parent job [Default: null]
-    - `subCluster GraphQL.SubCluster?`: SubCluster Object of the parent job [Default: null]
-    - `jobMetrics [GraphQL.JobMetricWithName]?`: Metric data [Default: null]
+    - `polarMetrics [Object]?`: Metric names and scaled peak values for rendering polar plot [Default: [] ]
+    - `polarData [GraphQL.JobMetricStatWithName]?`: Metric data [Default: null]
     - `height Number?`: Plot height [Default: 365]
  -->
 
 <script>
     import { getContext, onMount } from 'svelte'
     import Chart from 'chart.js/auto'
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    } from 'chart.js';
 
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    );
+
+
+    export let polarMetrics = [];
+    export let polarData = [];
     export let canvasId = "polar-default";
-    export let footprintData = null;
-    export let metrics = null;
-    export let cluster = null;
-    export let subCluster = null;
-    export let jobMetrics = null;
     export let height = 350;
 
-    function getLabels() {
-        if (footprintData) {
-            return footprintData.filter(fpd => {
-                if (!jobMetrics.find(m => m.name == fpd.name && m.scope == "node" || fpd.impact == 4)) {
-                    console.warn(`PolarPlot: No metric data for '${fpd.name}'`)
-                    return false
-                }
-                return true
-            })
-            .map(filtered => filtered.name)
-            .sort(function (a, b) {
-                return ((a > b) ? 1 : ((b > a) ? -1 : 0));
-            });
+    const labels = polarMetrics
+        .filter((m) => (m.peak != null))
+        .map(pm => pm.name)
+        .sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))});
+
+    function loadData(type) {
+        if (labels && (type == 'avg' || type == 'min' ||type == 'max')) {
+            return getValues(type)
+        } else if (!labels) {
+            console.warn("Empty 'polarMetrics' array prop! Cannot render Polar representation.")
         } else {
-            return metrics.filter(name => {
-                if (!jobMetrics.find(m => m.name == name && m.scope == "node")) {
-                    console.warn(`PolarPlot: No metric data for '${name}'`)
-                    return false
-                }
-                return true
-            })
-            .sort(function (a, b) {
-                return ((a > b) ? 1 : ((b > a) ? -1 : 0));
-            });
+            console.warn('Unknown Type For Polar Data (must be one of [min, max, avg])')
         }
-    }
-
-    const labels = getLabels();
-    const getMetricConfig = getContext("getMetricConfig");
-
-    const getValuesForStatGeneric = (getStat) => labels.map(name => {
-        // TODO: Requires Scaling if Shared Job
-        const peak = getMetricConfig(cluster, subCluster, name).peak
-        const metric = jobMetrics.find(m => m.name == name && m.scope == "node")
-        const value = getStat(metric.metric) / peak
-        return value <= 1. ? value : 1.
-    })
-
-    const getValuesForStatFootprint = (getStat) => labels.map(name => {
-        // FootprintData 'Peak' is pre-scaled for Shared Jobs in JobSummary Component
-        const peak = footprintData.find(fpd => fpd.name === name).peak
-        const metric = jobMetrics.find(m => m.name == name && m.scope == "node")
-        const value = getStat(metric.metric) / peak
-        return value <= 1. ? value : 1.
-    })
-
-    function getMax(metric) {
-        let max = metric.series[0].statistics.max;
-        for (let series of metric.series)
-            max = Math.max(max, series.statistics.max)
-        return max
-    }
-
-    function getMin(metric) {
-        let min = metric.series[0].statistics.min;
-        for (let series of metric.series)
-            min = Math.min(min, series.statistics.min)
-        return min
-    }
-
-    function getAvg(metric) {
-        let avg = 0;
-        for (let series of metric.series)
-            avg += series.statistics.avg
-        return avg / metric.series.length
-    }
-
-    function loadDataGeneric(type) {
-        if (type === 'avg') {
-            return getValuesForStatGeneric(getAvg)
-        } else if (type === 'max') {
-            return getValuesForStatGeneric(getMax)
-        } else if (type === 'min') {
-            return getValuesForStatGeneric(getMin)
-        }
-        console.log('Unknown Type For Polar Data')
         return []
     }
 
-    function loadDataForFootprint(type) {
-        if (type === 'avg') {
-            return getValuesForStatFootprint(getAvg)
-        } else if (type === 'max') {
-            return getValuesForStatFootprint(getMax)
-        } else if (type === 'min') {
-            return getValuesForStatFootprint(getMin)
-        }
-        console.log('Unknown Type For Polar Data')
-        return []
-    }
+    // Helper
+
+    const getValues = (type) => labels.map(name => {
+        // Peak is adapted and scaled for job shared state
+        const peak = polarMetrics.find(m => m?.name == name)?.peak
+        const metric = polarData.find(m => m?.name == name)?.stats
+        const value = (peak && metric) ? (metric[type] / peak) : 0
+        return value <= 1. ? value : 1.
+    })
+
+    // Chart JS Objects
 
     const data = {
         labels: labels,
         datasets: [
             {
                 label: 'Max',
-                data: footprintData ? loadDataForFootprint('max') : loadDataGeneric('max'), // Node Scope Only
+                data: loadData('max'), // Node Scope Only
                 fill: 1,
                 backgroundColor: 'rgba(0, 0, 255, 0.25)',
                 borderColor: 'rgb(0, 0, 255)',
@@ -129,7 +81,7 @@
             },
             {
                 label: 'Avg',
-                data: footprintData ? loadDataForFootprint('avg') : loadDataGeneric('avg'), // Node Scope Only
+                data: loadData('avg'), // Node Scope Only
                 fill: 2,
                 backgroundColor: 'rgba(255, 210, 0, 0.25)',
                 borderColor: 'rgb(255, 210, 0)',
@@ -140,7 +92,7 @@
             },
             {
                 label: 'Min',
-                data: footprintData ? loadDataForFootprint('min') : loadDataGeneric('min'), // Node Scope Only
+                data: loadData('min'), // Node Scope Only
                 fill: true,
                 backgroundColor: 'rgba(255, 0, 0, 0.25)',
                 borderColor: 'rgb(255, 0, 0)',

web/frontend/src/generic/plots/Roofline.svelte

@@ -179,7 +179,7 @@
   function render(plotData) {
     if (plotData) {
       const opts = {
-        title: "",
+        title: "CPU Roofline Diagram",
         mode: 2,
         width: width,
         height: height,

web/frontend/src/generic/select/HistogramSelection.svelte

@@ -3,7 +3,7 @@
 
     Properties:
     - `cluster String`: Currently selected cluster
-    - `metricsInHistograms [String]`: The currently selected metrics to display as histogram
+    - `selectedHistograms [String]`: The currently selected metrics to display as histogram
     - ìsOpen Bool`: Is selection opened
  -->
 
@@ -21,22 +21,27 @@
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
   export let cluster;
-  export let metricsInHistograms;
+  export let selectedHistograms;
   export let isOpen;
 
   const client = getContextClient();
   const initialized = getContext("initialized");
 
-  let availableMetrics = []
+  function loadHistoMetrics(isInitialized, thisCluster) {
+    if (!isInitialized) return [];
 
-  function loadHistoMetrics(isInitialized) {
-    if (!isInitialized) return;
-    const rawAvailableMetrics = getContext("globalMetrics").filter((gm) => gm?.footprint).map((fgm) => { return fgm.name })
-    availableMetrics = [...rawAvailableMetrics]
+    if (!thisCluster) {
+      return getContext("globalMetrics")
+      .filter((gm) => gm?.footprint)
+      .map((fgm) => { return fgm.name })
+    } else {
+      return getContext("globalMetrics")
+      .filter((gm) => gm?.availability.find((av) => av.cluster == thisCluster))
+      .filter((agm) => agm?.footprint)
+      .map((afgm) => { return afgm.name })
+    }
   }
 
-  let pendingMetrics = [...metricsInHistograms]; // Copy
-
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
       client: client,
@@ -61,17 +66,16 @@
   }
 
   function closeAndApply() {
-    metricsInHistograms = [...pendingMetrics]; // Set for parent
     isOpen = !isOpen;
     updateConfiguration({
       name: cluster
         ? `user_view_histogramMetrics:${cluster}`
         : "user_view_histogramMetrics",
-      value: metricsInHistograms,
+      value: selectedHistograms,
     });
   }
 
-  $: loadHistoMetrics($initialized);
+  $: availableMetrics = loadHistoMetrics($initialized, cluster);
 
 </script>
 
@@ -81,7 +85,7 @@
     <ListGroup>
       {#each availableMetrics as metric (metric)}
         <ListGroupItem>
-          <input type="checkbox" bind:group={pendingMetrics} value={metric} />
+          <input type="checkbox" bind:group={selectedHistograms} value={metric} />
           {metric}
         </ListGroupItem>
       {/each}