Migrate JobSummary and subcomponents

web/frontend/src/job/jobsummary/JobFootprintBars.svelte

@@ -17,79 +17,88 @@
     } from "@sveltestrap/sveltestrap";
     import { findJobFootprintThresholds } from "../../generic/utils.js";
   
-    export let job;
+    /* Svelte 5 Props */
+    let {job} = $props();
     
+    /* Derived */
     // Prepare Job Footprint Data Based On Values Saved In Database
-    const jobFootprintData = job?.footprint?.map((jf) => {
-      const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
-      if (fmc) {
-        // Unit
-        const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
-  
-        // Threshold / -Differences
-        const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
-  
-        // Define basic data -> Value: Use as Provided
-        const fmBase = {
-          name: jf.name,
-          stat: jf.stat,
-          value: jf.value,
-          unit: unit,
-          peak: fmt.peak,
-          dir: fmc.lowerIsBetter
-        };
-  
-        if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
-          return {
-            ...fmBase,
-            color: "danger",
-            message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-            impact: 3
+    const jobFootprintData = $derived(buildFootprint(job?.footprint));
+    
+    /* Functions */
+    function buildFootprint(input) {
+      let result = input?.map((jf) => {
+        const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
+        if (fmc) {
+          // Unit
+          const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
+    
+          // Threshold / -Differences
+          const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
+    
+          // Define basic data -> Value: Use as Provided
+          const fmBase = {
+            name: jf.name,
+            stat: jf.stat,
+            value: jf.value,
+            unit: unit,
+            peak: fmt.peak,
+            dir: fmc.lowerIsBetter
           };
-        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
+    
+          if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
+            return {
+              ...fmBase,
+              color: "danger",
+              message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+              impact: 3
+            };
+          } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
+            return {
+              ...fmBase,
+              color: "warning",
+              message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+              impact: 2,
+            };
+          } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
+            return {
+              ...fmBase,
+              color: "success",
+              message: "Footprint value within expected thresholds.",
+              impact: 1,
+            };
+          } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
+            return {
+              ...fmBase,
+              color: "info",
+              message:
+                "Footprint value above expected normal threshold: Check for artifacts recommended.",
+              impact: 0,
+            };
+          } else {
+            return {
+              ...fmBase,
+              color: "secondary",
+              message:
+                "Footprint value above expected peak threshold: Check for artifacts!",
+              impact: -1,
+            };
+          }
+        } else { // No matching metric config: display as single value
           return {
-            ...fmBase,
-            color: "warning",
-            message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-            impact: 2,
-          };
-        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
-          return {
-            ...fmBase,
-            color: "success",
-            message: "Footprint value within expected thresholds.",
-            impact: 1,
-          };
-        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
-          return {
-            ...fmBase,
-            color: "info",
+            name: jf.name,
+            stat: jf.stat,
+            value: jf.value,
             message:
-              "Footprint value above expected normal threshold: Check for artifacts recommended.",
-            impact: 0,
-          };
-        } else {
-          return {
-            ...fmBase,
-            color: "secondary",
-            message:
-              "Footprint value above expected peak threshold: Check for artifacts!",
-            impact: -1,
+              `No config for metric ${jf.name} found.`,
+            impact: 4,
           };
         }
-      } else { // No matching metric config: display as single value
-        return {
-          name: jf.name,
-          stat: jf.stat,
-          value: jf.value,
-          message:
-            `No config for metric ${jf.name} found.`,
-          impact: 4,
-        };
-      }
-    }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
-      return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
-    });;
+      }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
+        return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+      });;
+
+    return result
+    };
   
     function evalFootprint(value, thresholds, lowerIsBetter, level) {
         // Handle Metrics in which less value is better
@@ -161,7 +170,7 @@
                 >{fpd.message}</Tooltip
                 >
                 </div>
-                <Row cols={12} class="{(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
+                <Row cols={12} class={(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}>
                 {#if fpd.dir}
                     <Col xs="1">
                     <Icon name="caret-left-fill" />