mgr/dashboard: telemetry banner causes UI freeze on initial load

Fixes: https://tracker.ceph.com/issues/75761
Signed-off-by: Naman Munet <naman.munet@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html
index 81b83cdc5127e13a3418e71054baf101b05219bb..121c9781dd6db05d545800d2ea6e9afe579e9d0c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard/dashboard.component.html
@@ -1,11 +1,14 @@
 <main aria-label="Overview">
-@let features = enabledFeature$ | async;
-@if (features?.dashboard) {
+@if (enabledFeature$ | async; as features) {
+@if (features.dashboard) {
 <!-- OLD OVERVIEW -->
 <cd-dashboard-v3 data-testid="cd-dashboard-v3"></cd-dashboard-v3>
 } @else {
 <!-- NEWER OVERVIEW -->
+<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
 <cd-telemetry-notification></cd-telemetry-notification>
+<cd-motd></cd-motd>
 <cd-overview data-testid="cd-overview"></cd-overview>
 }
+}
 </main>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html
index 448966fc496445ef33ef76091654728ec08b92e8..aeafc41c44708c93296d706ae5c23541495134f9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.html
@@ -7,12 +7,13 @@
       <!-- ************************ -->
       <div class="cd-alert-container"
            [ngClass]="{'ms-4 me-4': (router.url == '/overview' || router.url == '/dashboard_3' || router.url == '/multi-cluster/overview'), 'm-3': (router.url == '/rgw/overview')}">
+        @if (enabledFeature$ | async; as features) {
         <cd-pwd-expiration-notification></cd-pwd-expiration-notification>
-        @let features = enabledFeature$ | async;
-        @if (features?.dashboard) {
+        <cd-motd></cd-motd>
+        @if (features.dashboard) {
         <cd-telemetry-notification></cd-telemetry-notification>
         }
-        <cd-motd></cd-motd>
+        }
       </div>
       <cd-context></cd-context>
       <div class="breadcrumbs--padding">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts
index a496b1f2332a711d6341a4581d921ca1b04b577b..0fa9cd135b63efbeaba991d24641775bb196681b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 import _ from 'lodash';
 
@@ -18,6 +19,7 @@ import { TelemetryNotificationService } from '~/app/shared/services/telemetry-no
 export class TelemetryNotificationComponent implements OnInit, OnDestroy {
   displayNotification = false;
   notificationSeverity = 'info';
+  private visibilitySubscription: Subscription;
 
   constructor(
     private mgrModuleService: MgrModuleService,
@@ -28,9 +30,11 @@ export class TelemetryNotificationComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.telemetryNotificationService.update.subscribe((visible: boolean) => {
-      this.displayNotification = visible;
-    });
+    this.visibilitySubscription = this.telemetryNotificationService.update.subscribe(
+      (visible: boolean) => {
+        this.displayNotification = visible;
+      }
+    );
 
     if (!this.isNotificationHidden()) {
       const configOptPermissions = this.authStorageService.getPermissions().configOpt;
@@ -46,6 +50,7 @@ export class TelemetryNotificationComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.telemetryNotificationService.setVisibility(false);
+    this.visibilitySubscription?.unsubscribe();
   }
 
   isNotificationHidden(): boolean {