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 091855356c5e27baed9718a1779ecd1edbe2019c..b5a3683a92a3404d41e08e0c6237217a1a53e1c5 100644 (file)
--- 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 ab8823276a1197587164d6976f7ebf54d64faccf..32be91ac74461c37f2627443e02ec9e52bc5b3d6 100644 (file)
--- 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,
                        },
                        {