From 80be78604f066b64837170d0f41d4e54f8bf3a94 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Wed, 23 Aug 2023 21:15:49 +0200
Subject: [PATCH 1/7] fix: Responsive Navbar

Missing Burger menu icon
---
 web/frontend/package-lock.json |  20 +-
 web/frontend/package.json      |   2 +-
 web/frontend/src/Header.svelte | 357 +++++++++++++++++++++++++--------
 3 files changed, 281 insertions(+), 98 deletions(-)

diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index 7997e2e..eb80726 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -14,7 +14,7 @@
         "chart.js": "^4.3.3",
         "graphql": "^16.6.0",
         "svelte-chartjs": "^3.1.2",
-        "sveltestrap": "^5.10.0",
+        "sveltestrap": "^5.11.1",
         "uplot": "^1.6.24",
         "wonka": "^6.3.2"
       },
@@ -138,9 +138,9 @@
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
-      "version": "15.2.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.0.tgz",
-      "integrity": "sha512-mKur03xNGT8O9ODO6FtT43ITGqHWZbKPdVJHZb+iV9QYcdlhUUB0wgknvA4KCUmC5oHJF6O2W1EgmyOQyVUI4Q==",
+      "version": "15.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz",
+      "integrity": "sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
@@ -346,9 +346,9 @@
       "dev": true
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
       "optional": true,
@@ -547,9 +547,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.28.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
-      "integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
+      "version": "3.28.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
+      "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
       "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
diff --git a/web/frontend/package.json b/web/frontend/package.json
index 4ef7314..b0bb5af 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -21,7 +21,7 @@
     "chart.js": "^4.3.3",
     "graphql": "^16.6.0",
     "svelte-chartjs": "^3.1.2",
-    "sveltestrap": "^5.10.0",
+    "sveltestrap": "^5.11.1",
     "uplot": "^1.6.24",
     "wonka": "^6.3.2"
   }
diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index 164a592..443f1d7 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -1,110 +1,293 @@
 <script>
-    import { Icon, Button, InputGroup, Input, Collapse,
-             Navbar, NavbarBrand, Nav, NavItem, NavLink, NavbarToggler,
-             Dropdown, DropdownToggle, DropdownMenu, DropdownItem, InputGroupText } from 'sveltestrap'
+    import {
+        Icon,
+        Button,
+        InputGroup,
+        Input,
+        Collapse,
+        Navbar,
+        NavbarBrand,
+        Nav,
+        NavItem,
+        NavLink,
+        NavbarToggler,
+        Dropdown,
+        DropdownToggle,
+        DropdownMenu,
+        DropdownItem,
+        InputGroupText,
+    } from "sveltestrap";
 
-    export let username // empty string if auth. is disabled, otherwise the username as string
-    export let authlevel // Integer
-    export let clusters // array of names
-    export let roles // Role Enum-Like
+    export let username; // empty string if auth. is disabled, otherwise the username as string
+    export let authlevel; // Integer
+    export let clusters; // array of names
+    export let roles; // Role Enum-Like
 
-    let isOpen = false
+    let isOpen = false;
+    let screenSize;
 
