From 46baa6e53400e37b9dbd940fbb784e0896393841 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 28 Sep 2022 16:13:46 +0200
Subject: [PATCH] First optical layout Iteration

---
 web/frontend/src/Status.root.svelte | 148 ++++++++++++++++------------
 1 file changed, 86 insertions(+), 62 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 26842c8..573914d 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -2,7 +2,7 @@
     import Refresher from './joblist/Refresher.svelte'
     import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
     import Histogram from './plots/Histogram.svelte'
-    import { Row, Col, Spinner, Card, Table, Progress } from 'sveltestrap'
+    import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
     import { init } from './utils.js'
     import { operationStore, query } from '@urql/svelte'
 
@@ -60,7 +60,12 @@
     query(mainQuery)
 </script>
 
+<!-- Loading indicator & Refresh -->
+
 <Row>
+    <Col xs="auto" style="align-self: flex-end;">
+        <h4 class="mb-0" >Current usage of cluster "{cluster}"</h4>
+    </Col>
     <Col xs="auto">
         {#if $initq.fetching || $mainQuery.fetching}
             <Spinner/>
@@ -89,54 +94,71 @@
         </Col>
     </Row>
 {/if}
+
+<hr>
+
+<!-- Gauges & Roofline per Subcluster-->
+
 {#if $initq.data && $mainQuery.data}
     {#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i}
-        <Row>
-            <Col xs="3">
-                <Table>
-                    <tr>
-                        <th scope="col">SubCluster</th>
-                        <td colspan="2">{subCluster.name}</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">Allocated Nodes</th>
-                        <td style="min-width: 75px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
-                        <td>({allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes})</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">Flop Rate</th>
-                        <td style="min-width: 75px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
-                        <td>({flopRate[subCluster.name]} / {subCluster.flopRateSimd * subCluster.numberOfNodes})</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">MemBw Rate</th>
-                        <td style="min-width: 75px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
-                        <td>({memBwRate[subCluster.name]} / {subCluster.memoryBandwidth * subCluster.numberOfNodes})</td>
-                    </tr>
-                </Table>
+        <Row cols={2} class="mb-3 justify-content-center">
+            <Col xs="3" class="px-3">
+                <Card class="h-auto mt-1">
+                    <CardHeader>
+                        <CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <Table>
+                            <tr>
+                                <th scope="col">Allocated Nodes</th>
+                                <td style="min-width: 75px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
+                                <td>({allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes})</td>
+                            </tr>
+                            <tr>
+                                <th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th>
+                                <td style="min-width: 75px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
+                                <td>({flopRate[subCluster.name]} / {subCluster.flopRateSimd * subCluster.numberOfNodes})</td>
+                            </tr>
+                            <tr>
+                                <th scope="col">MemBw Rate</th>
+                                <td style="min-width: 75px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
+                                <td>({memBwRate[subCluster.name]} / {subCluster.memoryBandwidth * subCluster.numberOfNodes})</td>
+                            </tr>
+                        </Table>
+                    </CardBody>
+                </Card>
+            </Col>
+            <Col class="px-3">
+                <div bind:clientWidth={plotWidths[i]}>
+                    {#key $mainQuery.data.nodeMetrics}
+                        <Roofline
+                            width={plotWidths[i] - 10} height={300} colorDots={false} cluster={subCluster}
+                            data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
+                    {/key}
+                </div>
             </Col>
-            <div class="col-9" bind:clientWidth={plotWidths[i]}>
-                {#key $mainQuery.data.nodeMetrics}
-                    <Roofline
-                        width={plotWidths[i] - 10} height={300} colorDots={false} cluster={subCluster}
-                        data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
-                {/key}
-            </div>
         </Row>
     {/each}
-    <Row>
-        <div class="col-4" bind:clientWidth={colWidth1}>
-            <h4>Top Users</h4>
-            {#key $mainQuery.data}
-                <Histogram
-                    width={colWidth1 - 25} height={300}
-                    data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
-                    label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'} />
-            {/key}
-        </div>
-        <div class="col-2">
+
+    <hr style="margin-top: -1em;">
+
+    <!-- Usage Stats as Histograms -->
+
+    <Row cols={4}>
+        <Col class="p-2">
+            <div bind:clientWidth={colWidth1}>
+                <h4 class="mb-3 text-center">Top Users</h4>
+                {#key $mainQuery.data}
+                    <Histogram
+                        width={colWidth1 - 25} height={300}
+                        data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
+                        label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'} />
+                {/key}
+            </div>
+        </Col>
+        <Col class="px-4 py-2">
             <Table>
-                <tr><th>Name</th><th>Number of Nodes</th></tr>
+                <tr class="mb-2"><th>User Name</th><th>Number of Nodes</th></tr>
                 {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
                     <tr>
                         <th scope="col"><a href="/monitoring/user/{name}">{name}</a></th>
@@ -144,41 +166,43 @@
                     </tr>
                 {/each}
             </Table>
-        </div>
-        <div class="col-4">
-            <h4>Top Projects</h4>
+        </Col>
+        <Col class="p-2">
+            <h4 class="mb-3 text-center">Top Projects</h4>
             {#key $mainQuery.data}
                 <Histogram
                     width={colWidth1 - 25} height={300}
                     data={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
                     label={(x) => x < $mainQuery.data.topProjects.length ? $mainQuery.data.topProjects[Math.floor(x)].name : '0'} />
             {/key}
-        </div>
-        <div class="col-2">
+        </Col>
+        <Col class="px-4 py-2">
             <Table>
-                <tr><th>Name</th><th>Number of Nodes</th></tr>
+                <tr class="mb-2"><th>Project Code</th><th>Number of Nodes</th></tr>
                 {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }}
                     <tr><th scope="col">{name}</th><td>{count}</td></tr>
                 {/each}
             </Table>
-        </div>
+        </Col>
     </Row>
-    <Row>
-        <div class="col" bind:clientWidth={colWidth2}>
-            <h4>Duration Distribution</h4>
-            {#key $mainQuery.data.stats}
-                <Histogram
-                    width={colWidth2 - 25} height={300}
-                    data={$mainQuery.data.stats[0].histDuration} />
-            {/key}
-        </div>
-        <div class="col">
-            <h4>Number of Nodes Distribution</h4>
+    <Row cols={2} class="mt-3">
+        <Col class="p-2">
+            <div bind:clientWidth={colWidth2}>
+                <h4 class="mb-3 text-center">Duration Distribution</h4>
+                {#key $mainQuery.data.stats}
+                    <Histogram
+                        width={colWidth2 - 25} height={300}
+                        data={$mainQuery.data.stats[0].histDuration} />
+                {/key}
+            </div>
+        </Col>
+        <Col class="p-2">
+            <h4 class="mb-3 text-center">Number of Nodes Distribution</h4>
             {#key $mainQuery.data.stats}
                 <Histogram
                     width={colWidth2 - 25} height={300}
                     data={$mainQuery.data.stats[0].histNumNodes} />
             {/key}
-        </div>
+        </Col>
     </Row>
 {/if}