]> git.proxmox.com Git - pve-manager.git/blobdiff - www/manager6/lxc/Resources.js
ui: lxc resources: switch to vector based font awesome icons
[pve-manager.git] / www / manager6 / lxc / Resources.js
index f6358122d59596f2a06648455d08cf5c36fc62e1..df8cc9691a50e56f36b691084c0841d547e88191 100644 (file)
@@ -1,4 +1,3 @@
-/*jslint confusion: true */
 Ext.define('PVE.lxc.RessourceView', {
     extend: 'Proxmox.grid.PendingObjectGrid',
     alias: ['widget.pveLxcRessourceView'],
@@ -6,22 +5,33 @@ Ext.define('PVE.lxc.RessourceView', {
     onlineHelp: 'pct_configuration',
 
     renderKey: function(key, metaData, rec, rowIndex, colIndex, store) {
-       var me = this;
-       var rowdef = me.rows[key] || {};
+       let me = this;
+       let rowdef = me.rows[key] || {};
+
+       let txt = rowdef.header || key;
+       let icon = '';
 
        metaData.tdAttr = "valign=middle";
        if (rowdef.tdCls) {
            metaData.tdCls = rowdef.tdCls;
+       } else if (rowdef.iconCls) {
+           icon = `<i class='pve-grid-fa fa fa-fw fa-${rowdef.iconCls}'></i>`;
+           metaData.tdCls += " pve-itype-fa";
+       }
+       // only return icons in grid but not remove dialog
+       if (rowIndex !== undefined) {
+           return icon + txt;
+       } else {
+           return txt;
        }
-       return rowdef.header || key;
     },
 
-    initComponent : function() {
+    initComponent: function() {
        var me = this;
-       var i, confid;
+       let confid;
 
        var nodename = me.pveSelNode.data.node;
-       if (!nodename) { 
+       if (!nodename) {
            throw "no node name specified";
        }
 
@@ -40,27 +50,27 @@ Ext.define('PVE.lxc.RessourceView', {
                header: gettext('Memory'),
                editor: caps.vms['VM.Config.Memory'] ? 'PVE.lxc.MemoryEdit' : undefined,
                defaultValue: 512,
-               tdCls: 'pve-itype-icon-memory',
+               tdCls: 'pmx-itype-icon-memory',
                group: 1,
                renderer: function(value) {
                    return Proxmox.Utils.format_size(value*1024*1024);
-               }
+               },
            },
            swap: {
                header: gettext('Swap'),
                editor: caps.vms['VM.Config.Memory'] ? 'PVE.lxc.MemoryEdit' : undefined,
                defaultValue: 512,
-               tdCls: 'pve-itype-icon-swap',
+               iconCls: 'refresh',
                group: 2,
                renderer: function(value) {
                    return Proxmox.Utils.format_size(value*1024*1024);
-               }
+               },
            },
            cores: {
                header: gettext('Cores'),
                editor: caps.vms['VM.Config.CPU'] ? 'PVE.lxc.CPUEdit' : undefined,
                defaultValue: '',
-               tdCls: 'pve-itype-icon-processor',
+               tdCls: 'pmx-itype-icon-processor',
                group: 3,
                renderer: function(value) {
                    var cpulimit = me.getObjectValue('cpulimit');
@@ -80,24 +90,24 @@ Ext.define('PVE.lxc.RessourceView', {
                        res += ' [cpuunits=' + cpuunits + ']';
                    }
                    return res;
-               }
+               },
            },
            rootfs: {
                header: gettext('Root Disk'),
                defaultValue: Proxmox.Utils.noneText,
                editor: mpeditor,
-               tdCls: 'pve-itype-icon-storage',
-               group: 4
+               iconCls: 'hdd-o',
+               group: 4,
            },
            cpulimit: {
-               visible: false
+               visible: false,
            },
            cpuunits: {
-               visible: false
+               visible: false,
            },
            unprivileged: {
-               visible: false
-           }
+               visible: false,
+           },
        };
 
        PVE.Utils.forEachMP(function(bus, i) {
@@ -115,7 +125,7 @@ Ext.define('PVE.lxc.RessourceView', {
                order: i,
                tdCls: 'pve-itype-icon-storage',
                editor: mpeditor,
-               header: header
+               header: header,
            };
        }, true);
 
@@ -132,7 +142,7 @@ Ext.define('PVE.lxc.RessourceView', {
            var win = Ext.create('PVE.window.MPResize', {
                disk: rec.data.key,
                nodename: nodename,
-               vmid: vmid
+               vmid: vmid,
            });
 
            win.show();
@@ -144,11 +154,11 @@ Ext.define('PVE.lxc.RessourceView', {
                waitMsgTarget: me,
                method: 'PUT',
                params: {
-                   'delete': rec.data.key
+                   'delete': rec.data.key,
                },
-               failure: function (response, opts) {
+               failure: function(response, opts) {
                    Ext.Msg.alert('Error', response.htmlStatus);
-               }
+               },
            });
        };
 
@@ -161,7 +171,7 @@ Ext.define('PVE.lxc.RessourceView', {
                disk: rec.data.key,
                nodename: nodename,
                vmid: vmid,
-               type: 'lxc'
+               type: 'lxc',
            });
 
            win.show();
@@ -180,31 +190,52 @@ Ext.define('PVE.lxc.RessourceView', {
                var rowdef = rows[rec.data.key];
                return !!rowdef.editor;
            },
-           handler: function() { me.run_editor(); }
+           handler: function() { me.run_editor(); },
        });
 
        var resize_btn = new Proxmox.button.Button({
            text: gettext('Resize disk'),
            selModel: me.selModel,
            disabled: true,
-           handler: run_resize
+           handler: run_resize,
        });
 
        var remove_btn = new Proxmox.button.Button({
            text: gettext('Remove'),
+           defaultText: gettext('Remove'),
+           altText: gettext('Detach'),
            selModel: me.selModel,
            disabled: true,
            dangerous: true,
            confirmMsg: function(rec) {
-               var msg = Ext.String.format(gettext('Are you sure you want to remove entry {0}'),
-                                           "'" + me.renderKey(rec.data.key, {}, rec) + "'");
+               let warn = Ext.String.format(gettext('Are you sure you want to remove entry {0}'));
+               if (this.text === this.altText) {
+                   warn = gettext('Are you sure you want to detach entry {0}');
+               }
+               let rendered = me.renderKey(rec.data.key, {}, rec);
+               let msg = Ext.String.format(warn, `'${rendered}'`);
+
                if (rec.data.key.match(/^unused\d+$/)) {
                    msg += " " + gettext('This will permanently erase all data.');
                }
-
                return msg;
            },
-           handler: run_remove
+           handler: run_remove,
+           listeners: {
+               render: function(btn) {
+                   // hack: calculate the max button width on first display to prevent the whole
+                   // toolbar to move when we switch between the "Remove" and "Detach" labels
+                   let def = btn.getSize().width;
+
+                   btn.setText(btn.altText);
+                   let alt = btn.getSize().width;
+
+                   btn.setText(btn.defaultText);
+
+                   let optimal = alt > def ? alt : def;
+                   btn.setSize({ width: optimal });
+               },
+           },
        });
 
        var move_btn = new Proxmox.button.Button({
@@ -212,7 +243,7 @@ Ext.define('PVE.lxc.RessourceView', {
            selModel: me.selModel,
            disabled: true,
            dangerous: true,
-           handler: run_move
+           handler: run_move,
        });
 
        var revert_btn = new PVE.button.PendingRevert();
@@ -231,10 +262,12 @@ Ext.define('PVE.lxc.RessourceView', {
            var value = rec.data.value;
            var rowdef = rows[key];
 
-           var pending = rec.data['delete'] || me.hasPendingChanges(key);
-           var isDisk = (rowdef.tdCls == 'pve-itype-icon-storage');
+           var pending = rec.data.delete || me.hasPendingChanges(key);
+           var isDisk = rowdef.tdCls === 'pve-itype-icon-storage';
+           var isUnusedDisk = key.match(/^unused\d+/);
+           var isUsedDisk = isDisk && !isUnusedDisk;
 
-           var noedit = rec.data['delete'] || !rowdef.editor;
+           var noedit = rec.data.delete || !rowdef.editor;
            if (!noedit && Proxmox.UserName !== 'root@pam' && key.match(/^mp\d+$/)) {
                var mp = PVE.Parser.parseLxcMountPoint(value);
                if (mp.type !== 'volume') {
@@ -243,13 +276,14 @@ Ext.define('PVE.lxc.RessourceView', {
            }
            edit_btn.setDisabled(noedit);
 
-           remove_btn.setDisabled(!isDisk || rec.data.key === 'rootfs' || !diskCap);
-           resize_btn.setDisabled(!isDisk || !diskCap);
+           remove_btn.setDisabled(!isDisk || rec.data.key === 'rootfs' || !diskCap || pending);
+           resize_btn.setDisabled(!isDisk || !diskCap || isUnusedDisk);
            move_btn.setDisabled(!isDisk || !diskCap);
            revert_btn.setDisabled(!pending);
 
+           remove_btn.setText(isUsedDisk ? remove_btn.altText : remove_btn.defaultText);
        };
-       
+
        var sorterFn = function(rec1, rec2) {
            var v1 = rec1.data.key;
            var v2 = rec2.data.key;
@@ -258,11 +292,11 @@ Ext.define('PVE.lxc.RessourceView', {
            var order1 = rows[v1].order || 0;
            var order2 = rows[v2].order || 0;
 
-           if ((g1 - g2) !== 0) {
+           if (g1 - g2 !== 0) {
                return g1 - g2;
            }
 
-           if ((order1 - order2) !== 0) {
+           if (order1 - order2 !== 0) {
                return order1 - order2;
            }
 
@@ -287,36 +321,37 @@ Ext.define('PVE.lxc.RessourceView', {
                        items: [
                            {
                                text: gettext('Mount Point'),
-                               iconCls: 'pve-itype-icon-storage',
+                               iconCls: 'fa fa-fw fa-hdd-o black',
                                disabled: !caps.vms['VM.Config.Disk'],
                                handler: function() {
                                    var win = Ext.create('PVE.lxc.MountPointEdit', {
                                        url: '/api2/extjs/' + baseurl,
                                        unprivileged: me.getObjectValue('unprivileged'),
-                                       pveSelNode: me.pveSelNode
+                                       pveSelNode: me.pveSelNode,
                                    });
+                                   win.on('destroy', me.reload, me);
                                    win.show();
-                               }
-                           }
-                       ]
-                   })
+                               },
+                           },
+                       ],
+                   }),
                },
                edit_btn,
                remove_btn,
                resize_btn,
                move_btn,
-               revert_btn
+               revert_btn,
            ],
            rows: rows,
            sorterFn: sorterFn,
            editorConfig: {
                pveSelNode: me.pveSelNode,
-               url: '/api2/extjs/' + baseurl
+               url: '/api2/extjs/' + baseurl,
            },
            listeners: {
                itemdblclick: me.run_editor,
-               selectionchange: set_button_status
-           }
+               selectionchange: set_button_status,
+           },
        });
 
        me.callParent();
@@ -325,6 +360,10 @@ Ext.define('PVE.lxc.RessourceView', {
        me.on('destroy', me.rstore.stopUpdate);
        me.on('deactivate', me.rstore.stopUpdate);
 
+       me.mon(me.getStore(), 'datachanged', function() {
+           set_button_status();
+       });
+
        Ext.apply(me.editorConfig, { unprivileged: me.getObjectValue('unprivileged') });
-    }
+    },
 });