From fec5cab6ddc91bc0de9ef4df3a3ad6c5fd9c95d4 Mon Sep 17 00:00:00 2001
From: Abhishek Desai <abhishek.desai1@ibm.com>
Date: Sat, 26 Jul 2025 00:02:44 +0530
Subject: [PATCH] mgr/dashboard: Made grafana iframe scrollable and height
 consistent Fixes : https://tracker.ceph.com/issues/72044

Signed-off-by: Abhishek Desai <abhishek.desai1@ibm.com>
(cherry picked from commit 64361708338a8cf97de7f7d4f2768c109a50c82f)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
	src/pybind/mgr/dashboard/frontend/src/styles.scss
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
---
 .../cephfs-list/cephfs-list.component.html    |  2 +-
 .../cephfs-tabs/cephfs-tabs.component.html    |  3 ++-
 .../host-details/host-details.component.html  |  2 +-
 .../osd-details/osd-details.component.html    |  1 +
 .../osd/osd-list/osd-list.component.html      |  2 +-
 .../upgrade-progress.component.html           |  2 +-
 .../cluster/upgrade/upgrade.component.html    |  3 +--
 .../pool/pool-list/pool-list.component.html   |  2 +-
 .../rgw-bucket-details.component.html         |  2 +-
 .../rgw-bucket-details.component.scss         |  6 -----
 .../rgw-daemon-list.component.html            |  2 +-
 .../rgw-topic-details.component.html          |  2 +-
 .../smb-overview/smb-overview.component.html  |  2 +-
 .../workbench-layout.component.scss           |  1 -
 .../components/grafana/grafana.component.html |  2 +-
 .../components/grafana/grafana.component.scss |  8 +++++-
 .../components/grafana/grafana.component.ts   |  5 +++-
 .../table-key-value.component.html            |  2 +-
 .../table-key-value.component.scss            |  5 ----
 .../datatable/table/table.component.html      | 15 ++++++++---
 .../datatable/table/table.component.scss      | 26 +++++++++++++++++++
 .../shared/datatable/table/table.component.ts |  6 +++++
 22 files changed, 70 insertions(+), 31 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
index 8894f8cc5c14..55688f9240b6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
@@ -61,7 +61,7 @@
     [type]="'metrics'"
     uid="718Bruins"
     *ngIf="permissions.grafana.read"
-    grafanaStyle="two"
+    grafanaStyle="three"
   >
   </cd-grafana>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
index be2555e6a46e..045106ff6249 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
@@ -88,7 +88,8 @@
           [grafanaPath]="'ceph-filesystem-overview?var-name=' + details.name"
           [type]="'metrics'"
           uid="718Bruins"
-          grafanaStyle="one"
+          grafanaStyle="five"
+          scrollable="no"
         >
         </cd-grafana>
       </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
index 386d5b3c99b8..a1d91928d1b8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
@@ -39,7 +39,7 @@
                     [grafanaPath]="'host-details?var-ceph_hosts=' + selectedHostname"
                     [type]="'metrics'"
                     uid="rtOg0AiWz"
-                    grafanaStyle="four">
+                    grafanaStyle="five">
         </cd-grafana>
       </ng-template>
     </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
index 2b73a710ac34..49f7317348b6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
@@ -62,6 +62,7 @@
                     [grafanaPath]="'osd-device-details?var-osd=osd.' + osd['id']"
                     [type]="'metrics'"
                     uid="CrAHE0iZz"
+                    scrollable="no"
                     grafanaStyle="three">
         </cd-grafana>
       </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index a56877512f99..7a7fc9b01e80 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -50,7 +50,7 @@
                   [grafanaPath]="'osd-overview?'"
                   [type]="'metrics'"
                   uid="lo02I1Aiz"
-                  grafanaStyle="four">
+                  grafanaStyle="three">
       </cd-grafana>
     </ng-template>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade-progress/upgrade-progress.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade-progress/upgrade-progress.component.html
index c561594e23b1..162d031aedea 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade-progress/upgrade-progress.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade-progress/upgrade-progress.component.html
@@ -43,4 +43,4 @@
            [showFilterTools]="false"
            [showDownloadCopyButton]="false"
            defaultTab="cluster-logs"
-           [scrollable]="true"></cd-logs>
+           ></cd-logs>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
index 93069b30a7b9..5f8fdb06578f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
@@ -128,8 +128,7 @@
              [showNavLinks]="false"
              [showFilterTools]="false"
              [showDownloadCopyButton]="false"
-             defaultTab="cluster-logs"
-             [scrollable]="true"></cd-logs>
+             defaultTab="cluster-logs"></cd-logs>
 
 
     <ng-template #upgradeStatusTpl>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
index b5645eee5612..07b15e42f8be 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
@@ -42,7 +42,7 @@
                   [grafanaPath]="'ceph-pools-overview?'"
                   [type]="'metrics'"
                   uid="z99hzWtmk"
-                  grafanaStyle="two">
+                  grafanaStyle="three">
       </cd-grafana>
     </ng-template>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
index 538436fb3df7..3c51747db8e1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
@@ -136,7 +136,7 @@
       <a ngbNavLink
          i18n>Policies</a>
       <ng-template ngbNavContent>
-        <div class="table-scroller">
+        <div>
           <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
             <tbody>
               <tr>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.scss
index 4412732255e2..08d2559ef26f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.scss
@@ -8,12 +8,6 @@ table td {
   word-wrap: break-word;
 }
 
