[pve-devel] [PATCH manager v4 08/10] ui: {lxc, qemu}/Config: show Tags and make them editable

[Dominik Csapak]

add the tags in the status line, and add a button for adding new ones

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/lxc/Config.js  | 68 +++++++++++++++++++++++++++++++++++--
 www/manager6/qemu/Config.js | 66 +++++++++++++++++++++++++++++++++--
 2 files changed, 130 insertions(+), 4 deletions(-)

diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index 89b59c9b..4e2b4bb8 100644
--- a/www/manager6/lxc/Config.js
+++ b/www/manager6/lxc/Config.js
@@ -4,6 +4,8 @@ Ext.define('PVE.lxc.Config', {
 
     onlineHelp: 'chapter_pct',
 
+    userCls: 'proxmox-tags-full',
+
     initComponent: function() {
         var me = this;
 	var vm = me.pveSelNode.data;
@@ -182,12 +184,43 @@ Ext.define('PVE.lxc.Config', {
 	    ],
 	});
 
+	let tagsContainer = Ext.create('Ext.container.Container', {
+	    userCls: 'proxmox-tags-full',
+	    layout: {
+		type: 'hbox',
+		align: 'stretch',
+	    },
+	});
+
+	let tagAddBtn = Ext.create('Proxmox.Tag', {
+	    xtype: 'pmxTag',
+	    addTag: true,
+	    layoutCallback: () => me.query('>toolbar[dock=top]')?.[0].updateLayout(),
+	    updateCallback: function(newTag) {
+		let rec = me.statusStore.data.get('tags');
+		let tags = rec?.data?.value?.split(/[;, ]/) || [];
+		tags.push(newTag);
+		Proxmox.Utils.API2Request({
+		    url: base_url + '/config',
+		    method: 'PUT',
+		    params: {
+			tags: tags.filter(t => !!t).join(','),
+		    },
+		    success: function() {
+			me.statusStore.load();
+		    },
+		    failure: function(response) {
+			Ext.Msg.alert('Error', response.htmlStatus);
+		    },
+		});
+	    },
+	});
 
 	Ext.apply(me, {
 	    title: Ext.String.format(gettext("Container {0} on node '{1}'"), vm.text, nodename),
 	    hstateid: 'lxctab',
 	    tbarSpacing: false,
-	    tbar: [statusTxt, '->', startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],
+	    tbar: [statusTxt, tagsContainer, '-', tagAddBtn, '->', startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],
 	    defaults: { statusStore: me.statusStore },
 	    items: [
 		{
@@ -344,10 +377,12 @@ Ext.define('PVE.lxc.Config', {
 	me.mon(me.statusStore, 'load', function(s, records, success) {
 	    var status;
 	    var lock;
+	    var rec;
+
 	    if (!success) {
 		status = 'unknown';
 	    } else {
-		var rec = s.data.get('status');
+		rec = s.data.get('status');
 		status = rec ? rec.data.value : 'unknown';
 		rec = s.data.get('template');
 		template = rec ? rec.data.value : false;
@@ -357,6 +392,35 @@ Ext.define('PVE.lxc.Config', {
 
 	    statusTxt.update({ lock: lock });
 
+	    rec = s.data.get('tags');
+	    if (me.oldtags === undefined || me.oldtags !== rec?.data?.value) {
+		let tags = rec?.data?.value.split(/[,; ]/).filter(t => !!t) ?? [];
+		me.oldtags = rec?.data?.value;
+		tagsContainer.removeAll();
+		for (let i = 0; i < tags.length; i++) {
+		    let tag = tags[i];
+		    tagsContainer.add({
+			xtype: 'pmxTag',
+			tag,
+			layoutCallback: () => tagsContainer.updateLayout(),
+			updateCallback: function(newTag) {
+			    tags[i] = newTag;
+			    Proxmox.Utils.API2Request({
+				url: base_url + '/config',
+				method: 'PUT',
+				params: {
+				    tags: tags.filter(t => !!t).join(','),
+				},
+				failure: function(response) {
+				    Ext.Msg.alert('Error', response.htmlStatus);
+				},
+			    });
+			    me.oldtags = tags.join(',');
+			},
+		    });
+		}
+	    }
+
 	    startBtn.setDisabled(!caps.vms['VM.PowerMgmt'] || status === 'running' || template);
 	    shutdownBtn.setDisabled(!caps.vms['VM.PowerMgmt'] || status !== 'running');
 	    me.down('#removeBtn').setDisabled(!caps.vms['VM.Allocate'] || status !== 'stopped');
diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index 9fe933df..df5f688f 100644
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -3,6 +3,7 @@ Ext.define('PVE.qemu.Config', {
     alias: 'widget.PVE.qemu.Config',
 
     onlineHelp: 'chapter_virtual_machines',
+    userCls: 'proxmox-tags-full',
 
     initComponent: function() {
         var me = this;
@@ -219,11 +220,42 @@ Ext.define('PVE.qemu.Config', {
 	    ],
 	});
 
+	let tagsContainer = Ext.create('Ext.container.Container', {
+	    layout: {
+		type: 'hbox',
+		align: 'stretch',
+	    },
+	});
+
+	let tagAddBtn = Ext.create('Proxmox.Tag', {
+	    xtype: 'pmxTag',
+	    addTag: true,
+	    layoutCallback: () => me.query('>toolbar[dock=top]')?.[0].updateLayout(),
+	    updateCallback: function(newTag) {
+		let rec = me.statusStore.data.get('tags');
+		let tags = rec?.data?.value?.split(/[;, ]/) || [];
+		tags.push(newTag);
+		Proxmox.Utils.API2Request({
+		    url: base_url + '/config',
+		    method: 'PUT',
+		    params: {
+			tags: tags.filter(t => !!t).join(','),
+		    },
+		    success: function() {
+			me.statusStore.load();
+		    },
+		    failure: function(response) {
+			Ext.Msg.alert('Error', response.htmlStatus);
+		    },
+		});
+	    },
+	});
+
 	Ext.apply(me, {
 	    title: Ext.String.format(gettext("Virtual Machine {0} on node '{1}'"), vm.text, nodename),
 	    hstateid: 'kvmtab',
 	    tbarSpacing: false,
-	    tbar: [statusTxt, '->', resumeBtn, startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],
+	    tbar: [statusTxt, tagsContainer, '-', tagAddBtn, '->', resumeBtn, startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],
 	    defaults: { statusStore: me.statusStore },
 	    items: [
 		{
@@ -382,11 +414,12 @@ Ext.define('PVE.qemu.Config', {
 	    var spice = false;
 	    var xtermjs = false;
 	    var lock;
+	    var rec;
 
 	    if (!success) {
 		status = qmpstatus = 'unknown';
 	    } else {
-		var rec = s.data.get('status');
+		rec = s.data.get('status');
 		status = rec ? rec.data.value : 'unknown';
 		rec = s.data.get('qmpstatus');
 		qmpstatus = rec ? rec.data.value : 'unknown';
@@ -399,6 +432,35 @@ Ext.define('PVE.qemu.Config', {
 		xtermjs = !!s.data.get('serial');
 	    }
 
+	    rec = s.data.get('tags');
+	    if (me.oldtags === undefined || me.oldtags !== rec?.data?.value) {
+		let tags = rec?.data?.value.split(/[,; ]/).filter(t => !!t) ?? [];
+		me.oldtags = rec?.data?.value;
+		tagsContainer.removeAll();
+		for (let i = 0; i < tags.length; i++) {
+		    let tag = tags[i];
+		    tagsContainer.add({
+			xtype: 'pmxTag',
+			tag,
+			layoutCallback: () => tagsContainer.updateLayout(),
+			updateCallback: function(newTag) {
+			    tags[i] = newTag;
+			    Proxmox.Utils.API2Request({
+				url: base_url + '/config',
+				method: 'PUT',
+				params: {
+				    tags: tags.filter(t => !!t).join(','),
+				},
+				failure: function(response) {
+				    Ext.Msg.alert('Error', response.htmlStatus);
+				},
+			    });
+			    me.oldtags = tags.join(',');
+			},
+		    });
+		}
+	    }
+
 	    if (template) {
 		return;
 	    }
-- 
2.30.2