Migrate jobView components

web/frontend/src/job/EnergySummary.svelte

@@ -9,7 +9,8 @@
 
 <script>
   import { 
-    getContext 
+    getContext,
+    onMount
   } from "svelte";
   import {
     Card,
@@ -21,17 +22,26 @@
   } from "@sveltestrap/sveltestrap";
   import { round } from "mathjs";
 
-  export let jobId;
+  /* Svelte 5 Props */
-  export let jobEnergy = null;
+  let {
-  export let jobEnergyFootprint = null;
+    jobId,
+    jobEnergy = null,
+    jobEnergyFootprint = null
+  } = $props();
 
+  /* Const Init */
   const carbonPerkWh = getContext("emission");
-  let carbonMass;
   
-  $: if (carbonPerkWh) {
+  /* State Init */
+  let carbonMass = $state(0);
+
+  /* On Mount */
+  onMount(() => {
+    if (carbonPerkWh) {
       // ( kWh * g/kWh) / 1000 = kg || Rounded to 2 Digits via [ round(x * 100) / 100 ]
       carbonMass = round( ((jobEnergy ? jobEnergy : 0.0) * carbonPerkWh) / 10 ) / 100;
     }
+  });
 </script>
 
 <Card>

web/frontend/src/job/JobRoofline.svelte

@@ -21,11 +21,13 @@
   } from "../generic/utils.js";
   import Roofline from "../generic/plots/Roofline.svelte";
 
-    export let job;
+  /* Svelte 5 Props */
-    export let clusters;
+  let {
-  
+    job,
-    let roofWidth;
+    clusters,
+  } = $props();
 
+  /* Const Init */
   const client = getContextClient();
   const roofQuery = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
@@ -38,16 +40,19 @@
         }
       }
     }
-        }
+  }`;
-    `;
 
+  /* State Init */
+  let roofWidth = $state(0);
+
+  /* Derived */
   // Roofline: Always load roofMetrics with configured timestep (Resolution: 0)
-    $: roofMetrics = queryStore({
+  const roofMetrics = $derived(queryStore({
       client: client,
       query: roofQuery,
       variables: { dbid: job.id, selectedMetrics: ["flops_any", "mem_bw"], selectedScopes: ["node"], selectedResolution: 0 },
-    });
+    })
-
+  );
 </script>
 
 {#if $roofMetrics.error}

web/frontend/src/job/StatsTab.svelte

@@ -26,16 +26,14 @@
   import MetricSelection from "../generic/select/MetricSelection.svelte";
   import StatsTable from "./statstab/StatsTable.svelte";
 
-  export let job;
+  /* Svelte 5 Props */
-  export let clusters;
+  let {
-  export let tabActive;
+    job,
-
+    clusters,
-  let loadScopes = false;
+    tabActive,
-  let selectedScopes = [];
+  } = $props();
-  let selectedMetrics = [];
-  let totalMetrics = 0; // For Info Only, filled by MetricSelection Component
-  let isMetricSelectionOpen = false;
 
+  /* Const Init */
   const client = getContextClient();
   const query = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!) {
@@ -55,16 +53,29 @@
     }
   `;
 
-  $: scopedStats = queryStore({
+  /* State Init */
+  let moreScopes = $state(false);
+  let selectedScopes = $state([]);
+  let selectedMetrics = $state([]);
+  let totalMetrics = $state(0); // For Info Only, filled by MetricSelection Component
+  let isMetricSelectionOpen = $state(false);
+
+  /* Derived */
+  const scopedStats = $derived(queryStore({
       client: client,
       query: query,
       variables: { dbid: job.id, selectedMetrics, selectedScopes },
-  });
+    })
+  );
 
-  $: if (loadScopes) {
+  /* Functions  */
+  function loadScopes() {
+    // Archived Jobs Load All Scopes By Default (See Backend)
+    moreScopes = true;
     selectedScopes = ["node", "socket", "core", "hwthread", "accelerator"];
-  }
+  };
 
+  /* On Init */
   // Handle Job Query on Init -> is not executed anymore
   getContext("on-init")(() => {
     if (!job) return;
@@ -98,12 +109,12 @@
 <TabPane tabId="stats" tab="Statistics Table" class="overflow-x-auto" active={tabActive}>
   <Row>
     <Col class="m-2">
-      <Button outline on:click={() => (isMetricSelectionOpen = true)} class="px-2" color="primary" style="margin-right:0.5rem">
+      <Button outline onclick={() => (isMetricSelectionOpen = true)} class="px-2" color="primary" style="margin-right:0.5rem">
         Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
       </Button>
-      {#if job.numNodes > 1}
+      {#if job.numNodes > 1 && job.state === "running"}
-        <Button class="px-2 ml-auto" color="success" outline on:click={() => (loadScopes = !loadScopes)} disabled={loadScopes}>
+        <Button class="px-2 ml-auto" color="success" outline onclick={loadScopes} disabled={moreScopes}>
-          {#if !loadScopes}
+          {#if !moreScopes}
             <Icon name="plus-square-fill" style="margin-right:0.25rem"/> Add More Scopes
           {:else}
             <Icon name="check-square-fill" style="margin-right:0.25rem"/> OK: Scopes Added