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 />