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] 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>
+