feat: add dropdown to user and project list navbar

ClusterCockpit · Sep 2, 2024 · 906bac9 · 906bac9
1 parent 4ec1de6
commit 906bac9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/web/frontend/src/Header.svelte b/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,22 +57,25 @@
       href: `/monitoring/jobs/`,
       icon: "card-list",
       perCluster: false,
+      listOptions: false,
       menu: "none",
     },
     {
       title: usersTitle.get(authlevel),
       requiredRole: roles.manager,
       href: "/monitoring/users/",
       icon: "people-fill",
-      perCluster: false,
+      perCluster: true,
+      listOptions: true,
       menu: "Groups",
     },
     {
       title: "Projects",
       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",
     },
   ];

diff --git a/web/frontend/src/header/NavbarLinks.svelte b/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
     >