ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29:05 +01:00
Code Issues Packages Releases Activity

Make columns responsive

Browse Source
This commit is contained in:
Jan Eitzinger 2023-08-24 09:49:19 +02:00
parent 69b3f767f6
commit 4aa9c4831f
1 changed files with 293 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

394
web/frontend/src/Status.root.svelte
View File

@ -1,82 +1,182 @@
<script> <script>
import Refresher from './joblist/Refresher.svelte' import Refresher from "./joblist/Refresher.svelte";
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte' import Roofline, { transformPerNodeData } from "./plots/Roofline.svelte";
import Pie, { colors } from './plots/Pie.svelte' import Pie, { colors } from "./plots/Pie.svelte";
import Histogram from './plots/Histogram.svelte' import Histogram from "./plots/Histogram.svelte";
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap' import {
import { init, convert2uplot } from './utils.js' Row,
import { scaleNumbers } from './units.js' Col,
import { queryStore, gql, getContextClient } from '@urql/svelte' Spinner,
Card,
CardHeader,
CardTitle,
CardBody,
Table,
Progress,
Icon,
} from "sveltestrap";
import { init, convert2uplot } from "./utils.js";
import { scaleNumbers } from "./units.js";
import { queryStore, gql, getContextClient } from "@urql/svelte";
const { query: initq } = init() const { query: initq } = init();
export let cluster export let cluster;
let plotWidths = [], colWidth1 = 0, colWidth2 let plotWidths = [],
let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now()) colWidth1 = 0,
colWidth2;
let from = new Date(Date.now() - 5 * 60 * 1000),
to = new Date(Date.now());
const client = getContextClient(); const client = getContextClient();
$: mainQuery = queryStore({ $: mainQuery = queryStore({
client: client, client: client,
query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) { query: gql`
nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) { query (
host $cluster: String!
subCluster $filter: [JobFilter!]!
metrics { $metrics: [String!]
name $from: Time!
scope $to: Time!
metric { ) {
timestep nodeMetrics(
unit { base, prefix } cluster: $cluster
series { data } metrics: $metrics
from: $from
to: $to
) {
host
subCluster
metrics {
name
scope
metric {
timestep
unit {
base
prefix
}
series {
data
}
}
}
}
stats: jobsStatistics(filter: $filter) {
histDuration {
count
value
}
histNumNodes {
count
value
}
}
allocatedNodes(cluster: $cluster) {
name
count
}
topUsers: jobsCount(
filter: $filter
groupBy: USER
weight: NODE_COUNT
limit: 10
) {
name
count
}
topProjects: jobsCount(
filter: $filter
groupBy: PROJECT
weight: NODE_COUNT
limit: 10
) {
name
count
} }
} }
} `,
variables: {
cluster: cluster,
metrics: ["flops_any", "mem_bw"],
from: from.toISOString(),
to: to.toISOString(),
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
},
});
stats: jobsStatistics(filter: $filter) { const sumUp = (data, subcluster, metric) =>
histDuration { count, value } data.reduce(
histNumNodes { count, value } (sum, node) =>
} node.subCluster == subcluster
? sum +
(node.metrics
.find((m) => m.name == metric)
?.metric.series.reduce(
(sum, series) =>
sum + series.data[series.data.length - 1],
0
) || 0)
: sum,
0
);
allocatedNodes(cluster: $cluster) { name, count } let allocatedNodes = {},
topUsers: jobsCount(filter: $filter, groupBy: USER, weight: NODE_COUNT, limit: 10) { name, count } flopRate = {},
topProjects: jobsCount(filter: $filter, groupBy: PROJECT, weight: NODE_COUNT, limit: 10) { name, count } flopRateUnitPrefix = {},
}`, flopRateUnitBase = {},
variables: { memBwRate = {},
cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(), memBwRateUnitPrefix = {},
filter: [{ state: ['running'] }, { cluster: { eq: cluster } }] memBwRateUnitBase = {};
}
})
const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0)
: sum, 0)
let allocatedNodes = {}, flopRate = {}, flopRateUnitPrefix = {}, flopRateUnitBase = {}, memBwRate = {}, memBwRateUnitPrefix = {}, memBwRateUnitBase = {}
$: if ($initq.data && $mainQuery.data) { $: if ($initq.data && $mainQuery.data) {
let subClusters = $initq.data.clusters.find(c => c.name == cluster).subClusters let subClusters = $initq.data.clusters.find(
(c) => c.name == cluster
).subClusters;
for (let subCluster of subClusters) { for (let subCluster of subClusters) {
allocatedNodes[subCluster.name] = $mainQuery.data.allocatedNodes.find(({ name }) => name == subCluster.name)?.count || 0 allocatedNodes[subCluster.name] =
flopRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'flops_any') * 100) / 100 $mainQuery.data.allocatedNodes.find(
flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix ({ name }) => name == subCluster.name
flopRateUnitBase[subCluster.name] = subCluster.flopRateSimd.unit.base )?.count || 0;
memBwRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'mem_bw') * 100) / 100 flopRate[subCluster.name] =
memBwRateUnitPrefix[subCluster.name] = subCluster.memoryBandwidth.unit.prefix Math.floor(
memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base sumUp(
$mainQuery.data.nodeMetrics,
subCluster.name,
"flops_any"
) * 100
) / 100;
flopRateUnitPrefix[subCluster.name] =
subCluster.flopRateSimd.unit.prefix;
flopRateUnitBase[subCluster.name] =
subCluster.flopRateSimd.unit.base;
memBwRate[subCluster.name] =
Math.floor(
sumUp(
$mainQuery.data.nodeMetrics,
subCluster.name,
"mem_bw"
) * 100
) / 100;
memBwRateUnitPrefix[subCluster.name] =
subCluster.memoryBandwidth.unit.prefix;
memBwRateUnitBase[subCluster.name] =
subCluster.memoryBandwidth.unit.base;
} }
} }
</script> </script>
<!-- Loading indicator & Refresh --> <!-- Loading indicator & Refresh -->
<Row> <Row>
<Col xs="auto" style="align-self: flex-end;"> <Col xs="auto" style="align-self: flex-end;">
<h4 class="mb-0" >Current utilization of cluster "{cluster}"</h4> <h4 class="mb-0">Current utilization of cluster "{cluster}"</h4>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
{#if $initq.fetching || $mainQuery.fetching} {#if $initq.fetching || $mainQuery.fetching}
<Spinner/> <Spinner />
{:else if $initq.error} {:else if $initq.error}
<Card body color="danger">{$initq.error.message}</Card> <Card body color="danger">{$initq.error.message}</Card>
{:else} {:else}
@ -84,10 +184,13 @@
{/if} {/if}
</Col> </Col>
<Col xs="auto" style="margin-left: auto;"> <Col xs="auto" style="margin-left: auto;">
<Refresher initially={120} on:reload={() => { <Refresher
from = new Date(Date.now() - 5 * 60 * 1000) initially={120}
to = new Date(Date.now()) on:reload={() => {
}} /> from = new Date(Date.now() - 5 * 60 * 1000);
to = new Date(Date.now());
}}
/>
</Col> </Col>
</Row> </Row>
{#if $mainQuery.error} {#if $mainQuery.error}
@ -98,43 +201,85 @@
</Row> </Row>
{/if} {/if}
<hr> <hr />
<!-- Gauges & Roofline per Subcluster--> <!-- Gauges & Roofline per Subcluster-->
{#if $initq.data && $mainQuery.data} {#if $initq.data && $mainQuery.data}
{#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i} {#each $initq.data.clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
<Row cols={2} class="mb-3 justify-content-center"> <Row class="mb-3 justify-content-center">
<Col xs="4" class="px-3"> <Col md="4" class="px-3">
<Card class="h-auto mt-1"> <Card class="h-auto mt-1">
<CardHeader> <CardHeader>
<CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle> <CardTitle class="mb-0"
>SubCluster "{subCluster.name}"</CardTitle
>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Table borderless> <Table borderless>
<tr class="py-2"> <tr class="py-2">
<th scope="col">Allocated Nodes</th> <th scope="col">Allocated Nodes</th>
<td style="min-width: 100px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td> <td style="min-width: 100px;"
<td>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes} Nodes</td> ><div class="col">
<Progress
value={allocatedNodes[
subCluster.name
]}
max={subCluster.numberOfNodes}
/>
</div></td
>
<td
>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes}
Nodes</td
>
</tr> </tr>
<tr class="py-2"> <tr class="py-2">
<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> <th scope="col"
<td style="min-width: 100px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd.value * subCluster.numberOfNodes}/></div></td> >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: 100px;"
><div class="col">
<Progress
value={flopRate[subCluster.name]}
max={subCluster.flopRateSimd.value *
subCluster.numberOfNodes}
/>
</div></td
>
<td> <td>
{scaleNumbers(flopRate[subCluster.name], {scaleNumbers(
(subCluster.flopRateSimd.value * subCluster.numberOfNodes), flopRate[subCluster.name],
flopRateUnitPrefix[subCluster.name]) subCluster.flopRateSimd.value *
}{flopRateUnitBase[subCluster.name]} [Max] subCluster.numberOfNodes,
flopRateUnitPrefix[subCluster.name]
)}{flopRateUnitBase[subCluster.name]} [Max]
</td> </td>
</tr> </tr>
<tr class="py-2"> <tr class="py-2">
<th scope="col">MemBw Rate</th> <th scope="col">MemBw Rate</th>
<td style="min-width: 100px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth.value * subCluster.numberOfNodes}/></div></td> <td style="min-width: 100px;"
><div class="col">
<Progress
value={memBwRate[subCluster.name]}
max={subCluster.memoryBandwidth
.value *
subCluster.numberOfNodes}
/>
</div></td
>
<td> <td>
{scaleNumbers(memBwRate[subCluster.name], {scaleNumbers(
(subCluster.memoryBandwidth.value * subCluster.numberOfNodes), memBwRate[subCluster.name],
memBwRateUnitPrefix[subCluster.name]) subCluster.memoryBandwidth.value *
}{memBwRateUnitBase[subCluster.name]} [Max] subCluster.numberOfNodes,
memBwRateUnitPrefix[subCluster.name]
)}{memBwRateUnitBase[subCluster.name]} [Max]
</td> </td>
</tr> </tr>
</Table> </Table>
@ -145,40 +290,65 @@
<div bind:clientWidth={plotWidths[i]}> <div bind:clientWidth={plotWidths[i]}>
{#key $mainQuery.data.nodeMetrics} {#key $mainQuery.data.nodeMetrics}
<Roofline <Roofline
width={plotWidths[i] - 10} height={300} colorDots={true} showTime={false} cluster={subCluster} width={plotWidths[i] - 10}
data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} /> height={300}
colorDots={true}
showTime={false}
cluster={subCluster}
data={transformPerNodeData(
$mainQuery.data.nodeMetrics.filter(
(data) => data.subCluster == subCluster.name
)
)}
/>
{/key} {/key}
</div> </div>
</Col> </Col>
</Row> </Row>
{/each} {/each}
<hr style="margin-top: -1em;"> <hr style="margin-top: -1em;" />
<!-- Usage Stats as Histograms --> <!-- Usage Stats as Histograms -->
<Row cols={4}> <Row>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth1}> <div bind:clientWidth={colWidth1}>
<h4 class="text-center">Top Users</h4> <h4 class="text-center">Top Users</h4>
{#key $mainQuery.data} {#key $mainQuery.data}
<Pie <Pie
size={colWidth1} size={colWidth1}
sliceLabel='Jobs' sliceLabel="Jobs"
quantities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)} quantities={$mainQuery.data.topUsers
entities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)} .sort((a, b) => b.count - a.count)
.map((tu) => tu.count)}
entities={$mainQuery.data.topUsers
.sort((a, b) => b.count - a.count)
.map((tu) => tu.name)}
/> />
{/key} {/key}
</div> </div>
</Col> </Col>
<Col class="px-4 py-2"> <Col class="px-4 py-2">
<Table> <Table>
<tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Nodes</th></tr> <tr class="mb-2"
><th>Legend</th><th>User Name</th><th>Number of Nodes</th
></tr
>
{#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i} {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
<tr> <tr>
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td> <td
<th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th> ><Icon
name="circle-fill"
style="color: {colors[i]};"
/></td
>
<th scope="col"
><a
href="/monitoring/user/{name}?cluster={cluster}&state=running"
>{name}</a
></th
>
<td>{count}</td> <td>{count}</td>
</tr> </tr>
{/each} {/each}
@ -189,38 +359,58 @@
{#key $mainQuery.data} {#key $mainQuery.data}
<Pie <Pie
size={colWidth1} size={colWidth1}
sliceLabel='Jobs' sliceLabel="Jobs"
quantities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.count)} quantities={$mainQuery.data.topProjects
entities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.name)} .sort((a, b) => b.count - a.count)
.map((tp) => tp.count)}
entities={$mainQuery.data.topProjects
.sort((a, b) => b.count - a.count)
.map((tp) => tp.name)}
/> />
{/key} {/key}
</Col> </Col>
<Col class="px-4 py-2"> <Col class="px-4 py-2">
<Table> <Table>
<tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Nodes</th></tr> <tr class="mb-2"
><th>Legend</th><th>Project Code</th><th>Number of Nodes</th
></tr
>
{#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i} {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i}
<tr> <tr>
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td> <td
<th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th> ><Icon
name="circle-fill"
style="color: {colors[i]};"
/></td
>
<th scope="col"
><a
href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq"
>{name}</a
></th
>
<td>{count}</td> <td>{count}</td>
</tr> </tr>
{/each} {/each}
</Table> </Table>
</Col> </Col>
</Row> </Row>
<hr class="my-2"/> <hr class="my-2" />
<Row cols={2}> <Row>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth2}> <div bind:clientWidth={colWidth2}>
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
<Histogram <Histogram
data={convert2uplot($mainQuery.data.stats[0].histDuration)} data={convert2uplot(
$mainQuery.data.stats[0].histDuration
)}
width={colWidth2 - 25} width={colWidth2 - 25}
title="Duration Distribution" title="Duration Distribution"
xlabel="Current Runtimes" xlabel="Current Runtimes"
xunit="Hours" xunit="Hours"
ylabel="Number of Jobs" ylabel="Number of Jobs"
yunit="Jobs"/> yunit="Jobs"
/>
{/key} {/key}
</div> </div>
</Col> </Col>
@ -231,10 +421,12 @@
width={colWidth2 - 25} width={colWidth2 - 25}
title="Number of Nodes Distribution" title="Number of Nodes Distribution"
xlabel="Allocated Nodes" xlabel="Allocated Nodes"
xunit="Nodes" xunit="Nodes"
ylabel="Number of Jobs" ylabel="Number of Jobs"
yunit="Jobs"/> yunit="Jobs"
/>
{/key} {/key}
</Col> </Col>
</Row> </Row>
{/if} {/if}