From 120567269d7e87bfc396ce7af425196dfd31f067 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Mon, 3 Jul 2023 09:01:28 +0200
Subject: [PATCH] Make state filter array

---
 web/frontend/src/Node.root.svelte | 195 +++++++++++++++++++-----------
 1 file changed, 126 insertions(+), 69 deletions(-)

diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index f5715c9..e9e5f96 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -1,46 +1,68 @@
 <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) {
-            host
-            subCluster
-            metrics {
-                name
-                scope
-                metric {
-                    timestep
-                    unit { base, prefix }
-                    series {
-                        statistics { min, avg, max }
-                        data
+    const nodeMetricsQuery = gql`
+        query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
+            nodeMetrics(
+                cluster: $cluster
+                nodes: $nodes
+                from: $from
+                to: $to
+            ) {
+                host
+                subCluster
+                metrics {
+                    name
+                    scope
+                    metric {
+                        timestep
+                        unit {
+                            base
+                            prefix
+                        }
+                        series {
+                            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,13 +80,13 @@
     let paging = { itemsPerPage, page };
     let sorting = { field: "startTime", order: "DESC" };
     $: filter = [
-        {cluster: { eq: cluster }},
-        {node: { eq: hostname }},
-        {state: 'running'}
-        // {startTime: { 
+        { cluster: { eq: cluster } },
+        { node: { eq: hostname } },
+        { state: ["running"] },
+        // {startTime: {
         //     from: from.toISOString(),
-        //     to: to.toISOString() 
-        // }}    
+        //     to: to.toISOString()
+        // }}
     ];
 
     const nodeJobsQuery = gql`
@@ -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/>
+            {#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}
-                {#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}
+                No currently running jobs.
             {/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}