From: Dominik Csapak <d.csapak@proxmox.com>
Date: Thu, 7 Dec 2023 13:35:58 +0000 (+0100)
Subject: fix #5106: ui: ceph status: make column wrap the summary text on expand
X-Git-Url: https://git.proxmox.com/?p=pve-manager.git;a=commitdiff_plain;h=6e7cef49231efa0f8919ed75ffba03afb96e3c62

fix #5106: ui: ceph status: make column wrap the summary text on expand

with this the title is now completely visible when the column is
expanded, even if it's originally too narrow.

Suggested-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Tested-by: Fiona Ebner <f.ebner@proxmox.com>
 [TL: fix eslint warning for missing space after comma ]
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 09185535..b5a3683a 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -750,3 +750,7 @@ table.osds td:first-of-type {
 .pmx-tag-tooltip .proxmox-tags-full > span {
     margin: 0px;
 }
+
+.pmx-column-wrapped > div {
+    white-space: pre-wrap;
+}
diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
index ab882327..32be91ac 100644
--- a/www/manager6/ceph/Status.js
+++ b/www/manager6/ceph/Status.js
@@ -82,6 +82,16 @@ Ext.define('PVE.node.CephStatus', {
 		    stateId: 'ceph-status-warnings',
 		    viewConfig: {
 			enableTextSelection: true,
+			    listeners: {
+				collapsebody: function(rowNode, record) {
+				    record.set('expanded', false);
+				    record.commit();
+				},
+				expandbody: function(rowNode, record) {
+				    record.set('expanded', true);
+				    record.commit();
+				},
+			    },
 		    },
 		    // we load the store manually, to show an emptyText specify an empty intermediate store
 		    store: {
@@ -139,6 +149,12 @@ Ext.define('PVE.node.CephStatus', {
 			{
 			    dataIndex: 'summary',
 			    header: gettext('Summary'),
+			    renderer: function(value, metaData, record, rI, cI, store, view) {
+				if (record.get('expanded')) {
+				    metaData.tdCls = 'pmx-column-wrapped';
+				}
+				return value;
+			    },
 			    flex: 1,
 			},
 			{