]> git.proxmox.com Git - pve-manager.git/blobdiff - www/manager6/Workspace.js
ui: eslint: fix various spacing related issues
[pve-manager.git] / www / manager6 / Workspace.js
index a4102ebedc17b9108e12c2c700029b34372bd1dd..c9c4808dbf2e281cc2bdbd0c4352c58ce1007ce9 100644 (file)
@@ -19,16 +19,17 @@ Ext.define('PVE.Workspace', {
     updateLoginData: function(loginData) {
        var me = this;
        me.loginData = loginData;
-       PVE.CSRFPreventionToken = loginData.CSRFPreventionToken;
-       PVE.UserName = loginData.username;
+       Proxmox.Utils.setAuthData(loginData);
+
+       var rt = me.down('pveResourceTree');
+       rt.setDatacenterText(loginData.clustername);
+       PVE.ClusterName = loginData.clustername;
 
        if (loginData.cap) {
            Ext.state.Manager.set('GuiCap', loginData.cap);
        }
+       me.response401count = 0;
 
-       // creates a session cookie (expire = null) 
-       // that way the cookie gets deleted after browser window close
-       Ext.util.Cookies.set('PVEAuthCookie', loginData.ticket, null, '/', null, true);
        me.onLogin(loginData);
     },
 
@@ -36,8 +37,9 @@ Ext.define('PVE.Workspace', {
     showLogin: function() {
        var me = this;
 
-       PVE.Utils.authClear();
-       PVE.UserName = null;
+       Proxmox.Utils.authClear();
+       Ext.state.Manager.clear('GuiCap');
+       Proxmox.UserName = null;
        me.loginData = null;
 
        if (!me.login) {
@@ -45,33 +47,36 @@ Ext.define('PVE.Workspace', {
                handler: function(data) {
                    me.login = null;
                    me.updateLoginData(data);
-                   PVE.Utils.checked_command(function() {}); // display subscription status
-               }
+                   Proxmox.Utils.checked_command(function() {}); // display subscription status
+               },
            });
        }
        me.onLogin(null);
         me.login.show();
     },
 
-    initComponent : function() {
+    initComponent: function() {
        var me = this;
 
        Ext.tip.QuickTipManager.init();
 
        // fixme: what about other errors
        Ext.Ajax.on('requestexception', function(conn, response, options) {
-           if (response.status == 401) { // auth failure
-               me.showLogin();
+           if (response.status == 401 && !PVE.Utils.silenceAuthFailures) { // auth failure
+               // don't immediately show as logged out to cope better with some big
+               // upgrades, which may temporarily produce a false positive 401 err
+               me.response401count++;
+               if (me.response401count > 5) {
+                   me.showLogin();
+               }
            }
        });
 
-       document.title = me.title;
-
        me.callParent();
 
-        if (!PVE.Utils.authOK()) {
+        if (!Proxmox.Utils.authOK()) {
            me.showLogin();
-       } else { 
+       } else {
            if (me.loginData) {
                me.onLogin(me.loginData);
            }
@@ -79,105 +84,27 @@ Ext.define('PVE.Workspace', {
 
        Ext.TaskManager.start({
            run: function() {
-               var ticket = PVE.Utils.authOK();
-               if (!ticket || !PVE.UserName) {
+               var ticket = Proxmox.Utils.authOK();
+               if (!ticket || !Proxmox.UserName) {
                    return;
                }
 
                Ext.Ajax.request({
-                   params: { 
-                       username: PVE.UserName,
-                       password: ticket
+                   params: {
+                       username: Proxmox.UserName,
+                       password: ticket,
                    },
                    url: '/api2/json/access/ticket',
                    method: 'POST',
                    success: function(response, opts) {
                        var obj = Ext.decode(response.responseText);
                        me.updateLoginData(obj.data);
-                   }
+                   },
                });
            },
-           interval: 15*60*1000
-       });
-
-    }
-});
-
-Ext.define('PVE.ConsoleWorkspace', {
-    extend: 'PVE.Workspace',
-
-    alias: ['widget.pveConsoleWorkspace'],
-
-    title: gettext('Console'),
-
-    initComponent : function() {
-       var me = this;
-
-       var param = Ext.Object.fromQueryString(window.location.search);
-       var consoleType = me.consoleType || param.console;
-
-       param.novnc = (param.novnc === '1') ? true : false;
-
-       var content;
-       if (consoleType === 'kvm') {
-           me.title = "VM " + param.vmid;
-           if (param.vmname) {
-               me.title += " ('" + param.vmname + "')";
-           }
-           content = {
-               xtype: 'pveKVMConsole',
-               novnc: param.novnc,
-               vmid: param.vmid,
-               nodename: param.node,
-               vmname: param.vmname,
-               toplevel: true
-           };
-       } else if (consoleType === 'lxc') {
-           me.title = "CT " + param.vmid;
-           if (param.vmname) {
-               me.title += " ('" + param.vmname + "')";
-           }
-           content = {
-               xtype: 'pveLxcConsole',
-               novnc: param.novnc,
-               vmid: param.vmid,
-               nodename: param.node,
-               vmname: param.vmname,
-               toplevel: true
-           };
-       } else if (consoleType === 'shell') {
-           me.title = "node '" + param.node + "'";
-           content = {
-               xtype: 'pveShell',
-               novnc: param.novnc,
-               nodename: param.node,
-               toplevel: true
-           };
-       } else if (consoleType === 'upgrade') {
-           me.title = Ext.String.format(gettext('System upgrade on node {0}'), "'" + param.node + "'");
-           content = {
-               xtype: 'pveShell',
-               novnc: param.novnc,
-               nodename: param.node,
-               ugradeSystem: true,
-               toplevel: true
-           };
-       } else {
-           content = {
-               border: false,
-               bodyPadding: 10,
-               html: gettext('Error') + ': No such console type'
-           };
-       }
-
-       Ext.apply(me, {
-           layout: { type: 'fit' },
-           border: false,
-           items: [ content ]
+           interval: 15*60*1000,
        });
-
-       me.callParent();       
-    }
+    },
 });
 
 Ext.define('PVE.StdWorkspace', {
@@ -188,23 +115,28 @@ Ext.define('PVE.StdWorkspace', {
     // private
     setContent: function(comp) {
        var me = this;
-       
+
        var cont = me.child('#content');
-       cont.removeAll(true);
+
+       var lay = cont.getLayout();
+
+       var cur = lay.getActiveItem();
 
        if (comp) {
-           PVE.Utils.setErrorMask(cont, false);
+           Proxmox.Utils.setErrorMask(cont, false);
            comp.border = false;
            cont.add(comp);
-           cont.doLayout();
-       } 
-       // else {
-           // TODO: display something useful
-
-           // Note:: error mask has wrong zindex, so we do not
-           // use that - see bug 114
-           // PVE.Utils.setErrorMask(cont, 'nothing selected');
-       //}
+           if (cur !== null && lay.getNext()) {
+               lay.next();
+               var task = Ext.create('Ext.util.DelayedTask', function() {
+                   cont.remove(cur);
+               });
+               task.delay(10);
+           }
+       } else {
+           // helper for cleaning the content when logging out
+           cont.removeAll();
+       }
     },
 
     selectById: function(nodeid) {
@@ -213,12 +145,6 @@ Ext.define('PVE.StdWorkspace', {
        tree.selectById(nodeid);
     },
 
-    checkVmMigration: function(record) {
-       var me = this;
-       var tree = me.down('pveResourceTree');
-       tree.checkVmMigration(record);
-    },
-
     onLogin: function(loginData) {
        var me = this;
 
@@ -227,29 +153,37 @@ Ext.define('PVE.StdWorkspace', {
        if (loginData) {
            PVE.data.ResourceStore.startUpdate();
 
-           PVE.Utils.API2Request({
+           Proxmox.Utils.API2Request({
                url: '/version',
                method: 'GET',
                success: function(response) {
                    PVE.VersionInfo = response.result.data;
                    me.updateVersionInfo();
-               }
+               },
+           });
+
+           Proxmox.Utils.API2Request({
+               url: '/cluster/sdn',
+               method: 'GET',
+               success: function(response) {
+                   PVE.SDNInfo = response.result.data;
+               },
+               failure: function(response) {
+                   PVE.SDNInfo = null;
+                   let ui = Ext.ComponentQuery.query('treelistitem[text="SDN"]')[0];
+                   if (ui) {
+                       ui.addCls('x-hidden-display');
+                   }
+               },
            });
        }
     },
 
     updateUserInfo: function() {
        var me = this;
-
        var ui = me.query('#userinfo')[0];
-
-       if (PVE.UserName) {
-           var msg =  Ext.String.format(gettext("You are logged in as {0}"), "'" + PVE.UserName + "'");
-           ui.update('<div class="x-unselectable" style="white-space:nowrap;">' + msg + '</div>');
-       } else {
-           ui.update('');
-       }
-       ui.doLayout();
+       ui.setText(Ext.String.htmlEncode(Proxmox.UserName || ''));
+       ui.updateLayout();
     },
 
     updateVersionInfo: function() {
@@ -258,16 +192,15 @@ Ext.define('PVE.StdWorkspace', {
        var ui = me.query('#versioninfo')[0];
 
        if (PVE.VersionInfo) {
-           var version = PVE.VersionInfo.version + '-' + PVE.VersionInfo.release + '/' +
-               PVE.VersionInfo.repoid;
-           ui.update('Proxmox Virtual Environment<br>' + gettext('Version') + ': ' + version);
+           var version = PVE.VersionInfo.version;
+           ui.update('Virtual Environment ' + version);
        } else {
-           ui.update('Proxmox Virtual Environment');
+           ui.update('Virtual Environment');
        }
-       ui.doLayout();
+       ui.updateLayout();
     },
 
-    initComponent : function() {
+    initComponent: function() {
        var me = this;
 
        Ext.History.init();
@@ -275,47 +208,45 @@ Ext.define('PVE.StdWorkspace', {
        var sprovider = Ext.create('PVE.StateProvider');
        Ext.state.Manager.setProvider(sprovider);
 
-       var selview = new PVE.form.ViewSelector({});
+       var selview = Ext.create('PVE.form.ViewSelector');
 
        var rtree = Ext.createWidget('pveResourceTree', {
            viewFilter: selview.getViewFilter(),
            flex: 1,
-           selModel: new Ext.selection.TreeModel({
+           selModel: {
+               selType: 'treemodel',
                listeners: {
                    selectionchange: function(sm, selected) {
-                       var comp;
-                       var tlckup = {
-                           root: 'PVE.dc.Config',
-                           node: 'PVE.node.Config',
-                           qemu: 'PVE.qemu.Config',
-                           lxc: 'PVE.lxc.Config',
-                           storage: 'PVE.storage.Browser',
-                           pool: 'pvePoolConfig'
-                       };
-                       
                        if (selected.length > 0) {
                            var n = selected[0];
-                           comp = {
-                               xtype: tlckup[n.data.type || 'root'] || 
+                           var tlckup = {
+                               root: 'PVE.dc.Config',
+                               node: 'PVE.node.Config',
+                               qemu: 'PVE.qemu.Config',
+                               lxc: 'PVE.lxc.Config',
+                               storage: 'PVE.storage.Browser',
+                               sdn: 'PVE.sdn.Browser',
+                               pool: 'pvePoolConfig',
+                           };
+                           var comp = {
+                               xtype: tlckup[n.data.type || 'root'] ||
                                    'pvePanelConfig',
-                               layout: { type: 'fit' },
                                showSearch: (n.data.id === 'root') ||
                                    Ext.isDefined(n.data.groupbyid),
                                pveSelNode: n,
                                workspace: me,
-                               viewFilter: selview.getViewFilter()
+                               viewFilter: selview.getViewFilter(),
                            };
                            PVE.curSelectedNode = n;
+                           me.setContent(comp);
                        }
-
-                       me.setContent(comp);
-                   }
-               }
-           })
+                   },
+               },
+           },
        });
 
-       selview.on('select', function(combo, records) { 
-           if (records && records.length) {
+       selview.on('select', function(combo, records) {
+           if (records) {
                var view = combo.getViewFilter();
                rtree.setViewFilter(view);
            }
@@ -327,24 +258,26 @@ Ext.define('PVE.StdWorkspace', {
            pack: 'end',
            margin: '3 5 0 0',
            baseCls: 'x-btn',
+           iconCls: 'fa fa-desktop',
            text: gettext("Create VM"),
            disabled: !caps.vms['VM.Allocate'],
            handler: function() {
                var wiz = Ext.create('PVE.qemu.CreateWizard', {});
                wiz.show();
-           } 
+           },
        });
 
        var createCT = Ext.createWidget('button', {
            pack: 'end',
            margin: '3 5 0 0',
            baseCls: 'x-btn',
+           iconCls: 'fa fa-cube',
            text: gettext("Create CT"),
            disabled: !caps.vms['VM.Allocate'],
            handler: function() {
                var wiz = Ext.create('PVE.lxc.CreateWizard', {});
                wiz.show();
-           } 
+           },
        });
 
        sprovider.on('statechange', function(sp, key, value) {
@@ -361,86 +294,189 @@ Ext.define('PVE.StdWorkspace', {
            items: [
                {
                    region: 'north',
-                   height: 30,
-                   layout: { 
+                   layout: {
                        type: 'hbox',
+                       align: 'middle',
                    },
-                   baseCls: 'x-plain',         
+                   baseCls: 'x-plain',
                    defaults: {
-                       baseCls: 'x-plain'                      
+                       baseCls: 'x-plain',
                    },
                    border: false,
-                   margin: '2 0 5 0',
+                   margin: '2 0 2 5',
                    items: [
                        {
-                           margin: '0 0 0 4',
-                           html: '<a class="x-unselectable" target=_blank href="http://www.proxmox.com">' +
-                               '<img height=30 width=209 src="/pve2/images/proxmox_logo.png"/></a>'
+                           xtype: 'proxmoxlogo',
                        },
                        {
-                           minWidth: 200,
-                           flex: 1,
+                           minWidth: 150,
                            id: 'versioninfo',
-                           html: 'Proxmox Virtual Environment',
-                           height: 30
+                           html: 'Virtual Environment',
                        },
                        {
-                           pack: 'end',
-                           margin: '8 10 0 10',
-                           id: 'userinfo',
-                           stateful: false
+                           xtype: 'pveGlobalSearchField',
+                           tree: rtree,
+                       },
+                       {
+                           flex: 1,
+                       },
+                       {
+                           xtype: 'proxmoxHelpButton',
+                           hidden: false,
+                           baseCls: 'x-btn',
+                           iconCls: 'fa fa-book x-btn-icon-el-default-toolbar-small ',
+                           listenToGlobalEvent: false,
+                           onlineHelp: 'pve_documentation_index',
+                           text: gettext('Documentation'),
+                           margin: '0 5 0 0',
                        },
+                       createVM,
+                       createCT,
                        {
                            pack: 'end',
-                           margin: '3 5 0 0',
+                           margin: '0 5 0 0',
+                           id: 'userinfo',
                            xtype: 'button',
                            baseCls: 'x-btn',
-                           text: gettext("Logout"),
-                           handler: function() { 
-                               PVE.data.ResourceStore.stopUpdate();
-                               me.showLogin(); 
-                               me.setContent(); 
-                               var rt = me.down('pveResourceTree');
-                               rt.clearTree();
-                           }
-                       }, 
-                       createVM, 
-                       createCT
-                   ]
+                           style: {
+                               // proxmox dark grey p light grey as border
+                               backgroundColor: '#464d4d',
+                               borderColor: '#ABBABA',
+                           },
+                           iconCls: 'fa fa-user',
+                           menu: [
+                               {
+                                   iconCls: 'fa fa-gear',
+                                   text: gettext('My Settings'),
+                                   handler: function() {
+                                       var win = Ext.create('PVE.window.Settings');
+                                       win.show();
+                                   },
+                               },
+                               {
+                                   text: gettext('Password'),
+                                   iconCls: 'fa fa-fw fa-key',
+                                   handler: function() {
+                                       var win = Ext.create('Proxmox.window.PasswordEdit', {
+                                           userid: Proxmox.UserName,
+                                       });
+                                       win.show();
+                                   },
+                               },
+                               {
+                                   text: 'TFA',
+                                   iconCls: 'fa fa-fw fa-lock',
+                                   handler: function(btn, event, rec) {
+                                       var win = Ext.create('PVE.window.TFAEdit', {
+                                           userid: Proxmox.UserName,
+                                       });
+                                       win.show();
+                                   },
+                               },
+                               {
+                                   iconCls: 'fa fa-language',
+                                   text: gettext('Language'),
+                                   handler: function() {
+                                       Ext.create('Proxmox.window.LanguageEditWindow')
+                                           .show();
+                                   },
+                               },
+                               '-',
+                               {
+                                   iconCls: 'fa fa-fw fa-sign-out',
+                                   text: gettext("Logout"),
+                                   handler: function() {
+                                       PVE.data.ResourceStore.loadData([], false);
+                                       me.showLogin();
+                                       me.setContent(null);
+                                       var rt = me.down('pveResourceTree');
+                                       rt.setDatacenterText(undefined);
+                                       rt.clearTree();
+
+                                       // empty the stores of the StatusPanel child items
+                                       var statusPanels = Ext.ComponentQuery.query('pveStatusPanel grid');
+                                       Ext.Array.forEach(statusPanels, function(comp) {
+                                           if (comp.getStore()) {
+                                               comp.getStore().loadData([], false);
+                                           }
+                                       });
+                                   },
+                               },
+                           ],
+                       },
+                   ],
                },
                {
                    region: 'center',
+                   stateful: true,
+                   stateId: 'pvecenter',
+                   minWidth: 100,
+                   minHeight: 100,
                    id: 'content',
                    xtype: 'container',
-                   layout: { type: 'fit' },
+                   layout: { type: 'card' },
                    border: false,
-                   stateful: false,
                    margin: '0 5 0 0',
-                   items: []
+                   items: [],
                },
                {
                    region: 'west',
+                   stateful: true,
+                   stateId: 'pvewest',
+                   itemId: 'west',
                    xtype: 'container',
                    border: false,
                    layout: { type: 'vbox', align: 'stretch' },
                    margin: '0 0 0 5',
                    split: true,
                    width: 200,
-                   items: [ selview, rtree ]
+                   items: [selview, rtree],
+                   listeners: {
+                       resize: function(panel, width, height) {
+                           var viewWidth = me.getSize().width;
+                           if (width > viewWidth - 100) {
+                               panel.setWidth(viewWidth - 100);
+                           }
+                       },
+                   },
                },
                {
                    xtype: 'pveStatusPanel',
+                   stateful: true,
+                   stateId: 'pvesouth',
+                   itemId: 'south',
                    region: 'south',
-                   margin:'0 5 5 5',
-                   height: 200,       
-                   split:true
-               }
-           ]
+                   margin: '0 5 5 5',
+                   title: gettext('Logs'),
+                   collapsible: true,
+                   header: false,
+                   height: 200,
+                   split: true,
+                   listeners: {
+                       resize: function(panel, width, height) {
+                           var viewHeight = me.getSize().height;
+                           if (height > (viewHeight - 150)) {
+                               panel.setHeight(viewHeight - 150);
+                           }
+                       },
+                   },
+               },
+           ],
        });
 
        me.callParent();
 
        me.updateUserInfo();
-    }
+
+       // on resize, center all modal windows
+       Ext.on('resize', function() {
+           var wins = Ext.ComponentQuery.query('window[modal]');
+           if (wins.length > 0) {
+               wins.forEach(function(win) {
+                   win.alignTo(me, 'c-c');
+               });
+           }
+       });
+    },
 });