Make state filter array

web/frontend/src/Node.root.svelte

@@ -1,30 +1,44 @@
 <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) {
-        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 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!) {
+            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;
@@ -60,7 +82,7 @@
     $: filter = [
         { cluster: { eq: cluster } },
         { node: { eq: hostname } },
-        {state: 'running'}
+        { state: ["running"] },
         // {startTime: {
         //     from: from.toISOString(),
         //     to: to.toISOString()
@@ -86,24 +108,29 @@
     $: 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 : '') + ')'
+                    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>
 
 <Row>
@@ -121,19 +148,20 @@
         <Col>
             {#if $nodeJobsData.fetching}
                 <Spinner />
-            {:else}
+            {:else if $nodeJobsData.data}
-                {#if $nodeJobsData.data}
+                Currently running jobs on this node: {$nodeJobsData.data.jobs
-                    Currently running jobs on this node: { $nodeJobsData.data.jobs.count }
+                    .count}
-                    [ <a href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}" target="_blank">View in Job List</a> ]
+                [
+                <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
+            <TimeSelection bind:from bind:to />
-                bind:from={from}
-                bind:to={to} />
         </Col>
     {/if}
 </Row>
@@ -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)}))
+                    .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}
                     <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}
-                    <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}