From 374a485d69a26a9af283a16554ccaeceefb005e0 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 10 May 2023 16:35:21 +0200
Subject: [PATCH] Further adaptions to new urql version

---
 web/frontend/src/Node.root.svelte     | 25 +++++++++++++------------
 web/frontend/src/PlotSelection.svelte | 24 +++++++++++-------------
 web/frontend/src/Status.root.svelte   | 10 ++--------
 web/frontend/src/Systems.root.svelte  |  5 ++---
 4 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index 6261a28..25e3b77 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -22,10 +22,8 @@
 
     const ccconfig = getContext('cc-config')
     const clusters = getContext('clusters')
-
-    const nodesQuery = queryStore({
-        client: getContextClient(),
-        query: gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
+    const client = getContextClient();
+    const query = gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
         nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) {
             host
             subCluster
@@ -42,15 +40,18 @@
                 }
             }
         }
-    }`,
-    variables: {
-        cluster: cluster,
-        nodes: [hostname],
-        from: from.toISOString(),
-        to: to.toISOString() }
-    })
+    }`;
 
-    $: $nodesQuery.variables = { cluster, nodes: [hostname], from: from.toISOString(), to: to.toISOString() }
+    $: nodesQuery = queryStore({
+        client: client,
+        query: query,
+        variables: {
+            cluster: cluster,
+            nodes: [hostname],
+            from: from.toISOString(),
+            to: to.toISOString(),
+        }
+    });
 
     let metricUnits = {}
     $: if ($nodesQuery.data) {
diff --git a/web/frontend/src/PlotSelection.svelte b/web/frontend/src/PlotSelection.svelte
index 74e7fba..064a2f6 100644
--- a/web/frontend/src/PlotSelection.svelte
+++ b/web/frontend/src/PlotSelection.svelte
@@ -7,14 +7,16 @@
     export let metricsInHistograms
     export let metricsInScatterplots
 
-    const updateConfigurationMutation = ({ name, value }) => {
-    result = mutationStore({
-        client: getContextClient(),
-        query: gql`mutation($name: String!, $value: String!) {
-            updateConfiguration(name: $name, value: $value)
-        }`,
-        variables: { name, value }
-    })
+    const client = getContextClient();
+
+    $: updateConfigurationMutation = ({ name, value }) => {
+        mutationStore({
+            client: client,
+            query: gql`mutation($name: String!, $value: String!) {
+                updateConfiguration(name: $name, value: $value)
+            }`,
+            variables: { name, value }
+        })
     }
 
     let isHistogramConfigOpen = false, isScatterPlotConfigOpen = false
@@ -24,11 +26,7 @@
         updateConfigurationMutation({
                 name: data.name,
                 value: JSON.stringify(data.value)
-            })
-            .then(res => {
-                if (res.error)
-                    console.error(res.error)
-            });
+        })
     }
 </script>
 
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 00d4179..7e9d7fb 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -11,9 +11,9 @@
     export let cluster
 
     let plotWidths = [], colWidth1 = 0, colWidth2
-
     let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
-    const mainQuery = queryStore({
+
+    $: mainQuery = queryStore({
         client: getContextClient(),
         query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
         nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
@@ -61,7 +61,6 @@
         }
     }
 
-    query(mainQuery)
 </script>
 
 <!-- Loading indicator & Refresh -->
@@ -81,13 +80,8 @@
     </Col>
     <Col xs="auto" style="margin-left: auto;">
         <Refresher initially={120} on:reload={() => {
-            console.log('reload...')
-
             from = new Date(Date.now() - 5 * 60 * 1000)
             to = new Date(Date.now())
-
-            $mainQuery.variables = { ...$mainQuery.variables, from: from, to: to }
-            $mainQuery.reexecute({ requestPolicy: 'network-only' })
         }} />
     </Col>
 </Row>
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index 9fd6107..f76a60a 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -27,7 +27,7 @@
     let hostnameFilter = ''
     let selectedMetric = ccconfig.system_view_selectedMetric
 
-    const nodesQuery = queryStore({
+    $: nodesQuery = queryStore({
         client: getContextClient(),
         query: gql`query($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
         nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
@@ -49,7 +49,7 @@
     }`,
     variables: {
         cluster: cluster,
-        metrics: [],
+        metrics: [selectedMetric],
         from: from.toISOString(),
         to: to.toISOString()}
     })
@@ -66,7 +66,6 @@
         }
     }
 
-    $: $nodesQuery.variables = { cluster, metrics: [selectedMetric], from: from.toISOString(), to: to.toISOString() }
 </script>
 
 <Row>