add metric selection count info to job view

web/frontend/src/Job.root.svelte

@@ -58,7 +58,8 @@
   let plots = {},
     statsTable
 
-  let missingMetrics = [],
+  let availableMetrics = new Set(),
+    missingMetrics = [],
     missingHosts = [],
     somethingMissing = false;
 
@@ -293,7 +294,7 @@
       {#if $initq.data}
         <Col xs="auto">
             <Button outline on:click={() => (isMetricsSelectionOpen = true)} color="primary">
-              Select Metrics
+              Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
             </Button>
         </Col>
       {/if}
@@ -431,6 +432,7 @@
     configName="job_view_selectedMetrics"
     bind:metrics={selectedMetrics}
     bind:isOpen={isMetricsSelectionOpen}
+    bind:allMetrics={availableMetrics}
   />
 {/if}
 

web/frontend/src/job/StatsTable.svelte

@@ -18,6 +18,8 @@
     InputGroup,
     InputGroupText,
     Icon,
+    Row,
+    Col
   } from "@sveltestrap/sveltestrap";
   import { maxScope } from "../generic/utils.js";
   import StatsTableEntry from "./StatsTableEntry.svelte";
@@ -26,7 +28,7 @@
   export let job;
   export let jobMetrics;
 
-  const allMetrics = [...new Set(jobMetrics.map((m) => m.name))].sort()
+  const sortedJobMetrics = [...new Set(jobMetrics.map((m) => m.name))].sort()
   const scopesForMetric = (metric) =>
       jobMetrics.filter((jm) => jm.name == metric).map((jm) => jm.scope);
 
@@ -34,11 +36,12 @@
     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 allMetrics) {
+  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);
@@ -95,15 +98,19 @@
   };
 </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>
+      <th/>
-        <Button outline on:click={() => (isMetricSelectionOpen = true)} class="w-100 px-2" color="primary">
-          Select Metrics
-        </Button>
-      </th>
       {#each selectedMetrics as metric}
         <!-- To Match Row-2 Header Field Count-->
         <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
@@ -163,7 +170,7 @@
 <MetricSelection
   cluster={job.cluster}
   configName="job_view_nodestats_selectedMetrics"
-  allMetrics={new Set(allMetrics)}
+  bind:allMetrics={availableMetrics}
   bind:metrics={selectedMetrics}
   bind:isOpen={isMetricSelectionOpen}
 />