ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-11-10 08:57:25 +01:00
Code Issues Packages Releases Activity

Make state filter array

Browse Source
This commit is contained in:
Jan Eitzinger 2023-07-03 09:01:28 +02:00
parent 2f471dc192
commit 120567269d
1 changed files with 126 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
web/frontend/src/Node.root.svelte
View File

@ -1,46 +1,68 @@
<script> <script>
import { init, checkMetricDisabled } from './utils.js' import { init, checkMetricDisabled } from "./utils.js";
import { Row, Col, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap' import {
import { queryStore, gql, getContextClient } from '@urql/svelte' Row,
import TimeSelection from './filters/TimeSelection.svelte' Col,
import PlotTable from './PlotTable.svelte' InputGroup,
import MetricPlot from './plots/MetricPlot.svelte' InputGroupText,
import { getContext } from 'svelte' 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 cluster;
export let hostname export let hostname;
export let from = null export let from = null;
export let to = null export let to = null;
const { query: initq } = init() const { query: initq } = init();
if (from == null || to == null) { if (from == null || to == null) {
to = new Date(Date.now()) to = new Date(Date.now());
from = new Date(to.getTime()) from = new Date(to.getTime());
from.setMinutes(from.getMinutes() - 30) from.setMinutes(from.getMinutes() - 30);
} }
const ccconfig = getContext('cc-config') const ccconfig = getContext("cc-config");
const clusters = getContext('clusters') const clusters = getContext("clusters");
const client = getContextClient(); const client = getContextClient();
const nodeMetricsQuery = gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) { const nodeMetricsQuery = gql`
nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) { query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
host nodeMetrics(
subCluster cluster: $cluster
metrics { nodes: $nodes
name from: $from
scope to: $to
metric { ) {
timestep host
unit { base, prefix } subCluster
series { metrics {
statistics { min, avg, max } name
data scope
metric {
timestep
unit {
base
prefix
}
series {
statistics {
min
avg
max
}
data
}
} }
} }
} }
} }
}`; `;
$: nodeMetricsData = queryStore({ $: nodeMetricsData = queryStore({
client: client, client: client,
@ -50,7 +72,7 @@
nodes: [hostname], nodes: [hostname],
from: from.toISOString(), from: from.toISOString(),
to: to.toISOString(), to: to.toISOString(),
} },
}); });
let itemsPerPage = ccconfig.plot_list_jobsPerPage; let itemsPerPage = ccconfig.plot_list_jobsPerPage;
@ -58,13 +80,13 @@
let paging = { itemsPerPage, page }; let paging = { itemsPerPage, page };
let sorting = { field: "startTime", order: "DESC" }; let sorting = { field: "startTime", order: "DESC" };
$: filter = [ $: filter = [
{cluster: { eq: cluster }}, { cluster: { eq: cluster } },
{node: { eq: hostname }}, { node: { eq: hostname } },
{state: 'running'} { state: ["running"] },
// {startTime: { // {startTime: {
// from: from.toISOString(), // from: from.toISOString(),
// to: to.toISOString() // to: to.toISOString()
// }} // }}
]; ];
const nodeJobsQuery = gql` const nodeJobsQuery = gql`
@ -86,64 +108,70 @@
$: nodeJobsData = queryStore({ $: nodeJobsData = queryStore({
client: client, client: client,
query: nodeJobsQuery, query: nodeJobsQuery,
variables: { paging, sorting, filter } variables: { paging, sorting, filter },
}); });
let metricUnits = {} let metricUnits = {};
$: if ($nodeMetricsData.data) { $: if ($nodeMetricsData.data) {
let thisCluster = clusters.find(c => c.name == cluster) let thisCluster = clusters.find((c) => c.name == cluster);
if (thisCluster) { if (thisCluster) {
for (let metric of thisCluster.metricConfig) { for (let metric of thisCluster.metricConfig) {
if (metric.unit.prefix || metric.unit.base) { if (metric.unit.prefix || metric.unit.base) {
metricUnits[metric.name] = '(' + (metric.unit.prefix ? metric.unit.prefix : '') + (metric.unit.base ? metric.unit.base : '') + ')' metricUnits[metric.name] =
} else { // If no unit defined: Omit Unit Display "(" +
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> </script>
<Row> <Row>
{#if $initq.error} {#if $initq.error}
<Card body color="danger">{$initq.error.message}</Card> <Card body color="danger">{$initq.error.message}</Card>
{:else if $initq.fetching} {:else if $initq.fetching}
<Spinner/> <Spinner />
{:else} {:else}
<Col> <Col>
<InputGroup> <InputGroup>
<InputGroupText><Icon name="hdd"/></InputGroupText> <InputGroupText><Icon name="hdd" /></InputGroupText>
<InputGroupText>{hostname} ({cluster})</InputGroupText> <InputGroupText>{hostname} ({cluster})</InputGroupText>
</InputGroup> </InputGroup>
</Col> </Col>
<Col> <Col>
{#if $nodeJobsData.fetching } {#if $nodeJobsData.fetching}
<Spinner/> <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} {:else}
{#if $nodeJobsData.data} No currently running jobs.
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} {/if}
</Col> </Col>
<Col> <Col>
<TimeSelection <TimeSelection bind:from bind:to />
bind:from={from}
bind:to={to} />
</Col> </Col>
{/if} {/if}
</Row> </Row>
<br/> <br />
<Row> <Row>
<Col> <Col>
{#if $nodeMetricsData.error} {#if $nodeMetricsData.error}
<Card body color="danger">{$nodeMetricsData.error.message}</Card> <Card body color="danger">{$nodeMetricsData.error.message}</Card>
{:else if $nodeMetricsData.fetching || $initq.fetching} {:else if $nodeMetricsData.fetching || $initq.fetching}
<Spinner/> <Spinner />
{:else} {:else}
<PlotTable <PlotTable
let:item let:item
@ -151,19 +179,48 @@
renderFor="node" renderFor="node"
itemsPerRow={ccconfig.plot_view_plotsPerRow} itemsPerRow={ccconfig.plot_view_plotsPerRow}
items={$nodeMetricsData.data.nodeMetrics[0].metrics items={$nodeMetricsData.data.nodeMetrics[0].metrics
.map(m => ({ ...m, disabled: checkMetricDisabled(m.name, cluster, $nodeMetricsData.data.nodeMetrics[0].subCluster)})) .map((m) => ({
.sort((a, b) => a.name.localeCompare(b.name))}> ...m,
disabled: checkMetricDisabled(
<h4 style="text-align: center; padding-top:15px;">{item.name} {metricUnits[item.name]}</h4> 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} {#if item.disabled === false && item.metric}
<MetricPlot <MetricPlot
width={width} height={300} metric={item.name} timestep={item.metric.timestep} {width}
cluster={clusters.find(c => c.name == cluster)} subCluster={$nodeMetricsData.data.nodeMetrics[0].subCluster} height={300}
series={item.metric.series} /> 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} {: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} {: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} {/if}
</PlotTable> </PlotTable>
{/if} {/if}