From: Naman Munet <naman.munet@ibm.com>
Date: Fri, 27 Mar 2026 14:26:42 +0000 (+0530)
Subject: mgr/dashboard: telemetry banner causes UI freeze on initial load
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=84ade9a02cee4234557eceefb7880b17c35b1491;p=ceph.git

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 81b83cdc5127..121c9781dd6d 100644
--- 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 448966fc4964..aeafc41c4470 100644
--- 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 a496b1f2332a..0fa9cd135b63 100644
--- 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 {