ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-10-31 07:55:06 +01:00
Code Issues Packages Releases Activity

add init context to nodeOverview, add additional key for plot rerender

Browse Source
This commit is contained in:
Christoph Kluge
2025-09-10 18:01:33 +02:00
parent d03e5b4562
commit 935fb238a4
1 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
web/frontend/src/systems/NodeOverview.svelte
View File

@@ -11,6 +11,7 @@
--> -->
<script> <script>
import { getContext } from "svelte";
import { queryStore, gql, getContextClient } from "@urql/svelte"; import { queryStore, gql, getContextClient } from "@urql/svelte";
import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap"; import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap";
import { checkMetricDisabled } from "../generic/utils.js"; import { checkMetricDisabled } from "../generic/utils.js";
@@ -27,6 +28,7 @@
} = $props(); } = $props();
/* Const Init */ /* Const Init */
const initialized = getContext("initialized");
const client = getContextClient(); const client = getContextClient();
/* Derived */ /* Derived */
@@ -72,11 +74,11 @@
}, },
})); }));
const mappedData = $derived(handleQueryData($nodesQuery?.data)); const mappedData = $derived(handleQueryData($initialized, $nodesQuery?.data));
const filteredData = $derived(mappedData.filter((h) => h.host.includes(hostnameFilter))); const filteredData = $derived(mappedData.filter((h) => h.host.includes(hostnameFilter)));
/* Functions */ /* Functions */
function handleQueryData(queryData) { function handleQueryData(isInitialized, queryData) {
let rawData = [] let rawData = []
if (queryData) { if (queryData) {
rawData = queryData.nodeMetrics.filter((h) => { rawData = queryData.nodeMetrics.filter((h) => {
@@ -96,11 +98,7 @@
data: h.metrics.filter( data: h.metrics.filter(
(m) => m?.name == selectedMetric && m.scope == "node", (m) => m?.name == selectedMetric && m.scope == "node",
), ),
disabled: checkMetricDisabled( disabled: isInitialized ? checkMetricDisabled(selectedMetric, cluster, h.subCluster) : null,
selectedMetric,
cluster,
h.subCluster,
),
})) }))
.sort((a, b) => a.host.localeCompare(b.host)) .sort((a, b) => a.host.localeCompare(b.host))
} }
@@ -124,42 +122,43 @@
{:else if filteredData?.length > 0} {:else if filteredData?.length > 0}
<!-- PlotGrid flattened into this component --> <!-- PlotGrid flattened into this component -->
<Row cols={{ xs: 1, sm: 2, md: 3, lg: ccconfig.plot_view_plotsPerRow}}> <Row cols={{ xs: 1, sm: 2, md: 3, lg: ccconfig.plot_view_plotsPerRow}}>
{#each filteredData as item (item.host)} {#key selectedMetric}
<Col class="px-1"> {#each filteredData as item (item.host)}
<h4 style="width: 100%; text-align: center;"> <Col class="px-1">
<a <h4 style="width: 100%; text-align: center;">
style="display: block;padding-top: 15px;" <a
href="/monitoring/node/{cluster}/{item.host}" style="display: block;padding-top: 15px;"
>{item.host} ({item.subCluster})</a href="/monitoring/node/{cluster}/{item.host}"
> >{item.host} ({item.subCluster})</a
</h4> >
{#key item?.disabled} </h4>
{#if item?.disabled === true} {#if item.disabled === true}
<Card body class="mx-3" color="info" <Card body class="mx-3" color="info"
>Metric disabled for subcluster <code >Metric disabled for subcluster <code
>{selectedMetric}:{item.subCluster}</code >{selectedMetric}:{item.subCluster}</code
></Card ></Card
> >
{:else if item?.disabled === false} {:else if item.disabled === false}
<!-- "No Data"-Warning included in MetricPlot-Component --> <!-- "No Data"-Warning included in MetricPlot-Component -->
<!-- #key: X-axis keeps last selected timerange otherwise --> <!-- #key: X-axis keeps last selected timerange otherwise -->
<MetricPlot {#key item.data[0].metric.series[0].data.length}
timestep={item.data[0].metric.timestep} <MetricPlot
series={item.data[0].metric.series} timestep={item.data[0].metric.timestep}
metric={item.data[0].name} series={item.data[0].metric.series}
{cluster} metric={item.data[0].name}
subCluster={item.subCluster} {cluster}
forNode subCluster={item.subCluster}
/> forNode
{:else} />
<Card body class="mx-3" {/key}
>Metric Query Empty: Please Reload Page <code {:else if item.disabled === null}
>{selectedMetric}:{item.subCluster}</code <Card body class="mx-3" color="info">
></Card Global Metric List Not Initialized
> Can not determine {selectedMetric} availability: Please Reload Page
</Card>
{/if} {/if}
{/key} </Col>
</Col> {/each}
{/each} {/key}
</Row> </Row>
{/if} {/if}