change default range to 12h, rework layout in system node views

web/frontend/src/Node.root.svelte

@@ -13,6 +13,7 @@
   import {
     Row,
     Col,
+    Input,
     InputGroup,
     InputGroupText,
     Icon,
@@ -43,7 +44,7 @@
   if (from == null || to == null) {
     to = new Date(Date.now());
     from = new Date(to.getTime());
-    from.setMinutes(from.getMinutes() - 30);
+    from.setHours(from.getHours() - 12);
   }
 
   const initialized = getContext("initialized")
@@ -135,26 +136,38 @@
   {:else if $initq.fetching}
     <Spinner />
   {:else}
+    <!-- Node Col -->
     <Col>
       <InputGroup>
         <InputGroupText><Icon name="hdd" /></InputGroupText>
-        <InputGroupText>{hostname} ({cluster})</InputGroupText>
+        <InputGroupText>Selected Node</InputGroupText>
+        <Input style="background-color: white;"type="text" value="{hostname} ({cluster})" disabled/>
       </InputGroup>
     </Col>
+    <!-- Time Col -->
+    <Col>
+      <TimeSelection bind:from bind:to />
+    </Col>
+    <!-- Concurrent Col -->
     <Col>
       {#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
-        > ]
+      <InputGroup>
+        <InputGroupText><Icon name="activity" /></InputGroupText>
+        <InputGroupText>Activity</InputGroupText>
+        <Input style="background-color: white;"type="text" value="{$nodeJobsData.data.jobs.count} Jobs" disabled/>
+        <a title="Show jobs running on this node" href="/monitoring/jobs/?cluster={cluster}&state=running&node={hostname}" target="_blank" class="btn btn-outline-secondary" role="button" aria-disabled="true">
+          <Icon name="view-list" /> Show List
+        </a>
+      </InputGroup>
       {:else}
+      <Input type="text" disabled>
         No currently running jobs.
+      </Input>
       {/if}
     </Col>
+    <!-- Refresh Col-->
     <Col>
       <Refresher
         on:refresh={() => {
@@ -164,9 +177,6 @@
         }}
       />
     </Col>
-    <Col>
-      <TimeSelection bind:from bind:to />
-    </Col>
   {/if}
 </Row>
 <br />

web/frontend/src/Systems.root.svelte

@@ -42,7 +42,7 @@
   if (from == null || to == null) {
     to = new Date(Date.now());
     from = new Date(to.getTime());
-    from.setMinutes(from.getMinutes() - 30);
+    from.setHours(from.getHours() - 12);
   }
 
   const initialized = getContext("initialized");
@@ -117,18 +117,23 @@
   {:else if $initq.fetching}
     <Spinner />
   {:else}
+    <!-- Node Col-->
     <Col>
-      <Refresher
-        on:refresh={() => {
-          const diff = Date.now() - to;
-          from = new Date(from.getTime() + diff);
-          to = new Date(to.getTime() + diff);
-        }}
-      />
+      <InputGroup>
+        <InputGroupText><Icon name="hdd" /></InputGroupText>
+        <InputGroupText>Find Node</InputGroupText>
+        <Input
+          placeholder="hostname..."
+          type="text"
+          bind:value={hostnameFilter}
+        />
+      </InputGroup>
     </Col>
+    <!-- Range Col-->
     <Col>
       <TimeSelection bind:from bind:to />
     </Col>
+    <!-- Metric Col-->
     <Col>
       <InputGroup>
         <InputGroupText><Icon name="graph-up" /></InputGroupText>
@@ -142,16 +147,15 @@
         </select>
       </InputGroup>
     </Col>
+    <!-- Refresh Col-->
     <Col>
-      <InputGroup>
-        <InputGroupText><Icon name="hdd" /></InputGroupText>
-        <InputGroupText>Find Node</InputGroupText>
-        <Input
-          placeholder="hostname..."
-          type="text"
-          bind:value={hostnameFilter}
-        />
-      </InputGroup>
+      <Refresher
+        on:refresh={() => {
+          const diff = Date.now() - to;
+          from = new Date(from.getTime() + diff);
+          to = new Date(to.getTime() + diff);
+        }}
+      />
     </Col>
   {/if}
 </Row>

web/frontend/src/generic/helper/Refresher.svelte

@@ -9,7 +9,7 @@
  -->
 <script>
   import { createEventDispatcher } from "svelte";
-  import { Button, Icon, InputGroup } from "@sveltestrap/sveltestrap";
+  import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
 
   const dispatch = createEventDispatcher();
 
@@ -32,15 +32,8 @@
 </script>
 
 <InputGroup>
-  <Button
-    outline
-    on:click={() => dispatch("refresh")}
-    disabled={refreshInterval != null}
-  >
-    <Icon name="arrow-clockwise" /> Refresh
-  </Button>
-  <select
-    class="form-select"
+  <Input
+    type="select"
     bind:value={refreshInterval}
     on:change={refreshIntervalChanged}
   >
@@ -49,6 +42,13 @@
     <option value={60 * 1000}>Update every minute</option>
     <option value={2 * 60 * 1000}>Update every two minutes</option>
     <option value={5 * 60 * 1000}>Update every 5 minutes</option>
-  </select>
+  </Input>
+  <Button
+    outline
+    on:click={() => dispatch("refresh")}
+    disabled={refreshInterval != null}
+    >
+    <Icon name="arrow-clockwise" /> Refresh
+  </Button>
 </InputGroup>