ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-08-23 18:43:00 +02:00
Code Issues Packages Releases Activity

fix layouting

Browse Source
This commit is contained in:
Christoph Kluge
2025-08-12 17:57:04 +02:00
parent bd2cdfcef2
commit 44d8254a0b
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/frontend/src/status/UsageDash.svelte
View File

@@ -198,7 +198,7 @@
<Spinner /> <Spinner />
{:else if $topJobsQuery.data && $nodeStatusQuery.data} {:else if $topJobsQuery.data && $nodeStatusQuery.data}
<Row> <Row>
<Col xs="4" class="p-2"> <Col xs="12" lg="4" class="p-2">
<Histogram <Histogram
data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histDuration)} data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histDuration)}
title="Duration Distribution" title="Duration Distribution"
@@ -211,7 +211,7 @@
xtime xtime
/> />
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<div bind:clientWidth={colWidthJobs}> <div bind:clientWidth={colWidthJobs}>
<h4 class="text-center"> <h4 class="text-center">
Top Users: Jobs Top Users: Jobs
@@ -228,7 +228,7 @@
/> />
</div> </div>
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th></th> <th></th>
@@ -256,7 +256,7 @@
</Table> </Table>
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<h4 class="text-center"> <h4 class="text-center">
Top Projects: Jobs Top Projects: Jobs
</h4> </h4>
@@ -271,7 +271,7 @@
entities={$topJobsQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)} entities={$topJobsQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
/> />
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th></th> <th></th>
@@ -303,7 +303,7 @@
<Spinner /> <Spinner />
{:else if $topNodesQuery.data && $nodeStatusQuery.data} {:else if $topNodesQuery.data && $nodeStatusQuery.data}
<Row> <Row>
<Col xs="4" class="p-2"> <Col xs="12" lg="4" class="p-2">
<Histogram <Histogram
data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumNodes)} data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumNodes)}
title="Number of Nodes Distribution" title="Number of Nodes Distribution"
@@ -314,7 +314,7 @@
height="275" height="275"
/> />
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<div bind:clientWidth={colWidthNodes}> <div bind:clientWidth={colWidthNodes}>
<h4 class="text-center"> <h4 class="text-center">
Top Users: Nodes Top Users: Nodes
@@ -331,7 +331,7 @@
/> />
</div> </div>
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th></th> <th></th>
@@ -359,7 +359,7 @@
</Table> </Table>
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<h4 class="text-center"> <h4 class="text-center">
Top Projects: Nodes Top Projects: Nodes
</h4> </h4>
@@ -374,7 +374,7 @@
entities={$topNodesQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)} entities={$topNodesQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
/> />
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th></th> <th></th>
@@ -406,7 +406,7 @@
<Spinner /> <Spinner />
{:else if $topAccsQuery.data && $nodeStatusQuery.data} {:else if $topAccsQuery.data && $nodeStatusQuery.data}
<Row> <Row>
<Col xs="4" class="p-2"> <Col xs="12" lg="4" class="p-2">
<Histogram <Histogram
data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumAccs)} data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histNumAccs)}
title="Number of Accelerators Distribution" title="Number of Accelerators Distribution"
@@ -417,7 +417,7 @@
height="275" height="275"
/> />
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<div bind:clientWidth={colWidthAccs}> <div bind:clientWidth={colWidthAccs}>
<h4 class="text-center"> <h4 class="text-center">
Top Users: GPUs Top Users: GPUs
@@ -434,7 +434,7 @@
/> />
</div> </div>
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th></th> <th></th>
@@ -462,7 +462,7 @@
</Table> </Table>
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<h4 class="text-center"> <h4 class="text-center">
Top Projects: GPUs Top Projects: GPUs
</h4> </h4>
@@ -477,7 +477,7 @@
entities={$topAccsQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)} entities={$topAccsQuery.data.topProjects.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
/> />
</Col> </Col>
<Col xs="2" class="p-2"> <Col xs="6" md="3" lg="2" class="p-2">
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th></th> <th></th>