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

Fixes: https://tracker.ceph.com/issues/66538
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index 085733c20dbcb800a05ed469fc6dd1aae2819eb2..ff16553a036890762909acd034a7240ce5cb4fa3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/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>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index 0dcecd98442beaccb6a58ea9715b440a2c458c8a..56dc7e749a3ed851c14ec4b9f3c4fc78fd6a9a16 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/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;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
index c674cfdcf5c07c7d87b813c6965cfb2d21c48850..9bf0bde51e222fd38ad34bcc99b86b10be78bb53 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.spec.ts
+++ b/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]
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
index fefe1d8dab5bc8e9943334e99dab5d902d004892..55c9ab7e88dcc08e5f11565cd139cf39f330f4e3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
+++ b/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;
+  }
 }