mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-25 04:49:05 +01:00
Start to fix errors with urql 4
This commit is contained in:
parent
bb20ed655a
commit
52738c7f8e
@ -5,8 +5,8 @@ import resolve from '@rollup/plugin-node-resolve';
|
|||||||
import terser from '@rollup/plugin-terser';
|
import terser from '@rollup/plugin-terser';
|
||||||
import css from 'rollup-plugin-css-only';
|
import css from 'rollup-plugin-css-only';
|
||||||
|
|
||||||
// const production = !process.env.ROLLUP_WATCH;
|
const production = !process.env.ROLLUP_WATCH;
|
||||||
const production = false
|
// const production = false
|
||||||
|
|
||||||
const plugins = [
|
const plugins = [
|
||||||
svelte({
|
svelte({
|
||||||
|
@ -4,12 +4,20 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { init } from "./utils.js";
|
import { init } from "./utils.js";
|
||||||
import { Row, Col, Button, Icon, Table,
|
import {
|
||||||
Card, Spinner, InputGroup, Input, } from "sveltestrap";
|
Row,
|
||||||
|
Col,
|
||||||
|
Button,
|
||||||
|
Icon,
|
||||||
|
Table,
|
||||||
|
Card,
|
||||||
|
Spinner,
|
||||||
|
InputGroup,
|
||||||
|
Input,
|
||||||
|
} from "sveltestrap";
|
||||||
import Filters from "./filters/Filters.svelte";
|
import Filters from "./filters/Filters.svelte";
|
||||||
import { queryStore, gql, getContextClient } from "@urql/svelte";
|
import { queryStore, gql, getContextClient } from "@urql/svelte";
|
||||||
import { scramble, scrambleNames } from "./joblist/JobInfo.svelte";
|
import { scramble, scrambleNames } from "./joblist/JobInfo.svelte";
|
||||||
import { UniqueInputFieldNamesRule } from "graphql";
|
|
||||||
|
|
||||||
const {} = init();
|
const {} = init();
|
||||||
|
|
||||||
@ -21,9 +29,9 @@
|
|||||||
"Invalid list type provided!"
|
"Invalid list type provided!"
|
||||||
);
|
);
|
||||||
|
|
||||||
let filter = []
|
let filter = [];
|
||||||
|
|
||||||
$: stats = queryStore({
|
const stats = queryStore({
|
||||||
client: getContextClient(),
|
client: getContextClient(),
|
||||||
query: gql`
|
query: gql`
|
||||||
query($filter: [JobFilter!]!) {
|
query($filter: [JobFilter!]!) {
|
||||||
@ -36,7 +44,7 @@
|
|||||||
}
|
}
|
||||||
}`,
|
}`,
|
||||||
variables: { filter },
|
variables: { filter },
|
||||||
pause: true
|
pause: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
let filters;
|
let filters;
|
||||||
@ -92,7 +100,7 @@
|
|||||||
startTimeQuickSelect={true}
|
startTimeQuickSelect={true}
|
||||||
menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
|
menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
|
||||||
on:update={({ detail }) => {
|
on:update={({ detail }) => {
|
||||||
$stats.variables = { filter: detail.filters }
|
filter = detail.filters;
|
||||||
stats.resume();
|
stats.resume();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@ -102,7 +110,10 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">
|
<th scope="col">
|
||||||
{({ USER: "Username", PROJECT: "Project Name" })[type]}
|
<!-- {({ -->
|
||||||
|
<!-- USER: "Username", -->
|
||||||
|
<!-- PROJECT: "Project Name", -->
|
||||||
|
<!-- })[type]} -->
|
||||||
<Button
|
<Button
|
||||||
color={sorting.field == "id" ? "primary" : "light"}
|
color={sorting.field == "id" ? "primary" : "light"}
|
||||||
size="sm"
|
size="sm"
|
||||||
|
@ -9,84 +9,125 @@
|
|||||||
- update(filters?: [JobFilter])
|
- update(filters?: [JobFilter])
|
||||||
-->
|
-->
|
||||||
<script>
|
<script>
|
||||||
import { queryStore, gql, getContextClient , mutationStore } from '@urql/svelte'
|
import {
|
||||||
import { getContext } from 'svelte';
|
queryStore,
|
||||||
import { Row, Table, Card, Spinner } from 'sveltestrap'
|
gql,
|
||||||
import Pagination from './Pagination.svelte'
|
getContextClient,
|
||||||
import JobListRow from './Row.svelte'
|
mutationStore,
|
||||||
import { stickyHeader } from '../utils.js'
|
} 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'),
|
const ccconfig = getContext("cc-config"),
|
||||||
clusters = getContext('clusters'),
|
clusters = getContext("clusters"),
|
||||||
initialized = getContext('initialized')
|
initialized = getContext("initialized");
|
||||||
|
|
||||||
export let sorting = { field: "startTime", order: "DESC" }
|
export let sorting = { field: "startTime", order: "DESC" };
|
||||||
export let matchedJobs = 0
|
export let matchedJobs = 0;
|
||||||
export let metrics = ccconfig.plot_list_selectedMetrics
|
export let metrics = ccconfig.plot_list_selectedMetrics;
|
||||||
|
|
||||||
let itemsPerPage = ccconfig.plot_list_jobsPerPage
|
let itemsPerPage = ccconfig.plot_list_jobsPerPage;
|
||||||
let page = 1
|
let page = 1;
|
||||||
let paging = { itemsPerPage, page }
|
let paging = { itemsPerPage, page };
|
||||||
let filter = []
|
let filter = [];
|
||||||
|
|
||||||
$: jobs = queryStore({
|
const jobs = queryStore({
|
||||||
client: getContextClient(),
|
client: getContextClient(),
|
||||||
query: gql`
|
query: gql`
|
||||||
query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
|
query (
|
||||||
|
$filter: [JobFilter!]!
|
||||||
|
$sorting: OrderByInput!
|
||||||
|
$paging: PageRequest!
|
||||||
|
) {
|
||||||
jobs(filter: $filter, order: $sorting, page: $paging) {
|
jobs(filter: $filter, order: $sorting, page: $paging) {
|
||||||
items {
|
items {
|
||||||
id, jobId, user, project, jobName, cluster, subCluster, startTime,
|
id
|
||||||
duration, numNodes, numHWThreads, numAcc, walltime, resources { hostname },
|
jobId
|
||||||
SMT, exclusive, partition, arrayJobId,
|
user
|
||||||
monitoringStatus, state,
|
project
|
||||||
tags { id, type, name }
|
jobName
|
||||||
userData { name }
|
cluster
|
||||||
|
subCluster
|
||||||
|
startTime
|
||||||
|
duration
|
||||||
|
numNodes
|
||||||
|
numHWThreads
|
||||||
|
numAcc
|
||||||
|
walltime
|
||||||
|
resources {
|
||||||
|
hostname
|
||||||
|
}
|
||||||
|
SMT
|
||||||
|
exclusive
|
||||||
|
partition
|
||||||
|
arrayJobId
|
||||||
|
monitoringStatus
|
||||||
|
state
|
||||||
|
tags {
|
||||||
|
id
|
||||||
|
type
|
||||||
|
name
|
||||||
|
}
|
||||||
|
userData {
|
||||||
|
name
|
||||||
|
}
|
||||||
metaData
|
metaData
|
||||||
}
|
}
|
||||||
count
|
count
|
||||||
}
|
}
|
||||||
}`,
|
}
|
||||||
|
`,
|
||||||
variables: { paging, sorting, filter },
|
variables: { paging, sorting, filter },
|
||||||
pause: true
|
pause: true,
|
||||||
})
|
});
|
||||||
|
|
||||||
const updateConfiguration = ({ name, value }) => {
|
const updateConfiguration = ({ name, value }) => {
|
||||||
result = mutationStore({
|
result = mutationStore({
|
||||||
client: getContextClient(),
|
client: getContextClient(),
|
||||||
query: gql`mutation($name: String!, $value: String!) {
|
query: gql`
|
||||||
|
mutation ($name: String!, $value: String!) {
|
||||||
updateConfiguration(name: $name, value: $value)
|
updateConfiguration(name: $name, value: $value)
|
||||||
}`,
|
|
||||||
variables: {name, value}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
`,
|
||||||
|
variables: { name, value },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// $: $jobs.variables = { ...$jobs.variables, sorting, paging }
|
// $: $jobs.variables = { ...$jobs.variables, sorting, paging }
|
||||||
$: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0
|
$: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0;
|
||||||
|
|
||||||
// (Re-)query and optionally set new filters.
|
// (Re-)query and optionally set new filters.
|
||||||
export function update(filters) {
|
export function update(filters) {
|
||||||
if (filters != null) {
|
if (filters != null) {
|
||||||
let minRunningFor = ccconfig.plot_list_hideShortRunningJobs
|
let minRunningFor = ccconfig.plot_list_hideShortRunningJobs;
|
||||||
if (minRunningFor && minRunningFor > 0) {
|
if (minRunningFor && minRunningFor > 0) {
|
||||||
filters.push({ minRunningFor })
|
filters.push({ minRunningFor });
|
||||||
}
|
}
|
||||||
|
|
||||||
$jobs.variables.filter = filters
|
filter = filters;
|
||||||
// console.log('filters:', ...filters.map(f => Object.entries(f)).flat(2))
|
// console.log('filters:', ...filters.map(f => Object.entries(f)).flat(2))
|
||||||
}
|
}
|
||||||
|
|
||||||
page = 1
|
page = 1;
|
||||||
$jobs.variables.paging = paging = { page, itemsPerPage };
|
paging = paging = { page, itemsPerPage };
|
||||||
$jobs.context.pause = false
|
jobs.resume();
|
||||||
$jobs.reexecute({ requestPolicy: 'network-only' })
|
// $jobs.reexecute({ requestPolicy: 'network-only' })
|
||||||
}
|
}
|
||||||
|
|
||||||
let tableWidth = null
|
let tableWidth = null;
|
||||||
let jobInfoColumnWidth = 250
|
let jobInfoColumnWidth = 250;
|
||||||
$: plotWidth = Math.floor((tableWidth - jobInfoColumnWidth) / metrics.length - 10)
|
$: plotWidth = Math.floor(
|
||||||
|
(tableWidth - jobInfoColumnWidth) / metrics.length - 10
|
||||||
|
);
|
||||||
|
|
||||||
let headerPaddingTop = 0
|
let headerPaddingTop = 0;
|
||||||
stickyHeader('.cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)', (x) => (headerPaddingTop = x))
|
stickyHeader(
|
||||||
|
".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
|
||||||
|
(x) => (headerPaddingTop = x)
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
@ -94,20 +135,43 @@
|
|||||||
<Table cellspacing="0px" cellpadding="0px">
|
<Table cellspacing="0px" cellpadding="0px">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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
|
Job Info
|
||||||
</th>
|
</th>
|
||||||
{#each metrics as metric (metric)}
|
{#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}
|
{metric}
|
||||||
{#if $initialized}
|
{#if $initialized}
|
||||||
({clusters
|
({clusters
|
||||||
.map(cluster => cluster.metricConfig.find(m => m.name == metric))
|
.map((cluster) =>
|
||||||
.filter(m => m != null)
|
cluster.metricConfig.find(
|
||||||
.map(m => (m.unit?.prefix?m.unit?.prefix:'') + (m.unit?.base?m.unit?.base:'')) // Build unitStr
|
(m) => m.name == metric
|
||||||
.reduce((arr, unitStr) => arr.includes(unitStr) ? arr : [...arr, unitStr], []) // w/o this, output would be [unitStr, unitStr]
|
)
|
||||||
.join(', ')
|
)
|
||||||
})
|
.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}
|
{/if}
|
||||||
</th>
|
</th>
|
||||||
{/each}
|
{/each}
|
||||||
@ -116,25 +180,24 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
{#if $jobs.error}
|
{#if $jobs.error}
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="{metrics.length + 1}">
|
<td colspan={metrics.length + 1}>
|
||||||
<Card body color="danger" class="mb-3"><h2>{$jobs.error.message}</h2></Card>
|
<Card body color="danger" class="mb-3"
|
||||||
|
><h2>{$jobs.error.message}</h2></Card
|
||||||
|
>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{:else if $jobs.fetching || !$jobs.data}
|
{:else if $jobs.fetching || !$jobs.data}
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="{metrics.length + 1}">
|
<td colspan={metrics.length + 1}>
|
||||||
<Spinner secondary />
|
<Spinner secondary />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{:else if $jobs.data && $initialized}
|
{:else if $jobs.data && $initialized}
|
||||||
{#each $jobs.data.jobs.items as job (job)}
|
{#each $jobs.data.jobs.items as job (job)}
|
||||||
<JobListRow
|
<JobListRow {job} {metrics} {plotWidth} />
|
||||||
job={job}
|
|
||||||
metrics={metrics}
|
|
||||||
plotWidth={plotWidth} />
|
|
||||||
{:else}
|
{:else}
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="{metrics.length + 1}">
|
<td colspan={metrics.length + 1}>
|
||||||
No jobs found
|
No jobs found
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -146,24 +209,24 @@
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Pagination
|
<Pagination
|
||||||
bind:page={page}
|
bind:page
|
||||||
{itemsPerPage}
|
{itemsPerPage}
|
||||||
itemText="Jobs"
|
itemText="Jobs"
|
||||||
totalItems={matchedJobs}
|
totalItems={matchedJobs}
|
||||||
on:update={({ detail }) => {
|
on:update={({ detail }) => {
|
||||||
if (detail.itemsPerPage != itemsPerPage) {
|
if (detail.itemsPerPage != itemsPerPage) {
|
||||||
itemsPerPage = detail.itemsPerPage
|
itemsPerPage = detail.itemsPerPage;
|
||||||
updateConfiguration({
|
updateConfiguration({
|
||||||
name: "plot_list_jobsPerPage",
|
name: "plot_list_jobsPerPage",
|
||||||
value: itemsPerPage.toString()
|
value: itemsPerPage.toString(),
|
||||||
}).then(res => {
|
}).then((res) => {
|
||||||
if (res.error)
|
if (res.error) console.error(res.error);
|
||||||
console.error(res.error);
|
});
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
paging = { itemsPerPage: detail.itemsPerPage, page: detail.page }
|
paging = { itemsPerPage: detail.itemsPerPage, page: detail.page };
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.cc-table-wrapper {
|
.cc-table-wrapper {
|
||||||
|
@ -9,113 +9,147 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
import { queryStore, gql, getContextClient } from "@urql/svelte";
|
||||||
import { getContext } from 'svelte'
|
import { getContext } from "svelte";
|
||||||
import { Card, Spinner } from 'sveltestrap'
|
import { Card, Spinner } from "sveltestrap";
|
||||||
import MetricPlot from '../plots/MetricPlot.svelte'
|
import MetricPlot from "../plots/MetricPlot.svelte";
|
||||||
import JobInfo from './JobInfo.svelte'
|
import JobInfo from "./JobInfo.svelte";
|
||||||
import { maxScope } from '../utils.js'
|
import { maxScope } from "../utils.js";
|
||||||
|
|
||||||
export let job
|
export let job;
|
||||||
export let metrics
|
export let metrics;
|
||||||
export let plotWidth
|
export let plotWidth;
|
||||||
export let plotHeight = 275
|
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)
|
const cluster = getContext("clusters").find((c) => c.name == job.cluster);
|
||||||
// Get all MetricConfs which include subCluster-specific settings for this job
|
// Get all MetricConfs which include subCluster-specific settings for this job
|
||||||
const metricConfig = getContext('metrics')
|
const metricConfig = getContext("metrics");
|
||||||
const metricsQuery = queryStore({
|
const metricsQuery = queryStore({
|
||||||
client: getContextClient(),
|
client: getContextClient(),
|
||||||
query: gql`
|
query: gql`
|
||||||
query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
|
query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
|
||||||
jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
|
jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
|
||||||
name
|
name
|
||||||
scope
|
scope
|
||||||
metric {
|
metric {
|
||||||
unit { prefix, base }, timestep
|
unit {
|
||||||
statisticsSeries { min, mean, max }
|
prefix
|
||||||
|
base
|
||||||
|
}
|
||||||
|
timestep
|
||||||
|
statisticsSeries {
|
||||||
|
min
|
||||||
|
mean
|
||||||
|
max
|
||||||
|
}
|
||||||
series {
|
series {
|
||||||
hostname, id, data
|
hostname
|
||||||
statistics { min, avg, max }
|
id
|
||||||
|
data
|
||||||
|
statistics {
|
||||||
|
min
|
||||||
|
avg
|
||||||
|
max
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
pause: true,
|
pause: true,
|
||||||
variables: {
|
variables: {
|
||||||
id: job.id,
|
id,
|
||||||
metrics,
|
metrics,
|
||||||
scopes}
|
scopes,
|
||||||
})
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const selectScope = (jobMetrics) => jobMetrics.reduce(
|
const selectScope = (jobMetrics) =>
|
||||||
(a, b) => maxScope([a.scope, b.scope]) == a.scope
|
jobMetrics.reduce(
|
||||||
? (job.numNodes > 1 ? a : b)
|
(a, b) =>
|
||||||
: (job.numNodes > 1 ? b : a), jobMetrics[0])
|
maxScope([a.scope, b.scope]) == a.scope
|
||||||
|
? job.numNodes > 1
|
||||||
|
? a
|
||||||
|
: b
|
||||||
|
: job.numNodes > 1
|
||||||
|
? b
|
||||||
|
: a,
|
||||||
|
jobMetrics[0]
|
||||||
|
);
|
||||||
|
|
||||||
const sortAndSelectScope = (jobMetrics) => metrics
|
const sortAndSelectScope = (jobMetrics) =>
|
||||||
.map(function(name) {
|
metrics
|
||||||
|
.map(function (name) {
|
||||||
// Get MetricConf for this selected/requested metric
|
// Get MetricConf for this selected/requested metric
|
||||||
let thisConfig = metricConfig(cluster, name)
|
let thisConfig = metricConfig(cluster, name);
|
||||||
let thisSCIndex = thisConfig.subClusters.findIndex(sc => sc.name == job.subCluster)
|
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
|
// Check if Subcluster has MetricConf: If not found (index == -1), no further remove flag check required
|
||||||
if (thisSCIndex >= 0) {
|
if (thisSCIndex >= 0) {
|
||||||
// SubCluster Config present: Check if remove flag is set
|
// SubCluster Config present: Check if remove flag is set
|
||||||
if (thisConfig.subClusters[thisSCIndex].remove == true) {
|
if (thisConfig.subClusters[thisSCIndex].remove == true) {
|
||||||
// Return null data and informational flag
|
// Return null data and informational flag
|
||||||
return {removed: true, data: null}
|
return { removed: true, data: null };
|
||||||
} else {
|
} else {
|
||||||
// load and return metric, if data available
|
// load and return metric, if data available
|
||||||
let thisMetric = jobMetrics.filter(jobMetric => jobMetric.name == name) // Returns Array
|
let thisMetric = jobMetrics.filter(
|
||||||
|
(jobMetric) => jobMetric.name == name
|
||||||
|
); // Returns Array
|
||||||
if (thisMetric.length > 0) {
|
if (thisMetric.length > 0) {
|
||||||
return {removed: false, data: thisMetric}
|
return { removed: false, data: thisMetric };
|
||||||
} else {
|
} else {
|
||||||
return {removed: false, data: null}
|
return { removed: false, data: null };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// No specific subCluster config: 'remove' flag not set, deemed false -> load and return metric, if data available
|
// 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
|
let thisMetric = jobMetrics.filter(
|
||||||
|
(jobMetric) => jobMetric.name == name
|
||||||
|
); // Returns Array
|
||||||
if (thisMetric.length > 0) {
|
if (thisMetric.length > 0) {
|
||||||
return {removed: false, data: thisMetric}
|
return { removed: false, data: thisMetric };
|
||||||
} else {
|
} else {
|
||||||
return {removed: false, data: null}
|
return { removed: false, data: null };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.map(function(jobMetrics) {
|
.map(function (jobMetrics) {
|
||||||
if (jobMetrics.data != null && jobMetrics.data.length > 0) {
|
if (jobMetrics.data != null && jobMetrics.data.length > 0) {
|
||||||
return {removed: jobMetrics.removed, data: selectScope(jobMetrics.data)}
|
return {
|
||||||
|
removed: jobMetrics.removed,
|
||||||
|
data: selectScope(jobMetrics.data),
|
||||||
|
};
|
||||||
} else {
|
} else {
|
||||||
return jobMetrics
|
return jobMetrics;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
$: metricsQuery.variables = { id: job.id, metrics, scopes }
|
// $: metricsQuery.variables = { id: job.id, metrics, scopes };
|
||||||
|
|
||||||
if (job.monitoringStatus)
|
if (job.monitoringStatus) metricsQuery.resume();
|
||||||
$metricsQuery.resume()
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<JobInfo job={job}/>
|
<JobInfo {job} />
|
||||||
</td>
|
</td>
|
||||||
{#if job.monitoringStatus == 0 || job.monitoringStatus == 2}
|
{#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>
|
<Card body color="warning">Not monitored or archiving failed</Card>
|
||||||
</td>
|
</td>
|
||||||
{:else if $metricsQuery.fetching}
|
{:else if $metricsQuery.fetching}
|
||||||
<td colspan="{metrics.length}" style="text-align: center;">
|
<td colspan={metrics.length} style="text-align: center;">
|
||||||
<Spinner secondary />
|
<Spinner secondary />
|
||||||
</td>
|
</td>
|
||||||
{:else if $metricsQuery.error}
|
{:else if $metricsQuery.error}
|
||||||
<td colspan="{metrics.length}">
|
<td colspan={metrics.length}>
|
||||||
<Card body color="danger" class="mb-3">
|
<Card body color="danger" class="mb-3">
|
||||||
{$metricsQuery.error.message.length > 500
|
{$metricsQuery.error.message.length > 500
|
||||||
? $metricsQuery.error.message.substring(0, 499)+'...'
|
? $metricsQuery.error.message.substring(0, 499) + "..."
|
||||||
: $metricsQuery.error.message}
|
: $metricsQuery.error.message}
|
||||||
</Card>
|
</Card>
|
||||||
</td>
|
</td>
|
||||||
@ -132,10 +166,13 @@
|
|||||||
series={metric.data.metric.series}
|
series={metric.data.metric.series}
|
||||||
statisticsSeries={metric.data.metric.statisticsSeries}
|
statisticsSeries={metric.data.metric.statisticsSeries}
|
||||||
metric={metric.data.name}
|
metric={metric.data.name}
|
||||||
cluster={cluster}
|
{cluster}
|
||||||
subCluster={job.subCluster} />
|
subCluster={job.subCluster}
|
||||||
|
/>
|
||||||
{:else if metric.removed == true && metric.data == null}
|
{:else if metric.removed == true && metric.data == null}
|
||||||
<Card body color="info">Metric disabled for subcluster '{ job.subCluster }'</Card>
|
<Card body color="info"
|
||||||
|
>Metric disabled for subcluster '{job.subCluster}'</Card
|
||||||
|
>
|
||||||
{:else}
|
{:else}
|
||||||
<Card body color="warning">Missing Data</Card>
|
<Card body color="warning">Missing Data</Card>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { expiringCacheExchange } from "./cache-exchange.js";
|
import { expiringCacheExchange } from "./cache-exchange.js";
|
||||||
import {
|
import {
|
||||||
CreateClient,
|
Client,
|
||||||
setContextClient,
|
setContextClient,
|
||||||
fetchExchange,
|
fetchExchange,
|
||||||
} from "@urql/svelte";
|
} from "@urql/svelte";
|
||||||
@ -22,7 +22,7 @@ export function init(extraInitQuery = "") {
|
|||||||
? getContext("jwt")
|
? getContext("jwt")
|
||||||
: getContext("cc-config")["jwt"];
|
: getContext("cc-config")["jwt"];
|
||||||
|
|
||||||
const client = CreateClient({
|
const client = new Client({
|
||||||
url: `${window.location.origin}/query`,
|
url: `${window.location.origin}/query`,
|
||||||
fetchOptions:
|
fetchOptions:
|
||||||
jwt != null ? { headers: { Authorization: `Bearer ${jwt}` } } : {},
|
jwt != null ? { headers: { Authorization: `Bearer ${jwt}` } } : {},
|
||||||
|
Loading…
Reference in New Issue
Block a user