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;
-  export let jobEnergy = null;
-  export let jobEnergyFootprint = null;
+  /* Svelte 5 Props */
+  let {
+    jobId,
+    jobEnergy = null,
+    jobEnergyFootprint = null
+  } = $props();
 
+  /* Const Init */
   const carbonPerkWh = getContext("emission");
-  let carbonMass;
   
-  $: 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;
-  }
+  /* 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

@@ -7,73 +7,78 @@
  -->
 
  <script>
-    import { 
-      queryStore,
-      gql,
-      getContextClient 
-    } from "@urql/svelte";
-    import {
-      Card,
-      Spinner
-    } from "@sveltestrap/sveltestrap";
-    import {
-      transformDataForRoofline,
-    } from "../generic/utils.js";
-    import Roofline from "../generic/plots/Roofline.svelte";
+  import { 
+    queryStore,
+    gql,
+    getContextClient 
+  } from "@urql/svelte";
+  import {
+    Card,
+    Spinner
+  } from "@sveltestrap/sveltestrap";
+  import {
+    transformDataForRoofline,
+  } from "../generic/utils.js";
+  import Roofline from "../generic/plots/Roofline.svelte";
 
-    export let job;
-    export let clusters;
+  /* Svelte 5 Props */
+  let {
+    job,
+    clusters,
+  } = $props();
 
-    let roofWidth;
-
-    const client = getContextClient();
-    const roofQuery = gql`
-        query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
-            jobMetrics(id: $dbid, metrics: $selectedMetrics, scopes: $selectedScopes, resolution: $selectedResolution) {
-            name
-            scope
-            metric {
-                series {
-                    data
-                }
-            }
-            }
+  /* Const Init */
+  const client = getContextClient();
+  const roofQuery = gql`
+    query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
+      jobMetrics(id: $dbid, metrics: $selectedMetrics, scopes: $selectedScopes, resolution: $selectedResolution) {
+      name
+      scope
+      metric {
+        series {
+          data
         }
-    `;
+      }
+    }
+  }`;
 
-    // Roofline: Always load roofMetrics with configured timestep (Resolution: 0)
-    $: roofMetrics = queryStore({
-        client: client,
-        query: roofQuery,
-        variables: { dbid: job.id, selectedMetrics: ["flops_any", "mem_bw"], selectedScopes: ["node"], selectedResolution: 0 },
-    });
+  /* State Init */
+  let roofWidth = $state(0);
 
+  /* Derived */
+  // Roofline: Always load roofMetrics with configured timestep (Resolution: 0)
+  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}
-    <Card body color="danger">{$roofMetrics.error.message}</Card>
+  <Card body color="danger">{$roofMetrics.error.message}</Card>
 {:else if $roofMetrics?.data}
-    <Card style="height: 400px;">
-        <div bind:clientWidth={roofWidth}>
-            <Roofline
-                width={roofWidth}
-                subCluster={clusters
-                    .find((c) => c.name == job.cluster)
-                    .subClusters.find((sc) => sc.name == job.subCluster)}
-                    data={transformDataForRoofline(
-                    $roofMetrics.data?.jobMetrics?.find(
-                        (m) => m.name == "flops_any" && m.scope == "node",
-                    )?.metric,
-                    $roofMetrics.data?.jobMetrics?.find(
-                        (m) => m.name == "mem_bw" && m.scope == "node",
-                    )?.metric,
-                    )}
-                allowSizeChange
-                renderTime
-            />
-        </div>
-    </Card>
+  <Card style="height: 400px;">
+    <div bind:clientWidth={roofWidth}>
+      <Roofline
+        width={roofWidth}
+        subCluster={clusters
+          .find((c) => c.name == job.cluster)
+          .subClusters.find((sc) => sc.name == job.subCluster)}
+        data={transformDataForRoofline(
+          $roofMetrics.data?.jobMetrics?.find(
+            (m) => m.name == "flops_any" && m.scope == "node",
+          )?.metric,
+          $roofMetrics.data?.jobMetrics?.find(
+            (m) => m.name == "mem_bw" && m.scope == "node",
+          )?.metric,
+        )}
+        allowSizeChange
+        renderTime
+      />
+  </div>
+  </Card>
 {:else}
-    <Spinner secondary />
+  <Spinner secondary />
 {/if}
 

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;
-  export let clusters;
-  export let tabActive;
-
-  let loadScopes = false;
-  let selectedScopes = [];
-  let selectedMetrics = [];
-  let totalMetrics = 0; // For Info Only, filled by MetricSelection Component
-  let isMetricSelectionOpen = false;
+  /* Svelte 5 Props */
+  let {
+    job,
+    clusters,
+    tabActive,
+  } = $props();
 
+  /* Const Init */
   const client = getContextClient();
   const query = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!) {
@@ -55,16 +53,29 @@
     }
   `;
 
-  $: scopedStats = queryStore({
-    client: client,
-    query: query,
-    variables: { dbid: job.id, selectedMetrics, selectedScopes },
-  });
+  /* 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);
 
-  $: if (loadScopes) {
+  /* Derived */
+  const scopedStats = $derived(queryStore({
+      client: client,
+      query: query,
+      variables: { dbid: job.id, selectedMetrics, selectedScopes },
+    })
+  );
+
+  /* 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}
-        <Button class="px-2 ml-auto" color="success" outline on:click={() => (loadScopes = !loadScopes)} disabled={loadScopes}>
-          {#if !loadScopes}
+      {#if job.numNodes > 1 && job.state === "running"}
+        <Button class="px-2 ml-auto" color="success" outline onclick={loadScopes} disabled={moreScopes}>
+          {#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