load statusDetails GQL on tab change

2026-02-28 13:27:30 +01:00 · 2026-02-25 19:12:18 +01:00
parent 92236b1d1d
commit 0a0db36433
5 changed files with 56 additions and 49 deletions
--- a/web/frontend/src/status/DashDetails.svelte
+++ b/web/frontend/src/status/DashDetails.svelte
@@ -36,6 +36,9 @@
  const { query: initq } = init();
  const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false

+  /* State Init */
+  let activeTab = $state("");
+
  /* Derived */
  const subClusters = $derived($initq?.data?.clusters?.find((c) => c.name == presetCluster)?.subClusters || []);
 </script>
@@ -63,22 +66,22 @@
  </Row>
 {:else}
  <Card class="overflow-auto" style="height: auto;">
-    <TabContent>
+    <TabContent on:tab={(e) => (activeTab = e.detail)}>
      <TabPane tabId="status-dash" tab="Status" active>
        <CardBody>
-          <StatusDash clusters={$initq.data.clusters} {presetCluster}></StatusDash>
+          <StatusDash clusters={$initq.data.clusters} {presetCluster} loadMe={(activeTab === "status-dash")}></StatusDash>
        </CardBody>
      </TabPane>

      <TabPane tabId="health-dash" tab="Metric Status">
        <CardBody>
-          <HealthDash {presetCluster}></HealthDash>
+          <HealthDash {presetCluster} loadMe={(activeTab === "health-dash")}></HealthDash>
        </CardBody>
      </TabPane>

      <TabPane tabId="usage-dash" tab="Cluster Usage">
        <CardBody>
-          <UsageDash {presetCluster} {useCbColors}></UsageDash>
+          <UsageDash {presetCluster} {useCbColors} loadMe={(activeTab === "usage-dash")}></UsageDash>
        </CardBody>
      </TabPane>

