From 36abed2093f76105cc3226f17ff191e192628be0 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 1 Aug 2023 15:30:21 +0200
Subject: [PATCH 1/5] feat: add auto-reloading to system and node views

---
 web/frontend/src/Node.root.svelte             | 8 ++++++++
 web/frontend/src/Systems.root.svelte          | 8 ++++++++
 web/frontend/src/filters/TimeSelection.svelte | 1 +
 3 files changed, 17 insertions(+)

diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index daa12c5..3cd6d04 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -11,6 +11,7 @@
     } from "sveltestrap";
     import { queryStore, gql, getContextClient } from "@urql/svelte";
     import TimeSelection from "./filters/TimeSelection.svelte";
+    import Refresher from './joblist/Refresher.svelte';
     import PlotTable from "./PlotTable.svelte";
     import MetricPlot from "./plots/MetricPlot.svelte";
     import { getContext } from "svelte";
@@ -160,6 +161,13 @@
                 No currently running jobs.
             {/if}
         </Col>
+        <Col>
+            <Refresher on:reload={() => {
+                const diff = Date.now() - to
+                from = new Date(from.getTime() + diff)
+                to = new Date(to.getTime() + diff)
+            }} />
+        </Col>
         <Col>
             <TimeSelection bind:from bind:to />
         </Col>
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index fcca95e..bda1763 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -1,5 +1,6 @@
 <script>
     import { init, checkMetricDisabled } from './utils.js'
