2022-06-22 11:20:57 +02:00
|
|
|
<script>
|
2023-08-30 15:15:53 +02:00
|
|
|
import { getContext } from 'svelte'
|
2022-06-22 11:20:57 +02:00
|
|
|
import Refresher from './joblist/Refresher.svelte'
|
|
|
|
import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
|
2023-08-11 09:41:39 +02:00
|
|
|
import Pie, { colors } from './plots/Pie.svelte'
|
2023-08-11 13:34:30 +02:00
|
|
|
import Histogram from './plots/Histogram.svelte'
|
2022-09-28 16:13:46 +02:00
|
|
|
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
2023-08-09 12:42:25 +02:00
|
|
|
import { init, convert2uplot } from './utils.js'
|
2023-06-16 12:44:34 +02:00
|
|
|
import { scaleNumbers } from './units.js'
|
2023-08-30 15:15:53 +02:00
|
|
|
import { queryStore, gql, getContextClient, mutationStore } from '@urql/svelte'
|
2022-06-22 11:20:57 +02:00
|
|
|
|
|
|
|
const { query: initq } = init()
|
2023-08-30 15:15:53 +02:00
|
|
|
const ccconfig = getContext("cc-config")
|
2022-06-22 11:20:57 +02:00
|
|
|
|
2023-08-24 09:49:19 +02:00
|
|
|
export let cluster;
|
2022-06-22 11:20:57 +02:00
|
|
|
|
|
|
|
let plotWidths = [], colWidth1 = 0, colWidth2
|
|
|
|
let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
|
2023-08-29 14:01:01 +02:00
|
|
|
const topOptions = [
|
|
|
|
{key: 'totalJobs', label: 'Jobs'},
|
|
|
|
{key: 'totalNodes', label: 'Nodes'},
|
|
|
|
{key: 'totalCores', label: 'Cores'},
|
|
|
|
{key: 'totalAccs', label: 'Accelerators'},
|
|
|
|
]
|
2023-08-30 15:15:53 +02:00
|
|
|
|
|
|
|
let topProjectSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopProjectCategory)
|
|
|
|
let topUserSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopUserCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopUserCategory)
|
2023-05-10 16:35:21 +02:00
|
|
|
|
2023-05-12 11:19:37 +02:00
|
|
|
const client = getContextClient();
|
2023-05-10 16:35:21 +02:00
|
|
|
$: mainQuery = queryStore({
|
2023-05-12 11:19:37 +02:00
|
|
|
client: client,
|
2023-08-24 09:49:19 +02:00
|
|
|
query: gql`
|
|
|
|
query (
|
|
|
|
$cluster: String!
|
|
|
|
$filter: [JobFilter!]!
|
|
|
|
$metrics: [String!]
|
|
|
|
$from: Time!
|
|
|
|
$to: Time!
|
|
|
|
) {
|
|
|
|
nodeMetrics(
|
|
|
|
cluster: $cluster
|
|
|
|
metrics: $metrics
|
|
|
|
from: $from
|
|
|
|
to: $to
|
|
|
|
) {
|
|
|
|
host
|
|
|
|
subCluster
|
|
|
|
metrics {
|
|
|
|
name
|
|
|
|
scope
|
|
|
|
metric {
|
|
|
|
timestep
|
|
|
|
unit {
|
|
|
|
base
|
|
|
|
prefix
|
|
|
|
}
|
|
|
|
series {
|
|
|
|
data
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-06-22 11:20:57 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
stats: jobsStatistics(filter: $filter) {
|
|
|
|
histDuration { count, value }
|
|
|
|
histNumNodes { count, value }
|
2023-08-29 14:02:23 +02:00
|
|
|
histNumCores { count, value }
|
|
|
|
histNumAccs { count, value }
|
2022-06-22 11:20:57 +02:00
|
|
|
}
|
|
|
|
|
2023-08-25 17:38:25 +02:00
|
|
|
allocatedNodes(cluster: $cluster) { name, count }
|
2023-05-03 16:41:17 +02:00
|
|
|
}`,
|
|
|
|
variables: {
|
|
|
|
cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
|
2022-06-22 11:20:57 +02:00
|
|
|
filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
|
2023-05-03 16:41:17 +02:00
|
|
|
}
|
2022-06-22 11:20:57 +02:00
|
|
|
})
|
|
|
|
|
2023-08-25 17:38:25 +02:00
|
|
|
const paging = { itemsPerPage: 10, page: 1 }; // Top 10
|
|
|
|
$: topUserQuery = queryStore({
|
|
|
|
client: client,
|
|
|
|
query: gql`
|
2023-08-29 14:01:01 +02:00
|
|
|
query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
|
|
|
|
topUser: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: USER) {
|
2023-08-25 17:38:25 +02:00
|
|
|
id
|
2023-08-29 14:01:01 +02:00
|
|
|
totalJobs
|
2023-08-25 17:38:25 +02:00
|
|
|
totalNodes
|
|
|
|
totalCores
|
2023-08-29 14:01:01 +02:00
|
|
|
totalAccs
|
2023-08-24 09:49:19 +02:00
|
|
|
}
|
2023-08-25 17:38:25 +02:00
|
|
|
}
|
|
|
|
`,
|
2023-08-29 14:01:01 +02:00
|
|
|
variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topUserSelection.key.toUpperCase() }
|
2023-08-25 17:38:25 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
$: topProjectQuery = queryStore({
|
|
|
|
client: client,
|
|
|
|
query: gql`
|
2023-08-29 14:01:01 +02:00
|
|
|
query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
|
|
|
|
topProjects: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: PROJECT) {
|
2023-08-25 17:38:25 +02:00
|
|
|
id
|
2023-08-29 14:01:01 +02:00
|
|
|
totalJobs
|
2023-08-25 17:38:25 +02:00
|
|
|
totalNodes
|
|
|
|
totalCores
|
2023-08-29 14:01:01 +02:00
|
|
|
totalAccs
|
2023-08-24 09:49:19 +02:00
|
|
|
}
|
|
|
|
}
|
2023-08-25 17:38:25 +02:00
|
|
|
`,
|
2023-08-29 14:01:01 +02:00
|
|
|
variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topProjectSelection.key.toUpperCase() }
|
2023-08-25 17:38:25 +02:00
|
|
|
})
|
2022-06-22 11:20:57 +02:00
|
|
|
|
|
|
|
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)
|
|
|
|
|
2023-08-24 09:49:19 +02:00
|
|
|
let allocatedNodes = {},
|
|
|
|
flopRate = {},
|
|
|
|
flopRateUnitPrefix = {},
|
|
|
|
flopRateUnitBase = {},
|
|
|
|
memBwRate = {},
|
|
|
|
memBwRateUnitPrefix = {},
|
|
|
|
memBwRateUnitBase = {};
|
2022-06-22 11:20:57 +02:00
|
|
|
$: if ($initq.data && $mainQuery.data) {
|
2023-08-24 09:49:19 +02:00
|
|
|
let subClusters = $initq.data.clusters.find(
|
|
|
|
(c) => c.name == cluster
|
|
|
|
).subClusters;
|
2022-06-22 11:20:57 +02:00
|
|
|
for (let subCluster of subClusters) {
|
2023-08-24 09:49:19 +02:00
|
|
|
allocatedNodes[subCluster.name] =
|
|
|
|
$mainQuery.data.allocatedNodes.find(
|
|
|
|
({ name }) => name == subCluster.name
|
|
|
|
)?.count || 0;
|
|
|
|
flopRate[subCluster.name] =
|
|
|
|
Math.floor(
|
|
|
|
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;
|
2022-06-22 11:20:57 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-08-30 15:15:53 +02:00
|
|
|
const updateConfigurationMutation = ({ name, value }) => {
|
|
|
|
return mutationStore({
|
|
|
|
client: client,
|
|
|
|
query: gql`
|
|
|
|
mutation ($name: String!, $value: String!) {
|
|
|
|
updateConfiguration(name: $name, value: $value)
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
variables: { name, value }
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateTopUserConfiguration(select) {
|
|
|
|
if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) {
|
|
|
|
updateConfigurationMutation({ name: `status_view_selectedTopUserCategory:${cluster}`, value: JSON.stringify(select) })
|
|
|
|
.subscribe(res => {
|
|
|
|
if (res.fetching === false && !res.error) {
|
|
|
|
// console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
|
|
|
|
} else if (res.fetching === false && res.error) {
|
|
|
|
throw res.error
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
// console.log('No Mutation Required: Top User')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateTopProjectConfiguration(select) {
|
|
|
|
if (ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] != select) {
|
|
|
|
updateConfigurationMutation({ name: `status_view_selectedTopProjectCategory:${cluster}`, value: JSON.stringify(select) })
|
|
|
|
.subscribe(res => {
|
|
|
|
if (res.fetching === false && !res.error) {
|
|
|
|
// console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
|
|
|
|
} else if (res.fetching === false && res.error) {
|
|
|
|
throw res.error
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
// console.log('No Mutation Required: Top Project')
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
$: updateTopUserConfiguration(topUserSelection.key)
|
|
|
|
$: updateTopProjectConfiguration(topProjectSelection.key)
|
|
|
|
|
2022-06-22 11:20:57 +02:00
|
|
|
</script>
|
|
|
|
|
2022-09-28 16:13:46 +02:00
|
|
|
<!-- Loading indicator & Refresh -->
|
|
|
|
|
2022-06-22 11:20:57 +02:00
|
|
|
<Row>
|
2022-09-28 16:13:46 +02:00
|
|
|
<Col xs="auto" style="align-self: flex-end;">
|
2023-08-24 09:49:19 +02:00
|
|
|
<h4 class="mb-0">Current utilization of cluster "{cluster}"</h4>
|
2022-09-28 16:13:46 +02:00
|
|
|
</Col>
|
2022-06-22 11:20:57 +02:00
|
|
|
<Col xs="auto">
|
|
|
|
{#if $initq.fetching || $mainQuery.fetching}
|
2023-08-24 09:49:19 +02:00
|
|
|
<Spinner />
|
2022-06-22 11:20:57 +02:00
|
|
|
{:else if $initq.error}
|
|
|
|
<Card body color="danger">{$initq.error.message}</Card>
|
|
|
|
{:else}
|
|
|
|
<!-- ... -->
|
|
|
|
{/if}
|
|
|
|
</Col>
|
|
|
|
<Col xs="auto" style="margin-left: auto;">
|
2023-08-24 09:49:19 +02:00
|
|
|
<Refresher
|
|
|
|
initially={120}
|
|
|
|
on:reload={() => {
|
|
|
|
from = new Date(Date.now() - 5 * 60 * 1000);
|
|
|
|
to = new Date(Date.now());
|
|
|
|
}}
|
|
|
|
/>
|
2022-06-22 11:20:57 +02:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
{#if $mainQuery.error}
|
|
|
|
<Row>
|
|
|
|
<Col>
|
|
|
|
<Card body color="danger">{$mainQuery.error.message}</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
{/if}
|
2022-09-28 16:13:46 +02:00
|
|
|
|
2023-08-24 09:49:19 +02:00
|
|
|
<hr />
|
2022-09-28 16:13:46 +02:00
|
|
|
|
|
|
|
<!-- Gauges & Roofline per Subcluster-->
|
|
|
|
|
2022-06-22 11:20:57 +02:00
|
|
|
{#if $initq.data && $mainQuery.data}
|
2023-08-24 09:49:19 +02:00
|
|
|
{#each $initq.data.clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
|
|
|
|
<Row class="mb-3 justify-content-center">
|
|
|
|
<Col md="4" class="px-3">
|
2022-09-28 16:13:46 +02:00
|
|
|
<Card class="h-auto mt-1">
|
|
|
|
<CardHeader>
|
2023-08-24 09:49:19 +02:00
|
|
|
<CardTitle class="mb-0"
|
|
|
|
>SubCluster "{subCluster.name}"</CardTitle
|
|
|
|
>
|
2022-09-28 16:13:46 +02:00
|
|
|
</CardHeader>
|
|
|
|
<CardBody>
|
2023-04-12 18:00:28 +02:00
|
|
|
<Table borderless>
|
|
|
|
<tr class="py-2">
|
2022-09-28 16:13:46 +02:00
|
|
|
<th scope="col">Allocated Nodes</th>
|
2023-08-24 09:49:19 +02:00
|
|
|
<td style="min-width: 100px;"
|
|
|
|
><div class="col">
|
|
|
|
<Progress
|
|
|
|
value={allocatedNodes[
|
|
|
|
subCluster.name
|
|
|
|
]}
|
|
|
|
max={subCluster.numberOfNodes}
|
|
|
|
/>
|
|
|
|
</div></td
|
|
|
|
>
|
|
|
|
<td
|
|
|
|
>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes}
|
|
|
|
Nodes</td
|
|
|
|
>
|
2022-09-28 16:13:46 +02:00
|
|
|
</tr>
|
2023-04-12 18:00:28 +02:00
|
|
|
<tr class="py-2">
|
2023-08-24 09:49:19 +02:00
|
|
|
<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: 100px;"
|
|
|
|
><div class="col">
|
|
|
|
<Progress
|
|
|
|
value={flopRate[subCluster.name]}
|
|
|
|
max={subCluster.flopRateSimd.value *
|
|
|
|
subCluster.numberOfNodes}
|
|
|
|
/>
|
|
|
|
</div></td
|
|
|
|
>
|
2023-06-16 12:44:34 +02:00
|
|
|
<td>
|
2023-08-24 09:49:19 +02:00
|
|
|
{scaleNumbers(
|
|
|
|
flopRate[subCluster.name],
|
|
|
|
subCluster.flopRateSimd.value *
|
|
|
|
subCluster.numberOfNodes,
|
|
|
|
flopRateUnitPrefix[subCluster.name]
|
|
|
|
)}{flopRateUnitBase[subCluster.name]} [Max]
|
2023-06-16 12:44:34 +02:00
|
|
|
</td>
|
2022-09-28 16:13:46 +02:00
|
|
|
</tr>
|
2023-04-12 18:00:28 +02:00
|
|
|
<tr class="py-2">
|
2022-09-28 16:13:46 +02:00
|
|
|
<th scope="col">MemBw Rate</th>
|
2023-08-24 09:49:19 +02:00
|
|
|
<td style="min-width: 100px;"
|
|
|
|
><div class="col">
|
|
|
|
<Progress
|
|
|
|
value={memBwRate[subCluster.name]}
|
|
|
|
max={subCluster.memoryBandwidth
|
|
|
|
.value *
|
|
|
|
subCluster.numberOfNodes}
|
|
|
|
/>
|
|
|
|
</div></td
|
|
|
|
>
|
2023-06-16 12:44:34 +02:00
|
|
|
<td>
|
2023-08-24 09:49:19 +02:00
|
|
|
{scaleNumbers(
|
|
|
|
memBwRate[subCluster.name],
|
|
|
|
subCluster.memoryBandwidth.value *
|
|
|
|
subCluster.numberOfNodes,
|
|
|
|
memBwRateUnitPrefix[subCluster.name]
|
|
|
|
)}{memBwRateUnitBase[subCluster.name]} [Max]
|
2023-06-16 12:44:34 +02:00
|
|
|
</td>
|
2022-09-28 16:13:46 +02:00
|
|
|
</tr>
|
|
|
|
</Table>
|
|
|
|
</CardBody>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
<Col class="px-3">
|
|
|
|
<div bind:clientWidth={plotWidths[i]}>
|
|
|
|
{#key $mainQuery.data.nodeMetrics}
|
|
|
|
<Roofline
|
2023-08-24 09:49:19 +02:00
|
|
|
width={plotWidths[i] - 10}
|
|
|
|
height={300}
|
|
|
|
colorDots={true}
|
|
|
|
showTime={false}
|
|
|
|
cluster={subCluster}
|
|
|
|
data={transformPerNodeData(
|
|
|
|
$mainQuery.data.nodeMetrics.filter(
|
|
|
|
(data) => data.subCluster == subCluster.name
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
/>
|
2022-09-28 16:13:46 +02:00
|
|
|
{/key}
|
|
|
|
</div>
|
2022-06-22 11:20:57 +02:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
{/each}
|
2022-09-28 16:13:46 +02:00
|
|
|
|
2023-08-24 09:49:19 +02:00
|
|
|
<hr style="margin-top: -1em;" />
|
2022-09-28 16:13:46 +02:00
|
|
|
|
|
|
|
<!-- Usage Stats as Histograms -->
|
|
|
|
|
2023-08-24 09:49:19 +02:00
|
|
|
<Row>
|
2022-09-28 16:13:46 +02:00
|
|
|
<Col class="p-2">
|
|
|
|
<div bind:clientWidth={colWidth1}>
|
2023-08-29 14:01:01 +02:00
|
|
|
<h4 class="text-center">Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
|
2023-08-29 15:58:25 +02:00
|
|
|
{#key $topUserQuery.data}
|
|
|
|
{#if $topUserQuery.fetching}
|
|
|
|
<Spinner/>
|
|
|
|
{:else if $topUserQuery.error}
|
|
|
|
<Card body color="danger">{$topUserQuery.error.message}</Card>
|
|
|
|
{:else}
|
|
|
|
<Pie
|
|
|
|
size={colWidth1}
|
|
|
|
sliceLabel={topUserSelection.label}
|
|
|
|
quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])}
|
|
|
|
entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
|
|
|
|
/>
|
|
|
|
{/if}
|
2022-09-28 16:13:46 +02:00
|
|
|
{/key}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col class="px-4 py-2">
|
2023-08-29 14:01:01 +02:00
|
|
|
{#key $topUserQuery.data}
|
|
|
|
{#if $topUserQuery.fetching}
|
|
|
|
<Spinner/>
|
|
|
|
{:else if $topUserQuery.error}
|
|
|
|
<Card body color="danger">{$topUserQuery.error.message}</Card>
|
|
|
|
{:else}
|
|
|
|
<Table>
|
|
|
|
<tr class="mb-2">
|
|
|
|
<th>Legend</th>
|
|
|
|
<th>User Name</th>
|
|
|
|
<th>Number of
|
|
|
|
<select class="p-0" bind:value={topUserSelection}>
|
|
|
|
{#each topOptions as option}
|
|
|
|
<option value={option}>
|
|
|
|
{option.label}
|
|
|
|
</option>
|
|
|
|
{/each}
|
|
|
|
</select>
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
{#each $topUserQuery.data.topUser as tu, i}
|
|
|
|
<tr>
|
|
|
|
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
|
|
|
<th scope="col"><a href="/monitoring/user/{tu.id}?cluster={cluster}&state=running">{tu.id}</a></th>
|
|
|
|
<td>{tu[topUserSelection.key]}</td>
|
|
|
|
</tr>
|
|
|
|
{/each}
|
|
|
|
</Table>
|
|
|
|
{/if}
|
|
|
|
{/key}
|
2022-09-28 16:13:46 +02:00
|
|
|
</Col>
|
|
|
|
<Col class="p-2">
|
2023-08-29 14:01:01 +02:00
|
|
|
<h4 class="text-center">Top Projects on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
|
2023-08-29 15:58:25 +02:00
|
|
|
{#key $topProjectQuery.data}
|
|
|
|
{#if $topProjectQuery.fetching}
|
|
|
|
<Spinner/>
|
|
|
|
{:else if $topProjectQuery.error}
|
|
|
|
<Card body color="danger">{$topProjectQuery.error.message}</Card>
|
|
|
|
{:else}
|
|
|
|
<Pie
|
|
|
|
size={colWidth1}
|
|
|
|
sliceLabel={topProjectSelection.label}
|
|
|
|
quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])}
|
|
|
|
entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
|
|
|
|
/>
|
|
|
|
{/if}
|
2022-06-22 11:20:57 +02:00
|
|
|
{/key}
|
2022-09-28 16:13:46 +02:00
|
|
|
</Col>
|
|
|
|
<Col class="px-4 py-2">
|
2023-08-29 14:01:01 +02:00
|
|
|
{#key $topProjectQuery.data}
|
|
|
|
{#if $topProjectQuery.fetching}
|
|
|
|
<Spinner/>
|
|
|
|
{:else if $topProjectQuery.error}
|
|
|
|
<Card body color="danger">{$topProjectQuery.error.message}</Card>
|
|
|
|
{:else}
|
|
|
|
<Table>
|
|
|
|
<tr class="mb-2">
|
|
|
|
<th>Legend</th>
|
|
|
|
<th>Project Code</th>
|
|
|
|
<th>Number of
|
|
|
|
<select class="p-0" bind:value={topProjectSelection}>
|
|
|
|
{#each topOptions as option}
|
|
|
|
<option value={option}>
|
|
|
|
{option.label}
|
|
|
|
</option>
|
|
|
|
{/each}
|
|
|
|
</select>
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
{#each $topProjectQuery.data.topProjects as tp, i}
|
|
|
|
<tr>
|
|
|
|
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
|
|
|
|
<th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq">{tp.id}</a></th>
|
|
|
|
<td>{tp[topProjectSelection.key]}</td>
|
|
|
|
</tr>
|
|
|
|
{/each}
|
|
|
|
</Table>
|
|
|
|
{/if}
|
|
|
|
{/key}
|
2022-09-28 16:13:46 +02:00
|
|
|
</Col>
|
2022-06-22 11:20:57 +02:00
|
|
|
</Row>
|
2023-08-24 09:49:19 +02:00
|
|
|
<hr class="my-2" />
|
|
|
|
<Row>
|
2022-09-28 16:13:46 +02:00
|
|
|
<Col class="p-2">
|
|
|
|
<div bind:clientWidth={colWidth2}>
|
|
|
|
{#key $mainQuery.data.stats}
|
2023-08-11 13:34:30 +02:00
|
|
|
<Histogram
|
2023-08-24 09:49:19 +02:00
|
|
|
data={convert2uplot(
|
|
|
|
$mainQuery.data.stats[0].histDuration
|
|
|
|
)}
|
2023-03-30 15:21:35 +02:00
|
|
|
width={colWidth2 - 25}
|
2023-08-09 12:42:25 +02:00
|
|
|
title="Duration Distribution"
|
|
|
|
xlabel="Current Runtimes"
|
2023-08-24 09:49:19 +02:00
|
|
|
xunit="Hours"
|
2023-08-09 12:42:25 +02:00
|
|
|
ylabel="Number of Jobs"
|
2023-08-24 09:49:19 +02:00
|
|
|
yunit="Jobs"
|
|
|
|
/>
|
2022-09-28 16:13:46 +02:00
|
|
|
{/key}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col class="p-2">
|
2022-06-22 11:20:57 +02:00
|
|
|
{#key $mainQuery.data.stats}
|
2023-08-11 13:34:30 +02:00
|
|
|
<Histogram
|
2023-08-09 12:42:25 +02:00
|
|
|
data={convert2uplot($mainQuery.data.stats[0].histNumNodes)}
|
2023-03-30 15:21:35 +02:00
|
|
|
width={colWidth2 - 25}
|
2023-08-09 12:42:25 +02:00
|
|
|
title="Number of Nodes Distribution"
|
|
|
|
xlabel="Allocated Nodes"
|
2023-08-24 09:49:19 +02:00
|
|
|
xunit="Nodes"
|
2023-08-09 12:42:25 +02:00
|
|
|
ylabel="Number of Jobs"
|
2023-08-24 09:49:19 +02:00
|
|
|
yunit="Jobs"
|
|
|
|
/>
|
2022-06-22 11:20:57 +02:00
|
|
|
{/key}
|
2022-09-28 16:13:46 +02:00
|
|
|
</Col>
|
2022-06-22 11:20:57 +02:00
|
|
|
</Row>
|
2023-08-29 14:02:23 +02:00
|
|
|
<Row cols={2}>
|
|
|
|
<Col class="p-2">
|
|
|
|
<div bind:clientWidth={colWidth2}>
|
|
|
|
{#key $mainQuery.data.stats}
|
|
|
|
<Histogram
|
|
|
|
data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
|
|
|
|
width={colWidth2 - 25}
|
|
|
|
title="Number of Cores Distribution"
|
|
|
|
xlabel="Allocated Cores"
|
|
|
|
xunit="Cores"
|
|
|
|
ylabel="Number of Jobs"
|
|
|
|
yunit="Jobs"/>
|
|
|
|
{/key}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
<Col class="p-2">
|
|
|
|
{#key $mainQuery.data.stats}
|
|
|
|
<Histogram
|
|
|
|
data={convert2uplot($mainQuery.data.stats[0].histNumAccs)}
|
|
|
|
width={colWidth2 - 25}
|
|
|
|
title="Number of Accelerators Distribution"
|
|
|
|
xlabel="Allocated Accs"
|
|
|
|
xunit="Accs"
|
|
|
|
ylabel="Number of Jobs"
|
|
|
|
yunit="Jobs"/>
|
|
|
|
{/key}
|
|
|
|
</Col>
|
|
|
|
</Row>
|
2023-08-24 09:49:19 +02:00
|
|
|
{/if}
|