chage to adaptive row sizes for publicDash

This commit is contained in:
Christoph Kluge
2026-01-21 18:14:15 +01:00
parent 55e0456aac
commit 4459840f5f

View File

@@ -348,9 +348,7 @@
</script> </script>
<Card style="height: 98vh;"> <Row>
<CardBody class="align-content-center p-2">
<Row>
<Col> <Col>
<Refresher <Refresher
hideSelector hideSelector
@@ -365,15 +363,16 @@
}} }}
/> />
</Col> </Col>
</Row> </Row>
{#if $statusQuery.fetching || $statesTimed.fetching}
{#if $statusQuery.fetching || $statesTimed.fetching}
<Row class="justify-content-center"> <Row class="justify-content-center">
<Col xs="auto"> <Col xs="auto">
<Spinner /> <Spinner />
</Col> </Col>
</Row> </Row>
{:else if $statusQuery.error || $statesTimed.error} {:else if $statusQuery.error || $statesTimed.error}
<Row class="mb-2"> <Row class="mb-2">
<Col class="d-flex justify-content-end"> <Col class="d-flex justify-content-end">
<Button color="secondary" href="/"> <Button color="secondary" href="/">
@@ -394,8 +393,10 @@
{/if} {/if}
</Row> </Row>
{:else} {:else}
<Row cols={{xs:1, md:2}}> <!-- View Supposed to be Viewed at Max Viewport Size -->
<div class="align-content-center p-2">
<Row cols={{xs:1, md:2}} style="height: 24vh; margin-bottom: 1rem;">
<Col> <!-- General Cluster Info Card --> <Col> <!-- General Cluster Info Card -->
<Card class="h-100"> <Card class="h-100">
<CardHeader> <CardHeader>
@@ -515,7 +516,9 @@
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
</Row>
<Row cols={{xs:1, md:2}} style="height: 35vh; margin-bottom: 1rem;">
<!-- Total Cluster Metric in Time SUMS--> <!-- Total Cluster Metric in Time SUMS-->
<Col class="text-center"> <Col class="text-center">
<h5 class="mt-2 mb-0"> <h5 class="mt-2 mb-0">
@@ -554,10 +557,14 @@
nodesData={transformNodesStatsToInfo($statusQuery?.data?.nodeMetrics)} nodesData={transformNodesStatsToInfo($statusQuery?.data?.nodeMetrics)}
fixTitle="Node Utilization" fixTitle="Node Utilization"
yMinimum={1.0} yMinimum={1.0}
height={330}
/> />
{/key} {/key}
</div> </div>
</Col> </Col>
</Row>
<Row cols={{xs:1, md:2}} style="height: 35vh;">
<Col> <!-- Pie Last States --> <Col> <!-- Pie Last States -->
<Row> <Row>
{#if refinedStateData.length > 0} {#if refinedStateData.length > 0}
@@ -614,7 +621,7 @@
{#key $statesTimed?.data?.nodeStatesTimed} {#key $statesTimed?.data?.nodeStatesTimed}
<Stacked <Stacked
data={$statesTimed?.data?.nodeStatesTimed} data={$statesTimed?.data?.nodeStatesTimed}
height={260} height={300}
ylabel="Nodes" ylabel="Nodes"
yunit = "#Count" yunit = "#Count"
title = "Cluster Status" title = "Cluster Status"
@@ -624,6 +631,5 @@
</div> </div>
</Col> </Col>
</Row> </Row>
{/if} </div>
</CardBody> {/if}
</Card>