From: Naman Munet <naman.munet@ibm.com>
Date: Wed, 21 Jan 2026 11:50:15 +0000 (+0530)
Subject: mgr/dashboard: side-panel enhancements
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=4c4460a96af38edd6ac5f119b2f288bbd45cbd09;p=ceph.git

mgr/dashboard: side-panel enhancements

fixes: https://tracker.ceph.com/issues/74486

Signed-off-by: Naman Munet <naman.munet@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 947c80aece04..07d3ccea59c3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -43,7 +43,8 @@ import {
   InlineLoadingModule,
   TagModule,
   LinkModule,
-  LayerModule
+  LayerModule,
+  ThemeModule
 } from 'carbon-components-angular';
 import EditIcon from '@carbon/icons/es/edit/20';
 import CodeIcon from '@carbon/icons/es/code/16';
@@ -151,7 +152,8 @@ import { ProductiveCardComponent } from './productive-card/productive-card.compo
     InlineLoadingModule,
     TagModule,
     LinkModule,
-    LayerModule
+    LayerModule,
+    ThemeModule
   ],
   declarations: [
     SparklineComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
index 3d5ea03cd1dd..74bc95dd5cc0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
@@ -3,7 +3,9 @@
      *ngIf="expanded && overlay"></div>
 
 <cds-panel [expanded]="expanded"
-           [attr.panel-size]="size">
+           [attr.panel-size]="size"
+           [cdsLayer]="layer"
+           [cdsTheme]="theme">
   <div>
     <cds-icon-button kind="ghost"
                      class="float-end"
@@ -11,7 +13,7 @@
                      (click)="close()">
       <svg cdsIcon="close"></svg>
     </cds-icon-button>
-    <div class="panel-header"
+    <div class="panel-header cds--type-heading-03"
          *ngIf="headerText">
     {{ headerText }}
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
index 62cd221977ac..f3c44c62d719 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
@@ -15,8 +15,15 @@
     inline-size: 40rem;
   }
 
+  &[panel-size='xl'] .cds--header-panel--expanded {
+    inline-size: 60rem;
+  }
+
+  &[panel-size='2xl'] .cds--header-panel--expanded {
+    inline-size: 80rem;
+  }
+
   .cds--header-panel--expanded {
-    background-color: vv.$white;
     max-inline-size: 100%;
     overflow: hidden;
     display: grid;
@@ -24,12 +31,12 @@
   }
 
   .panel-header {
-    padding: layout.$spacing-04 layout.$spacing-04 0 layout.$spacing-04;
+    padding: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
   }
 
   .panel-content {
-    overflow: auto;
-    padding: 0 layout.$spacing-04 0 layout.$spacing-04;
+    overflow-x: hidden;
+    padding: 0 layout.$spacing-05 0 layout.$spacing-05;
   }
 
   .panel-footer {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
index bd6c3d5f894b..19661afad3cd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
@@ -10,7 +10,9 @@ export class SidePanelComponent {
   @Input() expanded = false;
   @Input() headerText = '';
   @Input() overlay = true;
-  @Input() size: 'sm' | 'md' | 'lg' = 'lg';
+  @Input() size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'lg';
+  @Input() layer: number;
+  @Input() theme: string;
 
   @Output() closed = new EventEmitter<void>();