Migrate JobSummary and subcomponents

web/frontend/src/job/JobSummary.svelte

@@ -18,9 +18,12 @@
   import JobFootprintPolar from "./jobsummary/JobFootprintPolar.svelte";
 
 
-  export let job;
-  export let width = "auto";
-  export let height = "400px";
+  /* Svelte 5 Props */
+  let {
+    job,
+    width = "auto",
+    height = "400px",
+  } = $props();
 
   const showFootprintTab = !!getContext("cc-config")[`job_view_showFootprint`];
 </script>

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 : "")
+    const jobFootprintData = $derived(buildFootprint(job?.footprint));
     
-        // Threshold / -Differences
-        const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
+    /* 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 : "")
     
-        // 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
-        };
+          // Threshold / -Differences
+          const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
     
-        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
+          // 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" />

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

@@ -20,8 +20,10 @@
     import Polar from "../../generic/plots/Polar.svelte";
     import { findJobFootprintThresholds } from "../../generic/utils.js";
   
-    export let job;
+    /* Svelte 5 Props */
+    let { job } = $props();
   
+    /* Const Init */
     // Metric Names Configured To Be Footprints For (sub)Cluster
     const clusterFootprintMetrics = getContext("clusters")
     .find((c) => c.name == job.cluster)?.subClusters
@@ -39,23 +41,24 @@
     // Pull All Series For Footprint Metrics Statistics Only On Node Scope
     const client = getContextClient();
     const polarQuery = gql`
-    query ($dbid: ID!, $selectedMetrics: [String!]!) {
-      jobStats(id: $dbid, metrics: $selectedMetrics) {
-        name
-        data {
-          min
-          avg
-          max
+      query ($dbid: ID!, $selectedMetrics: [String!]!) {
+        jobStats(id: $dbid, metrics: $selectedMetrics) {
+          name
+          data {
+            min
+            avg
+            max
+          }
         }
       }
-    }
     `;
 
-    $: polarData = queryStore({
+    /* Derived */
+    const polarData = $derived(queryStore({
       client: client,
       query: polarQuery,
       variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
-    });
+    }));
 </script>
 
 <CardBody>