split statsTable data from jobMetrics query, frontend refactor

internal/graph/schema.resolvers.go

@@ -343,11 +343,9 @@ func (r *queryResolver) ScopedJobStats(ctx context.Context, id string, metrics [
 	res := make([]*model.JobStatsWithScope, 0)
 	for name, scoped := range data {
 		for scope, stats := range scoped {
-			// log.Debugf("HANDLE >>>>> %s @ %s -> First Array Value %#v", name, scope, *stats[0])
 
 			mdlStats := make([]*model.ScopedStats, 0)
 			for _, stat := range stats {
-				// log.Debugf("CONVERT >>>>> >>>>> %s -> %v -> %#v", stat.Hostname, stat.Id, stat.Data)
 				mdlStats = append(mdlStats, &model.ScopedStats{
 					Hostname: stat.Hostname,
 					ID:       stat.Id,
@@ -355,7 +353,6 @@ func (r *queryResolver) ScopedJobStats(ctx context.Context, id string, metrics [
 				})
 			}
 
-			// log.Debugf("APPEND >>>>> >>>>> %#v", mdlStats)
 			res = append(res, &model.JobStatsWithScope{
 				Name:  name,
 				Scope: scope,

web/frontend/src/Job.root.svelte

@@ -40,7 +40,7 @@
   import JobRoofline from "./job/JobRoofline.svelte";
   import EnergySummary from "./job/EnergySummary.svelte";
   import PlotGrid from "./generic/PlotGrid.svelte";
-  import StatsTable from "./job/StatsTable.svelte";
+  import StatsTab from "./job/StatsTab.svelte";
 
   export let dbid;
   export let username;
@@ -53,10 +53,8 @@
 
  let isMetricsSelectionOpen = false,
     selectedMetrics = [],
-    selectedScopes = [];
-
-  let plots = {},
-    statsTable
+    selectedScopes = [],
+    plots = {};
 
   let availableMetrics = new Set(),
     missingMetrics = [],
@@ -386,14 +384,8 @@
               </div>
             </TabPane>
           {/if}
-          <TabPane
-            tabId="stats"
-            tab="Statistics Table"
-            class="overflow-x-auto"
-            active={!somethingMissing}
-          >
-            <StatsTable job={$initq.data.job}/>
-          </TabPane>
+          <!-- Includes <TabPane> Statistics Table with Independent GQL Query -->
+          <StatsTab job={$initq.data.job} clusters={$initq.data.clusters} tabActive={!somethingMissing}/>
           <TabPane tabId="job-script" tab="Job Script">
             <div class="pre-wrapper">
               {#if $initq.data.job.metaData?.jobScript}

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,201 +0,0 @@
-<!--
-    @component Job-View subcomponent; display table of metric data statistics with selectable scopes
-
-    Properties:
-    - `job Object`: The job object
- -->
-
-<script>
-  import { 
-    queryStore,
-    gql,
-    getContextClient 
-  } from "@urql/svelte";
-  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;
-
-  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}:${job.subCluster}`] ||
-      getContext("cc-config")[`job_view_nodestats_selectedMetrics:${job.cluster}`]
-    ) || getContext("cc-config")["job_view_nodestats_selectedMetrics"];
-
-  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: ["node"] },
-  });
-
-  $: console.log(">>>> RESULT:", $scopedStats?.data?.scopedJobStats)
-
-  $: jobMetrics = $scopedStats?.data?.scopedJobStats || [];
-
-  const scopesForMetric = (metric) =>
-      jobMetrics.filter((jm) => jm.name == metric).map((jm) => jm.scope);
-
-  $: if ($scopedStats?.data) {
-    for (let metric of selectedMetrics) {
-      // 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];
-    });
-  }
-
-</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}
-  subCluster={job.subCluster}
-  configName="job_view_nodestats_selectedMetrics"
-  bind:allMetrics={availableMetrics}
-  bind:metrics={selectedMetrics}
-  bind:isOpen={isMetricSelectionOpen}
-/>

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:
+    - `job Object`: The job object
+    - `clusters Object`: The clusters object
+    - `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,27 +14,34 @@
   export let host;
   export let metric;
   export let scope;
-  export let jobMetrics;
+  export let data;
+
+  let entrySorting = {
+    id: { dir: "down", active: true },
+    min: { dir: "up", active: false },
+    avg: { dir: "up", active: false },
+    max: { dir: "up", active: false },
+  };
 
   function compareNumbers(a, b) {
     return a.id - b.id;
   }
 
   function sortByField(field) {
-    let s = sorting[field];
+    let s = entrySorting[field];
     if (s.active) {
       s.dir = s.dir == "up" ? "down" : "up";
     } else {
-      for (let field in sorting) sorting[field].active = false;
+      for (let field in entrySorting) entrySorting[field].active = false;
       s.active = true;
     }
 
-    sorting = { ...sorting };
-    series = series.sort((a, b) => {
+    entrySorting = { ...entrySorting };
+    stats = stats.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];
+        return s.dir != "up" ?  a[field].localeCompare(b[field]) : b[field].localeCompare(a[field])
       } else {
         return s.dir != "up"
           ? a.data[field] - b.data[field]
@@ -43,30 +50,23 @@
     });
   }
 
-  let sorting = {
-    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)
+  $: stats = data
+    ?.find((d) => d.name == metric && d.scope == scope)
     ?.stats.filter((s) => s.hostname == host && s.data != null)
-    ?.sort(compareNumbers);
+    ?.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].data.min}
+    {stats[0].data.min}
   </td>
   <td>
-    {series[0].data.avg}
+    {stats[0].data.avg}
   </td>
   <td>
-    {series[0].data.max}
+    {stats[0].data.max}
   </td>
 {:else}
   <td colspan="4">
@@ -76,14 +76,14 @@
           <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.data.min}</td>