feat: add dropdown to user and project list navbar

web/frontend/src/Header.svelte

@@ -48,6 +48,7 @@
       href: `/monitoring/user/${username}`,
       icon: "bar-chart-line-fill",
       perCluster: false,
+      listOptions: false,
       menu: "none",
     },
     {
@@ -56,6 +57,7 @@
       href: `/monitoring/jobs/`,
       icon: "card-list",
       perCluster: false,
+      listOptions: false,
       menu: "none",
     },
     {
@@ -63,7 +65,8 @@
       requiredRole: roles.manager,
       href: "/monitoring/users/",
       icon: "people-fill",
-      perCluster: false,
+      perCluster: true,
+      listOptions: true,
       menu: "Groups",
     },
     {
@@ -71,7 +74,8 @@
       requiredRole: roles.support,
       href: "/monitoring/projects/",
       icon: "folder",
-      perCluster: false,
+      perCluster: true,
+      listOptions: true,
       menu: "Groups",
     },
     {
@@ -80,6 +84,7 @@
       href: "/monitoring/tags/",
       icon: "tags",
       perCluster: false,
+      listOptions: false,
       menu: "Groups",
     },
     {
@@ -88,6 +93,7 @@
       href: "/monitoring/analysis/",
       icon: "graph-up",
       perCluster: true,
+      listOptions: false,
       menu: "Stats",
     },
     {
@@ -96,6 +102,7 @@
       href: "/monitoring/systems/",
       icon: "cpu",
       perCluster: true,
+      listOptions: false,
       menu: "Groups",
     },
     {
@@ -104,6 +111,7 @@
       href: "/monitoring/status/",
       icon: "cpu",
       perCluster: true,
+      listOptions: false,
       menu: "Stats",
     },
   ];

web/frontend/src/header/NavbarLinks.svelte

@@ -21,7 +21,41 @@
 </script>
 
 {#each links as item}
-  {#if !item.perCluster}
+  {#if item.listOptions}
+    <Dropdown nav inNavbar>
+      <DropdownToggle nav caret>
+        <Icon name={item.icon} />
+        {item.title}
+      </DropdownToggle>
+      <DropdownMenu class="dropdown-menu-lg-end">
+        <DropdownItem
+          href={item.href}
+        >
+          All Clusters
+        </DropdownItem>
+        <DropdownItem divider />
+        {#each clusters as cluster}
+          <Dropdown nav direction="right">
+            <DropdownToggle nav caret class="dropdown-item py-1 px-2">
+              {cluster.name}
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem class="py-1 px-2"
+                href={item.href + '?cluster=' + cluster.name}
+              >
+                All Jobs
+              </DropdownItem>
+              <DropdownItem class="py-1 px-2"
+                href={item.href + '?cluster=' + cluster.name + '&state=running'}
+              >
+                Running Jobs
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        {/each}
+      </DropdownMenu>
+    </Dropdown>
+  {:else if !item.perCluster}
     <NavLink href={item.href} active={window.location.pathname == item.href}
       ><Icon name={item.icon} /> {item.title}</NavLink
     >