Fixes: https://tracker.ceph.com/issues/74089

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>

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 4dbaf63f32d4292560cb399b5773f6b1ccae8a2f..faa517c768c976afffe2f4f2552c43dc67d46065 100644 (file)
--- 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>
+<div class="key-value-table">
   <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 962da03ac106eaddbc8cb4bd1e29ddc85edb30b5..d437412e042ac0a5ba14337db68ad7638f943797 100644 (file)
--- 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,3 +1,10 @@
 .pre-wrap {
   white-space: pre-wrap;
 }
+
+.key-value-table .cds--data-table td {
+  max-width: 16rem;
+  overflow-wrap: break-word;
+  white-space: normal;
+  text-overflow: unset;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
index e40ad1134882c945da2681262f76b1dff3db274d..5e9c59e23d21591ed8bff7f2cc81118d014995a3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
@@ -6,7 +6,8 @@ import {
   OnInit,
   Output,
   TemplateRef,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
 import _ from 'lodash';
@@ -32,7 +33,8 @@ interface KeyValueItem {
 @Component({
   selector: 'cd-table-key-value',
   templateUrl: './table-key-value.component.html',
-  styleUrls: ['./table-key-value.component.scss']
+  styleUrls: ['./table-key-value.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class TableKeyValueComponent implements OnInit, OnChanges {
   @ViewChild(TableComponent, { static: true })