Side-navigation improvements

components/nav/Group.vue

@@ -64,6 +64,10 @@ export default {
       return this.group.children?.length > 0;
     },
 
+    onlyHasOverview() {
+      return this.group.children && this.group.children.length === 1 && this.group.children[0].overview;
+    },
+
     isOverview() {
       if (this.group.children && this.group.children.length > 0) {
         const grp = this.group.children[0];
@@ -162,7 +166,7 @@ export default {
       <slot name="header">
         <span v-html="group.labelDisplay || group.label" />
       </slot>
-      <i v-if="canCollapse && !isActiveGroup" class="icon toggle" :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}" @click="toggle($event, true)" />
+      <i v-if="!onlyHasOverview && canCollapse && !isActiveGroup" class="icon toggle" :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}" @click="toggle($event, true)" />
     </div>
     <ul v-if="showExpanded" class="list-unstyled body" v-bind="$attrs">
       <template v-for="(child, idx) in group[childrenKey]">

config/product/apps.js

@@ -25,7 +25,7 @@ export function init(store) {
 
   product({
     removable:   false,
-    weight:      2,
+    weight:      97,
     ifHaveGroup: 'catalog.cattle.io',
     icon:        'marketplace',
   });

config/product/explorer.js

@@ -79,9 +79,9 @@ export function init(store) {
 
   weightGroup('cluster', 99, true);
   weightGroup('workload', 98, true);
-  weightGroup('serviceDiscovery', 97, true);
-  weightGroup('storage', 96, true);
-  weightGroup('rbac', 95, true);
+  weightGroup('serviceDiscovery', 96, true);
+  weightGroup('storage', 95, true);
+  weightGroup('rbac', 94, true);
   weightType(POD, -1, true);
 
   for (const key in WORKLOAD_TYPES) {

config/product/gatekeeper.js

@@ -80,7 +80,8 @@ export function init(store) {
     name:       'gatekeeper-overview',
     route:      { name: 'c-cluster-gatekeeper' },
     exact:      true,
-    weight:     3
+    weight:     3,
+    overview:   true,
   });
 
   headers(GATEKEEPER.CONSTRAINT_TEMPLATE, [

config/product/istio.js

@@ -26,6 +26,7 @@ export function init(store) {
     weight:      100,
     route:       { name: 'c-cluster-istio' },
     exact:       true,
+    overview:    true,
   });
 
   basicType('istio-overview');

config/product/logging.js

@@ -19,6 +19,7 @@ export function init(store) {
   product({
     ifHaveGroup: /^(.*\.)?logging\.banzaicloud\.io$/,
     icon:        'logging',
+    weight:      89,
   });
 
   basicType([
@@ -36,6 +37,7 @@ export function init(store) {
     name:       'logging-overview',
     route:      { name: 'c-cluster-logging' },
     exact:       true,
+    overview:    true,
   });
 
   spoofedType({

config/product/longhorn.js

@@ -30,7 +30,8 @@ export function init(store) {
     name:       'longhorn-overview',
     weight:     105,
     route:      { name: 'c-cluster-longhorn' },
-    exact:      true
+    exact:      true,
+    overview:   true,
   });
 
   basicType('longhorn-overview');

config/product/monitoring.js

@@ -33,7 +33,8 @@ export function init(store) {
 
   product({
     ifHaveType: PODMONITOR, // possible RBAC issue here if mon turned on but user doesn't have view/read roles on pod monitors
-    icon:       'monitoring'
+    icon:       'monitoring',
+    weight:     90,
   });
 
   virtualType({

layouts/default.vue

@@ -168,6 +168,9 @@ export default {
       const namespaceMode = this.$store.getters['namespaceMode'];
       const out = [];
       const loadProducts = this.isExplorer ? [EXPLORER] : [];
+      const productMap = this.activeProducts.reduce((acc, p) => {
+        return {...acc, [p.name]: p};
+      }, {});
 
       if ( this.isExplorer ) {
         for ( const product of this.activeProducts ) {
@@ -202,6 +205,7 @@ export default {
               name:     productId,
               label:    this.$store.getters['i18n/withFallback'](`product.${ productId }`, null, ucFirst(productId)),
               children: [...(root?.children || []), ...other],
+              weight:   productMap[productId]?.weight || 0,
             };
 
             addObject(out, group);
@@ -209,6 +213,7 @@ export default {
         }
       }
 
+      out.sort((a, b) => { return b.weight - a.weight; });
       replaceWith(this.groups, ...out);
     },