mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-11-10 08:57:25 +01:00
Make columns responsive
This commit is contained in:
parent
69b3f767f6
commit
4aa9c4831f
@ -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}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user