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)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 0311D9BAD4 for ; Fri, 26 May 2023 10:39:06 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id D7CA8B3DB for ; Fri, 26 May 2023 10:39:05 +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)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Fri, 26 May 2023 10:39:04 +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 8190C4724F for ; Fri, 26 May 2023 10:39:04 +0200 (CEST) Message-ID: Date: Fri, 26 May 2023 10:39:03 +0200 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Thunderbird/102.11.0 Content-Language: en-US To: pve-devel@lists.proxmox.com References: <20230315130951.3471085-1-a.lauterer@proxmox.com> From: Aaron Lauterer In-Reply-To: <20230315130951.3471085-1-a.lauterer@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.049 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 NICE_REPLY_A -0.092 Looks like a legit reply (A) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record T_SCC_BODY_TEXT_LINE -0.01 - Subject: Re: [pve-devel] [PATCH v4 manager] 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: Fri, 26 May 2023 08:39:06 -0000 ping? Considering that some users are rather hesitant to upgrade to a major version, it might be a good idea to still get this into Proxmox VE 7 to make it easier for users to discover more details about any issues they experience. On 3/15/23 14:09, Aaron Lauterer wrote: > 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 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 a9ead5d3..012c5534 100644 > --- a/www/css/ext6-pve.css > +++ b/www/css/ext6-pve.css > @@ -700,3 +700,9 @@ table.osds td:first-of-type { > cursor: pointer; > padding-left: 2px; > } > + > +.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}
', > + }, > + ], > }, > ], > },