ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-01-28 06:51:45 +01:00
Code Issues Packages Releases Activity

add loading indicators to status detail

Browse Source
This commit is contained in:
Christoph Kluge
2026-01-23 16:54:30 +01:00
parent 22b1d4d276
commit 98dc8cf5b5
1 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/frontend/src/status/dashdetails/StatusDash.svelte
View File

@@ -16,6 +16,7 @@
Table, Table,
Progress, Progress,
Icon, Icon,
Spinner
} from "@sveltestrap/sveltestrap"; } from "@sveltestrap/sveltestrap";
import { import {
queryStore, queryStore,
@@ -408,7 +409,19 @@
<hr/> <hr/>
<!-- Node Stack Charts Dev--> <!-- Node Stack Charts Dev-->
{#if $statesTimed.data} {#if $statesTimed.fetching}
<Row cols={1} class="text-center mt-3">
<Col>
<Spinner />
</Col>
</Row>
{:else if $statesTimed.error}
<Row cols={1} class="text-center mt-3">
<Col>
<Card body color="danger">{$statesTimed.error.message}</Card>
</Col>
</Row>
{:else if $statesTimed.data}
<Row cols={{ md: 2 , sm: 1}} class="mb-3 justify-content-center"> <Row cols={{ md: 2 , sm: 1}} class="mb-3 justify-content-center">
<Col class="px-3 mt-2 mt-lg-0"> <Col class="px-3 mt-2 mt-lg-0">
<div> <div>
@@ -450,7 +463,19 @@
<hr/> <hr/>
<!-- Node Health Pis, later Charts --> <!-- Node Health Pis, later Charts -->
{#if $statusQuery?.data?.nodeStates} {#if $statusQuery.fetching}
<Row cols={1} class="text-center mt-3">
<Col>
<Spinner />
</Col>
</Row>
{:else if $statusQuery.error}
<Row cols={1} class="text-center mt-3">
<Col>
<Card body color="danger">{$statesTimed.error.message}</Card>
</Col>
</Row>
{:else if $statusQuery?.data?.nodeStates}
<Row cols={{ lg: 4, md: 2 , sm: 1}} class="mb-3 justify-content-center"> <Row cols={{ lg: 4, md: 2 , sm: 1}} class="mb-3 justify-content-center">
<Col class="px-3 mt-2 mt-lg-0"> <Col class="px-3 mt-2 mt-lg-0">
<div bind:clientWidth={pieWidth}> <div bind:clientWidth={pieWidth}>
@@ -536,7 +561,19 @@
<hr/> <hr/>
<!-- Gauges & Roofline per Subcluster--> <!-- Gauges & Roofline per Subcluster-->
{#if $statusQuery.data} {#if $statusQuery.fetching}
<Row cols={1} class="text-center mt-3">
<Col>
<Spinner />
</Col>
</Row>
{:else if $statusQuery.error}
<Row cols={1} class="text-center mt-3">
<Col>
<Card body color="danger">{$statusQuery.error.message}</Card>
</Col>
</Row>
{:else if $statusQuery.data}
{#each clusters.find((c) => c.name == cluster).subClusters as subCluster, i} {#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"> <Row cols={{ lg: 3, md: 1 , sm: 1}} class="mb-3 justify-content-center">
<Col class="px-3"> <Col class="px-3">