mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 05:19:05 +01:00
Make state filter array
This commit is contained in:
parent
2f471dc192
commit
120567269d
@ -1,30 +1,44 @@
|
||||
<script>
|
||||
import { init, checkMetricDisabled } from './utils.js'
|
||||
import { Row, Col, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
import TimeSelection from './filters/TimeSelection.svelte'
|
||||
import PlotTable from './PlotTable.svelte'
|
||||
import MetricPlot from './plots/MetricPlot.svelte'
|
||||
import { getContext } from 'svelte'
|
||||
import { init, checkMetricDisabled } from "./utils.js";
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
Icon,
|
||||
Spinner,
|
||||
Card,
|
||||
} from "sveltestrap";
|
||||
import { queryStore, gql, getContextClient } from "@urql/svelte";
|
||||
import TimeSelection from "./filters/TimeSelection.svelte";
|
||||
import PlotTable from "./PlotTable.svelte";
|
||||
import MetricPlot from "./plots/MetricPlot.svelte";
|
||||
import { getContext } from "svelte";
|
||||
|
||||
export let cluster
|
||||
export let hostname
|
||||
export let from = null
|
||||
export let to = null
|
||||
export let cluster;
|
||||
export let hostname;
|
||||
export let from = null;
|
||||
export let to = null;
|
||||
|
||||
const { query: initq } = init()
|
||||
const { query: initq } = init();
|
||||
|
||||
if (from == null || to == null) {
|
||||
to = new Date(Date.now())
|
||||
from = new Date(to.getTime())
|
||||
from.setMinutes(from.getMinutes() - 30)
|
||||
to = new Date(Date.now());
|
||||
from = new Date(to.getTime());
|
||||
from.setMinutes(from.getMinutes() - 30);
|
||||
}
|
||||
|
||||
const ccconfig = getContext('cc-config')
|
||||
const clusters = getContext('clusters')
|
||||
const ccconfig = getContext("cc-config");
|
||||
const clusters = getContext("clusters");
|
||||
const client = getContextClient();
|
||||
const nodeMetricsQuery = gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
|
||||
nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) {
|
||||
const nodeMetricsQuery = gql`
|
||||
query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
|
||||
nodeMetrics(
|
||||
cluster: $cluster
|
||||
nodes: $nodes
|
||||
from: $from
|
||||
to: $to
|
||||
) {
|
||||
host
|
||||
subCluster
|
||||
metrics {
|
||||
@ -32,15 +46,23 @@
|
||||
scope
|
||||
metric {
|
||||
timestep
|
||||
unit { base, prefix }
|
||||
unit {
|
||||
base
|
||||
prefix
|
||||
}
|
||||
series {
|
||||
statistics { min, avg, max }
|
||||
statistics {
|
||||
min
|
||||
avg
|
||||
max
|
||||
}
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
}
|
||||
`;
|
||||
|
||||
$: nodeMetricsData = queryStore({
|
||||
client: client,
|
||||
@ -50,7 +72,7 @@
|
||||
nodes: [hostname],
|
||||
from: from.toISOString(),
|
||||
to: to.toISOString(),
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
let itemsPerPage = ccconfig.plot_list_jobsPerPage;
|
||||
@ -58,9 +80,9 @@
|
||||
let paging = { itemsPerPage, page };
|
||||
let sorting = { field: "startTime", order: "DESC" };
|
||||
$: filter = [
|
||||
{cluster: { eq: cluster }},
|
||||
{node: { eq: hostname }},
|
||||
{state: 'running'}
|
||||
{ cluster: { eq: cluster } },
|
||||
{ node: { eq: hostname } },
|
||||
{ state: ["running"] },
|
||||
// {startTime: {
|
||||
// from: from.toISOString(),
|
||||
// to: to.toISOString()
|
||||
@ -86,64 +108,70 @@
|
||||
$: nodeJobsData = queryStore({
|
||||
client: client,
|
||||
query: nodeJobsQuery,
|
||||
variables: { paging, sorting, filter }
|
||||
variables: { paging, sorting, filter },
|
||||
});
|
||||
|
||||
let metricUnits = {}
|
||||
let metricUnits = {};
|
||||
$: if ($nodeMetricsData.data) {
|
||||
let thisCluster = clusters.find(c => c.name == cluster)
|
||||
let thisCluster = clusters.find((c) => c.name == cluster);
|
||||
if (thisCluster) {
|
||||
for (let metric of thisCluster.metricConfig) {
|
||||
if (metric.unit.prefix || metric.unit.base) {
|
||||
metricUnits[metric.name] = '(' + (metric.unit.prefix ? metric.unit.prefix : '') + (metric.unit.base ? metric.unit.base : '') + ')'
|
||||
} else { // If no unit defined: Omit Unit Display
|
||||
metricUnits[metric.name] = ''
|
||||
metricUnits[metric.name] =
|
||||
"(" +
|
||||
(metric.unit.prefix ? metric.unit.prefix : "") +
|
||||
(metric.unit.base ? metric.unit.base : "") +
|
||||
")";
|
||||
} else {
|
||||
// If no unit defined: Omit Unit Display
|
||||
metricUnits[metric.name] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dateToUnixEpoch = rfc3339 => Math.floor(Date.parse(rfc3339) / 1000)
|
||||
const dateToUnixEpoch = (rfc3339) => Math.floor(Date.parse(rfc3339) / 1000);
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
{#if $initq.error}
|
||||
<Card body color="danger">{$initq.error.message}</Card>
|
||||
{:else if $initq.fetching}
|
||||
<Spinner/>
|
||||
<Spinner />
|
||||
{:else}
|
||||
<Col>
|
||||
<InputGroup>
|
||||
<InputGroupText><Icon name="hdd"/></InputGroupText>
|
||||
<InputGroupText><Icon name="hdd" /></InputGroupText>
|
||||
<InputGroupText>{hostname} ({cluster})</InputGroupText>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
{#if $nodeJobsData.fetching }
|
||||
<Spinner/>
|
||||
{:else}
|
||||
{#if $nodeJobsData.data}
|
||||
Currently running jobs on this node: { $nodeJobsData.data.jobs.count }
|
||||
[ <a href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}" target="_blank">View in Job List</a> ]
|
||||
{#if $nodeJobsData.fetching}
|
||||
<Spinner />
|
||||
{:else if $nodeJobsData.data}
|
||||
Currently running jobs on this node: {$nodeJobsData.data.jobs
|
||||
.count}
|
||||
[
|
||||
<a
|
||||
href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}"
|
||||
target="_blank">View in Job List</a
|
||||
> ]
|
||||
{:else}
|
||||
No currently running jobs.
|
||||
{/if}
|
||||
{/if}
|
||||
</Col>
|
||||
<Col>
|
||||
<TimeSelection
|
||||
bind:from={from}
|
||||
bind:to={to} />
|
||||
<TimeSelection bind:from bind:to />
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<br/>
|
||||
<br />
|
||||
<Row>
|
||||
<Col>
|
||||
{#if $nodeMetricsData.error}
|
||||
<Card body color="danger">{$nodeMetricsData.error.message}</Card>
|
||||
{:else if $nodeMetricsData.fetching || $initq.fetching}
|
||||
<Spinner/>
|
||||
<Spinner />
|
||||
{:else}
|
||||
<PlotTable
|
||||
let:item
|
||||
@ -151,19 +179,48 @@
|
||||
renderFor="node"
|
||||
itemsPerRow={ccconfig.plot_view_plotsPerRow}
|
||||
items={$nodeMetricsData.data.nodeMetrics[0].metrics
|
||||
.map(m => ({ ...m, disabled: checkMetricDisabled(m.name, cluster, $nodeMetricsData.data.nodeMetrics[0].subCluster)}))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))}>
|
||||
|
||||
<h4 style="text-align: center; padding-top:15px;">{item.name} {metricUnits[item.name]}</h4>
|
||||
.map((m) => ({
|
||||
...m,
|
||||
disabled: checkMetricDisabled(
|
||||
m.name,
|
||||
cluster,
|
||||
$nodeMetricsData.data.nodeMetrics[0].subCluster
|
||||
),
|
||||
}))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))}
|
||||
>
|
||||
<h4 style="text-align: center; padding-top:15px;">
|
||||
{item.name}
|
||||
{metricUnits[item.name]}
|
||||
</h4>
|
||||
{#if item.disabled === false && item.metric}
|
||||
<MetricPlot
|
||||
width={width} height={300} metric={item.name} timestep={item.metric.timestep}
|
||||
cluster={clusters.find(c => c.name == cluster)} subCluster={$nodeMetricsData.data.nodeMetrics[0].subCluster}
|
||||
series={item.metric.series} />
|
||||
{width}
|
||||
height={300}
|
||||
metric={item.name}
|
||||
timestep={item.metric.timestep}
|
||||
cluster={clusters.find((c) => c.name == cluster)}
|
||||
subCluster={$nodeMetricsData.data.nodeMetrics[0]
|
||||
.subCluster}
|
||||
series={item.metric.series}
|
||||
/>
|
||||
{:else if item.disabled === true && item.metric}
|
||||
<Card style="margin-left: 2rem;margin-right: 2rem;" body color="info">Metric disabled for subcluster <code>{item.name}:{$nodeMetricsData.data.nodeMetrics[0].subCluster}</code></Card>
|
||||
<Card
|
||||
style="margin-left: 2rem;margin-right: 2rem;"
|
||||
body
|
||||
color="info"
|
||||
>Metric disabled for subcluster <code
|
||||
>{item.name}:{$nodeMetricsData.data.nodeMetrics[0]
|
||||
.subCluster}</code
|
||||
></Card
|
||||
>
|
||||
{:else}
|
||||
<Card style="margin-left: 2rem;margin-right: 2rem;" body color="warning">No dataset returned for <code>{item.name}</code></Card>
|
||||
<Card
|
||||
style="margin-left: 2rem;margin-right: 2rem;"
|
||||
body
|
||||
color="warning"
|
||||
>No dataset returned for <code>{item.name}</code></Card
|
||||
>
|
||||
{/if}
|
||||
</PlotTable>
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user