Merge pull request #347 from ClusterCockpit/dev

Dev

internal/config/default_metrics.go

@@ -16,7 +16,7 @@ type DefaultMetricsConfig struct {
 }
 
 func LoadDefaultMetricsConfig() (*DefaultMetricsConfig, error) {
-	filePath := "configs/default_metrics.json"
+	filePath := "default_metrics.json"
 	if _, err := os.Stat(filePath); os.IsNotExist(err) {
 		return nil, nil
 	}

web/frontend/src/Analysis.root.svelte

@@ -20,6 +20,7 @@
     Card,
     Table,
     Icon,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     init,
@@ -70,6 +71,8 @@
     ...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()]),
   ];
 
+  $: clusterName = cluster?.name ? cluster.name : cluster;
+
   const sortOptions = [
     { key: "totalWalltime", label: "Walltime" },
     { key: "totalNodeHours", label: "Node Hours" },
@@ -159,6 +162,7 @@
           groupBy: $groupBy
         ) {
           id
+          name
           totalWalltime
           totalNodeHours
           totalCoreHours
@@ -422,15 +426,22 @@
               <tr>
                 <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
                 {#if groupSelection.key == "user"}
-                  <th scope="col"
+                  <th scope="col" id="topName-{te.id}"
-                    ><a href="/monitoring/user/{te.id}?cluster={cluster}"
+                    ><a href="/monitoring/user/{te.id}?cluster={clusterName}"
                       >{te.id}</a
                     ></th
                   >
+                  {#if te?.name}
+                    <Tooltip
+                      target={`topName-${te.id}`}
+                      placement="left"
+                      >{te.name}</Tooltip
+                    >
+                  {/if}
                 {:else}
                   <th scope="col"
                     ><a
-                      href="/monitoring/jobs/?cluster={cluster}&project={te.id}&projectMatch=eq"
+                      href="/monitoring/jobs/?cluster={clusterName}&project={te.id}&projectMatch=eq"
                       >{te.id}</a
                     ></th
                   >

web/frontend/src/Job.root.svelte

@@ -58,7 +58,8 @@
   let plots = {},
     statsTable
 
-  let missingMetrics = [],
+  let availableMetrics = new Set(),
+    missingMetrics = [],
     missingHosts = [],
     somethingMissing = false;
 
@@ -128,7 +129,12 @@
 
     const pendingMetrics = [
       ...(ccconfig[`job_view_selectedMetrics:${job.cluster}`] ||
-        ccconfig[`job_view_selectedMetrics`]
+      $initq.data.globalMetrics.reduce((names, gm) => {
+          if (gm.availability.find((av) => av.cluster === job.cluster)) {
+            names.push(gm.name);
+          }
+          return names;
+        }, [])
       ),
       ...(ccconfig[`job_view_nodestats_selectedMetrics:${job.cluster}`] ||
         ccconfig[`job_view_nodestats_selectedMetrics`]
@@ -293,7 +299,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 +437,7 @@
     configName="job_view_selectedMetrics"
     bind:metrics={selectedMetrics}
     bind:isOpen={isMetricsSelectionOpen}
+    bind:allMetrics={availableMetrics}
   />
 {/if}
 

web/frontend/src/Status.root.svelte

@@ -19,6 +19,7 @@
     Progress,
     Icon,
     Button,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     queryStore,
@@ -75,9 +76,9 @@
     );
 
   let isHistogramSelectionOpen = false;
-  $: metricsInHistograms = cluster
+  $: selectedHistograms = cluster
-    ? ccconfig[`user_view_histogramMetrics:${cluster}`] || []
+    ? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
-    : ccconfig.user_view_histogramMetrics || [];
+    : ccconfig['user_view_histogramMetrics'] || [];
 
   const client = getContextClient();
   // Note: nodeMetrics are requested on configured $timestep resolution
@@ -90,7 +91,7 @@
         $metrics: [String!]
         $from: Time!
         $to: Time!
-        $metricsInHistograms: [String!]
+        $selectedHistograms: [String!]
       ) {
         nodeMetrics(
           cluster: $cluster
@@ -116,7 +117,7 @@
           }
         }
 
-        stats: jobsStatistics(filter: $filter, metrics: $metricsInHistograms) {
+        stats: jobsStatistics(filter: $filter, metrics: $selectedHistograms) {
           histDuration {
             count
             value
@@ -157,7 +158,7 @@
       from: from.toISOString(),
       to: to.toISOString(),
       filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
-      metricsInHistograms: metricsInHistograms,
+      selectedHistograms: selectedHistograms,
     },
   });
 
@@ -177,6 +178,7 @@
           groupBy: USER
         ) {
           id
+          name
           totalJobs
           totalNodes
           totalCores
@@ -515,12 +517,19 @@
             {#each $topUserQuery.data.topUser as tu, i}
               <tr>
                 <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
-                <th scope="col"
+                <th scope="col" id="topName-{tu.id}"
                   ><a
                     href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
                     >{tu.id}</a
                   ></th
                 >
+                {#if tu?.name}
+                  <Tooltip
+                    target={`topName-${tu.id}`}
+                    placement="left"
+                    >{tu.name}</Tooltip
+                  >
+                {/if}
                 <td>{tu[topUserSelection.key]}</td>
               </tr>
             {/each}
@@ -652,7 +661,7 @@
 
   <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
 
-  {#if metricsInHistograms}
+  {#if selectedHistograms}
     {#key $mainQuery.data.stats[0].histMetrics}
       <PlotGrid
         let:item
@@ -675,6 +684,6 @@
 
 <HistogramSelection
   bind:cluster
-  bind:metricsInHistograms
+  bind:selectedHistograms
   bind:isOpen={isHistogramSelectionOpen}
 />

web/frontend/src/User.root.svelte

@@ -68,16 +68,16 @@
   let durationBinOptions = ["1m","10m","1h","6h","12h"];
   let metricBinOptions = [10, 20, 50, 100];
 
-  $: metricsInHistograms = selectedCluster
+  $: selectedHistograms = selectedCluster
-    ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || []
+    ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
-    : ccconfig.user_view_histogramMetrics || [];
+    : ccconfig['user_view_histogramMetrics'] || [];
 
   const client = getContextClient();
   $: stats = queryStore({
     client: client,
     query: gql`
-      query ($jobFilters: [JobFilter!]!, $metricsInHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
+      query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
-        jobsStatistics(filter: $jobFilters, metrics: $metricsInHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
+        jobsStatistics(filter: $jobFilters, metrics: $selectedHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
           totalJobs
           shortJobs
           totalWalltime
@@ -104,7 +104,7 @@
         }
       }
     `,
-    variables: { jobFilters, metricsInHistograms, numDurationBins, numMetricBins },
+    variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
   });
 
   onMount(() => filterComponent.updateFilters());
@@ -290,7 +290,7 @@
     </InputGroup>
   </Col>
 </Row>
-{#if metricsInHistograms?.length > 0}
+{#if selectedHistograms?.length > 0}
   {#if $stats.error}
     <Row>
       <Col>
@@ -357,6 +357,6 @@
 
 <HistogramSelection
   bind:cluster={selectedCluster}
-  bind:metricsInHistograms
+  bind:selectedHistograms
   bind:isOpen={isHistogramSelectionOpen}
 />

web/frontend/src/generic/Filters.svelte

@@ -45,6 +45,14 @@
   export let startTimeQuickSelect = false;
   export let matchedJobs = -2;
 
+  const startTimeSelectOptions = [
+    { range: "", rangeLabel: "No Selection"},
+    { range: "last6h", rangeLabel: "Last 6hrs"},
+    { range: "last24h", rangeLabel: "Last 24hrs"},
+    { range: "last7d", rangeLabel: "Last 7 days"},
+    { range: "last30d", rangeLabel: "Last 30 days"}
+  ];
+
   let filters = {
     projectMatch: filterPresets.projectMatch || "contains",
     userMatch: filterPresets.userMatch || "contains",
@@ -56,7 +64,7 @@
       filterPresets.states || filterPresets.state
         ? [filterPresets.state].flat()
         : allJobStates,
-    startTime: filterPresets.startTime || { from: null, to: null },
+    startTime: filterPresets.startTime || { from: null, to: null, range: ""},
     tags: filterPresets.tags || [],
     duration: filterPresets.duration || {
       lessThan: null,
@@ -268,16 +276,17 @@
       {#if startTimeQuickSelect}
         <DropdownItem divider />
         <DropdownItem disabled>Start Time Quick Selection</DropdownItem>
-        {#each [{ text: "Last 6hrs", range: "last6h" }, { text: "Last 24hrs", range: "last24h" }, { text: "Last 7 days", range: "last7d" }, { text: "Last 30 days", range: "last30d" }] as { text, range }}
+        {#each startTimeSelectOptions.filter((stso) => stso.range !== "") as { rangeLabel, range }}
           <DropdownItem
             on:click={() => {
+              filters.startTime.from = null
+              filters.startTime.to = null
               filters.startTime.range = range;
-              filters.startTime.text = text;
               updateFilters();
             }}
           >
             <Icon name="calendar-range" />
-            {text}
+            {rangeLabel}
           </DropdownItem>
         {/each}
       {/if}
@@ -316,7 +325,7 @@
 
 {#if filters.startTime.range}
   <Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
-    {filters?.startTime?.text ? filters.startTime.text : filters.startTime.range }
+    {startTimeSelectOptions.find((stso) => stso.range === filters.startTime.range).rangeLabel }
   </Info>
 {/if}
 
@@ -414,11 +423,8 @@
   bind:from={filters.startTime.from}
   bind:to={filters.startTime.to}
   bind:range={filters.startTime.range}
-  on:set-filter={() => {
+  {startTimeSelectOptions}
-    delete filters.startTime["text"];
+  on:set-filter={() => updateFilters()}
-    delete filters.startTime["range"];
-    updateFilters();
-  }}
 />
 
 <Duration

web/frontend/src/generic/filters/Cluster.svelte

@@ -43,6 +43,10 @@
   <ModalBody>
     {#if $initialized}
       <h4>Cluster</h4>
+      {#if disableClusterSelection}
+        <Button color="info" class="w-100 mb-2" disabled><b>Info: Cluster Selection Disabled in This View</b></Button>
+        <Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {cluster}</b></Button>
+      {:else}
         <ListGroup>
           <ListGroupItem
             disabled={disableClusterSelection}
@@ -64,6 +68,7 @@
           {/each}
         </ListGroup>
       {/if}
+    {/if}
     {#if $initialized && pendingCluster != null}
       <br />
       <h4>Partiton</h4>

web/frontend/src/generic/filters/StartTime.svelte

@@ -17,7 +17,6 @@
   import { parse, format, sub } from "date-fns";
   import {
     Row,
-    Col,
     Button,
     Input,
     Modal,
@@ -34,8 +33,7 @@
   export let from = null;
   export let to = null;
   export let range = "";
-
+  export let startTimeSelectOptions;
-  let pendingFrom, pendingTo;
 
   const now = new Date(Date.now());
   const ago = sub(now, { months: 1 });
@@ -48,12 +46,24 @@
     time: format(now, "HH:mm"),
   };
 
-  function reset() {
+  $: pendingFrom = (from == null) ? defaultFrom : fromRFC3339(from)
-    pendingFrom = from == null ? defaultFrom : fromRFC3339(from);
+  $: pendingTo = (to == null) ? defaultTo : fromRFC3339(to)
-    pendingTo = to == null ? defaultTo : fromRFC3339(to);
+  $: pendingRange = range
-  }
 
-  reset();
+  $: isModified =
+    (from != toRFC3339(pendingFrom) || to != toRFC3339(pendingTo, "59")) &&
+    (range != pendingRange) &&
+    !(
+      from == null &&
+      pendingFrom.date == "0000-00-00" &&
+      pendingFrom.time == "00:00"
+    ) &&
+    !(
+      to == null &&
+      pendingTo.date == "0000-00-00" &&
+      pendingTo.time == "00:00"
+    ) &&
+    !( range == "" && pendingRange == "");
 
   function toRFC3339({ date, time }, secs = "00") {
     const parsedDate = parse(
@@ -71,19 +81,6 @@
       time: format(parsedDate, "HH:mm"),
     };
   }
-
-  $: isModified =
-    (from != toRFC3339(pendingFrom) || to != toRFC3339(pendingTo, "59")) &&
-    !(
-      from == null &&
-      pendingFrom.date == "0000-00-00" &&
-      pendingFrom.time == "00:00"
-    ) &&
-    !(
-      to == null &&
-      pendingTo.date == "0000-00-00" &&
-      pendingTo.time == "00:00"
-    );
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@@ -92,31 +89,59 @@
     {#if range !== ""}
       <h4>Current Range</h4>
       <Row>
-        <Col>
+        <FormGroup class="col">
-          <Input type="text" value={range} disabled/>
+          <Input type ="select" bind:value={pendingRange} >
-        </Col>
+            {#each startTimeSelectOptions as { rangeLabel, range }}
+              <option label={rangeLabel} value={range}/>
+            {/each}
+          </Input>
+        </FormGroup>
       </Row>
     {/if}
     <h4>From</h4>
     <Row>
       <FormGroup class="col">
-        <Input type="date" bind:value={pendingFrom.date} />
+        <Input type="date" bind:value={pendingFrom.date} disabled={pendingRange !== ""}/>
       </FormGroup>
       <FormGroup class="col">
-        <Input type="time" bind:value={pendingFrom.time} />
+        <Input type="time" bind:value={pendingFrom.time} disabled={pendingRange !== ""}/>
       </FormGroup>
     </Row>
     <h4>To</h4>
     <Row>
       <FormGroup class="col">
-        <Input type="date" bind:value={pendingTo.date} />
+        <Input type="date" bind:value={pendingTo.date} disabled={pendingRange !== ""}/>
       </FormGroup>
       <FormGroup class="col">
-        <Input type="time" bind:value={pendingTo.time} />
+        <Input type="time" bind:value={pendingTo.time} disabled={pendingRange !== ""}/>
       </FormGroup>
     </Row>
   </ModalBody>
   <ModalFooter>
+    {#if pendingRange !== ""}
+      <Button
+        color="warning"
+        disabled={pendingRange === ""}
+        on:click={() => {
+          pendingRange = ""
+        }}
+      >
+        Reset Range
+      </Button>
+      <Button
+        color="primary"
+        disabled={pendingRange === ""}
+        on:click={() => {
+          isOpen = false;
+          from = null;
+          to = null;
+          range = pendingRange;
+          dispatch("set-filter", { from, to, range });
+        }}
+      >
+        Close & Apply Range
+      </Button>
+    {:else}
       <Button
         color="primary"
         disabled={pendingFrom.date == "0000-00-00" ||
@@ -125,19 +150,21 @@
           isOpen = false;
           from = toRFC3339(pendingFrom);
           to = toRFC3339(pendingTo, "59");
-        dispatch("set-filter", { from, to });
+          range = "";
+          dispatch("set-filter", { from, to, range });
         }}
       >
-      Close & Apply
+        Close & Apply Dates
       </Button>
+    {/if}
     <Button
       color="danger"
       on:click={() => {
         isOpen = false;
         from = null;
         to = null;
-        reset();
+        range = "";
-        dispatch("set-filter", { from, to });
+        dispatch("set-filter", { from, to, range });
       }}>Reset</Button
     >
     <Button on:click={() => (isOpen = false)}>Close</Button>

web/frontend/src/generic/plots/Roofline.svelte

@@ -179,7 +179,7 @@
   function render(plotData) {
     if (plotData) {
       const opts = {
-        title: "",
+        title: "CPU Roofline Diagram",
         mode: 2,
         width: width,
         height: height,

web/frontend/src/generic/select/HistogramSelection.svelte

@@ -3,7 +3,7 @@
 
     Properties:
     - `cluster String`: Currently selected cluster
-    - `metricsInHistograms [String]`: The currently selected metrics to display as histogram
+    - `selectedHistograms [String]`: The currently selected metrics to display as histogram
     - ìsOpen Bool`: Is selection opened
  -->
 
@@ -21,21 +21,26 @@
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
   export let cluster;
-  export let metricsInHistograms;
+  export let selectedHistograms;
   export let isOpen;
 
   const client = getContextClient();
   const initialized = getContext("initialized");
 
-  let availableMetrics = []
+  function loadHistoMetrics(isInitialized, thisCluster) {
+    if (!isInitialized) return [];
 
-  function loadHistoMetrics(isInitialized) {
+    if (!thisCluster) {
-    if (!isInitialized) return;
+      return getContext("globalMetrics")
-    const rawAvailableMetrics = getContext("globalMetrics").filter((gm) => gm?.footprint).map((fgm) => { return fgm.name })
+      .filter((gm) => gm?.footprint)
-    availableMetrics = [...rawAvailableMetrics]
+      .map((fgm) => { return fgm.name })
+    } else {
+      return getContext("globalMetrics")
+      .filter((gm) => gm?.availability.find((av) => av.cluster == thisCluster))
+      .filter((agm) => agm?.footprint)
+      .map((afgm) => { return afgm.name })
+    }
   }
-
-  let pendingMetrics = [...metricsInHistograms]; // Copy
 
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
@@ -61,17 +66,16 @@
   }
 
   function closeAndApply() {
-    metricsInHistograms = [...pendingMetrics]; // Set for parent
     isOpen = !isOpen;
     updateConfiguration({
       name: cluster
         ? `user_view_histogramMetrics:${cluster}`
         : "user_view_histogramMetrics",
-      value: metricsInHistograms,
+      value: selectedHistograms,
     });
   }
 
-  $: loadHistoMetrics($initialized);
+  $: availableMetrics = loadHistoMetrics($initialized, cluster);
 
 </script>
 
@@ -81,7 +85,7 @@
     <ListGroup>
       {#each availableMetrics as metric (metric)}
         <ListGroupItem>
-          <input type="checkbox" bind:group={pendingMetrics} value={metric} />
+          <input type="checkbox" bind:group={selectedHistograms} value={metric} />
           {metric}
         </ListGroupItem>
       {/each}

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}
 />

web/frontend/src/systems/nodelist/NodeInfo.svelte

@@ -102,6 +102,19 @@
           Shared
         </Button>
       </InputGroup>
+    <!-- Fallback -->
+    {:else if nodeJobsData.jobs.count >= 1}
+      <InputGroup>
+        <InputGroupText>
+          <Icon name="circle-fill"/>
+        </InputGroupText>
+        <InputGroupText>
+          Status
+        </InputGroupText>
+        <Button color="success" disabled>
+          Allocated Jobs
+        </Button>
+      </InputGroup>
     {:else}
       <InputGroup>
         <InputGroupText>