add managed projects, update navbar layout, fix small issues

ClusterCockpit · Oct 9, 2024 · bc434ee · bc434ee
1 parent f4102b9
commit bc434ee
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 50 deletions.
diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
@@ -40,13 +40,17 @@
   usersTitle.set(3, "Managed Users");
   usersTitle.set(4, "Users");
   usersTitle.set(5, "Users");
+  const projectsTitle = new Map();
+  projectsTitle.set(3, "Managed Projects");
+  projectsTitle.set(4, "Projects");
+  projectsTitle.set(5, "Projects");
 
   const views = [
     {
       title: "My Jobs",
       requiredRole: roles.user,
       href: `/monitoring/user/${username}`,
-      icon: "bar-chart-line-fill",
+      icon: "bar-chart-line",
       perCluster: false,
       listOptions: false,
       menu: "none",
@@ -58,61 +62,61 @@
       icon: "card-list",
       perCluster: false,
       listOptions: false,
-      menu: "none",
+      menu: "Jobs",
+    },
+    {
+      title: "Tags",
+      requiredRole: roles.user,
+      href: "/monitoring/tags/",
+      icon: "tags",
+      perCluster: false,
+      listOptions: false,
+      menu: "Jobs",
     },
     {
       title: usersTitle.get(authlevel),
       requiredRole: roles.manager,
       href: "/monitoring/users/",
-      icon: "people-fill",
+      icon: "people",
       perCluster: true,
       listOptions: true,
       menu: "Groups",
     },
     {
-      title: "Projects",
-      requiredRole: roles.support,
+      title: projectsTitle.get(authlevel),
+      requiredRole: roles.manager,
       href: "/monitoring/projects/",
-      icon: "folder",
+      icon: "journals",
       perCluster: true,
       listOptions: true,
       menu: "Groups",
     },
-    {
-      title: "Tags",
-      requiredRole: roles.user,
-      href: "/monitoring/tags/",
-      icon: "tags",
-      perCluster: false,
-      listOptions: false,
-      menu: "Groups",
-    },
-    {
-      title: "Analysis",
-      requiredRole: roles.support,
-      href: "/monitoring/analysis/",
-      icon: "graph-up",
-      perCluster: true,
-      listOptions: false,
-      menu: "Stats",
-    },
     {
       title: "Nodes",
       requiredRole: roles.admin,
       href: "/monitoring/systems/",
-      icon: "cpu",
+      icon: "hdd-rack",
       perCluster: true,
       listOptions: false,
-      menu: "Groups",
+      menu: "Info",
     },
     {
       title: "Status",
       requiredRole: roles.admin,
       href: "/monitoring/status/",
-      icon: "cpu",
+      icon: "clipboard-data",
+      perCluster: true,
+      listOptions: false,
+      menu: "Info",
+    },
+    {
+      title: "Analysis",
+      requiredRole: roles.support,
+      href: "/monitoring/analysis/",
+      icon: "graph-up",
       perCluster: true,
       listOptions: false,
-      menu: "Stats",
+      menu: "Info",
     },
   ];
 </script>
@@ -140,46 +144,82 @@
         <NavbarLinks
           {clusters}
           links={views.filter(
-            (item) => item.requiredRole <= authlevel && item.menu != "Stats",
+            (item) => item.requiredRole <= authlevel && item.menu != "Info",
           )}
         />
-        <Dropdown nav>
-          <DropdownToggle nav caret>
-            <Icon name="graph-up" />
-            Stats
-          </DropdownToggle>
-          <DropdownMenu class="dropdown-menu-lg-end">
-            <NavbarLinks
-              {clusters}
-              links={views.filter(
-                (item) =>
-                  item.requiredRole <= authlevel && item.menu == "Stats",
-              )}
-            />
-          </DropdownMenu>
-        </Dropdown>
+        {#if authlevel >= 4} <!-- Support+ Info Menu-->
+          <Dropdown nav>
+            <DropdownToggle nav caret>
+              <Icon name="graph-up" />
+              Info
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+              <NavbarLinks
+                {clusters}
+                direction="right"
+                links={views.filter(
+                  (item) =>
+                    item.requiredRole <= authlevel && item.menu == "Info",
+                )}
+              />
+            </DropdownMenu>
+          </Dropdown>
+        {/if}
       {:else}
         <NavbarLinks
           {clusters}
           links={views.filter(
             (item) => item.requiredRole <= authlevel && item.menu == "none",
           )}
         />
-        {#each Array("Groups", "Stats") as menu}
+        {#if authlevel >= 2} <!-- User+ Job Menu -->
+          <Dropdown nav>
+            <DropdownToggle nav caret>
+              Jobs
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+              <NavbarLinks
+                {clusters}
+                direction="right"
+                links={views.filter(
+                  (item) => item.requiredRole <= authlevel && item.menu == 'Jobs',
+                )}
+              />
+            </DropdownMenu>
+          </Dropdown>
+        {/if}
+        {#if authlevel >= 3} <!-- Manager+ Group Lists Menu-->
+          <Dropdown nav>
+            <DropdownToggle nav caret>
+              Groups
+            </DropdownToggle>
+            <DropdownMenu class="dropdown-menu-lg-end">
+              <NavbarLinks
+                {clusters}
+                direction="right"
+                links={views.filter(
+                  (item) => item.requiredRole <= authlevel && item.menu == 'Groups',
+                )}
+              />
+            </DropdownMenu>
+          </Dropdown>
+        {/if}
+        {#if authlevel >= 4} <!-- Support+ Info Menu-->
           <Dropdown nav>
             <DropdownToggle nav caret>
-              {menu}
+              Info
             </DropdownToggle>
             <DropdownMenu class="dropdown-menu-lg-end">
               <NavbarLinks
                 {clusters}
+                direction="right"
                 links={views.filter(
-                  (item) => item.requiredRole <= authlevel && item.menu == menu,
+                  (item) => item.requiredRole <= authlevel && item.menu == 'Info',
                 )}
               />
             </DropdownMenu>
           </Dropdown>
-        {/each}
+        {/if}
       {/if}
     </Nav>
     <NavbarTools {username} {authlevel} {roles} {screenSize} />

diff --git a/web/frontend/src/header/NavbarLinks.svelte b/web/frontend/src/header/NavbarLinks.svelte
@@ -4,6 +4,7 @@
     Properties:
     - `clusters [String]`: List of cluster names
     - `links [Object]`: Pre-filtered link objects based on user auth
+    - `direction String?`: The direcion of the drop-down menue [default: down]
  -->
 
 <script>
@@ -18,11 +19,12 @@
 
   export let clusters;
   export let links;
+  export let direction = "down";
 </script>
 
 {#each links as item}
   {#if item.listOptions}
-    <Dropdown nav inNavbar>
+    <Dropdown nav inNavbar {direction}>
       <DropdownToggle nav caret>
         <Icon name={item.icon} />
         {item.title}
@@ -60,7 +62,7 @@
       ><Icon name={item.icon} /> {item.title}</NavLink
     >
   {:else}
-    <Dropdown nav inNavbar>
+    <Dropdown nav inNavbar {direction}>
       <DropdownToggle nav caret>
         <Icon name={item.icon} />
         {item.title}