Merge pull request ceph#58110 from rhcs-dashboard/bring-back-cluster-swticher

mgr/dashboard: fix (multi) cluster switcher disappearance after carbon UI shell

Reviewed-by: Aashish Sharma <[email protected]>
Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: ivoalmeida <NOT@FOUND>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html

@@ -12,6 +12,21 @@
     <cds-hamburger [active]="showMenuSidebar"
                    data-testid="main-menu-toggler"
                    (selected)="showMenuSidebar = !showMenuSidebar"></cds-hamburger>
+    <!-- ************************* -->
+    <!-- CLUSTER SWITCHER TEMPLATE -->
+    <!-- ************************* -->
+    <cds-header-navigation class="cluster-switcher"
+                           *ngIf="clustersMap?.size > 1">
+      <cds-header-menu [title]="currentClusterName">
+        <ng-container *ngFor="let cluster of clustersMap | keyvalue; trackBy:trackByFn ">
+          <cds-header-item (click)="onClusterSelection(cluster.value)"
+                           [class.disabled]="cluster.value.cluster_connection_status === 1">
+              {{ cluster.value.name }} - {{ cluster.value?.cluster_alias }} - {{ cluster.value?.user }}
+          </cds-header-item>
+        </ng-container>
+      </cds-header-menu>
+    </cds-header-navigation>
+
     <cds-header-global>
       <cds-header-navigation>
         <cd-language-selector class="d-flex"></cd-language-selector>

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss

@@ -24,6 +24,14 @@
   height: 25px;
 }
 
+cds-header-item {
+  width: 500px;
+}
+
+.cluster-switcher {
+  margin-left: 6rem;
+}
+
 ::ng-deep cd-navigation .cd-navbar-top {
   .cd-navbar-brand {
     background: vv.$secondary;

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts

@@ -24,6 +24,7 @@ import { AdministrationComponent } from '../administration/administration.compon
 import { IdentityComponent } from '../identity/identity.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { DashboardHelpComponent } from '../dashboard-help/dashboard-help.component';
+import { DialogModule, GridModule, ThemeModule, UIShellModule } from 'carbon-components-angular';
 
 function everythingPermittedExcept(disabledPermissions: string[] = []): any {
   const permissions: Permissions = new Permissions({});
@@ -71,7 +72,11 @@ describe('NavigationComponent', () => {
       ToastrModule.forRoot(),
       RouterTestingModule,
       SimplebarAngularModule,
-      NgbModule
+      NgbModule,
+      UIShellModule,
+      ThemeModule,
+      DialogModule,
+      GridModule
     ],
     providers: [AuthStorageService, SummaryService, FeatureTogglesService, PrometheusAlertService]
   });

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts

@@ -40,7 +40,13 @@ export class NavigationComponent implements OnInit, OnDestroy {
   private subs = new Subscription();
 
   clustersMap: Map<string, any> = new Map<string, any>();
-  selectedCluster: object;
+  selectedCluster: {
+    name: string;
+    cluster_alias: string;
+    user: string;
+    cluster_connection_status?: number;
+  };
+  currentClusterName: string;
 
   constructor(
     private authStorageService: AuthStorageService,
@@ -74,6 +80,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
           });
           this.selectedCluster =
             this.clustersMap.get(`${resp['current_url']}-${resp['current_user']}`) || {};
+          this.currentClusterName = `${this.selectedCluster?.name} - ${this.selectedCluster?.cluster_alias} - ${this.selectedCluster?.user}`;
         }
       })
     );
@@ -182,4 +189,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
       }
     );
   }
+
+  trackByFn(item: any) {
+    return item;
+  }
 }