mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-12-16 04:06:16 +01:00
Merge branch 'master' into 97_107_mark_and_show_shared
This commit is contained in:
Christoph Kluge
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { init } from './utils.js'
|
||||
import { getContext, onMount } from 'svelte'
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
|
||||
import Filters from './filters/Filters.svelte'
|
||||
import PlotSelection from './PlotSelection.svelte'
|
||||
@@ -30,6 +30,7 @@
|
||||
let rooflineMaxY
|
||||
let colWidth
|
||||
let numBins = 50
|
||||
let maxY = -1
|
||||
const ccconfig = getContext('cc-config')
|
||||
const metricConfig = getContext('metrics')
|
||||
|
||||
@@ -44,52 +45,55 @@
|
||||
console.assert(cluster != null, `This cluster could not be found: ${filterPresets.cluster}`)
|
||||
|
||||
rooflineMaxY = cluster.subClusters.reduce((max, part) => Math.max(max, part.flopRateSimd.value), 0)
|
||||
$rooflineQuery.variables.maxY = rooflineMaxY
|
||||
$rooflineQuery.context.pause = false
|
||||
$rooflineQuery.reexecute()
|
||||
maxY = rooflineMaxY
|
||||
}
|
||||
})
|
||||
|
||||
const statsQuery = operationStore(`
|
||||
query($filter: [JobFilter!]!) {
|
||||
stats: jobsStatistics(filter: $filter) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
histDuration { count, value }
|
||||
histNumNodes { count, value }
|
||||
const client = getContextClient();
|
||||
|
||||
$: statsQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($filters: [JobFilter!]!) {
|
||||
stats: jobsStatistics(filter: $filters) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
histDuration { count, value }
|
||||
histNumNodes { count, value }
|
||||
}
|
||||
|
||||
topUsers: jobsCount(filter: $filters, groupBy: USER, weight: NODE_HOURS, limit: 5) { name, count }
|
||||
}
|
||||
`,
|
||||
variables: { filters }
|
||||
})
|
||||
|
||||
topUsers: jobsCount(filter: $filter, groupBy: USER, weight: NODE_HOURS, limit: 5) { name, count }
|
||||
}
|
||||
`, { filter: [] }, { pause: true })
|
||||
$: footprintsQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($filters: [JobFilter!]!, $metrics: [String!]!) {
|
||||
footprints: jobsFootprints(filter: $filters, metrics: $metrics) {
|
||||
nodehours,
|
||||
metrics { metric, data }
|
||||
}
|
||||
}`,
|
||||
variables: { filters, metrics }
|
||||
})
|
||||
|
||||
const footprintsQuery = operationStore(`
|
||||
query($filter: [JobFilter!]!, $metrics: [String!]!) {
|
||||
footprints: jobsFootprints(filter: $filter, metrics: $metrics) {
|
||||
nodehours,
|
||||
metrics { metric, data }
|
||||
$: rooflineQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($filters: [JobFilter!]!, $rows: Int!, $cols: Int!,
|
||||
$minX: Float!, $minY: Float!, $maxX: Float!, $maxY: Float!) {
|
||||
rooflineHeatmap(filter: $filters, rows: $rows, cols: $cols,
|
||||
minX: $minX, minY: $minY, maxX: $maxX, maxY: $maxY)
|
||||
}
|
||||
}
|
||||
`, { filter: [], metrics }, { pause: true })
|
||||
$: $footprintsQuery.variables = { ...$footprintsQuery.variables, metrics }
|
||||
`,
|
||||
variables: { filters, rows: 50, cols: 50, minX: 0.01, minY: 1., maxX: 1000., maxY }
|
||||
})
|
||||
|
||||
const rooflineQuery = operationStore(`
|
||||
query($filter: [JobFilter!]!, $rows: Int!, $cols: Int!,
|
||||
$minX: Float!, $minY: Float!, $maxX: Float!, $maxY: Float!) {
|
||||
rooflineHeatmap(filter: $filter, rows: $rows, cols: $cols,
|
||||
minX: $minX, minY: $minY, maxX: $maxX, maxY: $maxY)
|
||||
}
|
||||
`, {
|
||||
filter: [],
|
||||
rows: 50, cols: 50,
|
||||
minX: 0.01, minY: 1., maxX: 1000., maxY: -1.
|
||||
}, { pause: true });
|
||||
|
||||
query(statsQuery)
|
||||
query(footprintsQuery)
|
||||
query(rooflineQuery)
|
||||
onMount(() => filters.update())
|
||||
</script>
|
||||
|
||||
@@ -116,11 +120,7 @@
|
||||
disableClusterSelection={true}
|
||||
startTimeQuickSelect={true}
|
||||
on:update={({ detail }) => {
|
||||
$statsQuery.context.pause = false
|
||||
$statsQuery.variables = { filter: detail.filters }
|
||||
$footprintsQuery.context.pause = false
|
||||
$footprintsQuery.variables = { metrics, filter: detail.filters }
|
||||
$rooflineQuery.variables = { ...$rooflineQuery.variables, filter: detail.filters }
|
||||
filters = detail.filters;
|
||||
}} />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -134,8 +134,8 @@
|
||||
cluster={clusters
|
||||
.find(c => c.name == $initq.data.job.cluster).subClusters
|
||||
.find(sc => sc.name == $initq.data.job.subCluster)}
|
||||
flopsAny={$jobMetrics.data.jobMetrics.find(m => m.name == 'flops_any' && m.scope == 'node').metric}
|
||||
memBw={$jobMetrics.data.jobMetrics.find(m => m.name == 'mem_bw' && m.scope == 'node').metric} />
|
||||
flopsAny={$jobMetrics.data.jobMetrics.find(m => m.name == 'flops_any' && m.scope == 'node')}
|
||||
memBw={$jobMetrics.data.jobMetrics.find(m => m.name == 'mem_bw' && m.scope == 'node')} />
|
||||
</Col>
|
||||
{:else}
|
||||
<Col></Col>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<UserOrProject bind:authlevel={authlevel} bind:roles={roles} on:update={({ detail }) => filters.update(detail)}/>
|
||||
</Col>
|
||||
<Col xs="2">
|
||||
<Refresher on:reload={() => jobList.update()} />
|
||||
<Refresher on:reload={() => jobList.refresh()} />
|
||||
</Col>
|
||||
</Row>
|
||||
<br/>
|
||||
|
||||
@@ -2,64 +2,78 @@
|
||||
@component List of users or projects
|
||||
-->
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { init } from './utils.js'
|
||||
import { Row, Col, Button, Icon, Table, Card, Spinner,
|
||||
InputGroup, Input } from 'sveltestrap'
|
||||
import Filters from './filters/Filters.svelte'
|
||||
import { operationStore, query } from '@urql/svelte';
|
||||
import { scramble, scrambleNames } from './joblist/JobInfo.svelte'
|
||||
import { onMount } from "svelte";
|
||||
import { init } from "./utils.js";
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
Icon,
|
||||
Table,
|
||||
Card,
|
||||
Spinner,
|
||||
InputGroup,
|
||||
Input,
|
||||
} from "sveltestrap";
|
||||
import Filters from "./filters/Filters.svelte";
|
||||
import { queryStore, gql, getContextClient } from "@urql/svelte";
|
||||
import { scramble, scrambleNames } from "./joblist/JobInfo.svelte";
|
||||
|
||||
const { } = init()
|
||||
const {} = init();
|
||||
|
||||
export let type
|
||||
export let filterPresets
|
||||
export let type;
|
||||
export let filterPresets;
|
||||
|
||||
console.assert(type == 'USER' || type == 'PROJECT', 'Invalid list type provided!')
|
||||
console.assert(
|
||||
type == "USER" || type == "PROJECT",
|
||||
"Invalid list type provided!"
|
||||
);
|
||||
|
||||
const stats = operationStore(`query($filter: [JobFilter!]!) {
|
||||
rows: jobsStatistics(filter: $filter, groupBy: ${type}) {
|
||||
id
|
||||
name
|
||||
totalJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
}
|
||||
}`, {
|
||||
filter: []
|
||||
}, {
|
||||
pause: true
|
||||
})
|
||||
const client = getContextClient();
|
||||
$: stats = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($filters: [JobFilter!]!) {
|
||||
rows: jobsStatistics(filter: $filters, groupBy: ${type}) {
|
||||
id
|
||||
name
|
||||
totalJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
}
|
||||
}`,
|
||||
variables: { filters }
|
||||
});
|
||||
|
||||
query(stats)
|
||||
|
||||
let filters
|
||||
let nameFilter = ''
|
||||
let sorting = { field: 'totalJobs', direction: 'down' }
|
||||
let filters;
|
||||
let nameFilter = "";
|
||||
let sorting = { field: "totalJobs", direction: "down" };
|
||||
|
||||
function changeSorting(event, field) {
|
||||
let target = event.target
|
||||
while (target.tagName != 'BUTTON')
|
||||
target = target.parentElement
|
||||
let target = event.target;
|
||||
while (target.tagName != "BUTTON") target = target.parentElement;
|
||||
|
||||
let direction = target.children[0].className.includes('up') ? 'down' : 'up'
|
||||
target.children[0].className = `bi-sort-numeric-${direction}`
|
||||
sorting = { field, direction }
|
||||
let direction = target.children[0].className.includes("up")
|
||||
? "down"
|
||||
: "up";
|
||||
target.children[0].className = `bi-sort-numeric-${direction}`;
|
||||
sorting = { field, direction };
|
||||
}
|
||||
|
||||
function sort(stats, sorting, nameFilter) {
|
||||
const cmp = sorting.field == 'id'
|
||||
? (sorting.direction == 'up'
|
||||
? (a, b) => a.id < b.id
|
||||
: (a, b) => a.id > b.id)
|
||||
: (sorting.direction == 'up'
|
||||
const cmp =
|
||||
sorting.field == "id"
|
||||
? sorting.direction == "up"
|
||||
? (a, b) => a.id < b.id
|
||||
: (a, b) => a.id > b.id
|
||||
: sorting.direction == "up"
|
||||
? (a, b) => a[sorting.field] - b[sorting.field]
|
||||
: (a, b) => b[sorting.field] - a[sorting.field])
|
||||
: (a, b) => b[sorting.field] - a[sorting.field];
|
||||
|
||||
return stats.filter(u => u.id.includes(nameFilter)).sort(cmp)
|
||||
return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp);
|
||||
}
|
||||
|
||||
onMount(() => filters.update())
|
||||
onMount(() => filters.update());
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
@@ -68,59 +82,86 @@
|
||||
<Button disabled outline>
|
||||
Search {type.toLowerCase()}s
|
||||
</Button>
|
||||
<Input bind:value={nameFilter} placeholder="Filter by {({ USER: 'username', PROJECT: 'project' })[type]}" />
|
||||
<Input
|
||||
bind:value={nameFilter}
|
||||
placeholder="Filter by {{
|
||||
USER: 'username',
|
||||
PROJECT: 'project',
|
||||
}[type]}"
|
||||
/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs="auto">
|
||||
<Filters
|
||||
bind:this={filters}
|
||||
filterPresets={filterPresets}
|
||||
{filterPresets}
|
||||
startTimeQuickSelect={true}
|
||||
menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
|
||||
on:update={({ detail }) => {
|
||||
$stats.variables = { filter: detail.filters }
|
||||
$stats.context.pause = false
|
||||
$stats.reexecute()
|
||||
}} />
|
||||
filters = detail.filters;
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
{({ USER: 'Username', PROJECT: 'Project Name' })[type]}
|
||||
<Button color="{sorting.field == 'id' ? 'primary' : 'light'}"
|
||||
size="sm" on:click={e => changeSorting(e, 'id')}>
|
||||
<!-- {({ -->
|
||||
<!-- USER: "Username", -->
|
||||
<!-- PROJECT: "Project Name", -->
|
||||
<!-- })[type]} -->
|
||||
<Button
|
||||
color={sorting.field == "id" ? "primary" : "light"}
|
||||
size="sm"
|
||||
on:click={(e) => changeSorting(e, "id")}
|
||||
>
|
||||
<Icon name="sort-numeric-down" />
|
||||
</Button>
|
||||
</th>
|
||||
{#if type == 'USER'}
|
||||
{#if type == "USER"}
|
||||
<th scope="col">
|
||||
Name
|
||||
<Button color="{sorting.field == 'name' ? 'primary' : 'light'}"
|
||||
size="sm" on:click={e => changeSorting(e, 'name')}>
|
||||
<Button
|
||||
color={sorting.field == "name" ? "primary" : "light"}
|
||||
size="sm"
|
||||
on:click={(e) => changeSorting(e, "name")}
|
||||
>
|
||||
<Icon name="sort-numeric-down" />
|
||||
</Button>
|
||||
</th>
|
||||
{/if}
|
||||
<th scope="col">
|
||||
Total Jobs
|
||||
<Button color="{sorting.field == 'totalJobs' ? 'primary' : 'light'}"
|
||||
size="sm" on:click={e => changeSorting(e, 'totalJobs')}>
|
||||
<Button
|
||||
color={sorting.field == "totalJobs" ? "primary" : "light"}
|
||||
size="sm"
|
||||
on:click={(e) => changeSorting(e, "totalJobs")}
|
||||
>
|
||||
<Icon name="sort-numeric-down" />
|
||||
</Button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
Total Walltime
|
||||
<Button color="{sorting.field == 'totalWalltime' ? 'primary' : 'light'}"
|
||||
size="sm" on:click={e => changeSorting(e, 'totalWalltime')}>
|
||||
<Button
|
||||
color={sorting.field == "totalWalltime"
|
||||
? "primary"
|
||||
: "light"}
|
||||
size="sm"
|
||||
on:click={(e) => changeSorting(e, "totalWalltime")}
|
||||
>
|
||||
<Icon name="sort-numeric-down" />
|
||||
</Button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
Total Core Hours
|
||||
<Button color="{sorting.field == 'totalCoreHours' ? 'primary' : 'light'}"
|
||||
size="sm" on:click={e => changeSorting(e, 'totalCoreHours')}>
|
||||
<Button
|
||||
color={sorting.field == "totalCoreHours"
|
||||
? "primary"
|
||||
: "light"}
|
||||
size="sm"
|
||||
on:click={(e) => changeSorting(e, "totalCoreHours")}
|
||||
>
|
||||
<Icon name="sort-numeric-down" />
|
||||
</Button>
|
||||
</th>
|
||||
@@ -129,26 +170,36 @@
|
||||
<tbody>
|
||||
{#if $stats.fetching}
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center;"><Spinner secondary/></td>
|
||||
<td colspan="4" style="text-align: center;"
|
||||
><Spinner secondary /></td
|
||||
>
|
||||
</tr>
|
||||
{:else if $stats.error}
|
||||
<tr>
|
||||
<td colspan="4"><Card body color="danger" class="mb-3">{$stats.error.message}</Card></td>
|
||||
<td colspan="4"
|
||||
><Card body color="danger" class="mb-3"
|
||||
>{$stats.error.message}</Card
|
||||
></td
|
||||
>
|
||||
</tr>
|
||||
{:else if $stats.data}
|
||||
{#each sort($stats.data.rows, sorting, nameFilter) as row (row.id)}
|
||||
<tr>
|
||||
<td>
|
||||
{#if type == 'USER'}
|
||||
<a href="/monitoring/user/{row.id}">{scrambleNames ? scramble(row.id) : row.id}</a>
|
||||
{:else if type == 'PROJECT'}
|
||||
<a href="/monitoring/jobs/?project={row.id}">{row.id}</a>
|
||||
{#if type == "USER"}
|
||||
<a href="/monitoring/user/{row.id}"
|
||||
>{scrambleNames ? scramble(row.id) : row.id}</a
|
||||
>
|
||||
{:else if type == "PROJECT"}
|
||||
<a href="/monitoring/jobs/?project={row.id}"
|
||||
>{row.id}</a
|
||||
>
|
||||
{:else}
|
||||
{row.id}
|
||||
{/if}
|
||||
</td>
|
||||
{#if type == 'USER'}
|
||||
<td>{row?.name ? row.name : ''}</td>
|
||||
{#if type == "USER"}
|
||||
<td>{row?.name ? row.name : ""}</td>
|
||||
{/if}
|
||||
<td>{row.totalJobs}</td>
|
||||
<td>{row.totalWalltime}</td>
|
||||
@@ -156,7 +207,9 @@
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="4"><i>No {type.toLowerCase()}s/jobs found</i></td>
|
||||
<td colspan="4"
|
||||
><i>No {type.toLowerCase()}s/jobs found</i></td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<script>
|
||||
import { Modal, ModalBody, ModalHeader, ModalFooter, Button, ListGroup } from 'sveltestrap'
|
||||
import { getContext } from 'svelte'
|
||||
import { mutation } from '@urql/svelte'
|
||||
import { gql, getContextClient , mutationStore } from '@urql/svelte'
|
||||
|
||||
export let metrics
|
||||
export let isOpen
|
||||
@@ -53,11 +53,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
const updateConfiguration = mutation({
|
||||
query: `mutation($name: String!, $value: String!) {
|
||||
updateConfiguration(name: $name, value: $value)
|
||||
}`
|
||||
})
|
||||
const client = getContextClient();
|
||||
const updateConfigurationMutation = ({ name, value }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
mutation($name: String!, $value: String!) {
|
||||
updateConfiguration(name: $name, value: $value)
|
||||
}
|
||||
`,
|
||||
variables: { name, value }
|
||||
})}
|
||||
|
||||
let columnHovering = null
|
||||
|
||||
@@ -84,14 +90,15 @@
|
||||
metrics = newMetricsOrder.filter(m => unorderedMetrics.includes(m))
|
||||
isOpen = false
|
||||
|
||||
updateConfiguration({
|
||||
name: cluster == null ? configName : `${configName}:${cluster}`,
|
||||
value: JSON.stringify(metrics)
|
||||
})
|
||||
.then(res => {
|
||||
if (res.error)
|
||||
console.error(res.error)
|
||||
})
|
||||
updateConfigurationMutation({
|
||||
name: cluster == null ? configName : `${configName}:${cluster}`,
|
||||
value: JSON.stringify(metrics)
|
||||
}).subscribe(res => {
|
||||
if (res.fetching === false && res.error) {
|
||||
throw res.error
|
||||
// console.log('Error on subscription: ' + res.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { init } from './utils.js'
|
||||
import { Row, Col, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
import TimeSelection from './filters/TimeSelection.svelte'
|
||||
import PlotTable from './PlotTable.svelte'
|
||||
import MetricPlot from './plots/MetricPlot.svelte'
|
||||
@@ -22,8 +22,8 @@
|
||||
|
||||
const ccconfig = getContext('cc-config')
|
||||
const clusters = getContext('clusters')
|
||||
|
||||
const nodesQuery = operationStore(`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
|
||||
const client = getContextClient();
|
||||
const query = gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
|
||||
nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) {
|
||||
host
|
||||
subCluster
|
||||
@@ -40,14 +40,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}`, {
|
||||
cluster: cluster,
|
||||
nodes: [hostname],
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString()
|
||||
})
|
||||
}`;
|
||||
|
||||
$: $nodesQuery.variables = { cluster, nodes: [hostname], from: from.toISOString(), to: to.toISOString() }
|
||||
$: nodesQuery = queryStore({
|
||||
client: client,
|
||||
query: query,
|
||||
variables: {
|
||||
cluster: cluster,
|
||||
nodes: [hostname],
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString(),
|
||||
}
|
||||
});
|
||||
|
||||
let metricUnits = {}
|
||||
$: if ($nodesQuery.data) {
|
||||
@@ -59,9 +63,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
query(nodesQuery)
|
||||
|
||||
// $: console.log($nodesQuery?.data?.nodeMetrics[0].metrics)
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
<script>
|
||||
import { Modal, ModalBody, ModalHeader, ModalFooter, InputGroup,
|
||||
Button, ListGroup, ListGroupItem, Icon } from 'sveltestrap'
|
||||
import { mutation } from '@urql/svelte'
|
||||
import { gql, getContextClient , mutationStore } from '@urql/svelte'
|
||||
|
||||
export let availableMetrics
|
||||
export let metricsInHistograms
|
||||
export let metricsInScatterplots
|
||||
|
||||
const updateConfigurationMutation = mutation({
|
||||
query: `mutation($name: String!, $value: String!) {
|
||||
updateConfiguration(name: $name, value: $value)
|
||||
}`
|
||||
})
|
||||
const client = getContextClient();
|
||||
const updateConfigurationMutation = ({ name, value }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`mutation($name: String!, $value: String!) {
|
||||
updateConfiguration(name: $name, value: $value)
|
||||
}`,
|
||||
variables: { name, value }
|
||||
})
|
||||
}
|
||||
|
||||
let isHistogramConfigOpen = false, isScatterPlotConfigOpen = false
|
||||
let selectedMetric1 = null, selectedMetric2 = null
|
||||
@@ -20,11 +25,12 @@
|
||||
updateConfigurationMutation({
|
||||
name: data.name,
|
||||
value: JSON.stringify(data.value)
|
||||
})
|
||||
.then(res => {
|
||||
if (res.error)
|
||||
console.error(res.error)
|
||||
});
|
||||
}).subscribe(res => {
|
||||
if (res.fetching === false && res.error) {
|
||||
throw res.error
|
||||
// console.log('Error on subscription: ' + res.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -4,16 +4,19 @@
|
||||
import Histogram from './plots/Histogram.svelte'
|
||||
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
||||
import { init } from './utils.js'
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
|
||||
const { query: initq } = init()
|
||||
|
||||
export let cluster
|
||||
|
||||
let plotWidths = [], colWidth1 = 0, colWidth2
|
||||
|
||||
let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
|
||||
const mainQuery = operationStore(`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
|
||||
|
||||
const client = getContextClient();
|
||||
$: mainQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
|
||||
nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
|
||||
host
|
||||
subCluster
|
||||
@@ -36,12 +39,11 @@
|
||||
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 }
|
||||
}`, {
|
||||
cluster: cluster,
|
||||
metrics: ['flops_any', 'mem_bw'],
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString(),
|
||||
}`,
|
||||
variables: {
|
||||
cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
|
||||
filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
|
||||
}
|
||||
})
|
||||
|
||||
const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
|
||||
@@ -60,7 +62,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
query(mainQuery)
|
||||
</script>
|
||||
|
||||
<!-- Loading indicator & Refresh -->
|
||||
@@ -80,13 +81,8 @@
|
||||
</Col>
|
||||
<Col xs="auto" style="margin-left: auto;">
|
||||
<Refresher initially={120} on:reload={() => {
|
||||
console.log('reload...')
|
||||
|
||||
from = new Date(Date.now() - 5 * 60 * 1000)
|
||||
to = new Date(Date.now())
|
||||
|
||||
$mainQuery.variables = { ...$mainQuery.variables, from: from, to: to }
|
||||
$mainQuery.reexecute({ requestPolicy: 'network-only' })
|
||||
}} />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { init } from './utils.js'
|
||||
import { Row, Col, Input, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
import TimeSelection from './filters/TimeSelection.svelte'
|
||||
import PlotTable from './PlotTable.svelte'
|
||||
import MetricPlot from './plots/MetricPlot.svelte'
|
||||
@@ -27,28 +27,33 @@
|
||||
let hostnameFilter = ''
|
||||
let selectedMetric = ccconfig.system_view_selectedMetric
|
||||
|
||||
const nodesQuery = operationStore(`query($cluster: String!, $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 {
|
||||
statistics { min, avg, max }
|
||||
data
|
||||
const client = getContextClient();
|
||||
$: nodesQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`query($cluster: String!, $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 {
|
||||
statistics { min, avg, max }
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
variables: {
|
||||
cluster: cluster,
|
||||
metrics: [selectedMetric],
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString()
|
||||
}
|
||||
}`, {
|
||||
cluster: cluster,
|
||||
metrics: [],
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString()
|
||||
})
|
||||
|
||||
let metricUnits = {}
|
||||
@@ -63,9 +68,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: $nodesQuery.variables = { cluster, metrics: [selectedMetric], from: from.toISOString(), to: to.toISOString() }
|
||||
|
||||
query(nodesQuery)
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte'
|
||||
import { mutation } from '@urql/svelte'
|
||||
import { gql, getContextClient , mutationStore } from '@urql/svelte'
|
||||
import { Icon, Button, ListGroupItem, Spinner, Modal, Input,
|
||||
ModalBody, ModalHeader, ModalFooter, Alert } from 'sveltestrap'
|
||||
import { fuzzySearchTags } from './utils.js'
|
||||
@@ -15,23 +15,37 @@
|
||||
let pendingChange = false
|
||||
let isOpen = false
|
||||
|
||||
const createTagMutation = mutation({
|
||||
query: `mutation($type: String!, $name: String!) {
|
||||
createTag(type: $type, name: $name) { id, type, name }
|
||||
}`
|
||||
})
|
||||
const client = getContextClient();
|
||||
|
||||
const addTagsToJobMutation = mutation({
|
||||
query: `mutation($job: ID!, $tagIds: [ID!]!) {
|
||||
addTagsToJob(job: $job, tagIds: $tagIds) { id, type, name }
|
||||
}`
|
||||
})
|
||||
const createTagMutation = ({ type, name }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`mutation($type: String!, $name: String!) {
|
||||
createTag(type: $type, name: $name) { id, type, name }
|
||||
}`,
|
||||
variables: { type, name}
|
||||
})
|
||||
}
|
||||
|
||||
const removeTagsFromJobMutation = mutation({
|
||||
query: `mutation($job: ID!, $tagIds: [ID!]!) {
|
||||
removeTagsFromJob(job: $job, tagIds: $tagIds) { id, type, name }
|
||||
}`
|
||||
})
|
||||
const addTagsToJobMutation = ({ job, tagIds }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`mutation($job: ID!, $tagIds: [ID!]!) {
|
||||
addTagsToJob(job: $job, tagIds: $tagIds) { id, type, name }
|
||||
}`,
|
||||
variables: {job, tagIds}
|
||||
})
|
||||
}
|
||||
|
||||
const removeTagsFromJobMutation = ({ job, tagIds }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`mutation($job: ID!, $tagIds: [ID!]!) {
|
||||
removeTagsFromJob(job: $job, tagIds: $tagIds) { id, type, name }
|
||||
}`,
|
||||
variables: {job, tagIds}
|
||||
})
|
||||
}
|
||||
|
||||
let allTagsFiltered // $initialized is in there because when it becomes true, allTags is initailzed.
|
||||
$: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags))
|
||||
@@ -55,43 +69,47 @@
|
||||
|
||||
function createTag(type, name) {
|
||||
pendingChange = true
|
||||
return createTagMutation({ type: type, name: name })
|
||||
.then(res => {
|
||||
if (res.error)
|
||||
throw res.error
|
||||
|
||||
createTagMutation({ type: type, name: name })
|
||||
.subscribe(res => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
pendingChange = false
|
||||
allTags = [...allTags, res.data.createTag]
|
||||
newTagType = ''
|
||||
newTagName = ''
|
||||
return res.data.createTag
|
||||
}, err => console.error(err))
|
||||
addTagToJob(res.data.createTag)
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error
|
||||
// console.log('Error on subscription: ' + res.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addTagToJob(tag) {
|
||||
pendingChange = tag.id
|
||||
addTagsToJobMutation({ job: job.id, tagIds: [tag.id] })
|
||||
.then(res => {
|
||||
if (res.error)
|
||||
throw res.error
|
||||
|
||||
.subscribe(res => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
jobTags = job.tags = res.data.addTagsToJob;
|
||||
pendingChange = false;
|
||||
})
|
||||
.catch(err => console.error(err))
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error
|
||||
// console.log('Error on subscription: ' + res.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function removeTagFromJob(tag) {
|
||||
pendingChange = tag.id
|
||||
removeTagsFromJobMutation({ job: job.id, tagIds: [tag.id] })
|
||||
.then(res => {
|
||||
if (res.error)
|
||||
throw res.error
|
||||
|
||||
.subscribe(res => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
jobTags = job.tags = res.data.removeTagsFromJob
|
||||
pendingChange = false
|
||||
})
|
||||
.catch(err => console.error(err))
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error
|
||||
// console.log('Error on subscription: ' + res.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -154,8 +172,7 @@
|
||||
<br/>
|
||||
{#if newTagType && newTagName && isNewTag(newTagType, newTagName)}
|
||||
<Button outline color="success"
|
||||
on:click={e => (e.preventDefault(), createTag(newTagType, newTagName))
|
||||
.then(tag => addTagToJob(tag))}>
|
||||
on:click={e => (e.preventDefault(), createTag(newTagType, newTagName))}>
|
||||
Create & Add Tag:
|
||||
<Tag tag={({ type: newTagType, name: newTagName })} clickable={false}/>
|
||||
</Button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { onMount, getContext } from 'svelte'
|
||||
import { init } from './utils.js'
|
||||
import { Table, Row, Col, Button, Icon, Card, Spinner } from 'sveltestrap'
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
import Filters from './filters/Filters.svelte'
|
||||
import JobList from './joblist/JobList.svelte'
|
||||
import Sorting from './joblist/SortSelection.svelte'
|
||||
@@ -25,31 +25,24 @@
|
||||
let w1, w2, histogramHeight = 250
|
||||
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
|
||||
|
||||
const stats = operationStore(`
|
||||
query($filter: [JobFilter!]!) {
|
||||
jobsStatistics(filter: $filter) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
histDuration { count, value }
|
||||
histNumNodes { count, value }
|
||||
}
|
||||
}
|
||||
`, {
|
||||
filter: []
|
||||
}, {
|
||||
pause: true
|
||||
const client = getContextClient();
|
||||
$: stats = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($filters: [JobFilter!]!) {
|
||||
jobsStatistics(filter: $filters) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
histDuration { count, value }
|
||||
histNumNodes { count, value }
|
||||
}}`,
|
||||
variables: { filters }
|
||||
})
|
||||
|
||||
// filters[filters.findIndex(filter => filter.cluster != null)] ?
|
||||
// filters[filters.findIndex(filter => filter.cluster != null)].cluster.eq :
|
||||
// null
|
||||
// Cluster filter has to be alwas @ first index, above will throw error
|
||||
$: selectedCluster = filters[0]?.cluster ? filters[0].cluster.eq : null
|
||||
|
||||
query(stats)
|
||||
|
||||
onMount(() => filters.update())
|
||||
</script>
|
||||
|
||||
@@ -84,15 +77,12 @@
|
||||
bind:this={filters}
|
||||
on:update={({ detail }) => {
|
||||
let jobFilters = [...detail.filters, { user: { eq: user.username } }]
|
||||
$stats.variables = { filter: jobFilters }
|
||||
$stats.context.pause = false
|
||||
$stats.reexecute()
|
||||
filters = jobFilters
|
||||
jobList.update(jobFilters)
|
||||
}} />
|
||||
</Col>
|
||||
<Col xs="auto" style="margin-left: auto;">
|
||||
<Refresher on:reload={() => jobList.update()} />
|
||||
<Refresher on:reload={() => jobList.refresh()} />
|
||||
</Col>
|
||||
</Row>
|
||||
<br/>
|
||||
|
||||
@@ -9,83 +9,144 @@
|
||||
- update(filters?: [JobFilter])
|
||||
-->
|
||||
<script>
|
||||
import { operationStore, query, mutation } from '@urql/svelte'
|
||||
import { getContext } from 'svelte';
|
||||
import { Row, Table, Card, Spinner } from 'sveltestrap'
|
||||
import Pagination from './Pagination.svelte'
|
||||
import JobListRow from './Row.svelte'
|
||||
import { stickyHeader } from '../utils.js'
|
||||
import {
|
||||
queryStore,
|
||||
gql,
|
||||
getContextClient,
|
||||
mutationStore,
|
||||
} from "@urql/svelte";
|
||||
import { getContext } from "svelte";
|
||||
import { Row, Table, Card, Spinner } from "sveltestrap";
|
||||
import Pagination from "./Pagination.svelte";
|
||||
import JobListRow from "./Row.svelte";
|
||||
import { stickyHeader } from "../utils.js";
|
||||
|
||||
const ccconfig = getContext('cc-config'),
|
||||
clusters = getContext('clusters'),
|
||||
initialized = getContext('initialized')
|
||||
const ccconfig = getContext("cc-config"),
|
||||
clusters = getContext("clusters"),
|
||||
initialized = getContext("initialized");
|
||||
|
||||
export let sorting = { field: "startTime", order: "DESC" }
|
||||
export let matchedJobs = 0
|
||||
export let metrics = ccconfig.plot_list_selectedMetrics
|
||||
export let sorting = { field: "startTime", order: "DESC" };
|
||||
export let matchedJobs = 0;
|
||||
export let metrics = ccconfig.plot_list_selectedMetrics;
|
||||
|
||||
let itemsPerPage = ccconfig.plot_list_jobsPerPage
|
||||
let page = 1
|
||||
let paging = { itemsPerPage, page }
|
||||
let filter = []
|
||||
let itemsPerPage = ccconfig.plot_list_jobsPerPage;
|
||||
let page = 1;
|
||||
let paging = { itemsPerPage, page };
|
||||
let filter = [];
|
||||
|
||||
const jobs = operationStore(`
|
||||
query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
|
||||
jobs(filter: $filter, order: $sorting, page: $paging) {
|
||||
items {
|
||||
id, jobId, user, project, jobName, cluster, subCluster, startTime,
|
||||
duration, numNodes, numHWThreads, numAcc, walltime, resources { hostname },
|
||||
SMT, exclusive, partition, arrayJobId,
|
||||
monitoringStatus, state,
|
||||
tags { id, type, name }
|
||||
userData { name }
|
||||
metaData
|
||||
const client = getContextClient();
|
||||
const query = gql`
|
||||
query (
|
||||
$filter: [JobFilter!]!
|
||||
$sorting: OrderByInput!
|
||||
$paging: PageRequest!
|
||||
) {
|
||||
jobs(filter: $filter, order: $sorting, page: $paging) {
|
||||
items {
|
||||
id
|
||||
jobId
|
||||
user
|
||||
project
|
||||
jobName
|
||||
cluster
|
||||
subCluster
|
||||
startTime
|
||||
duration
|
||||
numNodes
|
||||
numHWThreads
|
||||
numAcc
|
||||
walltime
|
||||
resources {
|
||||
hostname
|
||||
}
|
||||
SMT
|
||||
exclusive
|
||||
partition
|
||||
arrayJobId
|
||||
monitoringStatus
|
||||
state
|
||||
tags {
|
||||
id
|
||||
type
|
||||
name
|
||||
}
|
||||
userData {
|
||||
name
|
||||
}
|
||||
metaData
|
||||
}
|
||||
count
|
||||
}
|
||||
count
|
||||
}
|
||||
}`, {
|
||||
paging,
|
||||
sorting,
|
||||
filter,
|
||||
}, {
|
||||
pause: true
|
||||
})
|
||||
`;
|
||||
|
||||
const updateConfiguration = mutation({
|
||||
query: `mutation($name: String!, $value: String!) {
|
||||
updateConfiguration(name: $name, value: $value)
|
||||
}`
|
||||
})
|
||||
$: jobs = queryStore({
|
||||
client: client,
|
||||
query: query,
|
||||
variables: { paging, sorting, filter }
|
||||
});
|
||||
|
||||
$: $jobs.variables = { ...$jobs.variables, sorting, paging }
|
||||
$: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0
|
||||
$: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0;
|
||||
|
||||
// Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
|
||||
export function refresh() {
|
||||
queryStore({
|
||||
client: client,
|
||||
query: query,
|
||||
variables: { paging, sorting, filter },
|
||||
requestPolicy: 'network-only'
|
||||
});
|
||||
}
|
||||
|
||||
// (Re-)query and optionally set new filters.
|
||||
export function update(filters) {
|
||||
if (filters != null) {
|
||||
let minRunningFor = ccconfig.plot_list_hideShortRunningJobs
|
||||
let minRunningFor = ccconfig.plot_list_hideShortRunningJobs;
|
||||
if (minRunningFor && minRunningFor > 0) {
|
||||
filters.push({ minRunningFor })
|
||||
filters.push({ minRunningFor });
|
||||
}
|
||||
|
||||
$jobs.variables.filter = filters
|
||||
// console.log('filters:', ...filters.map(f => Object.entries(f)).flat(2))
|
||||
filter = filters;
|
||||
}
|
||||
|
||||
page = 1
|
||||
$jobs.variables.paging = paging = { page, itemsPerPage };
|
||||
$jobs.context.pause = false
|
||||
$jobs.reexecute({ requestPolicy: 'network-only' })
|
||||
page = 1;
|
||||
paging = paging = { page, itemsPerPage };
|
||||
}
|
||||
|
||||
query(jobs)
|
||||
const updateConfigurationMutation = ({ name, value }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
mutation ($name: String!, $value: String!) {
|
||||
updateConfiguration(name: $name, value: $value)
|
||||
}
|
||||
`,
|
||||
variables: { name, value }
|
||||
});
|
||||
}
|
||||
|
||||
let tableWidth = null
|
||||
let jobInfoColumnWidth = 250
|
||||
$: plotWidth = Math.floor((tableWidth - jobInfoColumnWidth) / metrics.length - 10)
|
||||
function updateConfiguration(value, page) {
|
||||
updateConfigurationMutation({ name: 'plot_list_jobsPerPage', value: value })
|
||||
.subscribe(res => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
paging = { itemsPerPage: value, page: page }; // Trigger reload of jobList
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error
|
||||
// console.log('Error on subscription: ' + res.error)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
let headerPaddingTop = 0
|
||||
stickyHeader('.cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)', (x) => (headerPaddingTop = x))
|
||||
let tableWidth = null;
|
||||
let jobInfoColumnWidth = 250;
|
||||
|
||||
$: plotWidth = Math.floor(
|
||||
(tableWidth - jobInfoColumnWidth) / metrics.length - 10
|
||||
);
|
||||
|
||||
let headerPaddingTop = 0;
|
||||
stickyHeader(
|
||||
".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
|
||||
(x) => (headerPaddingTop = x)
|
||||
);
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
@@ -93,20 +154,43 @@
|
||||
<Table cellspacing="0px" cellpadding="0px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="position-sticky top-0" scope="col" style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px">
|
||||
<th
|
||||
class="position-sticky top-0"
|
||||
scope="col"
|
||||
style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px"
|
||||
>
|
||||
Job Info
|
||||
</th>
|
||||
{#each metrics as metric (metric)}
|
||||
<th class="position-sticky top-0 text-center" scope="col" style="width: {plotWidth}px; padding-top: {headerPaddingTop}px">
|
||||
<th
|
||||
class="position-sticky top-0 text-center"
|
||||
scope="col"
|
||||
style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
|
||||
>
|
||||
{metric}
|
||||
{#if $initialized}
|
||||
({clusters
|
||||
.map(cluster => cluster.metricConfig.find(m => m.name == metric))
|
||||
.filter(m => m != null)
|
||||
.map(m => (m.unit?.prefix?m.unit?.prefix:'') + (m.unit?.base?m.unit?.base:'')) // Build unitStr
|
||||
.reduce((arr, unitStr) => arr.includes(unitStr) ? arr : [...arr, unitStr], []) // w/o this, output would be [unitStr, unitStr]
|
||||
.join(', ')
|
||||
})
|
||||
.map((cluster) =>
|
||||
cluster.metricConfig.find(
|
||||
(m) => m.name == metric
|
||||
)
|
||||
)
|
||||
.filter((m) => m != null)
|
||||
.map(
|
||||
(m) =>
|
||||
(m.unit?.prefix
|
||||
? m.unit?.prefix
|
||||
: "") +
|
||||
(m.unit?.base ? m.unit?.base : "")
|
||||
) // Build unitStr
|
||||
.reduce(
|
||||
(arr, unitStr) =>
|
||||
arr.includes(unitStr)
|
||||
? arr
|
||||
: [...arr, unitStr],
|
||||
[]
|
||||
) // w/o this, output would be [unitStr, unitStr]
|
||||
.join(", ")})
|
||||
{/if}
|
||||
</th>
|
||||
{/each}
|
||||
@@ -115,28 +199,27 @@
|
||||
<tbody>
|
||||
{#if $jobs.error}
|
||||
<tr>
|
||||
<td colspan="{metrics.length + 1}">
|
||||
<Card body color="danger" class="mb-3"><h2>{$jobs.error.message}</h2></Card>
|
||||
<td colspan={metrics.length + 1}>
|
||||
<Card body color="danger" class="mb-3"
|
||||
><h2>{$jobs.error.message}</h2></Card
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
{:else if $jobs.fetching || !$jobs.data}
|
||||
<tr>
|
||||
<td colspan="{metrics.length + 1}">
|
||||
<td colspan={metrics.length + 1}>
|
||||
<Spinner secondary />
|
||||
</td>
|
||||
</tr>
|
||||
{:else if $jobs.data && $initialized}
|
||||
{#each $jobs.data.jobs.items as job (job)}
|
||||
<JobListRow
|
||||
job={job}
|
||||
metrics={metrics}
|
||||
plotWidth={plotWidth} />
|
||||
<JobListRow {job} {metrics} {plotWidth} />
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="{metrics.length + 1}">
|
||||
No jobs found
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan={metrics.length + 1}>
|
||||
No jobs found
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</tbody>
|
||||
@@ -145,24 +228,21 @@
|
||||
</Row>
|
||||
|
||||
<Pagination
|
||||
bind:page={page}
|
||||
bind:page
|
||||
{itemsPerPage}
|
||||
itemText="Jobs"
|
||||
totalItems={matchedJobs}
|
||||
on:update={({ detail }) => {
|
||||
if (detail.itemsPerPage != itemsPerPage) {
|
||||
itemsPerPage = detail.itemsPerPage
|
||||
updateConfiguration({
|
||||
name: "plot_list_jobsPerPage",
|
||||
value: itemsPerPage.toString()
|
||||
}).then(res => {
|
||||
if (res.error)
|
||||
console.error(res.error);
|
||||
})
|
||||
updateConfiguration(
|
||||
detail.itemsPerPage.toString(),
|
||||
detail.page
|
||||
)
|
||||
} else {
|
||||
paging = { itemsPerPage: detail.itemsPerPage, page: detail.page }
|
||||
}
|
||||
|
||||
paging = { itemsPerPage: detail.itemsPerPage, page: detail.page }
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.cc-table-wrapper {
|
||||
|
||||
@@ -9,132 +9,180 @@
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { operationStore, query } from '@urql/svelte'
|
||||
import { getContext } from 'svelte'
|
||||
import { Card, Spinner } from 'sveltestrap'
|
||||
import MetricPlot from '../plots/MetricPlot.svelte'
|
||||
import JobInfo from './JobInfo.svelte'
|
||||
import { maxScope } from '../utils.js'
|
||||
import { queryStore, gql, getContextClient } from "@urql/svelte";
|
||||
import { getContext } from "svelte";
|
||||
import { Card, Spinner } from "sveltestrap";
|
||||
import MetricPlot from "../plots/MetricPlot.svelte";
|
||||
import JobInfo from "./JobInfo.svelte";
|
||||
import { maxScope } from "../utils.js";
|
||||
|
||||
export let job
|
||||
export let metrics
|
||||
export let plotWidth
|
||||
export let plotHeight = 275
|
||||
export let job;
|
||||
export let metrics;
|
||||
export let plotWidth;
|
||||
export let plotHeight = 275;
|
||||
|
||||
let scopes = [job.numNodes == 1 ? 'core' : 'node']
|
||||
let { id } = job;
|
||||
let scopes = [job.numNodes == 1 ? "core" : "node"];
|
||||
|
||||
const cluster = getContext('clusters').find(c => c.name == job.cluster)
|
||||
// Get all MetricConfs which include subCluster-specific settings for this job
|
||||
const metricConfig = getContext('metrics')
|
||||
const metricsQuery = operationStore(`query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
|
||||
jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
|
||||
name
|
||||
scope
|
||||
metric {
|
||||
unit { prefix, base }, timestep
|
||||
statisticsSeries { min, mean, max }
|
||||
series {
|
||||
hostname, id, data
|
||||
statistics { min, avg, max }
|
||||
const cluster = getContext("clusters").find((c) => c.name == job.cluster);
|
||||
const metricConfig = getContext("metrics"); // Get all MetricConfs which include subCluster-specific settings for this job
|
||||
const client = getContextClient();
|
||||
const query = gql`
|
||||
query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
|
||||
jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
|
||||
name
|
||||
scope
|
||||
metric {
|
||||
unit {
|
||||
prefix
|
||||
base
|
||||
}
|
||||
timestep
|
||||
statisticsSeries {
|
||||
min
|
||||
mean
|
||||
max
|
||||
}
|
||||
series {
|
||||
hostname
|
||||
id
|
||||
data
|
||||
statistics {
|
||||
min
|
||||
avg
|
||||
max
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`, {
|
||||
id: job.id,
|
||||
metrics,
|
||||
scopes
|
||||
})
|
||||
`;
|
||||
|
||||
const selectScope = (jobMetrics) => jobMetrics.reduce(
|
||||
(a, b) => maxScope([a.scope, b.scope]) == a.scope
|
||||
? (job.numNodes > 1 ? a : b)
|
||||
: (job.numNodes > 1 ? b : a), jobMetrics[0])
|
||||
$: metricsQuery = queryStore({
|
||||
client: client,
|
||||
query: query,
|
||||
variables: { id, metrics, scopes }
|
||||
});
|
||||
|
||||
const sortAndSelectScope = (jobMetrics) => metrics
|
||||
.map(function(name) {
|
||||
// Get MetricConf for this selected/requested metric
|
||||
let thisConfig = metricConfig(cluster, name)
|
||||
let thisSCIndex = thisConfig.subClusters.findIndex(sc => sc.name == job.subCluster)
|
||||
// Check if Subcluster has MetricConf: If not found (index == -1), no further remove flag check required
|
||||
if (thisSCIndex >= 0) {
|
||||
// SubCluster Config present: Check if remove flag is set
|
||||
if (thisConfig.subClusters[thisSCIndex].remove == true) {
|
||||
// Return null data and informational flag
|
||||
return {removed: true, data: null}
|
||||
} else {
|
||||
// load and return metric, if data available
|
||||
let thisMetric = jobMetrics.filter(jobMetric => jobMetric.name == name) // Returns Array
|
||||
if (thisMetric.length > 0) {
|
||||
return {removed: false, data: thisMetric}
|
||||
function refresh() {
|
||||
queryStore({
|
||||
client: client,
|
||||
query: query,
|
||||
variables: { id, metrics, scopes }
|
||||
});
|
||||
}
|
||||
|
||||
const selectScope = (jobMetrics) =>
|
||||
jobMetrics.reduce(
|
||||
(a, b) =>
|
||||
maxScope([a.scope, b.scope]) == a.scope
|
||||
? job.numNodes > 1
|
||||
? a
|
||||
: b
|
||||
: job.numNodes > 1
|
||||
? b
|
||||
: a,
|
||||
jobMetrics[0]
|
||||
);
|
||||
|
||||
const sortAndSelectScope = (jobMetrics) =>
|
||||
metrics
|
||||
.map(function (name) {
|
||||
// Get MetricConf for this selected/requested metric
|
||||
let thisConfig = metricConfig(cluster, name);
|
||||
let thisSCIndex = -1
|
||||
if (thisConfig) {
|
||||
thisSCIndex = thisConfig.subClusters.findIndex(
|
||||
(sc) => sc.name == job.subCluster
|
||||
);
|
||||
};
|
||||
// Check if Subcluster has MetricConf: If not found (index == -1), no further remove flag check required
|
||||
if (thisSCIndex >= 0) {
|
||||
// SubCluster Config present: Check if remove flag is set
|
||||
if (thisConfig.subClusters[thisSCIndex].remove == true) {
|
||||
// Return null data and informational flag
|
||||
return { removed: true, data: null };
|
||||
} else {
|
||||
return {removed: false, data: null}
|
||||
// load and return metric, if data available
|
||||
let thisMetric = jobMetrics.filter(
|
||||
(jobMetric) => jobMetric.name == name
|
||||
); // Returns Array
|
||||
if (thisMetric.length > 0) {
|
||||
return { removed: false, data: thisMetric };
|
||||
} else {
|
||||
return { removed: false, data: null };
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No specific subCluster config: 'remove' flag not set, deemed false -> load and return metric, if data available
|
||||
let thisMetric = jobMetrics.filter(
|
||||
(jobMetric) => jobMetric.name == name
|
||||
); // Returns Array
|
||||
if (thisMetric.length > 0) {
|
||||
return { removed: false, data: thisMetric };
|
||||
} else {
|
||||
return { removed: false, data: null };
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No specific subCluster config: 'remove' flag not set, deemed false -> load and return metric, if data available
|
||||
let thisMetric = jobMetrics.filter(jobMetric => jobMetric.name == name) // Returns Array
|
||||
if (thisMetric.length > 0) {
|
||||
return {removed: false, data: thisMetric}
|
||||
})
|
||||
.map(function (jobMetrics) {
|
||||
if (jobMetrics.data != null && jobMetrics.data.length > 0) {
|
||||
return {
|
||||
removed: jobMetrics.removed,
|
||||
data: selectScope(jobMetrics.data),
|
||||
};
|
||||
} else {
|
||||
return {removed: false, data: null}
|
||||
return jobMetrics;
|
||||
}
|
||||
}
|
||||
})
|
||||
.map(function(jobMetrics) {
|
||||
if (jobMetrics.data != null && jobMetrics.data.length > 0) {
|
||||
return {removed: jobMetrics.removed, data: selectScope(jobMetrics.data)}
|
||||
} else {
|
||||
return jobMetrics
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$: metricsQuery.variables = { id: job.id, metrics, scopes }
|
||||
|
||||
if (job.monitoringStatus)
|
||||
query(metricsQuery)
|
||||
if (job.monitoringStatus) refresh();
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<JobInfo job={job}/>
|
||||
<JobInfo {job} />
|
||||
</td>
|
||||
{#if job.monitoringStatus == 0 || job.monitoringStatus == 2}
|
||||
<td colspan="{metrics.length}">
|
||||
<td colspan={metrics.length}>
|
||||
<Card body color="warning">Not monitored or archiving failed</Card>
|
||||
</td>
|
||||
{:else if $metricsQuery.fetching}
|
||||
<td colspan="{metrics.length}" style="text-align: center;">
|
||||
<td colspan={metrics.length} style="text-align: center;">
|
||||
<Spinner secondary />
|
||||
</td>
|
||||
{:else if $metricsQuery.error}
|
||||
<td colspan="{metrics.length}">
|
||||
<td colspan={metrics.length}>
|
||||
<Card body color="danger" class="mb-3">
|
||||
{$metricsQuery.error.message.length > 500
|
||||
? $metricsQuery.error.message.substring(0, 499)+'...'
|
||||
? $metricsQuery.error.message.substring(0, 499) + "..."
|
||||
: $metricsQuery.error.message}
|
||||
</Card>
|
||||
</td>
|
||||
{:else}
|
||||
{#each sortAndSelectScope($metricsQuery.data.jobMetrics) as metric, i (metric || i)}
|
||||
<td>
|
||||
<!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
|
||||
{#if metric.removed == false && metric.data != null}
|
||||
<MetricPlot
|
||||
width={plotWidth}
|
||||
height={plotHeight}
|
||||
timestep={metric.data.metric.timestep}
|
||||
scope={metric.data.scope}
|
||||
series={metric.data.metric.series}
|
||||
statisticsSeries={metric.data.metric.statisticsSeries}
|
||||
metric={metric.data.name}
|
||||
cluster={cluster}
|
||||
subCluster={job.subCluster}
|
||||
isShared={(job.exclusive != 1)}/>
|
||||
{:else if metric.removed == true && metric.data == null}
|
||||
<Card body color="info">Metric disabled for subcluster '{ job.subCluster }'</Card>
|
||||
{:else}
|
||||
<Card body color="warning">Missing Data</Card>
|
||||
{/if}
|
||||
<!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
|
||||
{#if metric.removed == false && metric.data != null}
|
||||
<MetricPlot
|
||||
width={plotWidth}
|
||||
height={plotHeight}
|
||||
timestep={metric.data.metric.timestep}
|
||||
scope={metric.data.scope}
|
||||
series={metric.data.metric.series}
|
||||
statisticsSeries={metric.data.metric.statisticsSeries}
|
||||
metric={metric.data.name}
|
||||
{cluster}
|
||||
subCluster={job.subCluster}
|
||||
isShared={(job.exclusive != 1)}
|
||||
/>
|
||||
{:else if metric.removed == true && metric.data == null}
|
||||
<Card body color="info"
|
||||
>Metric disabled for subcluster '{job.subCluster}'</Card
|
||||
>
|
||||
{:else}
|
||||
<Card body color="warning">Missing Data</Card>
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@@ -323,7 +323,7 @@
|
||||
|
||||
let ctx, canvasElement, prevWidth = width, prevHeight = height
|
||||
data = data != null ? data : (flopsAny && memBw
|
||||
? transformData(flopsAny, memBw, colorDots) // Use Metric Object from Parent
|
||||
? transformData(flopsAny.metric, memBw.metric, colorDots) // Use Metric Object from Parent
|
||||
: {
|
||||
tiles: tiles,
|
||||
xLabel: 'Intensity [FLOPS/byte]',
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { expiringCacheExchange } from './cache-exchange.js'
|
||||
import { initClient } from '@urql/svelte'
|
||||
import { setContext, getContext, hasContext, onDestroy, tick } from 'svelte'
|
||||
import { dedupExchange, fetchExchange } from '@urql/core'
|
||||
import { readable } from 'svelte/store'
|
||||
import { expiringCacheExchange } from "./cache-exchange.js";
|
||||
import {
|
||||
Client,
|
||||
setContextClient,
|
||||
fetchExchange,
|
||||
} from "@urql/svelte";
|
||||
import { setContext, getContext, hasContext, onDestroy, tick } from "svelte";
|
||||
import { readable } from "svelte/store";
|
||||
|
||||
/*
|
||||
* Call this function only at component initialization time!
|
||||
@@ -14,26 +17,29 @@ import { readable } from 'svelte/store'
|
||||
* - Adds 'clusters' to the context (object with cluster names as keys)
|
||||
* - Adds 'metrics' to the context, a function that takes a cluster and metric name and returns the MetricConfig (or undefined)
|
||||
*/
|
||||
export function init(extraInitQuery = '') {
|
||||
const jwt = hasContext('jwt')
|
||||
? getContext('jwt')
|
||||
: getContext('cc-config')['jwt']
|
||||
export function init(extraInitQuery = "") {
|
||||
const jwt = hasContext("jwt")
|
||||
? getContext("jwt")
|
||||
: getContext("cc-config")["jwt"];
|
||||
|
||||
const client = initClient({
|
||||
const client = new Client({
|
||||
url: `${window.location.origin}/query`,
|
||||
fetchOptions: jwt != null
|
||||
? { headers: { 'Authorization': `Bearer ${jwt}` } } : {},
|
||||
fetchOptions:
|
||||
jwt != null ? { headers: { Authorization: `Bearer ${jwt}` } } : {},
|
||||
exchanges: [
|
||||
dedupExchange,
|
||||
expiringCacheExchange({
|
||||
ttl: 5 * 60 * 1000,
|
||||
maxSize: 150,
|
||||
}),
|
||||
fetchExchange
|
||||
]
|
||||
})
|
||||
fetchExchange,
|
||||
],
|
||||
});
|
||||
|
||||
const query = client.query(`query {
|
||||
setContextClient(client);
|
||||
|
||||
const query = client
|
||||
.query(
|
||||
`query {
|
||||
clusters {
|
||||
name,
|
||||
metricConfig {
|
||||
@@ -61,227 +67,247 @@ export function init(extraInitQuery = '') {
|
||||
}
|
||||
tags { id, name, type }
|
||||
${extraInitQuery}
|
||||
}`).toPromise()
|
||||
}`
|
||||
)
|
||||
.toPromise();
|
||||
|
||||
let state = { fetching: true, error: null, data: null }
|
||||
let subscribers = []
|
||||
let state = { fetching: true, error: null, data: null };
|
||||
let subscribers = [];
|
||||
const subscribe = (callback) => {
|
||||
callback(state)
|
||||
subscribers.push(callback)
|
||||
callback(state);
|
||||
subscribers.push(callback);
|
||||
return () => {
|
||||
subscribers = subscribers.filter(cb => cb != callback)
|
||||
}
|
||||
subscribers = subscribers.filter((cb) => cb != callback);
|
||||
};
|
||||
};
|
||||
|
||||
const tags = [], clusters = []
|
||||
setContext('tags', tags)
|
||||
setContext('clusters', clusters)
|
||||
setContext('metrics', (cluster, metric) => {
|
||||
if (typeof cluster !== 'object')
|
||||
cluster = clusters.find(c => c.name == cluster)
|
||||
const tags = [],
|
||||
clusters = [];
|
||||
setContext("tags", tags);
|
||||
setContext("clusters", clusters);
|
||||
setContext("metrics", (cluster, metric) => {
|
||||
if (typeof cluster !== "object")
|
||||
cluster = clusters.find((c) => c.name == cluster);
|
||||
|
||||
return cluster.metricConfig.find(m => m.name == metric)
|
||||
})
|
||||
setContext('on-init', callback => state.fetching
|
||||
? subscribers.push(callback)
|
||||
: callback(state))
|
||||
setContext('initialized', readable(false, (set) =>
|
||||
subscribers.push(() => set(true))))
|
||||
return cluster.metricConfig.find((m) => m.name == metric);
|
||||
});
|
||||
setContext("on-init", (callback) =>
|
||||
state.fetching ? subscribers.push(callback) : callback(state)
|
||||
);
|
||||
setContext(
|
||||
"initialized",
|
||||
readable(false, (set) => subscribers.push(() => set(true)))
|
||||
);
|
||||
|
||||
query.then(({ error, data }) => {
|
||||
state.fetching = false
|
||||
state.fetching = false;
|
||||
if (error != null) {
|
||||
console.error(error)
|
||||
state.error = error
|
||||
tick().then(() => subscribers.forEach(cb => cb(state)))
|
||||
return
|
||||
console.error(error);
|
||||
state.error = error;
|
||||
tick().then(() => subscribers.forEach((cb) => cb(state)));
|
||||
return;
|
||||
}
|
||||
|
||||
for (let tag of data.tags)
|
||||
tags.push(tag)
|
||||
for (let tag of data.tags) tags.push(tag);
|
||||
|
||||
for (let cluster of data.clusters)
|
||||
clusters.push(cluster)
|
||||
for (let cluster of data.clusters) clusters.push(cluster);
|
||||
|
||||
state.data = data
|
||||
tick().then(() => subscribers.forEach(cb => cb(state)))
|
||||
})
|
||||
state.data = data;
|
||||
tick().then(() => subscribers.forEach((cb) => cb(state)));
|
||||
});
|
||||
|
||||
return {
|
||||
query: { subscribe },
|
||||
tags,
|
||||
clusters,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function formatNumber(x) {
|
||||
let suffix = ''
|
||||
let suffix = "";
|
||||
if (x >= 1000000000) {
|
||||
x /= 1000000
|
||||
suffix = 'G'
|
||||
x /= 1000000;
|
||||
suffix = "G";
|
||||
} else if (x >= 1000000) {
|
||||
x /= 1000000
|
||||
suffix = 'M'
|
||||
x /= 1000000;
|
||||
suffix = "M";
|
||||
} else if (x >= 1000) {
|
||||
x /= 1000
|
||||
suffix = 'k'
|
||||
x /= 1000;
|
||||
suffix = "k";
|
||||
}
|
||||
|
||||
return `${(Math.round(x * 100) / 100)} ${suffix}`
|
||||
return `${Math.round(x * 100) / 100} ${suffix}`;
|
||||
}
|
||||
|
||||
// Use https://developer.mozilla.org/en-US/docs/Web/API/structuredClone instead?
|
||||
export function deepCopy(x) {
|
||||
return JSON.parse(JSON.stringify(x))
|
||||
return JSON.parse(JSON.stringify(x));
|
||||
}
|
||||
|
||||
function fuzzyMatch(term, string) {
|
||||
return string.toLowerCase().includes(term)
|
||||
return string.toLowerCase().includes(term);
|
||||
}
|
||||
|
||||
export function fuzzySearchTags(term, tags) {
|
||||
if (!tags)
|
||||
return []
|
||||
if (!tags) return [];
|
||||
|
||||
let results = []
|
||||
let termparts = term.split(':').map(s => s.trim()).filter(s => s.length > 0)
|
||||
let results = [];
|
||||
let termparts = term
|
||||
.split(":")
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s.length > 0);
|
||||
|
||||
if (termparts.length == 0) {
|
||||
results = tags.slice()
|
||||
results = tags.slice();
|
||||
} else if (termparts.length == 1) {
|
||||
for (let tag of tags)
|
||||
if (fuzzyMatch(termparts[0], tag.type)
|
||||
|| fuzzyMatch(termparts[0], tag.name))
|
||||
results.push(tag)
|
||||
if (
|
||||
fuzzyMatch(termparts[0], tag.type) ||
|
||||
fuzzyMatch(termparts[0], tag.name)
|
||||
)
|
||||
results.push(tag);
|
||||
} else if (termparts.length == 2) {
|
||||
for (let tag of tags)
|
||||
if (fuzzyMatch(termparts[0], tag.type)
|
||||
&& fuzzyMatch(termparts[1], tag.name))
|
||||
results.push(tag)
|
||||
if (
|
||||
fuzzyMatch(termparts[0], tag.type) &&
|
||||
fuzzyMatch(termparts[1], tag.name)
|
||||
)
|
||||
results.push(tag);
|
||||
}
|
||||
|
||||
return results.sort((a, b) => {
|
||||
if (a.type < b.type) return -1
|
||||
if (a.type > b.type) return 1
|
||||
if (a.name < b.name) return -1
|
||||
if (a.name > b.name) return 1
|
||||
return 0
|
||||
})
|
||||
if (a.type < b.type) return -1;
|
||||
if (a.type > b.type) return 1;
|
||||
if (a.name < b.name) return -1;
|
||||
if (a.name > b.name) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
export function groupByScope(jobMetrics) {
|
||||
let metrics = new Map()
|
||||
let metrics = new Map();
|
||||
for (let metric of jobMetrics) {
|
||||
if (metrics.has(metric.name))
|
||||
metrics.get(metric.name).push(metric)
|
||||
else
|
||||
metrics.set(metric.name, [metric])
|
||||
if (metrics.has(metric.name)) metrics.get(metric.name).push(metric);
|
||||
else metrics.set(metric.name, [metric]);
|
||||
}
|
||||
|
||||
return [...metrics.values()].sort((a, b) => a[0].name.localeCompare(b[0].name))
|
||||
return [...metrics.values()].sort((a, b) =>
|
||||
a[0].name.localeCompare(b[0].name)
|
||||
);
|
||||
}
|
||||
|
||||
const scopeGranularity = {
|
||||
"node": 10,
|
||||
"socket": 5,
|
||||
"accelerator": 5,
|
||||
"core": 2,
|
||||
"hwthread": 1
|
||||
node: 10,
|
||||
socket: 5,
|
||||
accelerator: 5,
|
||||
core: 2,
|
||||
hwthread: 1,
|
||||
};
|
||||
|
||||
export function maxScope(scopes) {
|
||||
console.assert(scopes.length > 0 && scopes.every(x => scopeGranularity[x] != null))
|
||||
let sm = scopes[0], gran = scopeGranularity[scopes[0]]
|
||||
console.assert(
|
||||
scopes.length > 0 && scopes.every((x) => scopeGranularity[x] != null)
|
||||
);
|
||||
let sm = scopes[0],
|
||||
gran = scopeGranularity[scopes[0]];
|
||||
for (let scope of scopes) {
|
||||
let otherGran = scopeGranularity[scope]
|
||||
let otherGran = scopeGranularity[scope];
|
||||
if (otherGran > gran) {
|
||||
sm = scope
|
||||
gran = otherGran
|
||||
sm = scope;
|
||||
gran = otherGran;
|
||||
}
|
||||
}
|
||||
return sm
|
||||
return sm;
|
||||
}
|
||||
|
||||
export function minScope(scopes) {
|
||||
console.assert(scopes.length > 0 && scopes.every(x => scopeGranularity[x] != null))
|
||||
let sm = scopes[0], gran = scopeGranularity[scopes[0]]
|
||||
console.assert(
|
||||
scopes.length > 0 && scopes.every((x) => scopeGranularity[x] != null)
|
||||
);
|
||||
let sm = scopes[0],
|
||||
gran = scopeGranularity[scopes[0]];
|
||||
for (let scope of scopes) {
|
||||
let otherGran = scopeGranularity[scope]
|
||||
let otherGran = scopeGranularity[scope];
|
||||
if (otherGran < gran) {
|
||||
sm = scope
|
||||
gran = otherGran
|
||||
sm = scope;
|
||||
gran = otherGran;
|
||||
}
|
||||
}
|
||||
return sm
|
||||
return sm;
|
||||
}
|
||||
|
||||
export async function fetchMetrics(job, metrics, scopes) {
|
||||
if (job.monitoringStatus == 0)
|
||||
return null
|
||||
if (job.monitoringStatus == 0) return null;
|
||||
|
||||
let query = []
|
||||
let query = [];
|
||||
if (metrics != null) {
|
||||
for (let metric of metrics) {
|
||||
query.push(`metric=${metric}`)
|
||||
query.push(`metric=${metric}`);
|
||||
}
|
||||
}
|
||||
if (scopes != null) {
|
||||
for (let scope of scopes) {
|
||||
query.push(`scope=${scope}`)
|
||||
query.push(`scope=${scope}`);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
let res = await fetch(`/api/jobs/metrics/${job.id}${(query.length > 0) ? '?' : ''}${query.join('&')}`)
|
||||
let res = await fetch(
|
||||
`/api/jobs/metrics/${job.id}${query.length > 0 ? "?" : ""}${query.join(
|
||||
"&"
|
||||
)}`
|
||||
);
|
||||
if (res.status != 200) {
|
||||
return { error: { status: res.status, message: await res.text() } }
|
||||
return { error: { status: res.status, message: await res.text() } };
|
||||
}
|
||||
|
||||
return await res.json()
|
||||
return await res.json();
|
||||
} catch (e) {
|
||||
return { error: e }
|
||||
return { error: e };
|
||||
}
|
||||
}
|
||||
|
||||
export function fetchMetricsStore() {
|
||||
let set = null
|
||||
let prev = { fetching: true, error: null, data: null }
|
||||
let set = null;
|
||||
let prev = { fetching: true, error: null, data: null };
|
||||
return [
|
||||
readable(prev, (_set) => { set = _set }),
|
||||
(job, metrics, scopes) => fetchMetrics(job, metrics, scopes).then(res => {
|
||||
let next = { fetching: false, error: res.error, data: res.data }
|
||||
if (prev.data && next.data)
|
||||
next.data.jobMetrics.push(...prev.data.jobMetrics)
|
||||
readable(prev, (_set) => {
|
||||
set = _set;
|
||||
}),
|
||||
(job, metrics, scopes) =>
|
||||
fetchMetrics(job, metrics, scopes).then((res) => {
|
||||
let next = { fetching: false, error: res.error, data: res.data };
|
||||
if (prev.data && next.data)
|
||||
next.data.jobMetrics.push(...prev.data.jobMetrics);
|
||||
|
||||
prev = next
|
||||
set(next)
|
||||
})
|
||||
]
|
||||
prev = next;
|
||||
set(next);
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
export function stickyHeader(datatableHeaderSelector, updatePading) {
|
||||
const header = document.querySelector('header > nav.navbar')
|
||||
if (!header)
|
||||
return
|
||||
const header = document.querySelector("header > nav.navbar");
|
||||
if (!header) return;
|
||||
|
||||
let ticking = false, datatableHeader = null
|
||||
const onscroll = event => {
|
||||
if (ticking)
|
||||
return
|
||||
let ticking = false,
|
||||
datatableHeader = null;
|
||||
const onscroll = (event) => {
|
||||
if (ticking) return;
|
||||
|
||||
ticking = true
|
||||
ticking = true;
|
||||
window.requestAnimationFrame(() => {
|
||||
ticking = false
|
||||
ticking = false;
|
||||
if (!datatableHeader)
|
||||
datatableHeader = document.querySelector(datatableHeaderSelector)
|
||||
datatableHeader = document.querySelector(datatableHeaderSelector);
|
||||
|
||||
const top = datatableHeader.getBoundingClientRect().top
|
||||
updatePading(top < header.clientHeight
|
||||
? (header.clientHeight - top) + 10
|
||||
: 10)
|
||||
})
|
||||
}
|
||||
const top = datatableHeader.getBoundingClientRect().top;
|
||||
updatePading(
|
||||
top < header.clientHeight ? header.clientHeight - top + 10 : 10
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener('scroll', onscroll)
|
||||
onDestroy(() => document.removeEventListener('scroll', onscroll))
|
||||
document.addEventListener("scroll", onscroll);
|
||||
onDestroy(() => document.removeEventListener("scroll", onscroll));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user