ui: {lxc, qemu}/Config: show Tags and make them editable

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

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index 93f385db42e239ee1448cd6db952b27d0c08e2ff..9b3017adde40a1534005aa629b418bc027f33fec 100644 (file)
--- 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,33 @@ Ext.define('PVE.lxc.Config', {
            ],
        });
 
+       let tagsContainer = Ext.create('PVE.panel.TagEditContainer', {
+           tags: vm.tags,
+           listeners: {
+               change: function(tags) {
+                   Proxmox.Utils.API2Request({
+                       url: base_url + '/config',
+                       method: 'PUT',
+                       params: {
+                           tags,
+                       },
+                       success: function() {
+                           me.statusStore.load();
+                       },
+                       failure: function(response) {
+                           Ext.Msg.alert('Error', response.htmlStatus);
+                           me.statusStore.load();
+                       },
+                   });
+               },
+           },
+       });
 
        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, '->', startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],
            defaults: { statusStore: me.statusStore },
            items: [
                {
@@ -344,10 +367,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 +382,9 @@ Ext.define('PVE.lxc.Config', {
 
            statusTxt.update({ lock: lock });
 
+           rec = s.data.get('tags');
+           tagsContainer.loadTags(rec?.data?.value);
+
            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 9fe933dfc41a22dc3007fdd51cdfcc5c2cd31d13..2cd6d8567a72da4b26e3573015a2798ab77be29f 100644 (file)
--- 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,33 @@ Ext.define('PVE.qemu.Config', {
            ],
        });
 
+       let tagsContainer = Ext.create('PVE.panel.TagEditContainer', {
+           tags: vm.tags,
+           listeners: {
+               change: function(tags) {
+                   Proxmox.Utils.API2Request({
+                       url: base_url + '/config',
+                       method: 'PUT',
+                       params: {
+                           tags,
+                       },
+                       success: function() {
+                           me.statusStore.load();
+                       },
+                       failure: function(response) {
+                           Ext.Msg.alert('Error', response.htmlStatus);
+                           me.statusStore.load();
+                       },
+                   });
+               },
+           },
+       });
+
        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, '->', resumeBtn, startBtn, shutdownBtn, migrateBtn, consoleBtn, moreBtn],
            defaults: { statusStore: me.statusStore },
            items: [
                {
@@ -382,11 +405,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 +423,9 @@ Ext.define('PVE.qemu.Config', {
                xtermjs = !!s.data.get('serial');
            }
 
+           rec = s.data.get('tags');
+           tagsContainer.loadTags(rec?.data?.value);
+
            if (template) {
                return;
            }