Merge branch 'dev' into add_detailed_nodelist

2025-07-22 20:41:40 +02:00 · 2025-01-28 13:47:22 +01:00
parent c21da6512a 7ec233e18a
commit 571652c314
16 changed files with 470 additions and 83 deletions
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cc-frontend",
-  "version": "1.0.2",
+  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cc-frontend",
-      "version": "1.0.2",
+      "version": "1.0.0",
      "license": "MIT",
      "dependencies": {
        "@rollup/plugin-replace": "^5.0.7",
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -174,6 +174,7 @@
    },
  });

+  // Note: Different footprints than those saved in DB per Job -> Caused by Legacy Naming
  $: footprintsQuery = queryStore({
    client: client,
    query: gql`
@@ -470,10 +471,12 @@
          height={300}
          data={convert2uplot($statsQuery.data.stats[0].histDuration)}
          title="Duration Distribution"
-          xlabel="Current Runtimes"
-          xunit="Hours"
+          xlabel="Current Job Runtimes"
+          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
+          usesBins
+          xtime
        />
      {/key}
    </Col>
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -463,7 +463,7 @@

  <hr />

-  <!-- Usage Stats as Histograms -->
+  <!-- User and Project Stats as Pie-Charts -->

  <Row cols={{ lg: 4, md: 2, sm: 1 }}>
    <Col class="p-2">
@@ -587,17 +587,23 @@
      {/key}
    </Col>
  </Row>
+
  <hr class="my-2" />
+
+  <!-- Static Stats as Histograms : Running Duration && Allocated Hardware Counts-->
+
  <Row cols={{ lg: 2, md: 1 }}>
    <Col class="p-2">
      {#key $mainQuery.data.stats}
        <Histogram
          data={convert2uplot($mainQuery.data.stats[0].histDuration)}
          title="Duration Distribution"
-          xlabel="Current Runtimes"
-          xunit="Hours"
+          xlabel="Current Job Runtimes"
+          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
+          usesBins
+          xtime
        />
      {/key}
    </Col>
@@ -640,7 +646,11 @@
      {/key}
    </Col>
  </Row>
+
  <hr class="my-2" />
+
+  <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
+
  {#if metricsInHistograms}
    {#key $mainQuery.data.stats[0].histMetrics}
      <PlotGrid
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -17,6 +17,9 @@
    Icon,
    Card,
    Spinner,
+    Input,
+    InputGroup,
+    InputGroupText
  } from "@sveltestrap/sveltestrap";
  import {
    queryStore,
@@ -59,6 +62,11 @@
  let showFootprint = filterPresets.cluster
    ? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
    : !!ccconfig.plot_list_showFootprint;
+  
+  let numDurationBins = "1h";
+  let numMetricBins = 10;
+  let durationBinOptions = ["1m","10m","1h","6h","12h"];
+  let metricBinOptions = [10, 20, 50, 100];

  $: metricsInHistograms = selectedCluster
    ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || []
@@ -68,8 +76,8 @@
  $: stats = queryStore({
    client: client,
    query: gql`
-      query ($jobFilters: [JobFilter!]!, $metricsInHistograms: [String!]) {
-        jobsStatistics(filter: $jobFilters, metrics: $metricsInHistograms) {
+      query ($jobFilters: [JobFilter!]!, $metricsInHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
+        jobsStatistics(filter: $jobFilters, metrics: $metricsInHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
          totalJobs
          shortJobs
          totalWalltime
@@ -96,7 +104,7 @@
        }
      }
    `,
-    variables: { jobFilters, metricsInHistograms },
+    variables: { jobFilters, metricsInHistograms, numDurationBins, numMetricBins },
  });

  onMount(() => filterComponent.updateFilters());
@@ -118,8 +126,8 @@
 {/if}

 <!-- ROW2: Tools-->
-<Row cols={{ xs: 1, md: 2, lg: 4}} class="mb-3">
-  <Col lg="2" class="mb-2 mb-lg-0">
+<Row cols={{ xs: 1, md: 2, lg: 6}} class="mb-3">
+  <Col class="mb-2 mb-lg-0">
    <ButtonGroup class="w-100">
      <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
        <Icon name="sort-up" /> Sorting
@@ -133,7 +141,7 @@
      </Button>
    </ButtonGroup>
  </Col>
-  <Col lg="4" xl="6" class="mb-1 mb-lg-0">
+  <Col lg="4" class="mb-1 mb-lg-0">
    <Filters
      {filterPresets}
      {matchedJobs}
@@ -148,12 +156,27 @@
      }}
    />
  </Col>
-  <Col lg="3" xl="2" class="mb-2 mb-lg-0">
+  <Col class="mb-2 mb-lg-0">
+    <InputGroup>
+      <InputGroupText>
+        <Icon name="bar-chart-line-fill" />
+      </InputGroupText>
+      <InputGroupText>
+        Duration Bin Size
+      </InputGroupText>
+      <Input type="select" bind:value={numDurationBins} style="max-width: 120px;">
+        {#each durationBinOptions as dbin}
+          <option value={dbin}>{dbin}</option>
+        {/each}
+      </Input>
+    </InputGroup>
+  </Col>
+  <Col class="mb-2 mb-lg-0">
    <TextFilter
      on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
    />
  </Col>
-  <Col lg="3" xl="2" class="mb-1 mb-lg-0">
+  <Col class="mb-1 mb-lg-0">
    <Refresher on:refresh={() => {
      jobList.refreshJobs()
      jobList.refreshAllMetrics()
@@ -215,10 +238,12 @@
        <Histogram
          data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
          title="Duration Distribution"
-          xlabel="Current Runtimes"
-          xunit="Hours"
+          xlabel="Job Runtimes"
+          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
+          usesBins
+          xtime
        />
      {/key}
    </Col>
@@ -238,16 +263,32 @@
 </Row>

 <!-- ROW4+5: Selectable Histograms -->
-<Row cols={{ xs: 1, md: 5}}>
-  <Col>
+<Row>
+  <Col xs="12" md="3" lg="2" class="mb-2 mb-md-0">
    <Button
      outline
      color="secondary"
+      class="w-100"
      on:click={() => (isHistogramSelectionOpen = true)}
    >
      <Icon name="bar-chart-line" /> Select Histograms
    </Button>
  </Col>
+  <Col xs="12" md="9" lg="10" class="mb-2 mb-md-0">
+    <InputGroup>
+      <InputGroupText>
+        <Icon name="bar-chart-line-fill" />
+      </InputGroupText>
+      <InputGroupText>
+        Metric Bins
+      </InputGroupText>
+      <Input type="select" bind:value={numMetricBins} style="max-width: 120px;">
+        {#each metricBinOptions as mbin}
+          <option value={mbin}>{mbin}</option>
+        {/each}
+      </Input>
+    </InputGroup>
+  </Col>
 </Row>
 {#if metricsInHistograms?.length > 0}
  {#if $stats.error}
@@ -272,12 +313,12 @@
      >
        <Histogram
          data={convert2uplot(item.data)}
-          usesBins={true}
          title="Distribution of '{item.metric} ({item.stat})' footprints"
          xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
          xunit={item.unit}
          ylabel="Number of Jobs"
          yunit="Jobs"
+          usesBins
        />
      </PlotGrid>
    {/key}
--- a/web/frontend/src/config/UserSettings.svelte
+++ b/web/frontend/src/config/UserSettings.svelte
@@ -18,6 +18,7 @@
  const ccconfig = getContext("cc-config");
  let message = { msg: "", target: "", color: "#d63384" };
  let displayMessage = false;
+  let cbmode = ccconfig?.plot_general_colorblindMode || false;

  async function handleSettingSubmit(event) {
    const selector = event.detail.selector
@@ -28,6 +29,9 @@
      const res = await fetch(form.action, { method: "POST", body: formData });
      if (res.ok) {
        let text = await res.text();
+        if (formData.get("key") === "plot_general_colorblindMode") {
+          cbmode = JSON.parse(formData.get("value"));
+        }
        popMessage(text, target, "#048109");
      } else {
        let text = await res.text();
@@ -51,4 +55,4 @@

 <UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
 <PlotRenderOptions config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
-<PlotColorScheme config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
+<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
--- a/web/frontend/src/config/user/PlotColorScheme.svelte
+++ b/web/frontend/src/config/user/PlotColorScheme.svelte
@@ -24,6 +24,7 @@
    export let config;
    export let message;
    export let displayMessage;
+    export let cbmode = false;

    const dispatch = createEventDispatcher();
    function updateSetting(selector, target) {
@@ -265,6 +266,62 @@
      ],
    };

+    // https://personal.sron.nl/~pault/
+    // https://tsitsul.in/blog/coloropt/
+    const cvdschemes = {
+      HighContrast: [
+        "rgb(221,170,51)",
+        "rgb(187,85,102)",
+        "rgb(0,68,136)",
+        "rgb(0,0,0)",
+      ],
+      Bright: [
+        "rgb(68,119,170)",
+        "rgb(102,204,238)",
+        "rgb(34,136,51)",
+        "rgb(204,187,68)",
+        "rgb(238,102,119)",
+        "rgb(170,51,119)",
+        "rgb(187,187,187)",
+      ],
+      Muted: [
+        "rgb(51,34,136)",
+        "rgb(136,204,238)",
+        "rgb(68,170,153)",
+        "rgb(17,119,51)",
+        "rgb(153,153,51)",
+        "rgb(221,204,119)",
+        "rgb(204,102,119)",
+        "rgb(136,34,85)",
+        "rgb(170,68,153)",
+        "rgb(221,221,221)",
+      ],
+      NormalSixColor: [
+        "rgb(64,83,211)",
+        "rgb(221,179,16)",
+        "rgb(181,29,20)",
+        "rgb(0,190,255)",
+        "rgb(251,73,176)",
+        "rgb(0,178,93)",
+        "rgb(202,202,202)",
+      ],
+      NormalTwelveColor: [
+        "rgb(235,172,35)",
+        "rgb(184,0,88)",
+        "rgb(0,140,249)",
+        "rgb(0,110,0)",
+        "rgb(0,187,173)",
+        "rgb(209,99,230)",
+        "rgb(178,69,2)",
+        "rgb(255,146,135)",
+        "rgb(89,84,214)",
+        "rgb(0,198,248)",
+        "rgb(135,133,0)",
+        "rgb(0,167,108)",
+        "rgb(189,189,189)",
+      ]
+    }
+
 </script>

 <Row cols={1} class="p-2 g-2">
@@ -281,7 +338,7 @@
          <CardTitle
            style="margin-bottom: 1em; display: flex; align-items: center;"
          >
-            <div>Color Scheme for Timeseries Plots</div>
+            <div>Color Scheme for Timeseries Plots {cbmode ? `(Color Blind Friendly Palettes)` : ``}</div>
            {#if displayMessage && message.target == "cs"}<div
                style="margin-left: auto; font-size: 0.9em;"
              >
@@ -293,7 +350,7 @@
          <input type="hidden" name="key" value="plot_general_colorscheme" />
          <Table hover>
            <tbody>
-              {#each Object.entries(colorschemes) as [name, rgbrow]}
+              {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
                <tr>
                  <th scope="col">{name}</th>
                  <td>
@@ -333,8 +390,9 @@

 <style>
 .color-dot {
-    height: 10px;
-    width: 10px;
+    margin-left: 1px;
+    height: 12px;
+    width: 12px;
    border-radius: 50%;
    display: inline-block;
 }
--- a/web/frontend/src/config/user/PlotRenderOptions.svelte
+++ b/web/frontend/src/config/user/PlotRenderOptions.svelte
@@ -129,8 +129,8 @@
    >
  
    <!-- BACKGROUND -->
-    <Col
-      ><Card class="h-100">
+    <Col class="d-flex justify-content-between"
+      ><Card class="h-100" style="width: 49%;">
        <form
          id="backgrounds-form"
          method="post"
@@ -173,6 +173,50 @@
          </div>
          <Button color="primary" type="submit">Submit</Button>
        </form>
-      </Card></Col
-    >
+      </Card>
+      <Card class="h-100" style="width: 49%;">
+        <form
+          id="colorblindmode-form"
+          method="post"
+          action="/frontend/configuration/"
+          class="card-body"
+          on:submit|preventDefault={() =>
+            updateSetting("#colorblindmode-form", "cbm")}
+        >
+          <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
+          <CardTitle
+            style="margin-bottom: 1em; display: flex; align-items: center;"
+          >
+            <div>Color Blind Mode</div>
+            {#if displayMessage && message.target == "cbm"}<div
+                style="margin-left: auto; font-size: 0.9em;"
+              >
+                <code style="color: {message.color};" out:fade
+                  >Update: {message.msg}</code
+                >
+              </div>{/if}
+          </CardTitle>
+          <input type="hidden" name="key" value="plot_general_colorblindMode" />
+          <div class="mb-3">
+            <div>
+              {#if config?.plot_general_colorblindMode}
+                <input type="radio" id="cbm-true-checked" name="value" value="true" checked />
+              {:else}
+                <input type="radio" id="cbm-true" name="value" value="true" />
+              {/if}
+              <label for="true">Yes</label>
+            </div>
+            <div>
+              {#if config?.plot_general_colorblindMode}
+                <input type="radio" id="cbm-false" name="value" value="false" />
+              {:else}
+                <input type="radio" id="cbm-false-checked" name="value" value="false" checked />
+              {/if}
+              <label for="false">No</label>
+            </div>
+          </div>
+          <Button color="primary" type="submit">Submit</Button>
+        </form>
+      </Card>
+    </Col>
 </Row>
--- a/web/frontend/src/generic/plots/Histogram.svelte
+++ b/web/frontend/src/generic/plots/Histogram.svelte
@@ -15,8 +15,8 @@

 <script>
  import uPlot from "uplot";
-  import { formatNumber } from "../units.js";
  import { onMount, onDestroy } from "svelte";
+  import { formatNumber } from "../units.js";
  import { Card } from "@sveltestrap/sveltestrap";

  export let data;
@@ -26,16 +26,31 @@
  export let title = "";
  export let xlabel = "";
  export let xunit = "";
+  export let xtime = false;
  export let ylabel = "";
  export let yunit = "";

  const { bars } = uPlot.paths;
-
  const drawStyles = {
    bars: 1,
    points: 2,
  };

+  function formatTime(t) {
+    if (t !== null) {
+      if (isNaN(t)) {
+        return t;
+      } else {
+        const tAbs = Math.abs(t);
+        const h = Math.floor(tAbs / 3600);
+        const m = Math.floor((tAbs % 3600) / 60);
+        if (h == 0) return `${m}m`;
+        else if (m == 0) return `${h}h`;
+        else return `${h}:${m}h`;
+      }
+    }
+  }
+
  function paths(u, seriesIdx, idx0, idx1, extendGap, buildClip) {
    let s = u.series[seriesIdx];
    let style = s.drawStyle;
@@ -139,7 +154,7 @@
          label: xlabel,
          labelGap: 10,
          size: 25,
-          incrs: [1, 2, 5, 6, 10, 12, 50, 100, 500, 1000, 5000, 10000],
+          incrs: xtime ? [60, 120, 300, 600, 1800, 3600, 7200, 14400, 18000, 21600, 43200, 86400] : [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000],
          border: {
            show: true,
            stroke: "#000000",
@@ -149,7 +164,13 @@
            size: 5 / devicePixelRatio,
            stroke: "#000000",
          },
-          values: (_, t) => t.map((v) => formatNumber(v)),
+          values: (_, t) => t.map((v) => {
+            if (xtime) {
+              return formatTime(v);
+            } else {
+              return formatNumber(v)
+            }
+          }),
        },
        {
          stroke: "#000000",
@@ -166,17 +187,25 @@
            size: 5 / devicePixelRatio,
            stroke: "#000000",
          },
-          values: (_, t) => t.map((v) => formatNumber(v)),
+          values: (_, t) => t.map((v) => {
+            return formatNumber(v)
+          }),
        },
      ],
      series: [
        {
          label: xunit !== "" ? xunit : null,
          value: (u, ts, sidx, didx) => {
-            if (usesBins) {
+            if (usesBins && xtime) {
+              const min = u.data[sidx][didx - 1] ? formatTime(u.data[sidx][didx - 1]) : 0;
+              const max = formatTime(u.data[sidx][didx]);
+              ts = min + " - " + max; // narrow spaces
+            } else if (usesBins) {
              const min = u.data[sidx][didx - 1] ? u.data[sidx][didx - 1] : 0;
              const max = u.data[sidx][didx];
              ts = min + " - " + max; // narrow spaces
+            } else if (xtime) {
+              ts = formatTime(ts);
            }
            return ts;
          },
@@ -191,6 +220,7 @@
          },
          {
            drawStyle: drawStyles.bars,
+            width: 1, // 1 / lastBinCount,
            lineInterpolation: null,
            stroke: "#85abce",
            fill: "#85abce", //  + "1A", // Transparent Fill
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -152,10 +152,12 @@
  const lineWidth =
    clusterCockpitConfig.plot_general_lineWidth / window.devicePixelRatio;
  const lineColors = clusterCockpitConfig.plot_general_colorscheme;
+  const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;
+
  const backgroundColors = {
    normal: "rgba(255, 255, 255, 1.0)",
-    caution: "rgba(255, 128, 0, 0.3)",
-    alert: "rgba(255, 0, 0, 0.3)",
+    caution: cbmode ? "rgba(239, 230, 69, 0.3)" : "rgba(255, 128, 0, 0.3)",
+    alert: cbmode ? "rgba(225, 86, 44, 0.3)" : "rgba(255, 0, 0, 0.3)",
  };
  const thresholds = findJobAggregationThresholds(
    subClusterTopology,
@@ -348,13 +350,13 @@
      label: "min",
      scale: "y",
      width: lineWidth,
-      stroke: "red",
+      stroke: cbmode ? "rgb(0,255,0)" : "red",
    });
    plotSeries.push({
      label: "max",
      scale: "y",
      width: lineWidth,
-      stroke: "green",
+      stroke: cbmode ? "rgb(0,0,255)" : "green",
    });
    plotSeries.push({
      label: usesMeanStatsSeries ? "mean" : "median",
@@ -364,8 +366,8 @@
    });

    plotBands = [
-      { series: [2, 3], fill: "rgba(0,255,0,0.1)" },
-      { series: [3, 1], fill: "rgba(255,0,0,0.1)" },
+      { series: [2, 3], fill: cbmode ? "rgba(0,0,255,0.1)" : "rgba(0,255,0,0.1)" },
+      { series: [3, 1], fill: cbmode ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)" },
    ];
  } else {
    for (let i = 0; i < series.length; i++) {
--- a/web/frontend/src/generic/plots/Roofline.svelte
+++ b/web/frontend/src/generic/plots/Roofline.svelte
@@ -40,6 +40,7 @@
  let timeoutId = null;

  const lineWidth = clusterCockpitConfig.plot_general_lineWidth;
+  const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;

  // Helpers
  function getGradientR(x) {
@@ -61,7 +62,7 @@
    return Math.floor(x * 255.0);
  }
  function getRGB(c) {
-    return `rgb(${getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`;
+    return `rgb(${cbmode ? '0' : getGradientR(c)}, ${getGradientG(c)}, ${getGradientB(c)})`;
  }
  function nearestThousand(num) {
    return Math.ceil(num / 1000) * 1000;
--- a/web/frontend/src/generic/utils.js
+++ b/web/frontend/src/generic/utils.js
@@ -449,7 +449,7 @@ function getMetricConfigDeep(metric, cluster, subCluster) {
    }
 }

-export function convert2uplot(canvasData) {
+export function convert2uplot(canvasData, secondsToMinutes = false, secondsToHours = false) {
    // Prep: Uplot Data Structure
    let uplotData = [[],[]] // [X, Y1, Y2, ...]
    // Iterate if exists
@@ -457,11 +457,21 @@ export function convert2uplot(canvasData) {
        canvasData.forEach( cd => {
            if (Object.keys(cd).length == 4) { // MetricHisto Datafromat
                uplotData[0].push(cd?.max ? cd.max : 0)
+                uplotData[1].push(cd?.count ? cd.count : 0)
+            } else { // Default -> Fill Histodata with zero values on unused value placing -> maybe allows zoom trigger as known
+                if (secondsToHours) {
+                    let hours = cd.value / 3600
+                    console.log("x seconds to y hours", cd.value, hours)
+                    uplotData[0].push(hours)
+                } else if (secondsToMinutes) {
+                    let minutes = cd.value / 60
+                    console.log("x seconds to y minutes", cd.value, minutes)
+                    uplotData[0].push(minutes)
+                } else {
+                    uplotData[0].push(cd.value)
+                }
                uplotData[1].push(cd.count)
-            } else { // Default
-                uplotData[0].push(cd.value)
-                uplotData[1].push(cd.count)
-            }
+             }
        })
    }
    return uplotData