-    const userviews = [
-        { title: 'My Jobs',     href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
-        { title: `Job Search`,  href: '/monitoring/jobs/',            icon: 'card-list' },
-        { title: 'Tags',        href: '/monitoring/tags/',            icon: 'tags' }
-    ]
+    const jobsTitle = new Map();
+    jobsTitle.set(2, "Job Search");
+    jobsTitle.set(3, "Managed Jobs");
+    jobsTitle.set(4, "Jobs");
+    jobsTitle.set(5, "Jobs");
+    const usersTitle = new Map();
+    usersTitle.set(3, "Managed Users");
+    usersTitle.set(4, "Users");
+    usersTitle.set(5, "Users");
 
-    const managerviews = [
-        { title: 'My Jobs',             href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
-        { title: `Managed Jobs`,        href: '/monitoring/jobs/',            icon: 'card-list' },
-        { title: `Managed Users`,       href: '/monitoring/users/',           icon: 'people-fill' },
-        { title: 'Tags',                href: '/monitoring/tags/',            icon: 'tags' }
-    ]
-
-    const supportviews = [
-        { title: 'My Jobs',  href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
-        { title: 'Jobs',     href: '/monitoring/jobs/',            icon: 'card-list' },
-        { title: 'Users',    href: '/monitoring/users/',           icon: 'people-fill' },
-        { title: 'Projects', href: '/monitoring/projects/',        icon: 'folder' },
-        { title: 'Tags',     href: '/monitoring/tags/',            icon: 'tags' }
-    ]
-
-    const adminviews = [
-        { title: 'My Jobs',  href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
-        { title: 'Jobs',     href: '/monitoring/jobs/',            icon: 'card-list' },
-        { title: 'Users',    href: '/monitoring/users/',           icon: 'people-fill' },
-        { title: 'Projects', href: '/monitoring/projects/',        icon: 'folder' },
-        { title: 'Tags',     href: '/monitoring/tags/',            icon: 'tags' }
-    ]
-
-    const viewsPerCluster = [
-        { title: 'Analysis', requiredRole: roles.support,  href: '/monitoring/analysis/', icon: 'graph-up' },
-        { title: 'Systems',  requiredRole: roles.admin,  href: '/monitoring/systems/',  icon: 'cpu' },
-        { title: 'Status',   requiredRole: roles.admin,  href: '/monitoring/status/',   icon: 'cpu' },
-    ]
+    const views = [
+        {
+            title: "My Jobs",
+            requiredRole: roles.user,
+            href: `/monitoring/user/${username}`,
+            icon: "bar-chart-line-fill",
+            perCluster: false,
+            menu: "none",
+        },
+        {
+            title: jobsTitle.get(authlevel),
+            requiredRole: roles.user,
+            href: `/monitoring/jobs`,
+            icon: "card-list",
+            perCluster: false,
+            menu: "none",
+        },
+        {
+            title: usersTitle.get(authlevel),
+            requiredRole: roles.manager,
+            href: "/monitoring/users/",
+            icon: "people-fill",
+            perCluster: false,
+            menu: "Groups",
+        },
+        {
+            title: "Projects",
+            requiredRole: roles.support,
+            href: "/monitoring/projects/",
+            icon: "folder",
+            perCluster: false,
+            menu: "Groups",
+        },
+        {
+            title: "Tags",
+            requiredRole: roles.user,
+            href: "/monitoring/tags/",
+            icon: "tags",
+            perCluster: false,
+            menu: "Groups",
+        },
+        {
+            title: "Analysis",
+            requiredRole: roles.support,
+            href: "/monitoring/analysis/",
+            icon: "graph-up",
+            perCluster: true,
+            menu: "Stats",
+        },
+        {
+            title: "Nodes",
+            requiredRole: roles.admin,
+            href: "/monitoring/systems/",
+            icon: "cpu",
+            perCluster: true,
+            menu: "Groups",
+        },
+        {
+            title: "Status",
+            requiredRole: roles.admin,
+            href: "/monitoring/status/",
+            icon: "cpu",
+            perCluster: true,
+            menu: "Stats",
+        },
+    ];
 </script>
 
-<Navbar color="light" light expand="lg" fixed="top">
+<svelte:window bind:innerWidth={screenSize} />
+<Navbar color="light" light expand="sm" fixed="top">
     <NavbarBrand href="/">
-        <img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem">
+        <img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
     </NavbarBrand>
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
-    <Collapse {isOpen} navbar expand="lg" on:update={({ detail }) => (isOpen = detail.isOpen)}>
-        <Nav pills>
-            {#if authlevel == roles.admin}
-                {#each adminviews as item}
-                    <NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
+    <Collapse
+        {isOpen}
+        navbar
+        expand="sm"
+        on:update={({ detail }) => (isOpen = detail.isOpen)}
+    >
+        <Nav navbar>
+            {#if screenSize > 1500}
+                {#each views.filter((item) => item.requiredRole <= authlevel) as item}
+                    {#if !item.perCluster}
+                        <NavLink
+                            href={item.href}
+                            active={window.location.pathname == item.href}
+                            ><Icon name={item.icon} /> {item.title}</NavLink
+                        >
+                    {:else}
+                        <Dropdown nav inNavbar>
+                            <DropdownToggle nav caret>
+                                <Icon name={item.icon} />
+                                {item.title}
+                            </DropdownToggle>
+                            <DropdownMenu class="dropdown-menu-lg-end">
+                                {#each clusters as cluster}
+                                    <DropdownItem
+                                        href={item.href + cluster.name}
+                                        active={window.location.pathname ==
+                                            item.href + cluster.name}
+                                    >
+                                        {cluster.name}
+                                    </DropdownItem>
+                                {/each}
+                            </DropdownMenu>
+                        </Dropdown>
+                    {/if}
                 {/each}
-            {:else if authlevel == roles.support}
-                {#each supportviews as item}
-                    <NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
+            {:else if screenSize > 1300}
+                {#each views.filter((item) => item.requiredRole <= authlevel && item.menu != "Stats") as item}
+                    {#if !item.perCluster}
+                        <NavLink
+                            href={item.href}
+                            active={window.location.pathname == item.href}
+                            ><Icon name={item.icon} /> {item.title}</NavLink
+                        >
+                    {:else}
+                        <Dropdown nav inNavbar>
+                            <DropdownToggle nav caret>
+                                <Icon name={item.icon} />
+                                {item.title}
+                            </DropdownToggle>
+                            <DropdownMenu class="dropdown-menu-lg-end">
+                                {#each clusters as cluster}
+                                    <DropdownItem
+                                        href={item.href + cluster.name}
+                                        active={window.location.pathname ==
+                                            item.href + cluster.name}
+                                    >
+                                        {cluster.name}
+                                    </DropdownItem>
+                                {/each}
+                            </DropdownMenu>
+                        </Dropdown>
+                    {/if}
                 {/each}
-            {:else if authlevel == roles.manager}
-                {#each managerviews as item}
-                    <NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
+                <Dropdown nav>
+                    <DropdownToggle nav caret>
+                        <Icon name="graph-up" />
+                        Stats
+                    </DropdownToggle>
+                    <DropdownMenu class="dropdown-menu-lg-end">
+                        {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "Stats") as item}
+                            <Dropdown nav inNavbar>
+                                <DropdownToggle nav caret>
+                                    <Icon name={item.icon} />
+                                    {item.title}
+                                </DropdownToggle>
+                                <DropdownMenu class="dropdown-menu-lg-end">
+                                    {#each clusters as cluster}
+                                        <DropdownItem
+                                            href={item.href + cluster.name}
+                                            active={window.location.pathname ==
+                                                item.href + cluster.name}
+                                        >
+                                            {cluster.name}
+                                        </DropdownItem>
+                                    {/each}
+                                </DropdownMenu>
+                            </Dropdown>
+                        {/each}
+                    </DropdownMenu>
+                </Dropdown>
+            {:else}
+                {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "none") as item}
+                    <NavLink
+                        href={item.href}
+                        active={window.location.pathname == item.href}
+                        ><Icon name={item.icon} /> {item.title}</NavLink
+                    >
                 {/each}
-            {:else} <!-- Compatibility: Handle "user role" or "no role" as identical-->
-                {#each userviews as item}
-                    <NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
-                {/each}
-            {/if}
-            {#each viewsPerCluster.filter(item => item.requiredRole <= authlevel) as item}
-                <NavItem>
-                    <Dropdown nav inNavbar>
+                {#each Array("Groups", "Stats") as menu}
+                    <Dropdown nav>
                         <DropdownToggle nav caret>
-                            <Icon name={item.icon}/> {item.title}
+                            {menu}
                         </DropdownToggle>
-                        <DropdownMenu>
-                            {#each clusters as cluster}
-                                <DropdownItem href={item.href + cluster.name} active={window.location.pathname == item.href + cluster.name}>
-                                    {cluster.name}
-                                </DropdownItem>
+                        <DropdownMenu class="dropdown-menu-lg-end">
+                            {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == menu) as item}
+                                <Dropdown nav inNavbar>
+                                    <DropdownToggle nav caret>
+                                        <Icon name={item.icon} />
+                                        {item.title}
+                                    </DropdownToggle>
+                                    <DropdownMenu class="dropdown-menu-lg-end">
+                                        {#each clusters as cluster}
+                                            <DropdownItem
+                                                href={item.href + cluster.name}
+                                                active={window.location
+                                                    .pathname ==
+                                                    item.href + cluster.name}
+                                            >
+                                                {cluster.name}
+                                            </DropdownItem>
+                                        {/each}
+                                    </DropdownMenu>
+                                </Dropdown>
                             {/each}
                         </DropdownMenu>
                     </Dropdown>
-                </NavItem>
-            {/each}
+                {/each}
+            {/if}
         </Nav>
     </Collapse>
-    <div class="d-flex">
-        <form method="GET" action="/search">
-            <InputGroup>
-                <Input type="text" placeholder="Search 'type:<query>' ..." name="searchId"/>
-                <Button outline type="submit"><Icon name="search"/></Button>
-                <InputGroupText style="cursor:help;" title={(authlevel >= roles.support) ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name" : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}><Icon name="info-circle"/></InputGroupText>
-            </InputGroup>
-        </form>
-        {#if username}
-            <form method="POST" action="/logout">
-                <Button outline color="success" type="submit" style="margin-left: 10px;">
-                    <Icon name="box-arrow-right"/> Logout {username}
-                </Button>
+    <Nav>
+        <NavItem>
+            <form method="GET" action="/search">
+                <InputGroup>
+                    <Input
+                        type="text"
+                        placeholder="Search 'type:<query>' ..."
+                        name="searchId"
+                    />
+                    <Button outline type="submit"><Icon name="search" /></Button
+                    >
+                    <InputGroupText
+                        style="cursor:help;"
+                        title={authlevel >= roles.support
+                            ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
+                            : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
+                        ><Icon name="info-circle" /></InputGroupText
+                    >
+                </InputGroup>
             </form>
+        </NavItem>
+        {#if username}
+            <NavItem>
+                <form method="POST" action="/logout">
+                    <Button
+                        outline
+                        color="success"
+                        type="submit"
+                        style="margin-left: 10px;"
+                    >
+                        {#if screenSize > 1630}
+                            <Icon name="box-arrow-right" /> Logout {username}
+                        {:else}
+                            <Icon name="box-arrow-right" />
+                        {/if}
+                    </Button>
+                </form>
+            </NavItem>
         {/if}
-        <Button outline on:click={() => window.location.href = '/config'} style="margin-left: 10px;">
-            <Icon name="gear"/>
-        </Button>
-    </div>
+        <NavItem>
+            <Button
+                outline
+                on:click={() => (window.location.href = "/config")}
+                style="margin-left: 10px;"
+            >
+                <Icon name="gear" />
+            </Button>
+        </NavItem>
+    </Nav>
 </Navbar>
+

From 204901189d1ea15522f74eab610fe73e01959aa5 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Thu, 24 Aug 2023 09:22:12 +0200
Subject: [PATCH 2/7] Add NavbarLinks component

---
 web/frontend/src/Header.svelte      | 140 ++++++++--------------------
 web/frontend/src/NavbarLinks.svelte |  39 ++++++++
 2 files changed, 78 insertions(+), 101 deletions(-)
 create mode 100644 web/frontend/src/NavbarLinks.svelte

diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index 443f1d7..eec8beb 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -17,6 +17,7 @@
         DropdownItem,
         InputGroupText,
     } from "sveltestrap";
+    import NavbarLinks from "./NavbarLinks.svelte";
 
     export let username; // empty string if auth. is disabled, otherwise the username as string
     export let authlevel; // Integer
@@ -118,122 +119,60 @@
     >
         <Nav navbar>
             {#if screenSize > 1500}
-                {#each views.filter((item) => item.requiredRole <= authlevel) as item}
-                    {#if !item.perCluster}
-                        <NavLink
-                            href={item.href}
-                            active={window.location.pathname == item.href}
-                            ><Icon name={item.icon} /> {item.title}</NavLink
-                        >
-                    {:else}
-                        <Dropdown nav inNavbar>
-                            <DropdownToggle nav caret>
-                                <Icon name={item.icon} />
-                                {item.title}
-                            </DropdownToggle>
-                            <DropdownMenu class="dropdown-menu-lg-end">
-                                {#each clusters as cluster}
-                                    <DropdownItem
-                                        href={item.href + cluster.name}
-                                        active={window.location.pathname ==
-                                            item.href + cluster.name}
-                                    >
-                                        {cluster.name}
-                                    </DropdownItem>
-                                {/each}
-                            </DropdownMenu>
-                        </Dropdown>
-                    {/if}
-                {/each}
+                <NavbarLinks
+                    {clusters}
+                    links={views.filter(
+                        (item) => item.requiredRole <= authlevel
+                    )}
+                />
             {:else if screenSize > 1300}
-                {#each views.filter((item) => item.requiredRole <= authlevel && item.menu != "Stats") as item}
-                    {#if !item.perCluster}
-                        <NavLink
-                            href={item.href}
-                            active={window.location.pathname == item.href}
-                            ><Icon name={item.icon} /> {item.title}</NavLink
-                        >
-                    {:else}
-                        <Dropdown nav inNavbar>
-                            <DropdownToggle nav caret>
-                                <Icon name={item.icon} />
-                                {item.title}
-                            </DropdownToggle>
-                            <DropdownMenu class="dropdown-menu-lg-end">
-                                {#each clusters as cluster}
-                                    <DropdownItem
-                                        href={item.href + cluster.name}
-                                        active={window.location.pathname ==
-                                            item.href + cluster.name}
-                                    >
-                                        {cluster.name}
-                                    </DropdownItem>
-                                {/each}
-                            </DropdownMenu>
-                        </Dropdown>
-                    {/if}
-                {/each}
+                <NavbarLinks
+                    {clusters}
+                    links={views.filter(
+                        (item) =>
+                            item.requiredRole <= authlevel &&
+                            item.menu != "Stats"
+                    )}
+                />
                 <Dropdown nav>
                     <DropdownToggle nav caret>
                         <Icon name="graph-up" />
                         Stats
                     </DropdownToggle>
                     <DropdownMenu class="dropdown-menu-lg-end">
-                        {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "Stats") as item}
-                            <Dropdown nav inNavbar>
-                                <DropdownToggle nav caret>
-                                    <Icon name={item.icon} />
-                                    {item.title}
-                                </DropdownToggle>
-                                <DropdownMenu class="dropdown-menu-lg-end">
-                                    {#each clusters as cluster}
-                                        <DropdownItem
-                                            href={item.href + cluster.name}
-                                            active={window.location.pathname ==
-                                                item.href + cluster.name}
-                                        >
-                                            {cluster.name}
-                                        </DropdownItem>
-                                    {/each}
-                                </DropdownMenu>
-                            </Dropdown>
-                        {/each}
+                        <NavbarLinks
+                            {clusters}
+                            links={views.filter(
+                                (item) =>
+                                    item.requiredRole <= authlevel &&
+                                    item.menu == "Stats"
+                            )}
+                        />
                     </DropdownMenu>
                 </Dropdown>
             {:else}
-                {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "none") as item}
-                    <NavLink
-                        href={item.href}
-                        active={window.location.pathname == item.href}
-                        ><Icon name={item.icon} /> {item.title}</NavLink
-                    >
-                {/each}
+                <NavbarLinks
+                    {clusters}
+                    links={views.filter(
+                        (item) =>
+                            item.requiredRole <= authlevel &&
+                            item.menu == "none"
+                    )}
+                />
                 {#each Array("Groups", "Stats") as menu}
                     <Dropdown nav>
                         <DropdownToggle nav caret>
                             {menu}
                         </DropdownToggle>
                         <DropdownMenu class="dropdown-menu-lg-end">
-                            {#each views.filter((item) => item.requiredRole <= authlevel && item.menu == menu) as item}
-                                <Dropdown nav inNavbar>
-                                    <DropdownToggle nav caret>
-                                        <Icon name={item.icon} />
-                                        {item.title}
-                                    </DropdownToggle>
-                                    <DropdownMenu class="dropdown-menu-lg-end">
-                                        {#each clusters as cluster}
-                                            <DropdownItem
-                                                href={item.href + cluster.name}
-                                                active={window.location
-                                                    .pathname ==
-                                                    item.href + cluster.name}
-                                            >
-                                                {cluster.name}
-                                            </DropdownItem>
-                                        {/each}
-                                    </DropdownMenu>
-                                </Dropdown>
-                            {/each}
+                            <NavbarLinks
+                                {clusters}
+                                links={views.filter(
+                                    (item) =>
+                                        item.requiredRole <= authlevel &&
+                                        item.menu == menu
+                                )}
+                            />
                         </DropdownMenu>
                     </Dropdown>
                 {/each}
@@ -290,4 +229,3 @@
         </NavItem>
     </Nav>
 </Navbar>
-
diff --git a/web/frontend/src/NavbarLinks.svelte b/web/frontend/src/NavbarLinks.svelte
new file mode 100644
index 0000000..6861da5
--- /dev/null
+++ b/web/frontend/src/NavbarLinks.svelte
@@ -0,0 +1,39 @@
+<script>
+    import {
+        Icon,
+        NavLink,
+        Dropdown,
+        DropdownToggle,
+        DropdownMenu,
+        DropdownItem,
+    } from "sveltestrap";
+
+    export let clusters; // array of names
+    export let links; // array of nav links
+</script>
+
+{#each links as item}
+    {#if !item.perCluster}
+        <NavLink href={item.href} active={window.location.pathname == item.href}
+            ><Icon name={item.icon} /> {item.title}</NavLink
+        >
+    {:else}
+        <Dropdown nav inNavbar>
+            <DropdownToggle nav caret>
+                <Icon name={item.icon} />
+                {item.title}
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+                {#each clusters as cluster}
+                    <DropdownItem
+                        href={item.href + cluster.name}
+                        active={window.location.pathname ==
+                            item.href + cluster.name}
+                    >
+                        {cluster.name}
+                    </DropdownItem>
+                {/each}
+            </DropdownMenu>
+        </Dropdown>
+    {/if}
+{/each}

From 69b3f767f66d0c39664c708f9e4ff759604ce26a Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Thu, 24 Aug 2023 09:38:12 +0200
Subject: [PATCH 3/7] Make menu flat if collapsed

---
 web/frontend/src/Header.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index eec8beb..abef959 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -9,12 +9,10 @@
         NavbarBrand,
         Nav,
         NavItem,
-        NavLink,
         NavbarToggler,
         Dropdown,
         DropdownToggle,
         DropdownMenu,
-        DropdownItem,
         InputGroupText,
     } from "sveltestrap";
     import NavbarLinks from "./NavbarLinks.svelte";
@@ -118,7 +116,7 @@
         on:update={({ detail }) => (isOpen = detail.isOpen)}
     >
         <Nav navbar>
-            {#if screenSize > 1500}
+            {#if screenSize > 1500 || screenSize < 576}
                 <NavbarLinks
                     {clusters}
                     links={views.filter(

From 4aa9c4831f93b5411a0f64012843dc569748cc57 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Thu, 24 Aug 2023 09:49:19 +0200
Subject: [PATCH 4/7] Make columns responsive

---
 web/frontend/src/Status.root.svelte | 394 +++++++++++++++++++++-------
 1 file changed, 293 insertions(+), 101 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 244862c..3b85b7d 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -1,82 +1,182 @@
 <script>
-    import Refresher from './joblist/Refresher.svelte'
-    import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
-    import Pie, { colors } from './plots/Pie.svelte'
-    import Histogram from './plots/Histogram.svelte'
-    import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
-    import { init, convert2uplot } from './utils.js'
-    import { scaleNumbers } from './units.js'
-    import { queryStore, gql, getContextClient  } from '@urql/svelte'
+    import Refresher from "./joblist/Refresher.svelte";
+    import Roofline, { transformPerNodeData } from "./plots/Roofline.svelte";
+    import Pie, { colors } from "./plots/Pie.svelte";
+    import Histogram from "./plots/Histogram.svelte";
+    import {
+        Row,
+        Col,
+        Spinner,
+        Card,
+        CardHeader,
+        CardTitle,
+        CardBody,
+        Table,
+        Progress,
+        Icon,
+    } from "sveltestrap";
+    import { init, convert2uplot } from "./utils.js";
+    import { scaleNumbers } from "./units.js";
+    import { queryStore, gql, getContextClient } from "@urql/svelte";
 
-    const { query: initq } = init()
+    const { query: initq } = init();
 
-    export let cluster
+    export let cluster;
 
-    let plotWidths = [], colWidth1 = 0, colWidth2
-    let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
+    let plotWidths = [],
+        colWidth1 = 0,
+        colWidth2;
+    let from = new Date(Date.now() - 5 * 60 * 1000),
+        to = new Date(Date.now());
 
     const client = getContextClient();
     $: mainQuery = queryStore({
         client: client,
-        query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
-        nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
-            host
-            subCluster
-            metrics {
-                name
-                scope
-                metric {
-                    timestep
-                    unit { base, prefix }
-                    series { data }
+        query: gql`
+            query (
+                $cluster: String!
+                $filter: [JobFilter!]!
+                $metrics: [String!]
+                $from: Time!
+                $to: Time!
+            ) {
+                nodeMetrics(
+                    cluster: $cluster
+                    metrics: $metrics
+                    from: $from
+                    to: $to
+                ) {
+                    host
+                    subCluster
+                    metrics {
+                        name
+                        scope
+                        metric {
+                            timestep
+                            unit {
+                                base
+                                prefix
+                            }
+                            series {
+                                data
+                            }
+                        }
+                    }
+                }
+
+                stats: jobsStatistics(filter: $filter) {
+                    histDuration {
+                        count
+                        value
+                    }
+                    histNumNodes {
+                        count
+                        value
+                    }
+                }
+
+                allocatedNodes(cluster: $cluster) {
+                    name
+                    count
+                }
+                topUsers: jobsCount(
+                    filter: $filter
+                    groupBy: USER
+                    weight: NODE_COUNT
+                    limit: 10
+                ) {
+                    name
+                    count
+                }
+                topProjects: jobsCount(
+                    filter: $filter
+                    groupBy: PROJECT
+                    weight: NODE_COUNT
+                    limit: 10
+                ) {
+                    name
+                    count
                 }
             }
-        }
+        `,
+        variables: {
+            cluster: cluster,
+            metrics: ["flops_any", "mem_bw"],
+            from: from.toISOString(),
+            to: to.toISOString(),
+            filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+        },
+    });
 
-        stats: jobsStatistics(filter: $filter) {
-            histDuration { count, value }
-            histNumNodes { count, value }
-        }
+    const sumUp = (data, subcluster, metric) =>
+        data.reduce(
+            (sum, node) =>
+                node.subCluster == subcluster
+                    ? sum +
+                      (node.metrics
+                          .find((m) => m.name == metric)
+                          ?.metric.series.reduce(
+                              (sum, series) =>
+                                  sum + series.data[series.data.length - 1],
+                              0
+                          ) || 0)
+                    : sum,
+            0
+        );
 
-        allocatedNodes(cluster: $cluster)                                                        { name, count }
-        topUsers:    jobsCount(filter: $filter, groupBy: USER,    weight: NODE_COUNT, limit: 10) { name, count }
-        topProjects: jobsCount(filter: $filter, groupBy: PROJECT, weight: NODE_COUNT, limit: 10) { name, count }
-    }`,
-    variables: {
-         cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
-        filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
-    }
-    })
-
-    const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
-        ? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0)
-        : sum, 0)
-
-    let allocatedNodes = {}, flopRate = {}, flopRateUnitPrefix = {}, flopRateUnitBase = {}, memBwRate = {}, memBwRateUnitPrefix = {}, memBwRateUnitBase = {}
+    let allocatedNodes = {},
+        flopRate = {},
+        flopRateUnitPrefix = {},
+        flopRateUnitBase = {},
+        memBwRate = {},
+        memBwRateUnitPrefix = {},
+        memBwRateUnitBase = {};
     $: if ($initq.data && $mainQuery.data) {
-        let subClusters = $initq.data.clusters.find(c => c.name == cluster).subClusters
+        let subClusters = $initq.data.clusters.find(
+            (c) => c.name == cluster
+        ).subClusters;
         for (let subCluster of subClusters) {
-            allocatedNodes[subCluster.name]     = $mainQuery.data.allocatedNodes.find(({ name }) => name == subCluster.name)?.count || 0
-            flopRate[subCluster.name]           = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'flops_any') * 100) / 100
-            flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix
-            flopRateUnitBase[subCluster.name]   = subCluster.flopRateSimd.unit.base
-            memBwRate[subCluster.name]          = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'mem_bw') * 100) / 100
-            memBwRateUnitPrefix[subCluster.name] = subCluster.memoryBandwidth.unit.prefix
-            memBwRateUnitBase[subCluster.name]  = subCluster.memoryBandwidth.unit.base
+            allocatedNodes[subCluster.name] =
+                $mainQuery.data.allocatedNodes.find(
+                    ({ name }) => name == subCluster.name
+                )?.count || 0;
+            flopRate[subCluster.name] =
+                Math.floor(
+                    sumUp(
+                        $mainQuery.data.nodeMetrics,
+                        subCluster.name,
+                        "flops_any"
+                    ) * 100
+                ) / 100;
+            flopRateUnitPrefix[subCluster.name] =
+                subCluster.flopRateSimd.unit.prefix;
+            flopRateUnitBase[subCluster.name] =
+                subCluster.flopRateSimd.unit.base;
+            memBwRate[subCluster.name] =
+                Math.floor(
+                    sumUp(
+                        $mainQuery.data.nodeMetrics,
+                        subCluster.name,
+                        "mem_bw"
+                    ) * 100
+                ) / 100;
+            memBwRateUnitPrefix[subCluster.name] =
+                subCluster.memoryBandwidth.unit.prefix;
+            memBwRateUnitBase[subCluster.name] =
+                subCluster.memoryBandwidth.unit.base;
         }
     }
-
 </script>
 
 <!-- Loading indicator & Refresh -->
 
 <Row>
     <Col xs="auto" style="align-self: flex-end;">
-        <h4 class="mb-0" >Current utilization of cluster "{cluster}"</h4>
+        <h4 class="mb-0">Current utilization of cluster "{cluster}"</h4>
     </Col>
     <Col xs="auto">
         {#if $initq.fetching || $mainQuery.fetching}
-            <Spinner/>
+            <Spinner />
         {:else if $initq.error}
             <Card body color="danger">{$initq.error.message}</Card>
         {:else}
@@ -84,10 +184,13 @@
         {/if}
     </Col>
     <Col xs="auto" style="margin-left: auto;">
-        <Refresher initially={120} on:reload={() => {
-            from = new Date(Date.now() - 5 * 60 * 1000)
-            to = new Date(Date.now())
-        }} />
+        <Refresher
+            initially={120}
+            on:reload={() => {
+                from = new Date(Date.now() - 5 * 60 * 1000);
+                to = new Date(Date.now());
+            }}
+        />
     </Col>
 </Row>
 {#if $mainQuery.error}
@@ -98,43 +201,85 @@
     </Row>
 {/if}
 
-<hr>
+<hr />
 
 <!-- Gauges & Roofline per Subcluster-->
 
 {#if $initq.data && $mainQuery.data}
-    {#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i}
-        <Row cols={2} class="mb-3 justify-content-center">
-            <Col xs="4" class="px-3">
+    {#each $initq.data.clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
+        <Row class="mb-3 justify-content-center">
+            <Col md="4" class="px-3">
                 <Card class="h-auto mt-1">
                     <CardHeader>
-                        <CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
+                        <CardTitle class="mb-0"
+                            >SubCluster "{subCluster.name}"</CardTitle
+                        >
                     </CardHeader>
                     <CardBody>
                         <Table borderless>
                             <tr class="py-2">
                                 <th scope="col">Allocated Nodes</th>
-                                <td style="min-width: 100px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
-                                <td>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes} Nodes</td>
+                                <td style="min-width: 100px;"
+                                    ><div class="col">
+                                        <Progress
+                                            value={allocatedNodes[
+                                                subCluster.name
+                                            ]}
+                                            max={subCluster.numberOfNodes}
+                                        />
+                                    </div></td
+                                >
+                                <td
+                                    >{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes}
+                                    Nodes</td
+                                >
                             </tr>
                             <tr class="py-2">
-                                <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: 100px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd.value * subCluster.numberOfNodes}/></div></td>
+                                <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: 100px;"
+                                    ><div class="col">
+                                        <Progress
+                                            value={flopRate[subCluster.name]}
+                                            max={subCluster.flopRateSimd.value *
+                                                subCluster.numberOfNodes}
+                                        />
+                                    </div></td
+                                >
                                 <td>
-                                    {scaleNumbers(flopRate[subCluster.name], 
-                                                  (subCluster.flopRateSimd.value * subCluster.numberOfNodes),
-                                                  flopRateUnitPrefix[subCluster.name])
-                                    }{flopRateUnitBase[subCluster.name]} [Max]
+                                    {scaleNumbers(
+                                        flopRate[subCluster.name],
+                                        subCluster.flopRateSimd.value *
+                                            subCluster.numberOfNodes,
+                                        flopRateUnitPrefix[subCluster.name]
+                                    )}{flopRateUnitBase[subCluster.name]} [Max]
                                 </td>
                             </tr>
                             <tr class="py-2">
                                 <th scope="col">MemBw Rate</th>
-                                <td style="min-width: 100px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth.value * subCluster.numberOfNodes}/></div></td>
+                                <td style="min-width: 100px;"
+                                    ><div class="col">
+                                        <Progress
+                                            value={memBwRate[subCluster.name]}
+                                            max={subCluster.memoryBandwidth
+                                                .value *
+                                                subCluster.numberOfNodes}
+                                        />
+                                    </div></td
+                                >
                                 <td>
-                                    {scaleNumbers(memBwRate[subCluster.name],
-                                                  (subCluster.memoryBandwidth.value * subCluster.numberOfNodes), 
-                                                  memBwRateUnitPrefix[subCluster.name])
-                                    }{memBwRateUnitBase[subCluster.name]} [Max]
+                                    {scaleNumbers(
+                                        memBwRate[subCluster.name],
+                                        subCluster.memoryBandwidth.value *
+                                            subCluster.numberOfNodes,
+                                        memBwRateUnitPrefix[subCluster.name]
+                                    )}{memBwRateUnitBase[subCluster.name]} [Max]
                                 </td>
                             </tr>
                         </Table>
@@ -145,40 +290,65 @@
                 <div bind:clientWidth={plotWidths[i]}>
                     {#key $mainQuery.data.nodeMetrics}
                         <Roofline
-                            width={plotWidths[i] - 10} height={300} colorDots={true} showTime={false} cluster={subCluster}
-                            data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
+                            width={plotWidths[i] - 10}
+                            height={300}
+                            colorDots={true}
+                            showTime={false}
+                            cluster={subCluster}
+                            data={transformPerNodeData(
+                                $mainQuery.data.nodeMetrics.filter(
+                                    (data) => data.subCluster == subCluster.name
+                                )
+                            )}
+                        />
                     {/key}
                 </div>
             </Col>
         </Row>
     {/each}
 
-    <hr style="margin-top: -1em;">
+    <hr style="margin-top: -1em;" />
 
     <!-- Usage Stats as Histograms -->
 
-    <Row cols={4}>
+    <Row>
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
                 <h4 class="text-center">Top Users</h4>
                 {#key $mainQuery.data}
                     <Pie
                         size={colWidth1}
-                        sliceLabel='Jobs'
-                        quantities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
-                        entities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
-                        
+                        sliceLabel="Jobs"
+                        quantities={$mainQuery.data.topUsers
+                            .sort((a, b) => b.count - a.count)
+                            .map((tu) => tu.count)}
+                        entities={$mainQuery.data.topUsers
+                            .sort((a, b) => b.count - a.count)
+                            .map((tu) => tu.name)}
                     />
                 {/key}
             </div>
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Nodes</th></tr>
+                <tr class="mb-2"
+                    ><th>Legend</th><th>User Name</th><th>Number of Nodes</th
+                    ></tr
+                >
                 {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
-                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                        <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th>
+                        <td
+                            ><Icon
+                                name="circle-fill"
+                                style="color: {colors[i]};"
+                            /></td
+                        >
+                        <th scope="col"
+                            ><a
+                                href="/monitoring/user/{name}?cluster={cluster}&state=running"
+                                >{name}</a
+                            ></th
+                        >
                         <td>{count}</td>
                     </tr>
                 {/each}
@@ -189,38 +359,58 @@
             {#key $mainQuery.data}
                 <Pie
                     size={colWidth1}
-                    sliceLabel='Jobs'
-                    quantities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.count)}
-                    entities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.name)}
+                    sliceLabel="Jobs"
+                    quantities={$mainQuery.data.topProjects
+                        .sort((a, b) => b.count - a.count)
+                        .map((tp) => tp.count)}
+                    entities={$mainQuery.data.topProjects
+                        .sort((a, b) => b.count - a.count)
+                        .map((tp) => tp.name)}
                 />
             {/key}
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Nodes</th></tr>
+                <tr class="mb-2"
+                    ><th>Legend</th><th>Project Code</th><th>Number of Nodes</th
+                    ></tr
+                >
                 {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
-                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                        <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th>
+                        <td
+                            ><Icon
+                                name="circle-fill"
+                                style="color: {colors[i]};"
+                            /></td
+                        >
+                        <th scope="col"
+                            ><a
+                                href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq"
+                                >{name}</a
+                            ></th
+                        >
                         <td>{count}</td>
                     </tr>
                 {/each}
             </Table>
         </Col>
     </Row>
-    <hr class="my-2"/>
-    <Row cols={2}>
+    <hr class="my-2" />
+    <Row>
         <Col class="p-2">
             <div bind:clientWidth={colWidth2}>
                 {#key $mainQuery.data.stats}
                     <Histogram
-                        data={convert2uplot($mainQuery.data.stats[0].histDuration)}
+                        data={convert2uplot(
+                            $mainQuery.data.stats[0].histDuration
+                        )}
                         width={colWidth2 - 25}
                         title="Duration Distribution"
                         xlabel="Current Runtimes"
-                        xunit="Hours" 
+                        xunit="Hours"
                         ylabel="Number of Jobs"
-                        yunit="Jobs"/>
+                        yunit="Jobs"
+                    />
                 {/key}
             </div>
         </Col>
@@ -231,10 +421,12 @@
                     width={colWidth2 - 25}
                     title="Number of Nodes Distribution"
                     xlabel="Allocated Nodes"
-                    xunit="Nodes" 
+                    xunit="Nodes"
                     ylabel="Number of Jobs"
-                    yunit="Jobs"/>
+                    yunit="Jobs"
+                />
             {/key}
         </Col>
     </Row>
-{/if}
\ No newline at end of file
+{/if}
+

From 4a622aae4138e918dcbb65e5b2262da460390157 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 25 Aug 2023 09:51:33 +0200
Subject: [PATCH 5/7] fix link typo

---
 web/frontend/src/Header.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index abef959..87fa380 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -47,7 +47,7 @@
         {
             title: jobsTitle.get(authlevel),
             requiredRole: roles.user,
-            href: `/monitoring/jobs`,
+            href: `/monitoring/jobs/`,
             icon: "card-list",
             perCluster: false,
             menu: "none",

From 08bfd3edffe6fc011b235c0d321a1f29cde1c98c Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 25 Aug 2023 14:32:46 +0200
Subject: [PATCH 6/7] change: move searchbar and buttons into burger

---
 web/frontend/src/Header.svelte      |  66 ++-------------
 web/frontend/src/NavbarTools.svelte | 124 ++++++++++++++++++++++++++++
 2 files changed, 131 insertions(+), 59 deletions(-)
 create mode 100644 web/frontend/src/NavbarTools.svelte

diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index 87fa380..038d1a3 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -1,21 +1,17 @@
 <script>
     import {
         Icon,
-        Button,
-        InputGroup,
-        Input,
         Collapse,
         Navbar,
         NavbarBrand,
         Nav,
-        NavItem,
         NavbarToggler,
         Dropdown,
         DropdownToggle,
-        DropdownMenu,
-        InputGroupText,
+        DropdownMenu
     } from "sveltestrap";
     import NavbarLinks from "./NavbarLinks.svelte";
+    import NavbarTools from "./NavbarTools.svelte";
 
     export let username; // empty string if auth. is disabled, otherwise the username as string
     export let authlevel; // Integer
@@ -104,7 +100,7 @@
 </script>
 
 <svelte:window bind:innerWidth={screenSize} />
-<Navbar color="light" light expand="sm" fixed="top">
+<Navbar color="light" light expand="md" fixed="top">
     <NavbarBrand href="/">
         <img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
     </NavbarBrand>
@@ -112,11 +108,11 @@
     <Collapse
         {isOpen}
         navbar
-        expand="sm"
+        expand="md"
         on:update={({ detail }) => (isOpen = detail.isOpen)}
     >
-        <Nav navbar>
-            {#if screenSize > 1500 || screenSize < 576}
+        <Nav class="ms-auto" navbar>
+            {#if screenSize > 1500 || screenSize < 768}
                 <NavbarLinks
                     {clusters}
                     links={views.filter(
@@ -175,55 +171,7 @@
                     </Dropdown>
                 {/each}
             {/if}
+            <NavbarTools username={username} authlevel={authlevel} roles={roles} screenSize={screenSize}/>
         </Nav>
     </Collapse>
-    <Nav>
-        <NavItem>
-            <form method="GET" action="/search">
-                <InputGroup>
-                    <Input
-                        type="text"
-                        placeholder="Search 'type:<query>' ..."
-                        name="searchId"
-                    />
-                    <Button outline type="submit"><Icon name="search" /></Button
-                    >
-                    <InputGroupText
-                        style="cursor:help;"
-                        title={authlevel >= roles.support
-                            ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
-                            : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
-                        ><Icon name="info-circle" /></InputGroupText
-                    >
-                </InputGroup>
-            </form>
-        </NavItem>
-        {#if username}
-            <NavItem>
-                <form method="POST" action="/logout">
-                    <Button
-                        outline
-                        color="success"
-                        type="submit"
-                        style="margin-left: 10px;"
-                    >
-                        {#if screenSize > 1630}
-                            <Icon name="box-arrow-right" /> Logout {username}
-                        {:else}
-                            <Icon name="box-arrow-right" />
-                        {/if}
-                    </Button>
-                </form>
-            </NavItem>
-        {/if}
-        <NavItem>
-            <Button
-                outline
-                on:click={() => (window.location.href = "/config")}
-                style="margin-left: 10px;"
-            >
-                <Icon name="gear" />
-            </Button>
-        </NavItem>
-    </Nav>
 </Navbar>
diff --git a/web/frontend/src/NavbarTools.svelte b/web/frontend/src/NavbarTools.svelte
new file mode 100644
index 0000000..5655a7c
--- /dev/null
+++ b/web/frontend/src/NavbarTools.svelte
@@ -0,0 +1,124 @@
+<script>
+    import {
+        Icon,
+        NavItem,
+        InputGroup,
+        Input,
+        Button,
+        InputGroupText,
+        Container,
+        Row,
+        Col
+    } from "sveltestrap";
+
+    export let username; // empty string if auth. is disabled, otherwise the username as string
+    export let authlevel; // Integer
+    export let roles; // Role Enum-Like
+    export let screenSize // screensize
+
+</script>
+
+{#if screenSize >= 768}
+    <NavItem>
+        <form method="GET" action="/search">
+            <InputGroup>
+                <Input
+                    type="text"
+                    placeholder="Search 'type:<query>' ..."
+                    name="searchId"
+                    style="margin-left: 10px;"
+                />  <!-- bootstrap classes w/o effect -->
+                <Button outline type="submit"><Icon name="search" /></Button
+                >
+                <InputGroupText
+                    style="cursor:help;"
+                    title={authlevel >= roles.support
+                        ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
+                        : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
+                    ><Icon name="info-circle" /></InputGroupText
+                >
+            </InputGroup>
+        </form>
+    </NavItem>
+    {#if username}
+        <NavItem>
+            <form method="POST" action="/logout">
+                <Button
+                    outline
+                    color="success"
+                    type="submit"
+                    style="margin-left: 10px;"
+                >
+                    {#if screenSize > 1630}
+                        <Icon name="box-arrow-right" /> Logout {username}
+                    {:else}
+                        <Icon name="box-arrow-right" />
+                    {/if}
+                </Button>
+            </form>
+        </NavItem>
+    {/if}
+    <NavItem>
+        <Button
+            outline
+            on:click={() => (window.location.href = "/config")}
+            style="margin-left: 10px;"
+        >
+            <Icon name="gear" />
+        </Button>
+    </NavItem>
+{:else}
+    <NavItem>
+        <Container>
+            <Row cols={2}>
+                <Col xs="6">
+                    <form method="POST" action="/logout">
+                        <Button
+                            outline
+                            color="success"
+                            type="submit"
+                            size="sm"
+                            class="my-2 w-100"
+                        >
+                            <Icon name="box-arrow-right" /> Logout {username}
+                        </Button>
+                    </form>
+                </Col>
+                <Col xs="6">
+                    <Button
+                    outline
+                    on:click={() => (window.location.href = "/config")}
+                    size="sm"
+                    class="my-2 w-100"
+                >
+                    {#if authlevel >= roles.admin}
+                        <Icon name="gear" /> Admin Settings
+                    {:else}
+                        <Icon name="gear" /> Plotting Options
+                    {/if}
+                </Button>
+                </Col>
+            </Row>
+        </Container>
+    </NavItem>
+    <NavItem style="margin-left: 10px; margin-right:10px;">
+        <form method="GET" action="/search">
+            <InputGroup>
+                <Input
+                    type="text"
+                    placeholder="Search 'type:<query>' ..."
+                    name="searchId"
+                />
+                <Button outline type="submit"><Icon name="search" /></Button
+                >
+                <InputGroupText
+                    style="cursor:help;"
+                    title={authlevel >= roles.support
+                        ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
+                        : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
+                    ><Icon name="info-circle" /></InputGroupText
+                >
+            </InputGroup>
+        </form>
+    </NavItem>
+{/if}

From 1da0e3a7479ea96032a14e06bcbed80355c3baf3 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Thu, 31 Aug 2023 13:10:01 +0200
Subject: [PATCH 7/7] Reformat

---
 web/frontend/src/Status.root.svelte | 340 ++++++++++++++++++++--------
 1 file changed, 248 insertions(+), 92 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 34a8fa0..f1d8e05 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -1,30 +1,67 @@
 <script>
-    import { getContext } from 'svelte'
-    import Refresher from './joblist/Refresher.svelte'
-    import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
-    import Pie, { colors } from './plots/Pie.svelte'
-    import Histogram from './plots/Histogram.svelte'
-    import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
-    import { init, convert2uplot } from './utils.js'
-    import { scaleNumbers } from './units.js'
-    import { queryStore, gql, getContextClient, mutationStore } from '@urql/svelte'
+    import { getContext } from "svelte";
+    import Refresher from "./joblist/Refresher.svelte";
+    import Roofline, { transformPerNodeData } from "./plots/Roofline.svelte";
+    import Pie, { colors } from "./plots/Pie.svelte";
+    import Histogram from "./plots/Histogram.svelte";
+    import {
+        Row,
+        Col,
+        Spinner,
+        Card,
+        CardHeader,
+        CardTitle,
+        CardBody,
+        Table,
+        Progress,
+        Icon,
+    } from "sveltestrap";
+    import { init, convert2uplot } from "./utils.js";
+    import { scaleNumbers } from "./units.js";
+    import {
+        queryStore,
+        gql,
+        getContextClient,
+        mutationStore,
+    } from "@urql/svelte";
 
-    const { query: initq } = init()
-    const ccconfig = getContext("cc-config")
+    const { query: initq } = init();
+    const ccconfig = getContext("cc-config");
 
     export let cluster;
 
-    let plotWidths = [], colWidth1 = 0, colWidth2
-    let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
+    let plotWidths = [],
+        colWidth1 = 0,
+        colWidth2;
+    let from = new Date(Date.now() - 5 * 60 * 1000),
+        to = new Date(Date.now());
     const topOptions = [
-        {key: 'totalJobs',  label: 'Jobs'},
-        {key: 'totalNodes', label: 'Nodes'},
-        {key: 'totalCores', label: 'Cores'},
-        {key: 'totalAccs',  label: 'Accelerators'},
-    ]
+        { key: "totalJobs", label: "Jobs" },
+        { key: "totalNodes", label: "Nodes" },
+        { key: "totalCores", label: "Cores" },
+        { key: "totalAccs", label: "Accelerators" },
+    ];
 
-    let topProjectSelection = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]) || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopProjectCategory)
-    let topUserSelection    = topOptions.find((option) => option.key == ccconfig[`status_view_selectedTopUserCategory:${cluster}`])    || topOptions.find((option) => option.key == ccconfig.status_view_selectedTopUserCategory)
+    let topProjectSelection =
+        topOptions.find(
+            (option) =>
+                option.key ==
+                ccconfig[`status_view_selectedTopProjectCategory:${cluster}`]
+        ) ||
+        topOptions.find(
+            (option) =>
+                option.key == ccconfig.status_view_selectedTopProjectCategory
+        );
+    let topUserSelection =
+        topOptions.find(
+            (option) =>
+                option.key ==
+                ccconfig[`status_view_selectedTopUserCategory:${cluster}`]
+        ) ||
+        topOptions.find(
+            (option) =>
+                option.key == ccconfig.status_view_selectedTopUserCategory
+        );
 
     const client = getContextClient();
     $: mainQuery = queryStore({
@@ -61,27 +98,55 @@
                     }
                 }
 
-        stats: jobsStatistics(filter: $filter) {
-            histDuration { count, value }
-            histNumNodes { count, value }
-            histNumCores { count, value }
-            histNumAccs { count, value }
-        }
+                stats: jobsStatistics(filter: $filter) {
+                    histDuration {
+                        count
+                        value
+                    }
+                    histNumNodes {
+                        count
+                        value
+                    }
+                    histNumCores {
+                        count
+                        value
+                    }
+                    histNumAccs {
+                        count
+                        value
+                    }
+                }
 
-        allocatedNodes(cluster: $cluster) { name, count }
-    }`,
-    variables: {
-         cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
-        filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
-    }
-    })
+                allocatedNodes(cluster: $cluster) {
+                    name
+                    count
+                }
+            }
+        `,
+        variables: {
+            cluster: cluster,
+            metrics: ["flops_any", "mem_bw"],
+            from: from.toISOString(),
+            to: to.toISOString(),
+            filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+        },
+    });
 
     const paging = { itemsPerPage: 10, page: 1 }; // Top 10
     $: topUserQuery = queryStore({
         client: client,
         query: gql`
-            query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
-                topUser: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: USER) {
+            query (
+                $filter: [JobFilter!]!
+                $paging: PageRequest!
+                $sortBy: SortByAggregate!
+            ) {
+                topUser: jobsStatistics(
+                    filter: $filter
+                    page: $paging
+                    sortBy: $sortBy
+                    groupBy: USER
+                ) {
                     id
                     totalJobs
                     totalNodes
@@ -89,15 +154,28 @@
                     totalAccs
                 }
             }
-        `, 
-        variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topUserSelection.key.toUpperCase() }
-    })
+        `,
+        variables: {
+            filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+            paging,
+            sortBy: topUserSelection.key.toUpperCase(),
+        },
+    });
 
     $: topProjectQuery = queryStore({
         client: client,
         query: gql`
-            query($filter: [JobFilter!]!, $paging: PageRequest!, $sortBy: SortByAggregate!) {
-                topProjects: jobsStatistics(filter: $filter, page: $paging, sortBy: $sortBy, groupBy: PROJECT) {
+            query (
+                $filter: [JobFilter!]!
+                $paging: PageRequest!
+                $sortBy: SortByAggregate!
+            ) {
+                topProjects: jobsStatistics(
+                    filter: $filter
+                    page: $paging
+                    sortBy: $sortBy
+                    groupBy: PROJECT
+                ) {
                     id
                     totalJobs
                     totalNodes
@@ -105,13 +183,29 @@
                     totalAccs
                 }
             }
-        `, 
-        variables: { filter: [{ state: ['running'] }, { cluster: { eq: cluster } }], paging, sortBy: topProjectSelection.key.toUpperCase() }
-    })
+        `,
+        variables: {
+            filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
+            paging,
+            sortBy: topProjectSelection.key.toUpperCase(),
+        },
+    });
 
-    const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
-        ? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0)
-        : sum, 0)
+    const sumUp = (data, subcluster, metric) =>
+        data.reduce(
+            (sum, node) =>
+                node.subCluster == subcluster
+                    ? sum +
+                      (node.metrics
+                          .find((m) => m.name == metric)
+                          ?.metric.series.reduce(
+                              (sum, series) =>
+                                  sum + series.data[series.data.length - 1],
+                              0
+                          ) || 0)
+                    : sum,
+            0
+        );
 
     let allocatedNodes = {},
         flopRate = {},
@@ -164,43 +258,51 @@
                     updateConfiguration(name: $name, value: $value)
                 }
             `,
-            variables: { name, value }
+            variables: { name, value },
         });
-    }
+    };
 
     function updateTopUserConfiguration(select) {
-        if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) {
-            updateConfigurationMutation({ name: `status_view_selectedTopUserCategory:${cluster}`, value: JSON.stringify(select) })
-            .subscribe(res => {
+        if (
+            ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select
+        ) {
+            updateConfigurationMutation({
+                name: `status_view_selectedTopUserCategory:${cluster}`,
+                value: JSON.stringify(select),
+            }).subscribe((res) => {
                 if (res.fetching === false && !res.error) {
                     // console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
                 } else if (res.fetching === false && res.error) {
-                    throw res.error
+                    throw res.error;
                 }
-            })
+            });
         } else {
             // console.log('No Mutation Required: Top User')
         }
     }
 
     function updateTopProjectConfiguration(select) {
-        if (ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] != select) {
-            updateConfigurationMutation({ name: `status_view_selectedTopProjectCategory:${cluster}`, value: JSON.stringify(select) })
-            .subscribe(res => {
+        if (
+            ccconfig[`status_view_selectedTopProjectCategory:${cluster}`] !=
+            select
+        ) {
+            updateConfigurationMutation({
+                name: `status_view_selectedTopProjectCategory:${cluster}`,
+                value: JSON.stringify(select),
+            }).subscribe((res) => {
                 if (res.fetching === false && !res.error) {
                     // console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
                 } else if (res.fetching === false && res.error) {
-                    throw res.error
+                    throw res.error;
                 }
-            })
+            });
         } else {
             // console.log('No Mutation Required: Top Project')
         }
-    };
-
-    $: updateTopUserConfiguration(topUserSelection.key)
-    $: updateTopProjectConfiguration(topProjectSelection.key)
+    }
 
+    $: updateTopUserConfiguration(topUserSelection.key);
+    $: updateTopProjectConfiguration(topProjectSelection.key);
 </script>
 
 <!-- Loading indicator & Refresh -->
@@ -349,18 +451,27 @@
     <Row>
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
-                <h4 class="text-center">Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
+                <h4 class="text-center">
+                    Top Users on {cluster.charAt(0).toUpperCase() +
+                        cluster.slice(1)}
+                </h4>
                 {#key $topUserQuery.data}
                     {#if $topUserQuery.fetching}
-                        <Spinner/>
+                        <Spinner />
                     {:else if $topUserQuery.error}
-                        <Card body color="danger">{$topUserQuery.error.message}</Card>
-                    {:else}                    
+                        <Card body color="danger"
+                            >{$topUserQuery.error.message}</Card
+                        >
+                    {:else}
                         <Pie
                             size={colWidth1}
                             sliceLabel={topUserSelection.label}
-                            quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])}
-                            entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
+                            quantities={$topUserQuery.data.topUser.map(
+                                (tu) => tu[topUserSelection.key]
+                            )}
+                            entities={$topUserQuery.data.topUser.map(
+                                (tu) => tu.id
+                            )}
                         />
                     {/if}
                 {/key}
@@ -369,16 +480,22 @@
         <Col class="px-4 py-2">
             {#key $topUserQuery.data}
                 {#if $topUserQuery.fetching}
-                    <Spinner/>
+                    <Spinner />
                 {:else if $topUserQuery.error}
-                    <Card body color="danger">{$topUserQuery.error.message}</Card>
-                {:else}                    
+                    <Card body color="danger"
+                        >{$topUserQuery.error.message}</Card
+                    >
+                {:else}
                     <Table>
                         <tr class="mb-2">
                             <th>Legend</th>
                             <th>User Name</th>
-                            <th>Number of
-                                <select class="p-0" bind:value={topUserSelection}>
+                            <th
+                                >Number of
+                                <select
+                                    class="p-0"
+                                    bind:value={topUserSelection}
+                                >
                                     {#each topOptions as option}
                                         <option value={option}>
                                             {option.label}
@@ -389,8 +506,18 @@
                         </tr>
                         {#each $topUserQuery.data.topUser as tu, i}
                             <tr>
-                                <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                                <th scope="col"><a href="/monitoring/user/{tu.id}?cluster={cluster}&state=running">{tu.id}</a></th>
+                                <td
+                                    ><Icon
+                                        name="circle-fill"
+                                        style="color: {colors[i]};"
+                                    /></td
+                                >
+                                <th scope="col"
+                                    ><a
+                                        href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
+                                        >{tu.id}</a
+                                    ></th
+                                >
                                 <td>{tu[topUserSelection.key]}</td>
                             </tr>
                         {/each}
@@ -399,18 +526,27 @@
             {/key}
         </Col>
         <Col class="p-2">
-            <h4 class="text-center">Top Projects on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
+            <h4 class="text-center">
+                Top Projects on {cluster.charAt(0).toUpperCase() +
+                    cluster.slice(1)}
+            </h4>
             {#key $topProjectQuery.data}
                 {#if $topProjectQuery.fetching}
-                    <Spinner/>
+                    <Spinner />
                 {:else if $topProjectQuery.error}
-                    <Card body color="danger">{$topProjectQuery.error.message}</Card>
+                    <Card body color="danger"
+                        >{$topProjectQuery.error.message}</Card
+                    >
                 {:else}
                     <Pie
                         size={colWidth1}
                         sliceLabel={topProjectSelection.label}
-                        quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])}
-                        entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
+                        quantities={$topProjectQuery.data.topProjects.map(
+                            (tp) => tp[topProjectSelection.key]
+                        )}
+                        entities={$topProjectQuery.data.topProjects.map(
+                            (tp) => tp.id
+                        )}
                     />
                 {/if}
             {/key}
@@ -418,16 +554,22 @@
         <Col class="px-4 py-2">
             {#key $topProjectQuery.data}
                 {#if $topProjectQuery.fetching}
-                    <Spinner/>
+                    <Spinner />
                 {:else if $topProjectQuery.error}
-                    <Card body color="danger">{$topProjectQuery.error.message}</Card>
-                {:else}   
+                    <Card body color="danger"
+                        >{$topProjectQuery.error.message}</Card
+                    >
+                {:else}
                     <Table>
                         <tr class="mb-2">
                             <th>Legend</th>
                             <th>Project Code</th>
-                            <th>Number of
-                                <select class="p-0" bind:value={topProjectSelection}>
+                            <th
+                                >Number of
+                                <select
+                                    class="p-0"
+                                    bind:value={topProjectSelection}
+                                >
                                     {#each topOptions as option}
                                         <option value={option}>
                                             {option.label}
@@ -438,8 +580,18 @@
                         </tr>
                         {#each $topProjectQuery.data.topProjects as tp, i}
                             <tr>
-                                <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
-                                <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq">{tp.id}</a></th>
+                                <td
+                                    ><Icon
+                                        name="circle-fill"
+                                        style="color: {colors[i]};"
+                                    /></td
+                                >
+                                <th scope="col"
+                                    ><a
+                                        href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"
+                                        >{tp.id}</a
+                                    ></th
+                                >
                                 <td>{tp[topProjectSelection.key]}</td>
                             </tr>
                         {/each}
@@ -486,13 +638,16 @@
             <div bind:clientWidth={colWidth2}>
                 {#key $mainQuery.data.stats}
                     <Histogram
-                        data={convert2uplot($mainQuery.data.stats[0].histNumCores)}
+                        data={convert2uplot(
+                            $mainQuery.data.stats[0].histNumCores
+                        )}
                         width={colWidth2 - 25}
                         title="Number of Cores Distribution"
                         xlabel="Allocated Cores"
-                        xunit="Cores" 
+                        xunit="Cores"
                         ylabel="Number of Jobs"
-                        yunit="Jobs"/>
+                        yunit="Jobs"
+                    />
                 {/key}
             </div>
         </Col>
@@ -503,9 +658,10 @@
                     width={colWidth2 - 25}
                     title="Number of Accelerators Distribution"
                     xlabel="Allocated Accs"
-                    xunit="Accs" 
+                    xunit="Accs"
                     ylabel="Number of Jobs"
-                    yunit="Jobs"/>
+                    yunit="Jobs"
+                />
             {/key}
         </Col>
     </Row>