-.table-scroller {
-  height: 100%;
-  max-height: 50vh;
-  overflow: auto;
-}
-
 .spacing-left {
   margin-left: layout.$spacing-03;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
index 14045669a33a..ede4deb91eb8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
@@ -28,7 +28,7 @@
                   [grafanaPath]="'rgw-overview?'"
                   [type]="'metrics'"
                   uid="WAkugZpiz"
-                  grafanaStyle="two">
+                  grafanaStyle="three">
       </cd-grafana>
     </ng-template>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-details/rgw-topic-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-details/rgw-topic-details.component.html
index dec284392da5..9f583d3a54ad 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-details/rgw-topic-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-topic-details/rgw-topic-details.component.html
@@ -61,7 +61,7 @@
     </cds-tab>
     <cds-tab heading="Policies"
              i18n-heading>
-      <div class="table-scroller">
+      <div>
         <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md">
           <tbody>
             <tr>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-overview/smb-overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-overview/smb-overview.component.html
index e2212cb57675..06cd3609438c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-overview/smb-overview.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-overview/smb-overview.component.html
@@ -6,5 +6,5 @@
   [grafanaPath]="'smb-overview?'"
   [type]="'metrics'"
   uid="feem6ehrmi2o0b"
-  grafanaStyle="two">
+  grafanaStyle="three">
 </cd-grafana>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
index e212837ca402..d037420b0a77 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
@@ -9,7 +9,6 @@
 
 .container-fluid {
   overflow: auto;
-  padding-bottom: 100px;
   padding-top: 48px;
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
index 4f6b6c119f2c..b5db61b6973e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -74,7 +74,7 @@
                 class="grafana"
                 [ngClass]="panelStyle"
                 frameborder="0"
-                scrolling="no"
+                [(scrolling)]="scrollable"
                 [title]="title"
                 i18n-title>
         </iframe>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss
index 7b43a460ff42..5990cc234394 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.scss
@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .grafana {
   height: 600px;
   width: 100%;
@@ -5,7 +7,7 @@
 }
 
 .grafana_one {
-  height: 400px;
+  height: layout.rem(450px);
 }
 
 .grafana_two {
@@ -20,6 +22,10 @@
   height: 1160px;
 }
 
+.grafana_five {
+  height: layout.rem(1600px);
+}
+
 .timepicker {
   label {
     font-weight: 700;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
index d3c7012bcbb3..acbcde87e82b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
@@ -39,6 +39,8 @@ export class GrafanaComponent implements OnInit, OnChanges {
   uid: string;
   @Input()
   title: string;
+  @Input()
+  scrollable: string = 'yes';
 
   constructor(private sanitizer: DomSanitizer, private settingsService: SettingsService) {
     this.grafanaTimes = [
@@ -155,7 +157,8 @@ export class GrafanaComponent implements OnInit, OnChanges {
       one: 'grafana_one',
       two: 'grafana_two',
       three: 'grafana_three',
-      four: 'grafana_four'
+      four: 'grafana_four',
+      five: 'grafana_five'
     };
 
     this.datasource = this.type === 'metrics' ? 'Dashboard1' : 'Loki';
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
index 72ca4e47990e..4dc625459d5b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
@@ -1,4 +1,4 @@
-<div class="table-scroller">
+<div>
   <cd-table #table
             [data]="tableData || []"
             [columns]="columns"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.scss
index f8d8745d44df..e69de29bb2d1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.scss
@@ -1,5 +0,0 @@
-.table-scroller {
-  height: 100%;
-  max-height: 40vh;
-  overflow: auto;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 971bd96a4abf..321d99040229 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -229,11 +229,20 @@
 
 <ng-template #rowDetailTpl
              let-row="data">
-  <div *ngIf="row[identifier] === expanded?.[identifier]"
-       (mouseenter)="onRowDetailHover($event)"
-       data-testid="datatable-row-detail">
+  @if (row[identifier] === expanded?.[identifier] && !scrollable) {
+  <div
+    (mouseenter)="onRowDetailHover($event)"
+    data-testid="datatable-row-detail">
     <ng-template [ngTemplateOutlet]="rowDetail.template"></ng-template>
   </div>
+  } @else if (row[identifier] === expanded?.[identifier] && scrollable) {
+  <div
+    (mouseenter)="onRowDetailHover($event)"
+    data-testid="datatable-row-detail"
+    class="scrollable-expanded-row">
+    <ng-template [ngTemplateOutlet]="rowDetail.template"></ng-template>
+  </div>
+  }
 </ng-template>
 
 <ng-template #defaultValueTpl
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 7d10e491e246..c93fe19d84c9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -1,5 +1,9 @@
 @use './src/styles/vendor/variables' as vv;
 @use './src/styles/defaults/mixins';
+@use '@carbon/layout';
+
+$scrollbar-thumb-color: rgba(128, 128, 128, 0.3);
+$scrollbar-track-color: transparent;
 
 @mixin row-details-icon {
   color: vv.$gray-900;
@@ -76,3 +80,25 @@
 ::ng-deep div.cds--batch-summary {
   background-color: vv.$primary;
 }
+
+.scrollable-expanded-row {
+  max-height: 40vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+  scrollbar-width: thin;
+}
+
+.scrollable-expanded-row::-webkit-scrollbar {
+  height: layout.rem(6px);
+  width: layout.rem(6px);
+}
+
+.scrollable-expanded-row::-webkit-scrollbar-thumb {
+  background-color: $scrollbar-thumb-color; /* Grey with transparency */
+  border-radius: layout.rem(10px);
+}
+
+.scrollable-expanded-row::-webkit-scrollbar-track {
+  background: transparent;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 1e372643810c..2032949fe9ea 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -205,6 +205,12 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
   @Input()
   theme: string;
 
+  /**
+   * Use to make the expandable row scrollable with max-height
+   */
+  @Input()
+  scrollable: boolean = true;
+
   /**
    * Should be a function to update the input data if undefined nothing will be triggered
    *
-- 
2.47.3