+    import Refresher from './joblist/Refresher.svelte'
     import { Row, Col, Input, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
     import { queryStore, gql, getContextClient } from '@urql/svelte'
     import TimeSelection from './filters/TimeSelection.svelte'
@@ -78,6 +79,13 @@
     {:else if $initq.fetching}
         <Spinner/>
     {:else}
+        <Col>
+            <Refresher on:reload={() => {
+                const diff = Date.now() - to
+                from = new Date(from.getTime() + diff)
+                to = new Date(to.getTime() + diff)
+            }} />
+        </Col>
         <Col>
             <TimeSelection
                 bind:from={from}
diff --git a/web/frontend/src/filters/TimeSelection.svelte b/web/frontend/src/filters/TimeSelection.svelte
index 7d7cca4..c715b9c 100644
--- a/web/frontend/src/filters/TimeSelection.svelte
+++ b/web/frontend/src/filters/TimeSelection.svelte
@@ -7,6 +7,7 @@
     export let customEnabled = true
     export let anyEnabled = false
     export let options = {
+        'Last quarter hour': 15*60,
         'Last half hour': 30*60,
         'Last hour': 60*60,
         'Last 2hrs': 2*60*60,

From 284a7079d6c6c1c3a376817d1ee385232a51043a Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 1 Aug 2023 18:37:50 +0200
Subject: [PATCH 2/5] Invert time x-axis for node view metric plots

---
 web/frontend/src/Node.root.svelte        |  1 +
 web/frontend/src/Systems.root.svelte     |  3 ++-
 web/frontend/src/plots/MetricPlot.svelte | 11 ++++++-----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index 3cd6d04..9a5cb1d 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -211,6 +211,7 @@
                         subCluster={$nodeMetricsData.data.nodeMetrics[0]
                             .subCluster}
                         series={item.metric.series}
+                        forNode={true}
                     />
                 {:else if item.disabled === true && item.metric}
                     <Card
diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index bda1763..6201995 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -144,7 +144,8 @@
                             series={item.data.metric.series}
                             metric={item.data.name}
                             cluster={clusters.find(c => c.name == cluster)}
-                            subCluster={item.subCluster} />
+                            subCluster={item.subCluster}
+                            forNode={true} />
                     {:else if item.disabled === true && item.data}
                         <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info">Metric disabled for subcluster <code>{selectedMetric}:{item.subCluster}</code></Card>
                     {:else}
diff --git a/web/frontend/src/plots/MetricPlot.svelte b/web/frontend/src/plots/MetricPlot.svelte
index c0440fd..4e1446e 100644
--- a/web/frontend/src/plots/MetricPlot.svelte
+++ b/web/frontend/src/plots/MetricPlot.svelte
@@ -37,6 +37,7 @@
     export let useStatsSeries = null
     export let scope = 'node'
     export let isShared = false
+    export let forNode = false
 
     if (useStatsSeries == null)
         useStatsSeries = statisticsSeries != null
@@ -130,7 +131,7 @@
                 scale: 'x',
                 space: 35,
                 incrs: timeIncrs(timestep, maxX),
-                values: (_, vals) => vals.map(v => formatTime(v))
+                values: (_, vals) => forNode ? vals.reverse().map(v => formatTime(v, forNode)) : vals.map(v => formatTime(v))
             },
             {
                 scale: 'y',
@@ -250,15 +251,15 @@
 </script>
 <script context="module">
 
-    export function formatTime(t) {
+    export function formatTime(t, forNode = false) {
         let h = Math.floor(t / 3600)
         let m = Math.floor((t % 3600) / 60)
         if (h == 0)
-            return `${m}m`
+            return forNode ? `-${m}m` : `${m}m`
         else if (m == 0)
-            return `${h}h`
+            return forNode ? `-${h}h` : `${h}h`
         else
-            return `${h}:${m}h`
+            return forNode ? `-${h}:${m}h` : `${h}:${m}h`
     }
 
     export function timeIncrs(timestep, maxX) {

From 1921be661ba56e209823befde6cb3ec8dd081f83 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 2 Aug 2023 14:20:39 +0200
Subject: [PATCH 3/5] Fix x-axis order for relative timestamps

- WIP: Will change to full times, as tick location is incorrect
---
 web/frontend/src/plots/MetricPlot.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/frontend/src/plots/MetricPlot.svelte b/web/frontend/src/plots/MetricPlot.svelte
index 4e1446e..fdf56ed 100644
--- a/web/frontend/src/plots/MetricPlot.svelte
+++ b/web/frontend/src/plots/MetricPlot.svelte
@@ -131,7 +131,13 @@
                 scale: 'x',
                 space: 35,
                 incrs: timeIncrs(timestep, maxX),
-                values: (_, vals) => forNode ? vals.reverse().map(v => formatTime(v, forNode)) : vals.map(v => formatTime(v))
+                values: (_, vals) => {
+                    if (forNode === true) {
+                        return vals.map(v => formatTime(v, forNode)).reverse()
+                    } else {
+                        return vals.map(v => formatTime(v))
+                    }
+                }
             },
             {
                 scale: 'y',

From 6e0c13df896feabe514f7621c859a8d1fc9127d6 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 3 Aug 2023 12:27:03 +0200
Subject: [PATCH 4/5] Correct negative relative timestamps for node view

---
 web/frontend/src/plots/MetricPlot.svelte | 53 ++++++++++++++++--------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/web/frontend/src/plots/MetricPlot.svelte b/web/frontend/src/plots/MetricPlot.svelte
index fdf56ed..2aea35b 100644
--- a/web/frontend/src/plots/MetricPlot.svelte
+++ b/web/frontend/src/plots/MetricPlot.svelte
@@ -96,14 +96,28 @@
         : null
     const plotSeries = [{}]
     const plotData = [new Array(longestSeries)]
-    for (let i = 0; i < longestSeries; i++) // TODO: Cache/Reuse this array?
-        plotData[0][i] = i * timestep
+
+    if (forNode === true) {
+        // Negative Timestamp Buildup
+        for (let i = 0; i <= longestSeries; i++) {
+            plotData[0][i] = (longestSeries - i) * timestep * -1
+        }
+    } else {
+        // Positive Timestamp Buildup
+        for (let j = 0; j < longestSeries; j++) // TODO: Cache/Reuse this array?
+            plotData[0][j] = j * timestep
+    }
 
     let plotBands = undefined
     if (useStatsSeries) {
         plotData.push(statisticsSeries.min)
         plotData.push(statisticsSeries.max)
         plotData.push(statisticsSeries.mean)
+        if (forNode === true) { // timestamp 0 with null value for reversed time axis
+            if (plotData[1].length != 0) plotData[1].push(null)
+            if (plotData[2].length != 0) plotData[2].push(null)
+            if (plotData[3].length != 0) plotData[3].push(null)
+        }
         plotSeries.push({ scale: 'y', width: lineWidth, stroke: 'red' })
         plotSeries.push({ scale: 'y', width: lineWidth, stroke: 'green' })
         plotSeries.push({ scale: 'y', width: lineWidth, stroke: 'black' })
@@ -114,6 +128,7 @@
     } else {
         for (let i = 0; i < series.length; i++) {
             plotData.push(series[i].data)
+            if (forNode === true && plotData[1].length != 0) plotData[1].push(null) // timestamp 0 with null value for reversed time axis
             plotSeries.push({
                 scale: 'y',
                 width: lineWidth,
@@ -122,6 +137,10 @@
         }
     }
 
+
+    // console.log("Input Series: ", metric, series)
+    // console.log("Data: ", plotData)
+
     const opts = {
         width,
         height,
@@ -130,14 +149,8 @@
             {
                 scale: 'x',
                 space: 35,
-                incrs: timeIncrs(timestep, maxX),
-                values: (_, vals) => {
-                    if (forNode === true) {
-                        return vals.map(v => formatTime(v, forNode)).reverse()
-                    } else {
-                        return vals.map(v => formatTime(v))
-                    }
-                }
+                incrs: timeIncrs(timestep, maxX, forNode),
+                values: (_, vals) => vals.map(v => formatTime(v))
             },
             {
                 scale: 'y',
@@ -261,19 +274,23 @@
         let h = Math.floor(t / 3600)
         let m = Math.floor((t % 3600) / 60)
         if (h == 0)
-            return forNode ? `-${m}m` : `${m}m`
+            return `${m}m`
         else if (m == 0)
-            return forNode ? `-${h}h` : `${h}h`
+            return `${h}h`
         else
-            return forNode ? `-${h}:${m}h` : `${h}:${m}h`
+            return `${h}:${m}h`
     }
 
-    export function timeIncrs(timestep, maxX) {
-        let incrs = []
-        for (let t = timestep; t < maxX; t *= 10)
-            incrs.push(t, t * 2, t * 3, t * 5)
+    export function timeIncrs(timestep, maxX, forNode) {
+        if (forNode === true) {
+            return [60, 300, 900, 1800, 3600, 7200, 14400, 21600] // forNode fixed increments
+        } else {
+            let incrs = []
+            for (let t = timestep; t < maxX; t *= 10)
+                incrs.push(t, t * 2, t * 3, t * 5)
 
-        return incrs
+            return incrs
+        }
     }
 
     export function findThresholds(metricConfig, scope, subCluster) {

From 4244a37440e5671a1c352603d2cc7908120ff89e Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 3 Aug 2023 12:38:00 +0200
Subject: [PATCH 5/5] fix: correct timestamp logic in node-view

---
 web/frontend/src/plots/MetricPlot.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web/frontend/src/plots/MetricPlot.svelte b/web/frontend/src/plots/MetricPlot.svelte
index 2aea35b..1565cde 100644
--- a/web/frontend/src/plots/MetricPlot.svelte
+++ b/web/frontend/src/plots/MetricPlot.svelte
@@ -137,10 +137,6 @@
         }
     }
 
-
-    // console.log("Input Series: ", metric, series)
-    // console.log("Data: ", plotData)
-
     const opts = {
         width,
         height,