Add public dashboard and route, add DoubleMetricPlot and GQL queries

- add roofline legend display switch
- small fixes

web/frontend/src/status/dashdetails/StatisticsDash.svelte

@@ -0,0 +1,148 @@
+<!--
+  @component Main cluster status view component; renders current system-usage information
+
+  Properties:
+  - `presetCluster String`: The cluster to show status information for
+-->
+
+ <script>
+  import { getContext } from "svelte";
+  import {
+    Row,
+    Col,
+    Spinner,
+    Card,
+    Icon,
+    Button,
+  } from "@sveltestrap/sveltestrap";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    convert2uplot,
+  } from "../../generic/utils.js";
+  import PlotGrid from "../../generic/PlotGrid.svelte";
+  import Histogram from "../../generic/plots/Histogram.svelte";
+  import HistogramSelection from "../../generic/select/HistogramSelection.svelte";
+  import Refresher from "../../generic/helper/Refresher.svelte";
+
+  /* Svelte 5 Props */
+  let {
+    presetCluster
+  } = $props();
+
+  /* Const Init */
+  const ccconfig = getContext("cc-config");
+  const client = getContextClient();
+
+  /* State Init */
+  let cluster = $state(presetCluster);
+  // Histogram
+  let isHistogramSelectionOpen = $state(false);
+
+  /* Derived */
+  let selectedHistograms = $derived(cluster
+    ? ccconfig[`statusView_selectedHistograms:${cluster}`] || ( ccconfig['statusView_selectedHistograms'] || [] )
+    : ccconfig['statusView_selectedHistograms'] || []);
+
+  // Note: nodeMetrics are requested on configured $timestep resolution
+  const metricStatusQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $filter: [JobFilter!]!
+        $selectedHistograms: [String!]
+      ) {
+        jobsStatistics(filter: $filter, metrics: $selectedHistograms) {
+          histMetrics {
+            metric
+            unit
+            data {
+              min
+              max
+              count
+              bin
+            }
+          }
+        }
+      }
+    `,
+    variables: {
+      filter: [{ state: ["running"] }, { cluster: { eq: cluster} }],
+      selectedHistograms: selectedHistograms
+    },
+    requestPolicy: "network-only"
+  }));
+</script>
+
+<!-- Loading indicators & Metric Sleect -->
+<Row class="justify-content-between">
+  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
+    <Button
+      outline
+      color="secondary"
+      onclick={() => (isHistogramSelectionOpen = true)}
+    >
+      <Icon name="bar-chart-line" /> Select Histograms
+    </Button>
+  </Col>
+  <Col xs="12" md="5" lg="4" xl="3">
+    <Refresher
+      initially={120}
+      onRefresh={() => {
+        selectedHistograms = [...$state.snapshot(selectedHistograms)]
+      }}
+    />
+  </Col>
+</Row>
+
+<Row cols={1} class="text-center mt-3">
+  {#if $metricStatusQuery.fetching}
+    <Col>
+      <Spinner />
+    </Col>
+  {:else if $metricStatusQuery.error}
+    <Col>  
+      <Card body color="danger">{$metricStatusQuery.error.message}</Card>
+    </Col>
+  {/if}
+</Row>
+
+{#if $metricStatusQuery.data}
+  <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
+  {#if selectedHistograms}
+    <!-- Note: Ignore '#snippet' Error in IDE -->
+    {#snippet gridContent(item)}
+      <Histogram
+        data={convert2uplot(item.data)}
+        title="Distribution of '{item.metric}' averages"
+        xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
+        xunit={item.unit}
+        ylabel="Number of Jobs"
+        yunit="Jobs"
+        usesBins
+        enableFlip
+      />
+    {/snippet}
+    
+    {#key $metricStatusQuery.data.jobsStatistics[0].histMetrics}
+      <PlotGrid
+        items={$metricStatusQuery.data.jobsStatistics[0].histMetrics}
+        itemsPerRow={2}
+        {gridContent}
+      />
+    {/key}
+  {/if}
+{/if}
+
+<HistogramSelection
+  {cluster}
+  bind:isOpen={isHistogramSelectionOpen}
+  presetSelectedHistograms={selectedHistograms}
+  configName="statusView_selectedHistograms"
+  applyChange={(newSelection) => {
+    selectedHistograms = [...newSelection];
+  }}
+/>

web/frontend/src/status/dashdetails/StatusDash.svelte

@@ -0,0 +1,677 @@
+<!--
+  @component Main cluster status view component; renders current system-usage information
+
+  Properties:
+  - `presetCluster String`: The cluster to show status information for
+-->
+
+ <script>
+  import {
+    Row,
+    Col,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardBody,
+    Table,
+    Progress,
+    Icon,
+  } from "@sveltestrap/sveltestrap";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import { formatDurationTime } from "../../generic/units.js";
+  import Refresher from "../../generic/helper/Refresher.svelte";
+  import TimeSelection from "../../generic/select/TimeSelection.svelte";
+  import Roofline from "../../generic/plots/Roofline.svelte";
+  import Pie, { colors } from "../../generic/plots/Pie.svelte";
+  import Stacked from "../../generic/plots/Stacked.svelte";
+
+  /* Svelte 5 Props */
+  let {
+    clusters,
+    presetCluster,
+    useCbColors = false,
+    useAltColors = false,
+  } = $props();
+
+  /* Const Init */
+  const client = getContextClient();
+
+  /* State Init */
+  let cluster = $state(presetCluster);
+  let pieWidth = $state(0);
+  let stackedWidth1 = $state(0);
+  let stackedWidth2 = $state(0);
+  let plotWidths = $state([]);
+  let from = $state(new Date(Date.now() - 5 * 60 * 1000));
+  let to = $state(new Date(Date.now()));
+  let stackedFrom = $state(Math.floor(Date.now() / 1000) - 14400);
+  // Bar Gauges
+  let allocatedNodes = $state({});
+  let allocatedCores = $state({});
+  let allocatedAccs = $state({});
+  let flopRate = $state({});
+  let flopRateUnitPrefix = $state({});
+  let flopRateUnitBase = $state({});
+  let memBwRate = $state({});
+  let memBwRateUnitPrefix = $state({});
+  let memBwRateUnitBase = $state({});
+  // Plain Infos
+  let runningJobs = $state({});
+  let activeUsers = $state({});
+  let totalAccs = $state({});
+
+  /* Derived */
+  // States for Stacked charts
+  const statesTimed = $derived(queryStore({
+    client: client,
+    query: gql`
+      query ($filter: [NodeFilter!], $typeNode: String!, $typeHealth: String!) {
+        nodeStates: nodeStatesTimed(filter: $filter, type: $typeNode) {
+          state
+          counts
+          times
+        }
+        healthStates: nodeStatesTimed(filter: $filter, type: $typeHealth) {
+          state
+          counts
+          times
+        }
+      }
+    `,
+    variables: {
+      filter: { cluster: { eq: cluster }, timeStart: 1760096999},
+      typeNode: "node",
+      typeHealth: "health"
+    },
+    requestPolicy: "network-only"
+  }));
+
+  // Note: nodeMetrics are requested on configured $timestep resolution
+  // Result: The latest 5 minutes (datapoints) for each node independent of job
+  const statusQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $cluster: String!
+        $metrics: [String!]
+        $from: Time!
+        $to: Time!
+        $jobFilter: [JobFilter!]!
+        $nodeFilter: [NodeFilter!]!
+        $paging: PageRequest!
+        $sorting: OrderByInput!
+      ) {
+        # Node 5 Minute Averages for Roofline
+        nodeMetrics(
+          cluster: $cluster
+          metrics: $metrics
+          from: $from
+          to: $to
+        ) {
+          host
+          subCluster
+          metrics {
+            name
+            metric {
+              series {
+                statistics {
+                  avg
+                }
+              }
+            }
+          }
+        }
+        # Running Job Metric Average for Rooflines
+        jobsMetricStats(filter: $jobFilter, metrics: $metrics) {
+          id
+          jobId
+          duration
+          numNodes
+          numAccelerators
+          subCluster
+          stats {
+            name
+            data {
+              avg
+            }
+          }
+        }
+        # Get Jobs for Per-Node Counts
+        jobs(filter: $jobFilter, order: $sorting, page: $paging) {
+          items {
+            jobId
+            resources {
+              hostname
+            }
+          }
+          count
+        }
+        # Only counts shared nodes once 
+        allocatedNodes(cluster: $cluster) {
+          name
+          count
+        }
+        # Get States for Node Roofline; $sorting unused in backend: Use placeholder
+        nodes(filter: $nodeFilter, order: $sorting) {
+          count
+          items {
+            hostname
+            cluster
+            subCluster
+            schedulerState
+          }
+        }
+        # Get Current States fir Pie Charts
+        nodeStates(filter: $nodeFilter) {
+          state
+          count
+        }
+        # totalNodes includes multiples if shared jobs
+        jobsStatistics(
+          filter: $jobFilter
+          page: $paging
+          sortBy: TOTALJOBS
+          groupBy: SUBCLUSTER
+        ) {
+          id
+          totalJobs
+          totalUsers
+          totalCores
+          totalAccs
+        }
+      }
+    `,
+    variables: {
+      cluster: cluster,
+      metrics: ["flops_any", "mem_bw"], // Fixed names for roofline and status bars
+      from: from.toISOString(),
+      to: to.toISOString(),
+      jobFilter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+      nodeFilter: { cluster: { eq: cluster }},
+      paging: { itemsPerPage: -1, page: 1 }, // Get all: -1
+      sorting: { field: "startTime", type: "col", order: "DESC" }
+    },
+    requestPolicy: "network-only"
+  }));
+
+  const refinedStateData = $derived.by(() => {
+    return $statusQuery?.data?.nodeStates.
+      filter((e) => ['allocated', 'reserved', 'idle', 'mixed','down', 'unknown'].includes(e.state)).
+      sort((a, b) => b.count - a.count)
+  });
+
+  const refinedHealthData = $derived.by(() => {
+    return $statusQuery?.data?.nodeStates.
+      filter((e) => ['full', 'partial', 'failed'].includes(e.state)).
+      sort((a, b) => b.count - a.count)
+  });
+
+  /* Effects */
+  $effect(() => {
+    if ($statusQuery.data) {
+      let subClusters = clusters.find(
+        (c) => c.name == cluster,
+      ).subClusters;
+      for (let subCluster of subClusters) {
+        // Allocations
+        allocatedNodes[subCluster.name] =
+          $statusQuery.data.allocatedNodes.find(
+            ({ name }) => name == subCluster.name,
+          )?.count || 0;
+        allocatedCores[subCluster.name] =
+          $statusQuery.data.jobsStatistics.find(
+            ({ id }) => id == subCluster.name,
+          )?.totalCores || 0;
+        allocatedAccs[subCluster.name] =
+          $statusQuery.data.jobsStatistics.find(
+            ({ id }) => id == subCluster.name,
+          )?.totalAccs || 0;
+        // Infos
+        activeUsers[subCluster.name] =
+          $statusQuery.data.jobsStatistics.find(
+            ({ id }) => id == subCluster.name,
+          )?.totalUsers || 0;
+        runningJobs[subCluster.name] =
+          $statusQuery.data.jobsStatistics.find(
+            ({ id }) => id == subCluster.name,
+          )?.totalJobs || 0;
+        totalAccs[subCluster.name] =
+          (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || null;
+        // Keymetrics
+        flopRate[subCluster.name] =
+          Math.floor(
+            sumUp($statusQuery.data.nodeMetrics, subCluster.name, "flops_any") *
+              100,
+          ) / 100;
+        flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix;
+        flopRateUnitBase[subCluster.name] = subCluster.flopRateSimd.unit.base;
+        memBwRate[subCluster.name] =
+          Math.floor(
+            sumUp($statusQuery.data.nodeMetrics, subCluster.name, "mem_bw") * 100,
+          ) / 100;
+        memBwRateUnitPrefix[subCluster.name] =
+          subCluster.memoryBandwidth.unit.prefix;
+        memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base;
+      }
+    }
+  });
+
+  /* Const Functions */
+  const sumUp = (data, subcluster, metric) =>
+    data.reduce(
+      (sum, node) =>
+        node.subCluster == subcluster
+          ? sum +
+            (node.metrics
+              .find((m) => m.name == metric)
+              ?.metric?.series[0]?.statistics?.avg || 0
+            )
+          : sum,
+      0,
+    );
+
+  /* Functions */
+  function transformJobsStatsToData(subclusterData) {
+    /* c will contain values from 0 to 1 representing the duration */
+    let data = null
+    const x = [], y = [], c = [], day = 86400.0
+
+    if (subclusterData) {
+      for (let i = 0; i < subclusterData.length; i++) {
+        const flopsData = subclusterData[i].stats.find((s) => s.name == "flops_any")
+        const memBwData = subclusterData[i].stats.find((s) => s.name == "mem_bw")
+            
+        const f = flopsData.data.avg
+        const m = memBwData.data.avg
+        const d = subclusterData[i].duration / day
+
+        const intensity = f / m
+        if (Number.isNaN(intensity) || !Number.isFinite(intensity))
+            continue
+
+        x.push(intensity)
+        y.push(f)
+        // Long Jobs > 1 Day: Use max Color
+        if (d > 1.0) c.push(1.0)
+        else c.push(d)
+      }
+    } else {
+        console.warn("transformJobsStatsToData: metrics for 'mem_bw' and/or 'flops_any' missing!")
+    }
+
+    if (x.length > 0 && y.length > 0 && c.length > 0) {
+        data = [null, [x, y], c] // for dataformat see roofline.svelte
+    }
+    return data
+  }
+
+  function transformNodesStatsToData(subclusterData) {
+    let data = null
+    const x = [], y = []
+
+    if (subclusterData) {
+      for (let i = 0; i < subclusterData.length; i++) {
+        const flopsData = subclusterData[i].metrics.find((s) => s.name == "flops_any")
+        const memBwData = subclusterData[i].metrics.find((s) => s.name == "mem_bw")
+
+        const f = flopsData.metric.series[0].statistics.avg
+        const m = memBwData.metric.series[0].statistics.avg
+
+        let intensity = f / m
+        if (Number.isNaN(intensity) || !Number.isFinite(intensity)) {
+            intensity = 0.0 // Set to Float Zero: Will not show in Log-Plot (Always below render limit)
+        }
+
+        x.push(intensity)
+        y.push(f)
+      }
+    } else {
+        // console.warn("transformNodesStatsToData: metrics for 'mem_bw' and/or 'flops_any' missing!")
+    }
+
+    if (x.length > 0 && y.length > 0) {
+        data = [null, [x, y]] // for dataformat see roofline.svelte
+    }
+    return data
+  }
+
+  function transformJobsStatsToInfo(subclusterData) {
+    if (subclusterData) {
+        return subclusterData.map((sc) => { return {id: sc.id, jobId: sc.jobId, numNodes: sc.numNodes, numAcc: sc?.numAccelerators? sc.numAccelerators : 0, duration: formatDurationTime(sc.duration)} })
+    } else {
+        console.warn("transformJobsStatsToInfo: jobInfo missing!")
+        return []
+    }
+  }
+
+  function transformNodesStatsToInfo(subClusterData) {
+    let result = [];
+    if (subClusterData) { //  && $nodesState?.data) {
+      // Use Nodes as Returned from CCMS, *NOT* as saved in DB via SlurmState-API!
+      for (let j = 0; j < subClusterData.length; j++) {
+        const nodeName = subClusterData[j]?.host ? subClusterData[j].host : "unknown"
+        const nodeMatch = $statusQuery?.data?.nodes?.items?.find((n) => n.hostname == nodeName && n.subCluster == subClusterData[j].subCluster);
+        const schedulerState = nodeMatch?.schedulerState ? nodeMatch.schedulerState : "notindb"
+        let numJobs = 0
+
+        if ($statusQuery?.data) {
+          const nodeJobs = $statusQuery?.data?.jobs?.items?.filter((job) => job.resources.find((res) => res.hostname == nodeName))
+          numJobs = nodeJobs?.length ? nodeJobs.length : 0
+        }
+
+        result.push({nodeName: nodeName, schedulerState: schedulerState, numJobs: numJobs})
+      };
+    };
+    return result
+  }
+
+  function legendColors(targetIdx) {
+    // Reuses first color if targetIdx overflows
+    let c;
+      if (useCbColors) {
+        c = [...colors['colorblind']];
+      } else if (useAltColors) {
+        c = [...colors['alternative']];
+      } else {
+        c = [...colors['default']];
+      }
+    return  c[(c.length + targetIdx) % c.length];
+  }
+
+</script>
+
+<!-- Refresher and space for other options -->
+<Row class="justify-content-between">
+    <Col xs="12" md="5" lg="4" xl="3">
+    <TimeSelection
+      customEnabled={false}
+      applyTime={(newFrom, newTo) => {
+        stackedFrom = Math.floor(newFrom.getTime() / 1000);
+      }}
+    />
+  </Col>
+  <Col xs="12" md="5" lg="4" xl="3">
+    <Refresher
+      initially={120}
+      onRefresh={(interval) => {
+        from = new Date(Date.now() - 5 * 60 * 1000);
+        to = new Date(Date.now());
+
+        if (interval) stackedFrom += Math.floor(interval / 1000);
+        else stackedFrom += 1 // Workaround: TineSelection not linked, just trigger new data on manual refresh
+      }}
+    />
+  </Col>
+</Row>
+
+<hr/>
+
+<!-- Node Stack Charts Dev-->
+{#if $statesTimed.data}
+  <Row cols={{ md: 2 , sm: 1}} class="mb-3 justify-content-center">
+    <Col class="px-3 mt-2 mt-lg-0">
+      <div bind:clientWidth={stackedWidth1}>
+        {#key $statesTimed?.data?.nodeStates}
+          <h4 class="text-center">
+            {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Node States Over Time
+          </h4>
+          <Stacked
+            data={$statesTimed?.data?.nodeStates}
+            width={stackedWidth1 * 0.95}
+            xlabel="Time"
+            ylabel="Nodes"
+            yunit = "#Count"
+            title = "Node States"
+            stateType = "Node"
+          />
+        {/key}
+      </div>
+    </Col>
+    <Col class="px-3 mt-2 mt-lg-0">
+      <div bind:clientWidth={stackedWidth2}>
+        {#key $statesTimed?.data?.healthStates}
+          <h4 class="text-center">
+            {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Health States Over Time
+          </h4>
+          <Stacked
+            data={$statesTimed?.data?.healthStates}
+            width={stackedWidth2 * 0.95}
+            xlabel="Time"
+            ylabel="Nodes"
+            yunit = "#Count"
+            title = "Health States"
+            stateType = "Health"
+          />
+        {/key}
+      </div>
+    </Col>
+  </Row>
+{/if}
+
+<hr/>
+
+<!-- Node Health Pis, later Charts -->
+{#if $statusQuery?.data?.nodeStates}
+  <Row cols={{ lg: 4, md: 2 , sm: 1}} class="mb-3 justify-content-center">
+    <Col class="px-3 mt-2 mt-lg-0">
+      <div bind:clientWidth={pieWidth}>
+        {#key refinedStateData}
+          <h4 class="text-center">
+            Current {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Node States
+          </h4>
+          <Pie
+            {useAltColors}
+            canvasId="hpcpie-slurm"
+            size={pieWidth * 0.55}
+            sliceLabel="Nodes"
+            quantities={refinedStateData.map(
+              (sd) => sd.count,
+            )}
+            entities={refinedStateData.map(
+              (sd) => sd.state,
+            )}
+          />
+        {/key}
+      </div>
+    </Col>
+    <Col class="px-4 py-2">
+      {#key refinedStateData}
+        <Table>
+          <tr class="mb-2">
+            <th></th>
+            <th>Current State</th>
+            <th>Nodes</th>
+          </tr>
+          {#each refinedStateData as sd, i}
+            <tr>
+              <td><Icon name="circle-fill" style="color: {legendColors(i)};"/></td>
+              <td>{sd.state}</td>
+              <td>{sd.count}</td>
+            </tr>
+          {/each}
+        </Table>
+      {/key}
+    </Col>
+
+    <Col class="px-3 mt-2 mt-lg-0">
+      <div bind:clientWidth={pieWidth}>
+        {#key refinedHealthData}
+          <h4 class="text-center">
+            Current {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Node Health
+          </h4>
+          <Pie
+            {useAltColors}
+            canvasId="hpcpie-health"
+            size={pieWidth * 0.55}
+            sliceLabel="Nodes"
+            quantities={refinedHealthData.map(
+              (sd) => sd.count,
+            )}
+            entities={refinedHealthData.map(
+              (sd) => sd.state,
+            )}
+          />
+        {/key}
+      </div>
+    </Col>
+    <Col class="px-4 py-2">
+      {#key refinedHealthData}
+        <Table>
+          <tr class="mb-2">
+            <th></th>
+            <th>Current Health</th>
+            <th>Nodes</th>
+          </tr>
+          {#each refinedHealthData as hd, i}
+            <tr>
+              <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+              <td>{hd.state}</td>
+              <td>{hd.count}</td>
+            </tr>
+          {/each}
+        </Table>
+      {/key}
+    </Col>
+  </Row>
+{/if}
+
+<hr/>
+<!-- Gauges & Roofline per Subcluster-->
+{#if $statusQuery.data}
+  {#each clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
+    <Row cols={{ lg: 3, md: 1 , sm: 1}} class="mb-3 justify-content-center">
+      <Col class="px-3">
+        <Card class="h-auto mt-1">
+          <CardHeader>
+            <CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
+            <span>{subCluster.processorType}</span>
+          </CardHeader>
+          <CardBody>
+            <Table borderless>
+              <tr class="py-2">
+                <td style="font-size:x-large;">{runningJobs[subCluster.name]} Running Jobs</td>
+                <td colspan="2" style="font-size:x-large;">{activeUsers[subCluster.name]} Active Users</td>
+              </tr>
+              <hr class="my-1"/>
+              <tr class="pt-2">
+                <td style="font-size: large;">
+                  Flop Rate (<span style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]">Any</span>)
+                </td>
+                <td colspan="2" style="font-size: large;">
+                  Memory BW Rate
+                </td>
+              </tr>
+              <tr class="pb-2">
+                <td style="font-size:x-large;">
+                  {flopRate[subCluster.name]} 
+                  {flopRateUnitPrefix[subCluster.name]}{flopRateUnitBase[subCluster.name]}
+                </td>
+                <td colspan="2" style="font-size:x-large;">
+                  {memBwRate[subCluster.name]} 
+                  {memBwRateUnitPrefix[subCluster.name]}{memBwRateUnitBase[subCluster.name]}
+                </td>
+              </tr>
+              <hr class="my-1"/>
+              <tr class="py-2">
+                <th scope="col">Allocated Nodes</th>
+                <td style="min-width: 100px;"
+                  ><div class="col">
+                    <Progress
+                      value={allocatedNodes[subCluster.name]}
+                      max={subCluster.numberOfNodes}
+                    />
+                  </div></td
+                >
+                <td
+                  >{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes}
+                  Nodes</td
+                >
+              </tr>
+              <tr class="py-2">
+                <th scope="col">Allocated Cores</th>
+                <td style="min-width: 100px;"
+                  ><div class="col">
+                    <Progress
+                      value={allocatedCores[subCluster.name]}
+                      max={subCluster.socketsPerNode * subCluster.coresPerSocket * subCluster.numberOfNodes}
+                    />
+                  </div></td
+                >
+                <td
+                  >{allocatedCores[subCluster.name]} / {subCluster.socketsPerNode * subCluster.coresPerSocket * subCluster.numberOfNodes}
+                  Cores</td
+                >
+              </tr>
+              {#if totalAccs[subCluster.name] !== null}
+                <tr class="py-2">
+                  <th scope="col">Allocated Accelerators</th>
+                  <td style="min-width: 100px;"
+                    ><div class="col">
+                      <Progress
+                        value={allocatedAccs[subCluster.name]}
+                        max={totalAccs[subCluster.name]}
+                      />
+                    </div></td
+                  >
+                  <td
+                    >{allocatedAccs[subCluster.name]} / {totalAccs[subCluster.name]}
+                    Accelerators</td
+                  >
+                </tr>
+              {/if}
+            </Table>
+          </CardBody>
+        </Card>
+      </Col>
+      <Col class="px-3 mt-2 mt-lg-0">
+        <div bind:clientWidth={plotWidths[i]}>
+          {#key $statusQuery?.data?.nodeMetrics}
+            <Roofline
+              useColors={true}
+              allowSizeChange
+              width={plotWidths[i] - 10}
+              height={300}
+              cluster={cluster}
+              subCluster={subCluster}
+              roofData={transformNodesStatsToData($statusQuery?.data?.nodeMetrics.filter(
+                  (data) => data.subCluster == subCluster.name,
+                )
+              )}
+              nodesData={transformNodesStatsToInfo($statusQuery?.data?.nodeMetrics.filter(
+                  (data) => data.subCluster == subCluster.name,
+                )
+              )}
+            />
+          {/key}
+        </div>
+      </Col>
+      <Col class="px-3 mt-2 mt-lg-0">
+        <div bind:clientWidth={plotWidths[i]}>
+          {#key $statusQuery?.data?.jobsMetricStats}
+            <Roofline
+              useColors={true}
+              allowSizeChange
+              width={plotWidths[i] - 10}
+              height={300}
+              subCluster={subCluster}
+              roofData={transformJobsStatsToData($statusQuery?.data?.jobsMetricStats.filter(
+                  (data) => data.subCluster == subCluster.name,
+                )
+              )}
+              jobsData={transformJobsStatsToInfo($statusQuery?.data?.jobsMetricStats.filter(
+                  (data) => data.subCluster == subCluster.name,
+                )
+              )}
+            />
+          {/key}
+        </div>
+      </Col>
+    </Row>
+  {/each}
+{:else}
+  <Card class="mx-4" body color="warning">Cannot render status rooflines: No data!</Card>
+{/if}

web/frontend/src/status/dashdetails/UsageDash.svelte

@@ -0,0 +1,551 @@
+<!--
+  @component Main cluster status view component; renders current system-usage information
+
+  Properties:
+  - `presetCluster String`: The cluster to show status information for
+-->
+
+ <script>
+  import {
+    Row,
+    Col,
+    Spinner,
+    Card,
+    Table,
+    Icon,
+    Tooltip,
+    Input,
+    InputGroup,
+    InputGroupText
+  } from "@sveltestrap/sveltestrap";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    scramble,
+    scrambleNames,
+    convert2uplot,
+  } from "../../generic/utils.js";
+  import Pie, { colors } from "../../generic/plots/Pie.svelte";
+  import Histogram from "../../generic/plots/Histogram.svelte";
+  import Refresher from "../../generic/helper/Refresher.svelte";
+
+  /* Svelte 5 Props */
+  let {
+    presetCluster,
+    useCbColors = false,
+    useAltColors = false
+  } = $props();
+
+  /* Const Init */
+  const client = getContextClient();
+  const durationBinOptions = ["1m","10m","1h","6h","12h"];
+
+  /* State Init */
+  let cluster = $state(presetCluster)
+  let pagingState = $state({page: 1, itemsPerPage: 10}) // Top 10
+  let selectedHistograms = $state([]) // Dummy For Refresh 
+  let colWidthJobs = $state(0);
+  let colWidthNodes = $state(0);
+  let colWidthAccs = $state(0);
+  let numDurationBins = $state("1h");
+
+  /* Derived */
+  const topJobsQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $filter: [JobFilter!]!
+        $paging: PageRequest!
+      ) {
+        topUser: jobsStatistics(
+          filter: $filter
+          page: $paging
+          sortBy: TOTALJOBS
+          groupBy: USER
+        ) {
+          id
+          name
+          totalJobs
+        }
+        topProjects: jobsStatistics(
+          filter: $filter
+          page: $paging
+          sortBy: TOTALJOBS
+          groupBy: PROJECT
+        ) {
+          id
+          totalJobs
+        }
+      }
+    `,
+    variables: {
+      filter: [{ state: ["running"] }, { cluster: { eq: cluster} }],
+      paging: pagingState // Top 10
+    },
+    requestPolicy: "network-only"
+  }));
+
+  const topNodesQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $filter: [JobFilter!]!
+        $paging: PageRequest!
+      ) {
+        topUser: jobsStatistics(
+          filter: $filter
+          page: $paging
+          sortBy: TOTALNODES
+          groupBy: USER
+        ) {
+          id
+          name
+          totalNodes
+        }
+        topProjects: jobsStatistics(
+          filter: $filter
+          page: $paging
+          sortBy: TOTALNODES
+          groupBy: PROJECT
+        ) {
+          id
+          totalNodes
+        }
+      }
+    `,
+    variables: {
+      filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+      paging: pagingState
+    },
+    requestPolicy: "network-only"
+  }));
+
+  const topAccsQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $filter: [JobFilter!]!
+        $paging: PageRequest!
+      ) {
+        topUser: jobsStatistics(
+          filter: $filter
+          page: $paging
+          sortBy: TOTALACCS
+          groupBy: USER
+        ) {
+          id
+          name
+          totalAccs
+        }
+        topProjects: jobsStatistics(
+          filter: $filter
+          page: $paging
+          sortBy: TOTALACCS
+          groupBy: PROJECT
+        ) {
+          id
+          totalAccs
+        }
+      }
+    `,
+    variables: {
+      filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+      paging: pagingState
+    },
+    requestPolicy: "network-only"
+  }));
+
+  // Note: nodeMetrics are requested on configured $timestep resolution
+  const nodeStatusQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $filter: [JobFilter!]!
+        $selectedHistograms: [String!]
+        $numDurationBins: String
+      ) {
+        jobsStatistics(filter: $filter, metrics: $selectedHistograms, numDurationBins: $numDurationBins) {
+          histDuration {
+            count
+            value
+          }
+          histNumNodes {
+            count
+            value
+          }
+          histNumAccs {
+            count
+            value
+          }
+        }
+      }
+    `,
+    variables: {
+      filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+      selectedHistograms: selectedHistograms, // No Metrics requested for node hardware stats
+      numDurationBins: numDurationBins,
+    },
+    requestPolicy: "network-only"
+  }));
+
+  /* Functions */
+  function legendColors(targetIdx) {
+    // Reuses first color if targetIdx overflows
+    let c;
+      if (useCbColors) {
+        c = [...colors['colorblind']];
+      } else if (useAltColors) {
+        c = [...colors['alternative']];
+      } else {
+        c = [...colors['default']];
+      }
+    return  c[(c.length + targetIdx) % c.length];
+  }
+</script>
+
+<!-- Refresher and space for other options -->
+<Row class="justify-content-between">
+    <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
+    <InputGroup>
+      <InputGroupText>
+        <Icon name="bar-chart-line-fill" />
+      </InputGroupText>
+      <InputGroupText>
+        Duration Bin Size
+      </InputGroupText>
+      <Input type="select" bind:value={numDurationBins}>
+        {#each durationBinOptions as dbin}
+          <option value={dbin}>{dbin}</option>
+        {/each}
+      </Input>
+    </InputGroup>
+  </Col>
+  <Col xs="12" md="5" lg="4" xl="3">
+    <Refresher
+      initially={120}
+      onRefresh={() => {
+        pagingState = { page:1, itemsPerPage: 10 };
+        selectedHistograms = [...$state.snapshot(selectedHistograms)];
+      }}
+    />
+  </Col>
+</Row>
+
+<hr/>
+
+<!-- Job Duration, Top Users and Projects-->
+{#if $topJobsQuery.fetching || $nodeStatusQuery.fetching}
+  <Spinner />
+{:else if $topJobsQuery.data && $nodeStatusQuery.data}
+  <Row>
+    <Col xs="12" lg="4" class="p-2">
+      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
+        <Histogram
+          data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histDuration)}
+          title="Duration Distribution"
+          xlabel="Current Job Runtimes"
+          xunit="Runtime"
+          ylabel="Number of Jobs"
+          yunit="Jobs"
+          height="275"
+          usesBins
+          xtime
+          enableFlip
+        />
+      {/key}
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <div bind:clientWidth={colWidthJobs}>
+        <h4 class="text-center">
+          Top Users: Jobs
+        </h4>
+        <Pie
+          {useAltColors}
+          canvasId="hpcpie-jobs-users"
+          size={colWidthJobs * 0.75}
+          sliceLabel="Jobs"
+          quantities={$topJobsQuery.data.topUser.map(
+            (tu) => tu['totalJobs'],
+          )}
+          entities={$topJobsQuery.data.topUser.map((tu) => scrambleNames ? scramble(tu.id) : tu.id)}
+        />
+      </div>
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <Table>
+        <tr class="mb-2">
+          <th></th>
+          <th style="padding-left: 0.5rem;">User</th>
+          <th>Jobs</th>
+        </tr>
+        {#each $topJobsQuery.data.topUser as tu, i}
+          <tr>
+            <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+            <td id="topName-jobs-{tu.id}">
+              <a target="_blank" href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
+                >{scrambleNames ? scramble(tu.id) : tu.id}
+              </a>
+            </td>
+            {#if tu?.name}
+              <Tooltip
+                target={`topName-jobs-${tu.id}`}
+                placement="left"
+                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
+              >
+            {/if}
+            <td>{tu['totalJobs']}</td>
+          </tr>
+        {/each}
+      </Table>
+    </Col>
+
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <h4 class="text-center">
+        Top Projects: Jobs
+      </h4>
+      <Pie
+        {useAltColors}
+        canvasId="hpcpie-jobs-projects"
+        size={colWidthJobs * 0.75}
+        sliceLabel={'Jobs'}
+        quantities={$topJobsQuery.data.topProjects.map(
+          (tp) => tp['totalJobs'],
+        )}
+        entities={$topJobsQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
+      />
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <Table>
+        <tr class="mb-2">
+          <th></th>
+          <th style="padding-left: 0.5rem;">Project</th>
+          <th>Jobs</th>
+        </tr>
+        {#each $topJobsQuery.data.topProjects as tp, i}
+          <tr>
+            <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+            <td>
+              <a target="_blank" href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"
+                >{scrambleNames ? scramble(tp.id) : tp.id}
+              </a>
+            </td>
+            <td>{tp['totalJobs']}</td>
+          </tr>
+        {/each}
+      </Table>
+    </Col>
+  </Row>
+{:else}
+  <Card class="mx-4" body color="warning">Cannot render job status charts: No data!</Card>
+{/if}
+
+<hr/>
+
+<!-- Node Distribution, Top Users and Projects-->
+{#if $topNodesQuery.fetching || $nodeStatusQuery.fetching}
+  <Spinner />
+{:else if $topNodesQuery.data && $nodeStatusQuery.data}
+  <Row>
+    <Col xs="12" lg="4" class="p-2">
+      <Histogram
+        data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumNodes)}
+        title="Number of Nodes Distribution"
+        xlabel="Allocated Nodes"
+        xunit="Nodes"
+        ylabel="Number of Jobs"
+        yunit="Jobs"
+        height="275"
+        enableFlip
+      />
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <div bind:clientWidth={colWidthNodes}>
+        <h4 class="text-center">
+          Top Users: Nodes
+        </h4>
+        <Pie
+          {useAltColors}
+          canvasId="hpcpie-nodes-users"
+          size={colWidthNodes * 0.75}
+          sliceLabel="Nodes"
+          quantities={$topNodesQuery.data.topUser.map(
+            (tu) => tu['totalNodes'],
+          )}
+          entities={$topNodesQuery.data.topUser.map((tu) => scrambleNames ? scramble(tu.id) : tu.id)}
+        />
+      </div>
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <Table>
+        <tr class="mb-2">
+          <th></th>
+          <th style="padding-left: 0.5rem;">User</th>
+          <th>Nodes</th>
+        </tr>
+        {#each $topNodesQuery.data.topUser as tu, i}
+          <tr>
+            <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+            <td id="topName-nodes-{tu.id}">
+              <a target="_blank" href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
+                >{scrambleNames ? scramble(tu.id) : tu.id}
+              </a>
+            </td>
+            {#if tu?.name}
+              <Tooltip
+                target={`topName-nodes-${tu.id}`}
+                placement="left"
+                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
+              >
+            {/if}
+            <td>{tu['totalNodes']}</td>
+          </tr>
+        {/each}
+      </Table>
+    </Col>
+
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <h4 class="text-center">
+        Top Projects: Nodes
+      </h4>
+      <Pie
+        {useAltColors}
+        canvasId="hpcpie-nodes-projects"
+        size={colWidthNodes * 0.75}
+        sliceLabel={'Nodes'}
+        quantities={$topNodesQuery.data.topProjects.map(
+          (tp) => tp['totalNodes'],
+        )}
+        entities={$topNodesQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
+      />
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <Table>
+        <tr class="mb-2">
+          <th></th>
+          <th style="padding-left: 0.5rem;">Project</th>
+          <th>Nodes</th>
+        </tr>
+        {#each $topNodesQuery.data.topProjects as tp, i}
+          <tr>
+            <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+            <td>
+              <a target="_blank" href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"
+                >{scrambleNames ? scramble(tp.id) : tp.id}
+              </a>
+            </td>
+            <td>{tp['totalNodes']}</td>
+          </tr>
+        {/each}
+      </Table>
+    </Col>
+  </Row>
+{:else}
+  <Card class="mx-4" body color="warning">Cannot render node status charts: No data!</Card>
+{/if}
+
+<hr/>
+
+<!-- Acc Distribution, Top Users and Projects-->
+{#if $topAccsQuery.fetching || $nodeStatusQuery.fetching}
+  <Spinner />
+{:else if $topAccsQuery.data && $nodeStatusQuery.data}
+  <Row>
+    <Col xs="12" lg="4" class="p-2">
+      <Histogram
+        data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumAccs)}
+        title="Number of Accelerators Distribution"
+        xlabel="Allocated Accs"
+        xunit="Accs"
+        ylabel="Number of Jobs"
+        yunit="Jobs"
+        height="275"
+        enableFlip
+      />
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <div bind:clientWidth={colWidthAccs}>
+        <h4 class="text-center">
+          Top Users: GPUs
+        </h4>
+        <Pie
+          {useAltColors}
+          canvasId="hpcpie-accs-users"
+          size={colWidthAccs * 0.75}
+          sliceLabel="GPUs"
+          quantities={$topAccsQuery.data.topUser.map(
+            (tu) => tu['totalAccs'],
+          )}
+          entities={$topAccsQuery.data.topUser.map((tu) => scrambleNames ? scramble(tu.id) : tu.id)}
+        />
+      </div>
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <Table>
+        <tr class="mb-2">
+          <th></th>
+          <th style="padding-left: 0.5rem;">User</th>
+          <th>GPUs</th>
+        </tr>
+        {#each $topAccsQuery.data.topUser as tu, i}
+          <tr>
+            <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+            <td id="topName-accs-{tu.id}">
+              <a target="_blank" href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
+                >{scrambleNames ? scramble(tu.id) : tu.id}
+              </a>
+            </td>
+            {#if tu?.name}
+              <Tooltip
+                target={`topName-accs-${tu.id}`}
+                placement="left"
+                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
+              >
+            {/if}
+            <td>{tu['totalAccs']}</td>
+          </tr>
+        {/each}
+      </Table>
+    </Col>
+
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <h4 class="text-center">
+        Top Projects: GPUs
+      </h4>
+      <Pie
+        {useAltColors}
+        canvasId="hpcpie-accs-projects"
+        size={colWidthAccs * 0.75}
+        sliceLabel={'GPUs'}
+        quantities={$topAccsQuery.data.topProjects.map(
+          (tp) => tp['totalAccs'],
+        )}
+        entities={$topAccsQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
+      />
+    </Col>
+    <Col xs="6" md="3" lg="2" class="p-2">
+      <Table>
+        <tr class="mb-2">
+          <th></th>
+          <th style="padding-left: 0.5rem;">Project</th>
+          <th>GPUs</th>
+        </tr>
+        {#each $topAccsQuery.data.topProjects as tp, i}
+          <tr>
+            <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
+            <td>
+              <a target="_blank" href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"
+                >{scrambleNames ? scramble(tp.id) : tp.id}
+              </a>
+            </td>
+            <td>{tp['totalAccs']}</td>
+          </tr>
+        {/each}
+      </Table>
+    </Col>
+  </Row>
+{:else}
+  <Card class="mx-4" body color="warning">Cannot render accelerator status charts: No data!</Card>
+{/if}