[pve-devel] [PATCH manager v3 11/13] ui: add dc/HardwareView: a CRUD interface for hardware mapping

[Dominik Csapak <d.csapak@proxmox.com>]

it's possible to add/edit/remove mappings here, with a cluster
wide view on the mappings and validity.

to do that, we have to to an api call for each node, since
we don't have the pci status synced across them.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile           |   1 +
 www/manager6/dc/Config.js       |  18 +-
 www/manager6/dc/HardwareView.js | 324 ++++++++++++++++++++++++++++++++
 3 files changed, 341 insertions(+), 2 deletions(-)
 create mode 100644 www/manager6/dc/HardwareView.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 5507276e..869395e1 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -163,6 +163,7 @@ JSSRC= 							\
 	dc/UserEdit.js					\
 	dc/UserView.js					\
 	dc/MetricServerView.js				\
+	dc/HardwareView.js				\
 	lxc/CmdMenu.js					\
 	lxc/Config.js					\
 	lxc/CreateWizard.js				\
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index 13ded12e..37148588 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -255,8 +255,22 @@ Ext.define('PVE.dc.Config', {
 		iconCls: 'fa fa-bar-chart',
 		itemId: 'metricservers',
 		onlineHelp: 'external_metric_server',
-	    },
-	    {
+	    });
+	}
+
+	if (caps.hardware['Hardware.Use'] ||
+	    caps.hardware['Hardware.Audit'] ||
+	    caps.hardware['Hardware.Configure']) {
+	    me.items.push({
+		xtype: 'pveDcHardwareView',
+		title: gettext('Hardware'),
+		iconCls: 'fa fa-desktop',
+		itemId: 'hardware',
+	    });
+	}
+
+	if (caps.dc['Sys.Audit']) {
+	    me.items.push({
 		xtype: 'pveDcSupport',
 		title: gettext('Support'),
 		itemId: 'support',
diff --git a/www/manager6/dc/HardwareView.js b/www/manager6/dc/HardwareView.js
new file mode 100644
index 00000000..7201d70f
--- /dev/null
+++ b/www/manager6/dc/HardwareView.js
@@ -0,0 +1,324 @@
+Ext.define('pve-hardware-tree', {
+    extend: 'Ext.data.Model',
+    fields: ['type', 'text', 'path', 'ntype',
+	{
+	    name: 'vendor',
+	    type: 'string',
+	},
+	{
+	    name: 'device',
+	    type: 'string',
+	},
+	{
+	    name: 'iconCls',
+	    calculate: function(data) {
+		if (data.ntype === 'entry') {
+		    if (data.type === 'usb') {
+			return 'fa fa-fw fa-usb';
+		    }
+		    if (data.type === 'pci') {
+			return 'pve-itype-icon-pci';
+		    }
+		    return 'fa fa-fw fa-folder-o';
+		}
+
+		return 'fa fa-fw fa-building';
+	    },
+	},
+	{
+	    name: 'leaf',
+	    calculate: function(data) {
+		return data.ntype && data.ntype !== 'entry';
+	    },
+	},
+    ],
+
+});
+
+Ext.define('PVE.dc.HardwareView', {
+    extend: 'Ext.tree.Panel',
+    alias: 'widget.pveDcHardwareView',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    rootVisible: false,
+
+    cbindData: function(initialConfig) {
+	let me = this;
+	const caps = Ext.state.Manager.get('GuiCap');
+	me.canConfigure = !!caps.nodes['Sys.Modify'] && !!caps.hardware['Hardware.Configure'];
+
+	return {};
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	addPCI: function() {
+	    let me = this;
+	    let nodename = Proxmox.NodeName;
+	    Ext.create('PVE.node.PCIEditWindow', {
+		url: `/nodes/${nodename}/hardware/mapping/pci`,
+		autoShow: true,
+		listeners: {
+		    destroy: () => me.load(),
+		},
+	    });
+	},
+
+	addUSB: function() {
+	    let me = this;
+	    let nodename = Proxmox.NodeName;
+	    Ext.create('PVE.node.USBEditWindow', {
+		url: `/nodes/${nodename}/hardware/mapping/usb`,
+		autoShow: true,
+		listeners: {
+		    destroy: () => me.load(),
+		},
+	    });
+	},
+
+	addHost: function() {
+	    let me = this;
+	    me.edit(false);
+	},
+
+	edit: function(includeNodename = true) {
+	    let me = this;
+	    let view = me.getView();
+	    let selection = view.getSelection();
+	    if (!selection || !selection.length) {
+		return;
+	    }
+	    let rec = selection[0];
+	    if (!view.canConfigure) {
+		return;
+	    }
+
+	    let type = 'PVE.node.' + (rec.data.type === 'pci' ? 'PCIEditWindow' : 'USBEditWindow');
+
+	    Ext.create(type, {
+		url: `/nodes/${rec.data.node}/hardware/mapping/${rec.data.type}/${rec.data.entry}`,
+		autoShow: true,
+		autoLoad: rec.data.ntype !== 'entry',
+		nodename: rec.data.ntype !== 'entry' && includeNodename ? rec.data.node : undefined,
+		name: rec.data.entry ?? rec.data.text,
+		listeners: {
+		    destroy: () => me.load(),
+		},
+	    });
+	},
+
+	load: function() {
+	    let me = this;
+	    let view = me.getView();
+	    Proxmox.Utils.API2Request({
+		url: '/cluster/hardware/mapping',
+		method: 'GET',
+		failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
+		success: function({ result: { data } }) {
+		    view.setRootNode({
+			children: data,
+		    });
+		    let root = view.getRootNode();
+		    root.expand();
+		    root.childNodes.forEach(node => node.expand());
+		    me.loadRemainigNodes();
+		},
+	    });
+	},
+
+	loadRemainigNodes: function() {
+	    let me = this;
+	    let view = me.getView();
+	    PVE.data.ResourceStore.getNodes().forEach(({ node }) => {
+		if (node === Proxmox.NodeName) {
+		    return;
+		}
+		Proxmox.Utils.API2Request({
+		    url: `/nodes/${node}/hardware/mapping/all`,
+		    method: 'GET',
+		    failure: function(response) {
+			view.getRootNode()?.cascade(function(rec) {
+			    if (rec.data.node !== node) {
+				return;
+			    }
+
+			    rec.set('valid', 0);
+			    rec.set('errmsg', response.htmlStatus);
+			    rec.commit();
+			});
+		    },
+		    success: function({ result: { data } }) {
+			let entries = {};
+			data.forEach((entry) => {
+			    entries[entry.name] = entry;
+			});
+			view.getRootNode()?.cascade(function(rec) {
+			    if (rec.data.node !== node) {
+				return;
+			    }
+
+			    let entry = entries[rec.data.entry];
+
+			    rec.set('valid', entry.valid);
+			    rec.set('errmsg', entry.errmsg);
+			    rec.commit();
+			});
+		    },
+		});
+	    });
+	},
+    },
+
+    store: {
+	sorters: 'text',
+	model: 'pve-hardware-tree',
+	data: {},
+    },
+
+
+    tbar: [
+	{
+	    text: gettext('Add'),
+	    cbind: {
+		disabled: '{!canConfigure}',
+	    },
+	    menu: [
+		{
+		    text: gettext('PCI'),
+		    iconCls: 'pve-itype-icon-pci',
+		    handler: 'addPCI',
+		},
+		{
+		    text: gettext('USB'),
+		    iconCls: 'fa fa-fw fa-usb black',
+		    handler: 'addUSB',
+		},
+	    ],
+	},
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('New Host mapping'),
+	    disabled: true,
+	    parentXType: 'treepanel',
+	    enableFn: function(_rec) {
+		return this.up('treepanel').canConfigure;
+	    },
+	    handler: 'addHost',
+	},
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Edit'),
+	    disabled: true,
+	    parentXType: 'treepanel',
+	    enableFn: function(rec) {
+		return rec.data.ntype !== 'entry' && this.up('treepanel').canConfigure;
+	    },
+	    cbind: {
+		disabled: '{!canConfigure}',
+	    },
+	    handler: 'edit',
+	},
+	{
+	    xtype: 'proxmoxStdRemoveButton',
+	    parentXType: 'treepanel',
+	    getUrl: function(rec) {
+		let data = rec.data;
+		return `/api2/extjs/nodes/${data.node}/hardware/mapping/${data.type}/${data.entry}`;
+	    },
+	    confirmMsg: function(rec) {
+		let msg = gettext('Are you sure you want to remove entry {0} for {1}');
+		return Ext.String.format(msg, `'${rec.data.entry}'`, `'${rec.data.node}'`);
+	    },
+	    enableFn: function(rec) {
+		return rec.data.ntype !== 'entry' && this.up('treepanel').canConfigure;
+	    },
+	    callback: 'load',
+	    disabled: true,
+	    text: gettext('Remove'),
+	},
+    ],
+
+    columns: [
+	{
+	    xtype: 'treecolumn',
+	    text: gettext('Type/ID/Node'),
+	    dataIndex: 'text',
+	    renderer: function(value, _meta, record) {
+		if (record.data.ntype === 'entry') {
+		    let typeMap = {
+			usb: gettext('USB'),
+			pci: gettext('PCI'),
+		    };
+		    let type = typeMap[record.data.type] || Proxmox.Utils.unknownText;
+		    return `${value} (${type})`;
+		}
+		return value;
+	    },
+	    width: 200,
+	},
+	{
+	    text: gettext('Vendor'),
+	    dataIndex: 'vendor',
+	},
+	{
+	    text: gettext('Device'),
+	    dataIndex: 'device',
+	},
+	{
+	    text: gettext('Subsystem Vendor'),
+	    dataIndex: 'subsystem-vendor',
+	},
+	{
+	    text: gettext('Subsystem Device'),
+	    dataIndex: 'subsystem-device',
+	},
+	{
+	    text: gettext('IOMMU group'),
+	    dataIndex: 'iommugroup',
+	},
+	{
+	    text: gettext('Path'),
+	    flex: 1,
+	    dataIndex: 'path',
+	    renderer: function(value) {
+		value = value ?? '';
+		if (value.indexOf(';') !== -1) {
+		    return value.split(';').join(', ');
+		}
+		return value;
+	    },
+	},
+	{
+	    header: gettext('Status'),
+	    dataIndex: 'valid',
+	    flex: 1,
+	    renderer: function(value, _metadata, record) {
+		if (record.data.ntype !== 'mapping') {
+		    return '';
+		}
+		let iconCls;
+		let status;
+		if (value === undefined) {
+		    iconCls = 'fa-spinner fa-spin';
+		    status = gettext('Loading...');
+		} else {
+		    let state = value ? 'good' : 'critical';
+		    iconCls = PVE.Utils.get_health_icon(state, true);
+		    status = value ? gettext("OK") : record.data.errmsg || Proxmox.Utils.unknownText;
+		}
+		return `<i class="fa ${iconCls}"></i> ${status}`;
+	    },
+	},
+	{
+	    header: gettext('Comment'),
+	    dataIndex: 'comment',
+	    flex: 1,
+	},
+    ],
+
+    listeners: {
+	activate: 'load',
+	itemdblclick: 'edit',
+    },
+});
-- 
2.30.2