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 <a.laute...@proxmox.com>
---
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: [
- '<span>' +
Ext.htmlEncode(record.data.summary) + '</span>',
- '<pre>' +
Ext.htmlEncode(record.data.detail) + '</pre>',
- ],
- }],
- });
- 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: '<pre
class="pve-ceph-warning-detail">{detail}</pre>',
+ },
+ ],
},
],
},
--
2.30.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
