From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 5499990D37 for ; Mon, 2 Oct 2023 11:00:59 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 35D8214D7C for ; Mon, 2 Oct 2023 11:00:29 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Mon, 2 Oct 2023 11:00:28 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id DBA0D48EAC for ; Mon, 2 Oct 2023 11:00:27 +0200 (CEST) From: Aaron Lauterer To: pve-devel@lists.proxmox.com Date: Mon, 2 Oct 2023 11:00:26 +0200 Message-Id: <20231002090026.725629-1-a.lauterer@proxmox.com> X-Mailer: git-send-email 2.39.2 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.077 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH manager v5] ui: ceph: improve discoverability of warning details X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Mon, 02 Oct 2023 09:00:59 -0000 by * replacing the info button with expandable rows that contain the details of the warning * adding two action buttons to copy the summary and details * making the text selectable The row expander works like the one in the mail gateway tracking center -> doubleclick only opens it. The height of the warning grid is limited to not grow too large. A Diffstore is used to avoid expanded rows being collapsed on an update. The rowexpander cannot hide the toggle out of the box. Therefore, if there is no detailed message for a warning, we show a placeholder text. We could consider extending it in the future to only show the toggle if a defined condition is met. Signed-off-by: Aaron Lauterer --- changes since v4: * rebased so the patch applies again v3: * change the whole approach from tooltips and info window to integrating it into the grid itself www/css/ext6-pve.css | 6 +++ www/manager6/ceph/Status.js | 89 +++++++++++++++++++++++++------------ 2 files changed, 67 insertions(+), 28 deletions(-) diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css index edae462b..837b2210 100644 --- a/www/css/ext6-pve.css +++ b/www/css/ext6-pve.css @@ -709,3 +709,9 @@ table.osds td:first-of-type { opacity: 0.0; cursor: default; } + +.pve-ceph-warning-detail { + overflow: auto; + margin: 0; + padding-bottom: 10px; +} diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js index 46338b4a..6bbe33b4 100644 --- a/www/manager6/ceph/Status.js +++ b/www/manager6/ceph/Status.js @@ -1,3 +1,10 @@ +Ext.define('pve-ceph-warnings', { + extend: 'Ext.data.Model', + fields: ['id', 'summary', 'detail', 'severity'], + idProperty: 'id', +}); + + Ext.define('PVE.node.CephStatus', { extend: 'Ext.panel.Panel', alias: 'widget.pveNodeCephStatus', @@ -70,35 +77,51 @@ Ext.define('PVE.node.CephStatus', { xtype: 'grid', itemId: 'warnings', flex: 2, + maxHeight: 430, stateful: true, stateId: 'ceph-status-warnings', + viewConfig: { + enableTextSelection: true, + }, // we load the store manually, to show an emptyText specify an empty intermediate store store: { + type: 'diff', trackRemoved: false, data: [], + rstore: { + storeid: 'pve-ceph-warnings', + type: 'update', + model: 'pve-ceph-warnings', + }, }, updateHealth: function(health) { let checks = health.checks || {}; let checkRecords = Object.keys(checks).sort().map(key => { let check = checks[key]; - return { + let data = { id: key, summary: check.summary.message, - detail: check.detail.reduce((acc, v) => `${acc}\n${v.message}`, ''), + detail: check.detail.reduce((acc, v) => `${acc}\n${v.message}`, '').trimStart(), severity: check.severity, }; + if (data.detail.length === 0) { + data.detail = "no additional data"; + } + return data; }); - this.getStore().loadRawData(checkRecords, false); + let rstore = this.getStore().rstore; + rstore.loadData(checkRecords, false); + rstore.fireEvent('load', rstore, checkRecords, true); }, emptyText: gettext('No Warnings/Errors'), columns: [ { dataIndex: 'severity', - header: gettext('Severity'), + tooltip: gettext('Severity'), align: 'center', - width: 70, + width: 38, renderer: function(value) { let health = PVE.Utils.map_ceph_health[value]; let icon = PVE.Utils.get_health_icon(health); @@ -118,38 +141,48 @@ Ext.define('PVE.node.CephStatus', { }, { xtype: 'actioncolumn', - width: 40, + width: 50, align: 'center', - tooltip: gettext('Detail'), + tooltip: gettext('Actions'), items: [ { - iconCls: 'x-fa fa-info-circle', + iconCls: 'x-fa fa-files-o', + tooltip: gettext('Copy summary'), + handler: function(grid, rowindex, colindex, item, e, record) { + navigator.clipboard.writeText(record.data.summary); + }, + }, + { + iconCls: 'x-fa fa-clipboard', + tooltip: gettext('Copy details'), handler: function(grid, rowindex, colindex, item, e, record) { - var win = Ext.create('Ext.window.Window', { - title: gettext('Detail'), - resizable: true, - modal: true, - width: 650, - height: 400, - layout: { - type: 'fit', - }, - items: [{ - scrollable: true, - padding: 10, - xtype: 'box', - html: [ - '' + Ext.htmlEncode(record.data.summary) + '', - '
' + Ext.htmlEncode(record.data.detail) + '
', - ], - }], - }); - win.show(); + navigator.clipboard.writeText(record.data.detail); }, }, ], }, ], + listeners: { + itemdblclick: function(view, record, row, rowIdx, e) { + // inspired by RowExpander.js + + let rowNode = view.getNode(rowIdx); let + normalRow = Ext.fly(rowNode); + + let collapsedCls = view.rowBodyFeature.rowCollapsedCls; + + if (normalRow.hasCls(collapsedCls)) { + view.rowBodyFeature.rowExpander.toggleRow(rowIdx, record); + } + }, + }, + plugins: [ + { + ptype: 'rowexpander', + expandOnDblClick: false, + rowBodyTpl: '
{detail}
', + }, + ], }, ], }, -- 2.39.2