feat: add auto-reloading to system and node views

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>

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}

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,