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

Signed-off-by: Dominik Csapak <d.csa...@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



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

Reply via email to