cleanup, adapt internalDash, remove debug query value

2025-12-16 20:26:16 +01:00 · 2025-12-12 17:51:54 +01:00
parent 0d62181272
commit 79e1c236fe
4 changed files with 54 additions and 154 deletions
--- a/web/frontend/src/DashPublic.root.svelte
+++ b/web/frontend/src/DashPublic.root.svelte
@@ -16,19 +16,14 @@
  } from "@urql/svelte";
  import {
    init,
-    scramble,
-    scrambleNames,
-    convert2uplot
  } from "./generic/utils.js";
  import {
-    formatDurationTime,
    formatNumber,
  } from "./generic/units.js";
  import {
    Row,
    Col,
    Card,
-    CardTitle,
    CardHeader,
    CardBody,
    Spinner,
@@ -39,9 +34,10 @@
  import Roofline from "./generic/plots/Roofline.svelte";
  import Pie, { colors } from "./generic/plots/Pie.svelte";
  import Stacked from "./generic/plots/Stacked.svelte";
-  // import Histogram from "./generic/plots/Histogram.svelte";
  import DoubleMetric from "./generic/plots/DoubleMetricPlot.svelte";

+  // Todo: Refresher-Tick
+
  /* Svelte 5 Props */
  let {
    presetCluster,
@@ -53,7 +49,6 @@
  const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false

  /* States */
-  let pagingState = $state({page: 1, itemsPerPage: 10}) // Top 10
  let from = $state(new Date(Date.now() - (5 * 60 * 1000)));
  let clusterFrom = $state(new Date(Date.now() - (8 * 60 * 60 * 1000)));
  let to = $state(new Date(Date.now()));
@@ -68,13 +63,8 @@
  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) {
+      query ($filter: [NodeFilter!], $type: String!) {
+        nodeStatesTimed(filter: $filter, type: $type) {
          state
          counts
          times
@@ -82,9 +72,8 @@
      }
    `,
    variables: {
-      filter: { cluster: { eq: presetCluster }, timeStart: stackedFrom}, // DEBUG VALUE 1760096999, use StackedFrom
-      typeNode: "node",
-      typeHealth: "health"
+      filter: { cluster: { eq: presetCluster }, timeStart: stackedFrom},
+      type: "node",
    },
    requestPolicy: "network-only"
  }));
@@ -97,7 +86,6 @@
      query (
        $cluster: String!
        $metrics: [String!]
-        # $nmetrics: [String!]
        $from: Time!
        $to: Time!
        $clusterFrom: Time!
@@ -207,7 +195,6 @@
    variables: {
      cluster: presetCluster,
      metrics: ["flops_any", "mem_bw"], // Metrics For Cluster Plot and Roofline
-      // nmetrics: ["cpu_load", "acc_utilization"], // Metrics for Node Graph
      from: from.toISOString(),
      clusterFrom: clusterFrom.toISOString(),
      to: to.toISOString(),
@@ -219,31 +206,6 @@
    requestPolicy: "network-only"
  }));

-  const topJobsQuery = $derived(queryStore({
-    client: client,
-    query: gql`
-      query (
-        $filter: [JobFilter!]!
-        $paging: PageRequest!
-      ) {
-        jobsStatistics(
-          filter: $filter
-          page: $paging
-          sortBy: TOTALJOBS
-          groupBy: PROJECT
-        ) {
-          id
-          totalJobs
-        }
-      }
-    `,
-    variables: {
-      filter: [{ state: ["running"] }, { cluster: { eq: presetCluster} }],
-      paging: pagingState // Top 10
-    },
-    requestPolicy: "network-only"
-  }));
-
  // Note: nodeMetrics are requested on configured $timestep resolution
  const nodeStatusQuery = $derived(queryStore({
    client: client,
@@ -351,19 +313,6 @@
  });

  /* Functions */
-  // function legendColors(targetIdx, useAltColors) {
-  //   // 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];
-  // }
-
  function transformNodesStatsToData(subclusterData) {
    let data = null
    const x = [], y = []
@@ -415,30 +364,18 @@
    return result
  }

-  /* Inspect */
-  $inspect(clusterInfo).with((type, clusterInfo) => {
-    console.log(type, 'clusterInfo', clusterInfo)
-	});
-
-  $inspect($statusQuery?.data?.clusterMetrics).with((type, clusterMetrics) => {
-    console.log(type, 'clusterMetrics', clusterMetrics)
-	});
-
 </script>

 <Card style="height: 98vh;">
-  <!-- <CardHeader class="text-center">
-    <h3 class="mb-0">{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)} Dashboard</h3>
-  </CardHeader> -->
  <CardBody class="align-content-center">
-    {#if $statusQuery.fetching || $statesTimed.fetching || $topJobsQuery.fetching || $nodeStatusQuery.fetching}
+    {#if $statusQuery.fetching || $statesTimed.fetching || $nodeStatusQuery.fetching}
      <Row class="justify-content-center">
        <Col xs="auto">
          <Spinner />
        </Col>
      </Row>

-    {:else if $statusQuery.error || $statesTimed.error || $topJobsQuery.error || $nodeStatusQuery.error}
+    {:else if $statusQuery.error || $statesTimed.error || $nodeStatusQuery.error}
      <Row cols={{xs:1, md:2}}>
        {#if $statusQuery.error}
          <Col>
@@ -450,11 +387,6 @@
            <Card color="danger">Error Requesting StatesTimed: {$statesTimed.error.message}</Card>
          </Col>
        {/if}
-        {#if $topJobsQuery.error}
-          <Col>
-            <Card color="danger">Error Requesting TopJobsQuery: {$topJobsQuery.error.message}</Card>
-          </Col>
-        {/if}
        {#if $nodeStatusQuery.error}
          <Col>
            <Card color="danger">Error Requesting NodeStatusQuery: {$nodeStatusQuery.error.message}</Card>
@@ -477,10 +409,6 @@

        <Col> <!-- Utilization Info Card -->
          <Card class="h-100">
-            <!-- <CardHeader>
-              <CardTitle class="mb-0">Cluster "{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}"</CardTitle>
-              <span>{[...clusterInfo?.processorTypes].toString()}</span>
-            </CardHeader> -->
            <CardBody>
              <Table borderless>
                <tr class="py-2">
@@ -559,7 +487,7 @@
          </Card>
        </Col>

-        <Col> <!-- Resources/Job Histogram OR Total Cluster Metric in Time SUMS-->
+        <Col> <!-- Total Cluster Metric in Time SUMS-->
          <div bind:clientWidth={colWidthTotals}>
            <DoubleMetric
              width={colWidthTotals}
@@ -570,29 +498,6 @@
              fixLinewidth={2}
            />
          </div>
-          <!-- {#if clusterInfo?.totalAccs == 0}
-            <Histogram
-              data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumCores)}
-              title="Number of Cores Distribution"
-              xlabel="Allocated Cores"
-              xunit="Nodes"
-              ylabel="Number of Jobs"
-              yunit="Jobs"
-              height="275"
-              enableFlip
-            />
-          {:else}
-            <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
-            />
-          {/if} -->
        </Col>

        <Col> <!-- Nodes Roofline -->
@@ -620,9 +525,6 @@
            <Col class="px-3 mt-2 mt-lg-0">
              <div bind:clientWidth={colWidthStates}>
                {#key refinedStateData}
-                  <!-- <h4 class="text-center">
-                    Cluster Status
-                  </h4> -->
                  <Pie
                    canvasId="hpcpie-slurm"
                    size={colWidthStates * 0.66}
@@ -663,9 +565,9 @@

        <Col> <!-- Stacked SchedState -->
          <div bind:clientWidth={colWidthStacked}>
-            {#key $statesTimed?.data?.nodeStates}
+            {#key $statesTimed?.data?.nodeStatesTimed}
              <Stacked
-                data={$statesTimed?.data?.nodeStates}
+                data={$statesTimed?.data?.nodeStatesTimed}
                width={colWidthStacked * 0.95}
                xlabel="Time"
                ylabel="Nodes"
--- a/web/frontend/src/generic/plots/Roofline.svelte
+++ b/web/frontend/src/generic/plots/Roofline.svelte
@@ -687,13 +687,6 @@
                const originY = u.valToPos(yMinimum ? yMinimum : 0.01, "y", true);

                const outerX = u.valToPos(1000, "x", true); // rightmost x in plot coords
-                const outerY = u.valToPos(
-                  subCluster?.flopRateSimd?.value
-                    ? nearestThousand(subCluster.flopRateSimd.value)
-                    : 10000,
-                  "y",
-                  true
-                );

                const scalarKneeX = u.valToPos(scalarKnee, "x", true) // Value, axis, toCanvasPixels
                const simdKneeX = u.valToPos(simdKnee, "x", true)
--- a/web/frontend/src/status/DashInternal.svelte
+++ b/web/frontend/src/status/DashInternal.svelte
@@ -18,7 +18,6 @@
    init,
    scramble,
    scrambleNames,
-    convert2uplot
  } from "../generic/utils.js";
  import {
    formatDurationTime,
@@ -39,7 +38,7 @@
  import Roofline from "../generic/plots/Roofline.svelte";
  import Pie, { colors } from "../generic/plots/Pie.svelte";
  import Stacked from "../generic/plots/Stacked.svelte";
-  import Histogram from "../generic/plots/Histogram.svelte";
+  import DoubleMetric from "../generic/plots/DoubleMetricPlot.svelte";

  /* Svelte 5 Props */
  let {
@@ -54,10 +53,12 @@
  /* States */
  let pagingState = $state({page: 1, itemsPerPage: 10}) // Top 10
  let from = $state(new Date(Date.now() - 5 * 60 * 1000));
+  let clusterFrom = $state(new Date(Date.now() - (8 * 60 * 60 * 1000)));
  let to = $state(new Date(Date.now()));
  let stackedFrom = $state(Math.floor(Date.now() / 1000) - 14400);
  let colWidthJobs = $state(0);
  let colWidthRoof = $state(0);
+  let colWidthTotals =$state(0);
  let colWidthStacked1 = $state(0);
  let colWidthStacked2 = $state(0);

@@ -80,7 +81,7 @@
      }
    `,
    variables: {
-      filter: { cluster: { eq: presetCluster }, timeStart: 1760096999}, // DEBUG VALUE, use StackedFrom
+      filter: { cluster: { eq: presetCluster }, timeStart: stackedFrom},
      typeNode: "node",
      typeHealth: "health"
    },
@@ -97,6 +98,7 @@
        $metrics: [String!]
        $from: Time!
        $to: Time!
+        $clusterFrom: Time!
        $jobFilter: [JobFilter!]!
        $paging: PageRequest!
        $sorting: OrderByInput!
@@ -164,6 +166,24 @@
          totalCores
          totalAccs
        }
+        # ClusterMetrics for doubleMetricPlot
+        clusterMetrics(
+          cluster: $cluster
+          metrics: $metrics
+          from: $clusterFrom
+          to: $to
+        ) {
+          nodeCount
+          metrics {
+            name
+            unit {
+              prefix
+              base
+            }
+            timestep
+            data
+          }
+        }
      }
    `,
    variables: {
@@ -171,6 +191,7 @@
      metrics: ["flops_any", "mem_bw"], // Fixed names for roofline and status bars
      from: from.toISOString(),
      to: to.toISOString(),
+      clusterFrom: clusterFrom.toISOString(),
      jobFilter: [{ state: ["running"] }, { cluster: { eq: presetCluster } }],
      paging: { itemsPerPage: -1, page: 1 }, // Get all: -1
      sorting: { field: "startTime", type: "col", order: "DESC" }
@@ -360,18 +381,10 @@
    }
  }

-  /* Inspect */
-  $inspect(clusterInfo).with((type, clusterInfo) => {
-    console.log(type, 'clusterInfo', clusterInfo)
-	});
-
 </script>

-<Card>
-  <CardHeader class="text-center">
-    <h3 class="mb-0">{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)} Dashboard</h3>
-  </CardHeader>
-  <CardBody>
+<Card style="height: 88vh;">
+  <CardBody class="align-content-center">
    {#if $statusQuery.fetching || $statesTimed.fetching || $topJobsQuery.fetching || $nodeStatusQuery.fetching}
      <Row class="justify-content-center">
        <Col xs="auto">
@@ -409,7 +422,7 @@
          <Card class="h-auto mt-1">
            <CardHeader>
              <CardTitle class="mb-0">Cluster "{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}"</CardTitle>
-              <span>{[...clusterInfo?.processorTypes].toString()}</span>
+              <span>{[...clusterInfo?.processorTypes].join(', ')}</span>
            </CardHeader>
            <CardBody>
              <Table borderless>
@@ -488,6 +501,7 @@
            </CardBody>
          </Card>
        </Col>
+
        <Col> <!-- Pie Jobs -->
          <Row cols={{xs:1, md:2}}>
            <Col class="p-2">
@@ -529,6 +543,7 @@
            </Col>
          </Row>
        </Col>
+
        <Col> <!-- Job Roofline -->
          <div bind:clientWidth={colWidthRoof}>
            {#key $statusQuery?.data?.jobsMetricStats}
@@ -544,31 +559,20 @@
            {/key}
          </div>
        </Col>
-        <Col> <!-- Resources/Job Histogram -->
-          {#if clusterInfo?.totalAccs == 0}
-            <Histogram
-              data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumCores)}
-              title="Number of Cores Distribution"
-              xlabel="Allocated Cores"
-              xunit="Nodes"
-              ylabel="Number of Jobs"
-              yunit="Jobs"
-              height="275"
-              enableFlip
+
+        <Col> <!-- Total Cluster Metric in Time SUMS-->
+          <div bind:clientWidth={colWidthTotals}>
+            <DoubleMetric
+              width={colWidthTotals}
+              timestep={$statusQuery?.data?.clusterMetrics[0]?.timestep || 60}
+              numNodes={$statusQuery?.data?.clusterMetrics?.nodeCount || 0}
+              metricData={$statusQuery?.data?.clusterMetrics?.metrics || []}
+              cluster={presetCluster}
+              fixLinewidth={2}
            />
-          {:else}
-            <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
-            />
-          {/if}
+          </div>
        </Col>
+
        <Col> <!-- Stacked SchedState -->
          <div bind:clientWidth={colWidthStacked1}>
            {#key $statesTimed?.data?.nodeStates}
@@ -584,6 +588,7 @@
            {/key}
          </div>
        </Col>
+
        <Col> <!-- Stacked Healthstate -->
          <div bind:clientWidth={colWidthStacked2}>
            {#key $statesTimed?.data?.healthStates}
--- a/web/frontend/src/status/dashdetails/StatusDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatusDash.svelte
@@ -83,7 +83,7 @@
      }
    `,
    variables: {
-      filter: { cluster: { eq: cluster }, timeStart: 1760096999},
+      filter: { cluster: { eq: cluster }, timeStart: stackedFrom},
      typeNode: "node",
      typeHealth: "health"
    },