Migrate JobSummary and subcomponents

web/frontend/src/job/JobSummary.svelte

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

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

@@ -17,10 +17,16 @@
     } 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 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
@@ -91,6 +97,9 @@
         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
         switch (level) {
@@ -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
@@ -51,11 +53,12 @@
       }
     `;
 
-    $: polarData = queryStore({
+    /* Derived */
+    const polarData = $derived(queryStore({
       client: client,
       query: polarQuery,
       variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
-    });
+    }));
 </script>
 
 <CardBody>