@@ -86,7 +89,7 @@
        {#each subClusters.map(sc => sc.name) as scn}
        <TabPane tabId="{scn}-usage-dash" tab="{scn.charAt(0).toUpperCase() + scn.slice(1)} Usage">
          <CardBody>
-            <UsageDash {presetCluster} presetSubCluster={scn} {useCbColors}></UsageDash>
+            <UsageDash {presetCluster} presetSubCluster={scn} {useCbColors} loadMe={(activeTab === `${scn}-usage-dash`)}></UsageDash>
          </CardBody>
        </TabPane>
        {/each}
@@ -94,7 +97,7 @@
      
      <TabPane tabId="metric-dash" tab="Statistics">
        <CardBody>
-          <StatisticsDash {presetCluster} {useCbColors}></StatisticsDash>
+          <StatisticsDash {presetCluster} {useCbColors} loadMe={(activeTab === "metric-dash")}></StatisticsDash>
        </CardBody>
      </TabPane>
    </TabContent>
--- a/web/frontend/src/status/dashdetails/HealthDash.svelte
+++ b/web/frontend/src/status/dashdetails/HealthDash.svelte
@@ -29,6 +29,7 @@
  /* Svelte 5 Props */
  let {
    presetCluster,
+    loadMe = false,
  } = $props();

  /* Const Init */
@@ -55,7 +56,7 @@
  /* Derived */
  let cluster = $derived(presetCluster);

-  const statusQuery = $derived(queryStore({
+  const statusQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -85,7 +86,7 @@
      sorting: querySorting,
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);

  let healthTableData = $derived.by(() => {
    if ($statusQuery?.data) {
@@ -161,16 +162,16 @@
 <hr/>

 <!-- Node Health Pis, later Charts -->
-{#if $statusQuery.fetching}
+{#if $statusQuery?.fetching}
  <Row cols={1} class="text-center mt-3">
    <Col>
      <Spinner />
    </Col>
  </Row>
-{:else if $statusQuery.error}
+{:else if $statusQuery?.error}
  <Row cols={1} class="text-center mt-3">
    <Col>  
-      <Card body color="danger">Status Query (States): {$statusQuery.error.message}</Card>
+      <Card body color="danger">Status Query (States): {$statusQuery?.error?.message}</Card>
    </Col>
  </Row>
 {:else if $statusQuery?.data?.nodeStates}
@@ -264,19 +265,19 @@
 <hr/>

 <!-- Tabular Info About Node States and Missing Metrics -->
-{#if $statusQuery.fetching}
+{#if $statusQuery?.fetching}
  <Row cols={1} class="text-center mt-3">
    <Col>
      <Spinner />
    </Col>
  </Row>
-{:else if $statusQuery.error}
+{:else if $statusQuery?.error}
  <Row cols={1} class="text-center mt-3">
    <Col>  
-      <Card body color="danger">Status Query (Details): {$statusQuery.error.message}</Card>
+      <Card body color="danger">Status Query (Details): {$statusQuery?.error?.message}</Card>
    </Col>
  </Row>
-{:else if $statusQuery.data}
+{:else if $statusQuery?.data}
  <Row>
    <Col>
      <Card>
--- a/web/frontend/src/status/dashdetails/StatisticsDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatisticsDash.svelte
@@ -30,7 +30,8 @@

  /* Svelte 5 Props */
  let {
-    presetCluster
+    presetCluster,
+    loadMe = false,
  } = $props();

  /* Const Init */
@@ -49,7 +50,7 @@
    : ccconfig['statusView_selectedHistograms'] || []);

  // Note: nodeMetrics are requested on configured $timestep resolution
-  const metricStatusQuery = $derived(queryStore({
+  const metricStatusQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -75,7 +76,7 @@
      selectedHistograms: selectedHistograms
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);
 </script>

 <!-- Loading indicators & Metric Sleect -->
@@ -100,18 +101,18 @@
 </Row>

 <Row cols={1} class="text-center mt-3">
-  {#if $metricStatusQuery.fetching}
+  {#if $metricStatusQuery?.fetching}
    <Col>
      <Spinner />
    </Col>
-  {:else if $metricStatusQuery.error}
+  {:else if $metricStatusQuery?.error}
    <Col>  
      <Card body color="danger">{$metricStatusQuery.error.message}</Card>
    </Col>
  {/if}
 </Row>

-{#if $metricStatusQuery.data}
+{#if $metricStatusQuery?.data}
  <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
  {#if selectedHistograms}
    <!-- Note: Ignore '#snippet' Error in IDE -->
--- a/web/frontend/src/status/dashdetails/StatusDash.svelte
+++ b/web/frontend/src/status/dashdetails/StatusDash.svelte
@@ -32,6 +32,7 @@
  let {
    clusters,
    presetCluster,
+    loadMe = false,
  } = $props();

  /* Const Init */
@@ -59,7 +60,7 @@
  /* Derived */
  let cluster = $derived(presetCluster);
  // States for Stacked charts
-  const statesTimed = $derived(queryStore({
+  const statesTimed = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query ($filter: [NodeFilter!], $typeNode: String!, $typeHealth: String!) {
@@ -81,11 +82,11 @@
      typeHealth: "health"
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);

  // Note: nodeMetrics are requested on configured $timestep resolution
  // Result: The latest 5 minutes (datapoints) for each node independent of job
-  const statusQuery = $derived(queryStore({
+  const statusQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -184,11 +185,11 @@
      sorting: { field: "startTime", type: "col", order: "DESC" }
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);

  /* Effects */
  $effect(() => {
-    if ($statusQuery.data) {
+    if ($statusQuery?.data) {
      let subClusters = clusters.find(
        (c) => c.name == cluster,
      ).subClusters;
@@ -374,19 +375,19 @@
 <hr/>

 <!-- Node Stack Charts -->
-{#if $statesTimed.fetching}
+{#if $statesTimed?.fetching}
  <Row cols={1} class="text-center mt-3">
    <Col>
      <Spinner />
    </Col>
  </Row>
-{:else if $statesTimed.error}
+{:else if $statesTimed?.error}
  <Row cols={1} class="text-center mt-3">
    <Col>  
-      <Card body color="danger">States Timed: {$statesTimed.error.message}</Card>
+      <Card body color="danger">States Timed: {$statesTimed?.error?.message}</Card>
    </Col>
  </Row>
-{:else if $statesTimed.data}
+{:else 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>
@@ -427,19 +428,19 @@

 <hr/>
 <!-- Gauges & Roofline per Subcluster-->
-{#if $statusQuery.fetching}
+{#if $statusQuery?.fetching}
  <Row cols={1} class="text-center mt-3">
    <Col>
      <Spinner />
    </Col>
  </Row>
-{:else if $statusQuery.error}
+{:else if $statusQuery?.error}
  <Row cols={1} class="text-center mt-3">
    <Col>  
-      <Card body color="danger">Status Query (Details): {$statusQuery.error.message}</Card>
+      <Card body color="danger">Status Query (Details): {$statusQuery?.error?.message}</Card>
    </Col>
  </Row>
-{:else if $statusQuery.data}
+{:else 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">
--- a/web/frontend/src/status/dashdetails/UsageDash.svelte
+++ b/web/frontend/src/status/dashdetails/UsageDash.svelte
@@ -40,7 +40,8 @@
    presetCluster,
    presetSubCluster = null,
    useCbColors = false,
-    useAltColors = false
+    useAltColors = false,
+    loadMe = false,
  } = $props();

  /* Const Init */
@@ -62,7 +63,7 @@
      ? [{ state: ["running"] }, { cluster: { eq: presetCluster} }, { subCluster: { eq: presetSubCluster } }]
      : [{ state: ["running"] }, { cluster: { eq: presetCluster} }] 
  );
-  const topJobsQuery = $derived(queryStore({
+  const topJobsQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -95,9 +96,9 @@
      paging: pagingState // Top 10
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);

-  const topNodesQuery = $derived(queryStore({
+  const topNodesQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -130,9 +131,9 @@
      paging: pagingState
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);

-  const topAccsQuery = $derived(queryStore({
+  const topAccsQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -165,10 +166,10 @@
      paging: pagingState
    },
    requestPolicy: "network-only"
-  }));
+  }): null);

  // Note: nodeMetrics are requested on configured $timestep resolution
-  const nodeStatusQuery = $derived(queryStore({
+  const nodeStatusQuery = $derived(loadMe ? queryStore({
    client: client,
    query: gql`
      query (
@@ -198,7 +199,7 @@
      numDurationBins: numDurationBins,
    },
    requestPolicy: "network-only"
-  }));
+  }) : null);

  /* Functions */
  function legendColors(targetIdx) {
@@ -246,9 +247,9 @@
 <hr/>

 <!-- Job Duration, Top Users and Projects-->
-{#if $topJobsQuery.fetching || $nodeStatusQuery.fetching}
+{#if $topJobsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
-{:else if $topJobsQuery.data && $nodeStatusQuery.data}
+{:else if $topJobsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
@@ -354,9 +355,9 @@
 <hr/>

 <!-- Node Distribution, Top Users and Projects-->
-{#if $topNodesQuery.fetching || $nodeStatusQuery.fetching}
+{#if $topNodesQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
-{:else if $topNodesQuery.data && $nodeStatusQuery.data}
+{:else if $topNodesQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
@@ -458,9 +459,9 @@
 <hr/>

 <!-- Acc Distribution, Top Users and Projects-->
-{#if $topAccsQuery.fetching || $nodeStatusQuery.fetching}
+{#if $topAccsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
-{:else if $topAccsQuery.data && $nodeStatusQuery.data}
+{:else if $topAccsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram