mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-25 21:09:05 +01:00
First optical layout Iteration
This commit is contained in:
Christoph Kluge
parent
21b03d02b2
commit
46baa6e534
@ -2,7 +2,7 @@
|
||||
import Refresher from './joblist/Refresher.svelte'
|
||||
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
|
||||
import Histogram from './plots/Histogram.svelte'
|
||||
import { Row, Col, Spinner, Card, Table, Progress } from 'sveltestrap'
|
||||
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
||||
import { init } from './utils.js'
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
|
||||
@ -60,7 +60,12 @@
|
||||
query(mainQuery)
|
||||
</script>
|
||||
|
||||
<!-- Loading indicator & Refresh -->
|
||||
|
||||
<Row>
|
||||
<Col xs="auto" style="align-self: flex-end;">
|
||||
<h4 class="mb-0" >Current usage of cluster "{cluster}"</h4>
|
||||
</Col>
|
||||
<Col xs="auto">
|
||||
{#if $initq.fetching || $mainQuery.fetching}
|
||||
<Spinner/>
|
||||
@ -89,54 +94,71 @@
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Gauges & Roofline per Subcluster-->
|
||||
|
||||
{#if $initq.data && $mainQuery.data}
|
||||
{#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i}
|
||||
<Row>
|
||||
<Col xs="3">
|
||||
<Table>
|
||||
<tr>
|
||||
<th scope="col">SubCluster</th>
|
||||
<td colspan="2">{subCluster.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Allocated Nodes</th>
|
||||
<td style="min-width: 75px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
|
||||
<td>({allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Flop Rate</th>
|
||||
<td style="min-width: 75px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
|
||||
<td>({flopRate[subCluster.name]} / {subCluster.flopRateSimd * subCluster.numberOfNodes})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">MemBw Rate</th>
|
||||
<td style="min-width: 75px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
|
||||
<td>({memBwRate[subCluster.name]} / {subCluster.memoryBandwidth * subCluster.numberOfNodes})</td>
|
||||
</tr>
|
||||
</Table>
|
||||
<Row cols={2} class="mb-3 justify-content-center">
|
||||
<Col xs="3" class="px-3">
|
||||
<Card class="h-auto mt-1">
|
||||
<CardHeader>
|
||||
<CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Table>
|
||||
<tr>
|
||||
<th scope="col">Allocated Nodes</th>
|
||||
<td style="min-width: 75px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
|
||||
<td>({allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th>
|
||||
<td style="min-width: 75px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
|
||||
<td>({flopRate[subCluster.name]} / {subCluster.flopRateSimd * subCluster.numberOfNodes})</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="col">MemBw Rate</th>
|
||||
<td style="min-width: 75px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
|
||||
<td>({memBwRate[subCluster.name]} / {subCluster.memoryBandwidth * subCluster.numberOfNodes})</td>
|
||||
</tr>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col class="px-3">
|
||||
<div bind:clientWidth={plotWidths[i]}>
|
||||
{#key $mainQuery.data.nodeMetrics}
|
||||
<Roofline
|
||||
width={plotWidths[i] - 10} height={300} colorDots={false} cluster={subCluster}
|
||||
data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
|
||||
{/key}
|
||||
</div>
|
||||
</Col>
|
||||
<div class="col-9" bind:clientWidth={plotWidths[i]}>
|
||||
{#key $mainQuery.data.nodeMetrics}
|
||||
<Roofline
|
||||
width={plotWidths[i] - 10} height={300} colorDots={false} cluster={subCluster}
|
||||
data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
|
||||
{/key}
|
||||
</div>
|
||||
</Row>
|
||||
{/each}
|
||||
<Row>
|
||||
<div class="col-4" bind:clientWidth={colWidth1}>
|
||||
<h4>Top Users</h4>
|
||||
{#key $mainQuery.data}
|
||||
<Histogram
|
||||
width={colWidth1 - 25} height={300}
|
||||
data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
|
||||
label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'} />
|
||||
{/key}
|
||||
</div>
|
||||
<div class="col-2">
|
||||
|
||||
<hr style="margin-top: -1em;">
|
||||
|
||||
<!-- Usage Stats as Histograms -->
|
||||
|
||||
<Row cols={4}>
|
||||
<Col class="p-2">
|
||||
<div bind:clientWidth={colWidth1}>
|
||||
<h4 class="mb-3 text-center">Top Users</h4>
|
||||
{#key $mainQuery.data}
|
||||
<Histogram
|
||||
width={colWidth1 - 25} height={300}
|
||||
data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
|
||||
label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'} />
|
||||
{/key}
|
||||
</div>
|
||||
</Col>
|
||||
<Col class="px-4 py-2">
|
||||
<Table>
|
||||
<tr><th>Name</th><th>Number of Nodes</th></tr>
|
||||
<tr class="mb-2"><th>User Name</th><th>Number of Nodes</th></tr>
|
||||
{#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
|
||||
<tr>
|
||||
<th scope="col"><a href="/monitoring/user/{name}">{name}</a></th>
|
||||
@ -144,41 +166,43 @@
|
||||
</tr>
|
||||
{/each}
|
||||
</Table>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<h4>Top Projects</h4>
|
||||
</Col>
|
||||
<Col class="p-2">
|
||||
<h4 class="mb-3 text-center">Top Projects</h4>
|
||||
{#key $mainQuery.data}
|
||||
<Histogram
|
||||
width={colWidth1 - 25} height={300}
|
||||
data={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
|
||||
label={(x) => x < $mainQuery.data.topProjects.length ? $mainQuery.data.topProjects[Math.floor(x)].name : '0'} />
|
||||
{/key}
|
||||
</div>
|
||||
<div class="col-2">
|
||||
</Col>
|
||||
<Col class="px-4 py-2">
|
||||
<Table>
|
||||
<tr><th>Name</th><th>Number of Nodes</th></tr>
|
||||
<tr class="mb-2"><th>Project Code</th><th>Number of Nodes</th></tr>
|
||||
{#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }}
|
||||
<tr><th scope="col">{name}</th><td>{count}</td></tr>
|
||||
{/each}
|
||||
</Table>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<div class="col" bind:clientWidth={colWidth2}>
|
||||
<h4>Duration Distribution</h4>
|
||||
{#key $mainQuery.data.stats}
|
||||
<Histogram
|
||||
width={colWidth2 - 25} height={300}
|
||||
data={$mainQuery.data.stats[0].histDuration} />
|
||||
{/key}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4>Number of Nodes Distribution</h4>
|
||||
<Row cols={2} class="mt-3">
|
||||
<Col class="p-2">
|
||||
<div bind:clientWidth={colWidth2}>
|
||||
<h4 class="mb-3 text-center">Duration Distribution</h4>
|
||||
{#key $mainQuery.data.stats}
|
||||
<Histogram
|
||||
width={colWidth2 - 25} height={300}
|
||||
data={$mainQuery.data.stats[0].histDuration} />
|
||||
{/key}
|
||||
</div>
|
||||
</Col>
|
||||
<Col class="p-2">
|
||||
<h4 class="mb-3 text-center">Number of Nodes Distribution</h4>
|
||||
{#key $mainQuery.data.stats}
|
||||
<Histogram
|
||||
width={colWidth2 - 25} height={300}
|
||||
data={$mainQuery.data.stats[0].histNumNodes} />
|
||||
{/key}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user