This commit is contained in:
Jan Eitzinger 2023-08-31 13:10:01 +02:00
parent a0b8f36dbb
commit 1da0e3a747

View File

@ -1,30 +1,67 @@
<script> <script>
import { getContext } from 'svelte' import { getContext } from "svelte";
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, mutationStore } 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,
mutationStore,
} from "@urql/svelte";
const { query: initq } = init() const { query: initq } = init();
const ccconfig = getContext("cc-config") const ccconfig = getContext("cc-config");
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 topOptions = [ const topOptions = [
{key: 'totalJobs', label: 'Jobs'}, { key: "totalJobs", label: "Jobs" },
{key: 'totalNodes', label: 'Nodes'}, { key: "totalNodes", label: "Nodes" },
{key: 'totalCores', label: 'Cores'}, { key: "totalCores", label: "Cores" },
{key: 'totalAccs', label: 'Accelerators'}, { key: "totalAccs", label: "Accelerators" },
] ];
let topProjectSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopProjectCategory) let topProjectSelection =
let topUserSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopUserCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopUserCategory) 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
);
const client = getContextClient(); const client = getContextClient();
$: mainQuery = queryStore({ $: mainQuery = queryStore({
@ -62,26 +99,54 @@
} }
stats: jobsStatistics(filter: $filter) { stats: jobsStatistics(filter: $filter) {
histDuration { count, value } histDuration {
histNumNodes { count, value } count
histNumCores { count, value } value
histNumAccs { count, value } }
histNumNodes {
count
value
}
histNumCores {
count
value
}
histNumAccs {
count
value
}
} }
allocatedNodes(cluster: $cluster) { name, count } allocatedNodes(cluster: $cluster) {
}`, name
variables: { count
cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
} }
}) }
`,
variables: {
cluster: cluster,
metrics: ["flops_any", "mem_bw"],
from: from.toISOString(),
to: to.toISOString(),
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
},
});
const paging = { itemsPerPage: 10, page: 1 }; // Top 10 const paging = { itemsPerPage: 10, page: 1 }; // Top 10
$: topUserQuery = queryStore({ $: topUserQuery = queryStore({
client: client, client: client,
query: gql` query: gql`
query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) { query (
topUser: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: USER) { $filter: [JobFilter!]!
$paging: PageRequest!
$sortBy: SortByAggregate!
) {
topUser: jobsStatistics(
filter: $filter
page: $paging
sortBy: $sortBy
groupBy: USER
) {
id id
totalJobs totalJobs
totalNodes totalNodes
@ -90,14 +155,27 @@
} }
} }
`, `,
variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topUserSelection.key.toUpperCase() } variables: {
}) filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
paging,
sortBy: topUserSelection.key.toUpperCase(),
},
});
$: topProjectQuery = queryStore({ $: topProjectQuery = queryStore({
client: client, client: client,
query: gql` query: gql`
query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) { query (
topProjects: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: PROJECT) { $filter: [JobFilter!]!
$paging: PageRequest!
$sortBy: SortByAggregate!
) {
topProjects: jobsStatistics(
filter: $filter
page: $paging
sortBy: $sortBy
groupBy: PROJECT
) {
id id
totalJobs totalJobs
totalNodes totalNodes
@ -106,12 +184,28 @@
} }
} }
`, `,
variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topProjectSelection.key.toUpperCase() } variables: {
}) filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
paging,
sortBy: topProjectSelection.key.toUpperCase(),
},
});
const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster const sumUp = (data, subcluster, metric) =>
? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0) data.reduce(
: sum, 0) (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 = {}, let allocatedNodes = {},
flopRate = {}, flopRate = {},
@ -164,43 +258,51 @@
updateConfiguration(name: $name, value: $value) updateConfiguration(name: $name, value: $value)
} }
`, `,
variables: { name, value } variables: { name, value },
}); });
} };
function updateTopUserConfiguration(select) { function updateTopUserConfiguration(select) {
if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) { if (
updateConfigurationMutation({ name: `status_view_selectedTopUserCategory:${cluster}`, value: JSON.stringify(select) }) ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select
.subscribe(res => { ) {
updateConfigurationMutation({
name: `status_view_selectedTopUserCategory:${cluster}`,
value: JSON.stringify(select),
}).subscribe((res) => {
if (res.fetching === false && !res.error) { if (res.fetching === false && !res.error) {
// console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!') // console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
} else if (res.fetching === false && res.error) { } else if (res.fetching === false && res.error) {
throw res.error throw res.error;
} }
}) });
} else { } else {
// console.log('No Mutation Required: Top User') // console.log('No Mutation Required: Top User')
} }
} }
function updateTopProjectConfiguration(select) { function updateTopProjectConfiguration(select) {
if (ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] != select) { if (
updateConfigurationMutation({ name: `status_view_selectedTopProjectCategory:${cluster}`, value: JSON.stringify(select) }) ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] !=
.subscribe(res => { select
) {
updateConfigurationMutation({
name: `status_view_selectedTopProjectCategory:${cluster}`,
value: JSON.stringify(select),
}).subscribe((res) => {
if (res.fetching === false && !res.error) { if (res.fetching === false && !res.error) {
// console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!') // console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
} else if (res.fetching === false && res.error) { } else if (res.fetching === false && res.error) {
throw res.error throw res.error;
} }
}) });
} else { } else {
// console.log('No Mutation Required: Top Project') // console.log('No Mutation Required: Top Project')
} }
}; }
$: updateTopUserConfiguration(topUserSelection.key)
$: updateTopProjectConfiguration(topProjectSelection.key)
$: updateTopUserConfiguration(topUserSelection.key);
$: updateTopProjectConfiguration(topProjectSelection.key);
</script> </script>
<!-- Loading indicator & Refresh --> <!-- Loading indicator & Refresh -->
@ -349,18 +451,27 @@
<Row> <Row>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth1}> <div bind:clientWidth={colWidth1}>
<h4 class="text-center">Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4> <h4 class="text-center">
Top Users on {cluster.charAt(0).toUpperCase() +
cluster.slice(1)}
</h4>
{#key $topUserQuery.data} {#key $topUserQuery.data}
{#if $topUserQuery.fetching} {#if $topUserQuery.fetching}
<Spinner/> <Spinner />
{:else if $topUserQuery.error} {:else if $topUserQuery.error}
<Card body color="danger">{$topUserQuery.error.message}</Card> <Card body color="danger"
>{$topUserQuery.error.message}</Card
>
{:else} {:else}
<Pie <Pie
size={colWidth1} size={colWidth1}
sliceLabel={topUserSelection.label} sliceLabel={topUserSelection.label}
quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])} quantities={$topUserQuery.data.topUser.map(
entities={$topUserQuery.data.topUser.map((tu) => tu.id)} (tu) => tu[topUserSelection.key]
)}
entities={$topUserQuery.data.topUser.map(
(tu) => tu.id
)}
/> />
{/if} {/if}
{/key} {/key}
@ -369,16 +480,22 @@
<Col class="px-4 py-2"> <Col class="px-4 py-2">
{#key $topUserQuery.data} {#key $topUserQuery.data}
{#if $topUserQuery.fetching} {#if $topUserQuery.fetching}
<Spinner/> <Spinner />
{:else if $topUserQuery.error} {:else if $topUserQuery.error}
<Card body color="danger">{$topUserQuery.error.message}</Card> <Card body color="danger"
>{$topUserQuery.error.message}</Card
>
{:else} {:else}
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th>Legend</th> <th>Legend</th>
<th>User Name</th> <th>User Name</th>
<th>Number of <th
<select class="p-0" bind:value={topUserSelection}> >Number of
<select
class="p-0"
bind:value={topUserSelection}
>
{#each topOptions as option} {#each topOptions as option}
<option value={option}> <option value={option}>
{option.label} {option.label}
@ -389,8 +506,18 @@
</tr> </tr>
{#each $topUserQuery.data.topUser as tu, i} {#each $topUserQuery.data.topUser as tu, i}
<tr> <tr>
<td><Icon name="circle-fill" style="color: {colors[i]};"/></td> <td
<th scope="col"><a href="/monitoring/user/{tu.id}?cluster={cluster}&state=running">{tu.id}</a></th> ><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> <td>{tu[topUserSelection.key]}</td>
</tr> </tr>
{/each} {/each}
@ -399,18 +526,27 @@
{/key} {/key}
</Col> </Col>
<Col class="p-2"> <Col class="p-2">
<h4 class="text-center">Top Projects on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4> <h4 class="text-center">
Top Projects on {cluster.charAt(0).toUpperCase() +
cluster.slice(1)}
</h4>
{#key $topProjectQuery.data} {#key $topProjectQuery.data}
{#if $topProjectQuery.fetching} {#if $topProjectQuery.fetching}
<Spinner/> <Spinner />
{:else if $topProjectQuery.error} {:else if $topProjectQuery.error}
<Card body color="danger">{$topProjectQuery.error.message}</Card> <Card body color="danger"
>{$topProjectQuery.error.message}</Card
>
{:else} {:else}
<Pie <Pie
size={colWidth1} size={colWidth1}
sliceLabel={topProjectSelection.label} sliceLabel={topProjectSelection.label}
quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])} quantities={$topProjectQuery.data.topProjects.map(
entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)} (tp) => tp[topProjectSelection.key]
)}
entities={$topProjectQuery.data.topProjects.map(
(tp) => tp.id
)}
/> />
{/if} {/if}
{/key} {/key}
@ -418,16 +554,22 @@
<Col class="px-4 py-2"> <Col class="px-4 py-2">
{#key $topProjectQuery.data} {#key $topProjectQuery.data}
{#if $topProjectQuery.fetching} {#if $topProjectQuery.fetching}
<Spinner/> <Spinner />
{:else if $topProjectQuery.error} {:else if $topProjectQuery.error}
<Card body color="danger">{$topProjectQuery.error.message}</Card> <Card body color="danger"
>{$topProjectQuery.error.message}</Card
>
{:else} {:else}
<Table> <Table>
<tr class="mb-2"> <tr class="mb-2">
<th>Legend</th> <th>Legend</th>
<th>Project Code</th> <th>Project Code</th>
<th>Number of <th
<select class="p-0" bind:value={topProjectSelection}> >Number of
<select
class="p-0"
bind:value={topProjectSelection}
>
{#each topOptions as option} {#each topOptions as option}
<option value={option}> <option value={option}>
{option.label} {option.label}
@ -438,8 +580,18 @@
</tr> </tr>
{#each $topProjectQuery.data.topProjects as tp, i} {#each $topProjectQuery.data.topProjects as tp, 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={tp.id}&projectMatch=eq">{tp.id}</a></th> ><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> <td>{tp[topProjectSelection.key]}</td>
</tr> </tr>
{/each} {/each}
@ -486,13 +638,16 @@
<div bind:clientWidth={colWidth2}> <div bind:clientWidth={colWidth2}>
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
<Histogram <Histogram
data={convert2uplot($mainQuery.data.stats[0].histNumCores)} data={convert2uplot(
$mainQuery.data.stats[0].histNumCores
)}
width={colWidth2 - 25} width={colWidth2 - 25}
title="Number of Cores Distribution" title="Number of Cores Distribution"
xlabel="Allocated Cores" xlabel="Allocated Cores"
xunit="Cores" xunit="Cores"
ylabel="Number of Jobs" ylabel="Number of Jobs"
yunit="Jobs"/> yunit="Jobs"
/>
{/key} {/key}
</div> </div>
</Col> </Col>
@ -505,7 +660,8 @@
xlabel="Allocated Accs" xlabel="Allocated Accs"
xunit="Accs" xunit="Accs"
ylabel="Number of Jobs" ylabel="Number of Jobs"
yunit="Jobs"/> yunit="Jobs"
/>
{/key} {/key}
</Col> </Col>
</Row> </Row>