Merge latest state branch 'dev' into migrate_svelte5

web/frontend/src/job/Metric.svelte

@@ -14,7 +14,6 @@
 <script>
   import { 
     getContext,
-    createEventDispatcher 
   } from "svelte";
   import { 
     queryStore,
@@ -56,7 +55,6 @@
   let pendingZoomState = null;
   let thresholdState = null;
 
-  const dispatch = createEventDispatcher();
   const statsPattern = /(.*)-stat$/;
   const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "");
   const client = getContextClient();
@@ -150,11 +148,6 @@
 
         // On additional scope request
         if (selectedScope == "load-all") {
-          // Push scope to statsTable (Needs to be in this case, else newly selected 'Metric.svelte' renders cause statsTable race condition)
-          const statsTableData = $metricData.data.singleUpdate.filter((x) => x.scope !== "node")
-          if (statsTableData.length > 0) {
-            dispatch("more-loaded", statsTableData);
-          }
           // Set selected scope to min of returned scopes
           selectedScope = minScope(scopes)
           nodeOnly = (selectedScope == "node") // "node" still only scope after load-all

web/frontend/src/job/StatsTab.svelte

@@ -0,0 +1,145 @@
+<!--
+    @component Job-View subcomponent; Wraps the statsTable in a TabPane and contains GQL query for scoped statsData
+
+    Properties:
+    - `job Object`: The job object
+    - `clusters Object`: The clusters object
+    - `tabActive bool`: Boolean if StatsTabe Tab is Active on Creation
+ -->
+
+<script>
+  import { 
+    queryStore,
+    gql,
+    getContextClient 
+  } from "@urql/svelte";
+  import { getContext } from "svelte";
+  import {
+    Card,
+    Button,
+    Row,
+    Col,
+    TabPane,
+    Spinner,
+    Icon
+  } from "@sveltestrap/sveltestrap";
+  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 availableMetrics = new Set(); // For Info Only, filled by MetricSelection Component
+  let isMetricSelectionOpen = false;
+
+  const client = getContextClient();
+  const query = gql`
+    query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!) {
+      scopedJobStats(id: $dbid, metrics: $selectedMetrics, scopes: $selectedScopes) {
+        name
+        scope
+        stats {
+          hostname
+          id
+          data {
+            min
+            avg
+            max
+          }
+        }
+      }
+    }
+  `;
+
+  $: scopedStats = queryStore({
+    client: client,
+    query: query,
+    variables: { dbid: job.id, selectedMetrics, selectedScopes },
+  });
+
+  $: if (loadScopes) {
+    selectedScopes = ["node", "socket", "core", "hwthread", "accelerator"];
+  }
+
+  // Handle Job Query on Init -> is not executed anymore
+  getContext("on-init")(() => {
+    if (!job) return;
+
+    const pendingMetrics = (
+      getContext("cc-config")[`job_view_nodestats_selectedMetrics:${job.cluster}:${job.subCluster}`] ||
+      getContext("cc-config")[`job_view_nodestats_selectedMetrics:${job.cluster}`]
+    ) || getContext("cc-config")["job_view_nodestats_selectedMetrics"];
+
+    // Select default Scopes to load: Check before if any metric has accelerator scope by default
+    const accScopeDefault = [...pendingMetrics].some(function (m) {
+      const cluster = clusters.find((c) => c.name == job.cluster);
+      const subCluster = cluster.subClusters.find((sc) => sc.name == job.subCluster);
+      return subCluster.metricConfig.find((smc) => smc.name == m)?.scope === "accelerator";
+    });
+
+    const pendingScopes = ["node"]
+    if (job.numNodes === 1) {
+      pendingScopes.push("socket")
+      pendingScopes.push("core")
+      pendingScopes.push("hwthread")
+      if (accScopeDefault) { pendingScopes.push("accelerator") }
+    }
+
+    selectedMetrics = [...pendingMetrics];
+    selectedScopes = [...pendingScopes];
+  });
+
+</script>
+
+<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">
+        Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
+      </Button>
+      {#if job.numNodes > 1}
+        <Button class="px-2 ml-auto" color="success" outline on:click={() => (loadScopes = !loadScopes)} disabled={loadScopes}>
+          {#if !loadScopes}
+            <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
+          {/if}
+        </Button>
+     {/if}
+    </Col>
+  </Row>
+  <hr class="mb-1 mt-1"/>
+  <!-- ROW1: Status-->
+  {#if $scopedStats.fetching}
+    <Row>
+      <Col class="m-3" style="text-align: center;">
+        <Spinner secondary/>
+      </Col>
+    </Row>
+  {:else if $scopedStats.error}
+    <Row>
+      <Col class="m-2">
+        <Card body color="danger">{$scopedStats.error.message}</Card>
+      </Col>
+    </Row>
+  {:else}
+    <StatsTable 
+      hosts={job.resources.map((r) => r.hostname).sort()}
+      data={$scopedStats?.data?.scopedJobStats}
+      {selectedMetrics}
+    />
+  {/if}
+</TabPane>
+
+<MetricSelection
+  cluster={job.cluster}
+  subCluster={job.subCluster}
+  configName="job_view_nodestats_selectedMetrics"
+  bind:allMetrics={availableMetrics}
+  bind:metrics={selectedMetrics}
+  bind:isOpen={isMetricSelectionOpen}
+/>

web/frontend/src/job/StatsTable.svelte

@@ -1,176 +0,0 @@
-<!--
-    @component Job-View subcomponent; display table of metric data statistics with selectable scopes
-
-    Properties:
-    - `job Object`: The job object
-    - `jobMetrics [Object]`: The jobs metricdata
-
-    Exported:
-    - `moreLoaded`: Adds additional scopes requested from Metric.svelte in Job-View
- -->
-
-<script>
-  import { getContext } from "svelte";
-  import {
-    Button,
-    Table,
-    Input,
-    InputGroup,
-    InputGroupText,
-    Icon,
-    Row,
-    Col
-  } from "@sveltestrap/sveltestrap";
-  import { maxScope } from "../generic/utils.js";
-  import StatsTableEntry from "./StatsTableEntry.svelte";
-  import MetricSelection from "../generic/select/MetricSelection.svelte";
-
-  export let job;
-  export let jobMetrics;
-
-  const sortedJobMetrics = [...new Set(jobMetrics.map((m) => m.name))].sort()
-  const scopesForMetric = (metric) =>
-      jobMetrics.filter((jm) => jm.name == metric).map((jm) => jm.scope);
-
-  let hosts = job.resources.map((r) => r.hostname).sort(),
-    selectedScopes = {},
-    sorting = {},
-    isMetricSelectionOpen = false,
-    availableMetrics = new Set(),
-    selectedMetrics =
-      getContext("cc-config")[`job_view_nodestats_selectedMetrics:${job.cluster}`] ||
-      getContext("cc-config")["job_view_nodestats_selectedMetrics"];
-
-  for (let metric of sortedJobMetrics) {
-    // Not Exclusive or Multi-Node: get maxScope directly (mostly: node)
-    //   -> Else: Load smallest available granularity as default as per availability
-    const availableScopes = scopesForMetric(metric);
-    if (job.exclusive != 1 || job.numNodes == 1) {
-      if (availableScopes.includes("accelerator")) {
-        selectedScopes[metric] = "accelerator";
-      } else if (availableScopes.includes("core")) {
-        selectedScopes[metric] = "core";
-      } else if (availableScopes.includes("socket")) {
-        selectedScopes[metric] = "socket";
-      } else {
-        selectedScopes[metric] = "node";
-      }
-    } else {
-      selectedScopes[metric] = maxScope(availableScopes);
-    }
-
-    sorting[metric] = {
-      min: { dir: "up", active: false },
-      avg: { dir: "up", active: false },
-      max: { dir: "up", active: false },
-    };
-  }
-
-  function sortBy(metric, stat) {
-    let s = sorting[metric][stat];
-    if (s.active) {
-      s.dir = s.dir == "up" ? "down" : "up";
-    } else {
-      for (let metric in sorting)
-        for (let stat in sorting[metric]) sorting[metric][stat].active = false;
-      s.active = true;
-    }
-
-    let series = jobMetrics.find(
-      (jm) => jm.name == metric && jm.scope == "node",
-    )?.metric.series;
-    sorting = { ...sorting };
-    hosts = hosts.sort((h1, h2) => {
-      let s1 = series.find((s) => s.hostname == h1)?.statistics;
-      let s2 = series.find((s) => s.hostname == h2)?.statistics;
-      if (s1 == null || s2 == null) return -1;
-
-      return s.dir != "up" ? s1[stat] - s2[stat] : s2[stat] - s1[stat];
-    });
-  }
-
-  export function moreLoaded(moreJobMetrics) {
-    moreJobMetrics.forEach(function (newMetric) {
-      if (!jobMetrics.some((m) => m.scope == newMetric.scope)) {
-        jobMetrics = [...jobMetrics, newMetric]
-      }
-    });
-  };
-</script>
-
-<Row>
-  <Col class="m-2">
-    <Button outline on:click={() => (isMetricSelectionOpen = true)} class="w-auto px-2" color="primary">
-      Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
-    </Button>
-  </Col>
-</Row>
-<hr class="mb-1 mt-1"/>
-<Table class="mb-0">
-  <thead>
-    <!-- Header Row 1: Selectors -->
-    <tr>
-      <th/>
-      {#each selectedMetrics as metric}
-        <!-- To Match Row-2 Header Field Count-->
-        <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
-          <InputGroup>
-            <InputGroupText>
-              {metric}
-            </InputGroupText>
-            <Input type="select" bind:value={selectedScopes[metric]}>
-              {#each scopesForMetric(metric, jobMetrics) as scope}
-                <option value={scope}>{scope}</option>
-              {/each}
-            </Input>
-          </InputGroup>
-        </th>
-      {/each}
-    </tr>
-    <!-- Header Row 2: Fields -->
-    <tr>
-      <th>Node</th>
-      {#each selectedMetrics as metric}
-        {#if selectedScopes[metric] != "node"}
-          <th>Id</th>
-        {/if}
-        {#each ["min", "avg", "max"] as stat}
-          <th on:click={() => sortBy(metric, stat)}>
-            {stat}
-            {#if selectedScopes[metric] == "node"}
-              <Icon
-                name="caret-{sorting[metric][stat].dir}{sorting[metric][stat]
-                  .active
-                  ? '-fill'
-                  : ''}"
-              />
-            {/if}
-          </th>
-        {/each}
-      {/each}
-    </tr>
-  </thead>
-  <tbody>
-    {#each hosts as host (host)}
-      <tr>
-        <th scope="col">{host}</th>
-        {#each selectedMetrics as metric (metric)}
-          <StatsTableEntry
-            {host}
-            {metric}
-            scope={selectedScopes[metric]}
-            {jobMetrics}
-          />
-        {/each}
-      </tr>
-    {/each}
-  </tbody>
-</Table>
-
-<MetricSelection
-  cluster={job.cluster}
-  configName="job_view_nodestats_selectedMetrics"
-  bind:allMetrics={availableMetrics}
-  bind:metrics={selectedMetrics}
-  bind:isOpen={isMetricSelectionOpen}
-/>

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

@@ -40,14 +40,14 @@
     const client = getContextClient();
     const polarQuery = gql`
     query ($dbid: ID!, $selectedMetrics: [String!]!) {
-        jobMetricStats(id: $dbid, metrics: $selectedMetrics) {
+      jobStats(id: $dbid, metrics: $selectedMetrics) {
         name
-        stats {
-            min
-            avg
-            max
-        }
+        data {
+          min
+          avg
+          max
         }
+      }
     }
     `;
 
@@ -66,7 +66,7 @@
   {:else}
     <Polar
       {polarMetrics}
-      polarData={$polarData.data.jobMetricStats}
+      polarData={$polarData.data.jobStats}
     />
   {/if}
 </CardBody>

web/frontend/src/job/statstab/StatsTable.svelte

@@ -0,0 +1,139 @@
+<!--:
+    @component Job-View subcomponent; display table of metric data statistics with selectable scopes
+
+    Properties:
+    - `data Object`: The data object
+    - `selectedMetrics [String]`: The selected metrics
+    - `hosts [String]`: The list of hostnames of this job
+ -->
+
+<script>
+  import {
+    Table,
+    Input,
+    InputGroup,
+    InputGroupText,
+    Icon,
+  } from "@sveltestrap/sveltestrap";
+  import StatsTableEntry from "./StatsTableEntry.svelte";
+
+  export let data = [];
+  export let selectedMetrics = [];
+  export let hosts = [];
+
+  let sorting = {};
+  let availableScopes = {};
+  let selectedScopes = {};
+
+  const scopesForMetric = (metric) =>
+    data?.filter((jm) => jm.name == metric)?.map((jm) => jm.scope) || [];
+  const setScopeForMetric = (metric, scope) =>
+    selectedScopes[metric] = scope
+
+  $: if (data && selectedMetrics) {
+    for (let metric of selectedMetrics) {
+      availableScopes[metric] = scopesForMetric(metric);
+      // Set Initial Selection, but do not use selectedScopes: Skips reactivity
+      if (availableScopes[metric].includes("accelerator")) {
+        setScopeForMetric(metric, "accelerator");
+      } else if (availableScopes[metric].includes("core")) {
+        setScopeForMetric(metric, "core");
+      } else if (availableScopes[metric].includes("socket")) {
+        setScopeForMetric(metric, "socket");
+      } else {
+        setScopeForMetric(metric, "node");
+      }
+
+      sorting[metric] = {
+        min: { dir: "up", active: false },
+        avg: { dir: "up", active: false },
+        max: { dir: "up", active: false },
+      };
+    }
+  }
+
+  function sortBy(metric, stat) {
+    let s = sorting[metric][stat];
+    if (s.active) {
+     s.dir = s.dir == "up" ? "down" : "up";
+    } else {
+      for (let metric in sorting)
+        for (let stat in sorting[metric]) sorting[metric][stat].active = false;
+      s.active = true;
+    }
+
+    let stats = data.find(
+      (d) => d.name == metric && d.scope == "node",
+    )?.stats || [];
+    sorting = { ...sorting };
+    hosts = hosts.sort((h1, h2) => {
+      let s1 = stats.find((s) => s.hostname == h1)?.data;
+      let s2 = stats.find((s) => s.hostname == h2)?.data;
+      if (s1 == null || s2 == null) return -1;
+
+      return s.dir != "up" ? s1[stat] - s2[stat] : s2[stat] - s1[stat];
+    });
+  }
+
+</script>
+
+<Table class="mb-0">
+  <thead>
+    <!-- Header Row 1: Selectors -->
+    <tr>
+      <th/>
+      {#each selectedMetrics as metric}
+        <!-- To Match Row-2 Header Field Count-->
+        <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
+          <InputGroup>
+            <InputGroupText>
+              {metric}
+            </InputGroupText>
+            <Input type="select" bind:value={selectedScopes[metric]} disabled={availableScopes[metric].length === 1}>
+              {#each (availableScopes[metric] || []) as scope}
+                <option value={scope}>{scope}</option>
+              {/each}
+            </Input>
+          </InputGroup>
+        </th>
+      {/each}
+    </tr>
+    <!-- Header Row 2: Fields -->
+    <tr>
+      <th>Node</th>
+      {#each selectedMetrics as metric}
+        {#if selectedScopes[metric] != "node"}
+          <th>Id</th>
+        {/if}
+        {#each ["min", "avg", "max"] as stat}
+          <th on:click={() => sortBy(metric, stat)}>
+            {stat}
+            {#if selectedScopes[metric] == "node"}
+              <Icon
+                name="caret-{sorting[metric][stat].dir}{sorting[metric][stat]
+                  .active
+                  ? '-fill'
+                  : ''}"
+              />
+            {/if}
+          </th>
+        {/each}
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each hosts as host (host)}
+      <tr>
+        <th scope="col">{host}</th>
+        {#each selectedMetrics as metric (metric)}
+          <StatsTableEntry
+            {data}
+            {host}
+            {metric}
+            scope={selectedScopes[metric]}
+          />
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</Table>

web/frontend/src/job/statstab/StatsTableEntry.svelte

@@ -1,11 +1,11 @@
 <!--
-    @component Job-View subcomponent; Single Statistics entry component fpr statstable
+    @component Job-View subcomponent; Single Statistics entry component for statstable
 
     Properties:
     - `host String`: The hostname (== node)
     - `metric String`: The metric name
     - `scope String`: The selected scope
-    - `jobMetrics [Object]`: The jobs metricdata
+    - `data [Object]`: The jobs statsdata
  -->
 
 <script>
@@ -14,59 +14,61 @@
   export let host;
   export let metric;
   export let scope;
-  export let jobMetrics;
+  export let data;
 
-  function compareNumbers(a, b) {
-    return a.id - b.id;
-  }
-
-  function sortByField(field) {
-    let s = sorting[field];
-    if (s.active) {
-      s.dir = s.dir == "up" ? "down" : "up";
-    } else {
-      for (let field in sorting) sorting[field].active = false;
-      s.active = true;
-    }
-
-    sorting = { ...sorting };
-    series = series.sort((a, b) => {
-      if (a == null || b == null) return -1;
-
-      if (field === "id") {
-        return s.dir != "up" ? a[field] - b[field] : b[field] - a[field];
-      } else {
-        return s.dir != "up"
-          ? a.statistics[field] - b.statistics[field]
-          : b.statistics[field] - a.statistics[field];
-      }
-    });
-  }
-
-  let sorting = {
+  let entrySorting = {
     id: { dir: "down", active: true },
     min: { dir: "up", active: false },
     avg: { dir: "up", active: false },
     max: { dir: "up", active: false },
   };
 
-  $: series = jobMetrics
-    .find((jm) => jm.name == metric && jm.scope == scope)
-    ?.metric.series.filter((s) => s.hostname == host && s.statistics != null)
-    ?.sort(compareNumbers);
+  function compareNumbers(a, b) {
+    return a.id - b.id;
+  }
+
+  function sortByField(field) {
+    let s = entrySorting[field];
+    if (s.active) {
+      s.dir = s.dir == "up" ? "down" : "up";
+    } else {
+      for (let field in entrySorting) entrySorting[field].active = false;
+      s.active = true;
+    }
+
+    entrySorting = { ...entrySorting };
+    stats = stats.sort((a, b) => {
+      if (a == null || b == null) return -1;
+
+      if (field === "id") {
+        return s.dir != "up" ?
+          a[field].localeCompare(b[field], undefined, {numeric: true, sensitivity: 'base'}) :
+          b[field].localeCompare(a[field], undefined, {numeric: true, sensitivity: 'base'})
+      } else {
+        return s.dir != "up"
+          ? a.data[field] - b.data[field]
+          : b.data[field] - a.data[field];
+      }
+    });
+  }
+
+  $: stats = data
+    ?.find((d) => d.name == metric && d.scope == scope)
+    ?.stats.filter((s) => s.hostname == host && s.data != null)
+    ?.sort(compareNumbers) || [];
 </script>
 
-{#if series == null || series.length == 0}
+{#if stats == null || stats.length == 0}
   <td colspan={scope == "node" ? 3 : 4}><i>No data</i></td>
-{:else if series.length == 1 && scope == "node"}
+{:else if stats.length == 1 && scope == "node"}
   <td>
-    {series[0].statistics.min}
+    {stats[0].data.min}
   </td>
   <td>
-    {series[0].statistics.avg}
+    {stats[0].data.avg}
   </td>
   <td>
-    {series[0].statistics.max}
+    {stats[0].data.max}
   </td>
 {:else}
   <td colspan="4">
@@ -77,19 +79,19 @@
             <th on:click={() => sortByField(field)}>
               Sort
               <Icon
-                name="caret-{sorting[field].dir}{sorting[field].active
+                name="caret-{entrySorting[field].dir}{entrySorting[field].active
                   ? '-fill'
                   : ''}"
               />
             </th>
           {/each}
         </tr>
-        {#each series as s, i}
+        {#each stats as s, i}
           <tr>
             <th>{s.id ?? i}</th>
-            <td>{s.statistics.min}</td>
-            <td>{s.statistics.avg}</td>
-            <td>{s.statistics.max}</td>
+            <td>{s.data.min}</td>
+            <td>{s.data.avg}</td>
+            <td>{s.data.max}</td>
           </tr>
         {/each}
       </tbody>