www/manager6/Workspace.js

   1 /*
   2  * Workspace base class
   3  *
   4  * popup login window when auth fails (call onLogin handler)
   5  * update (re-login) ticket every 15 minutes
   6  *
   7  */
   8
   9 Ext.define('PVE.Workspace', {
  10     extend: 'Ext.container.Viewport',
  11
  12     title: 'Proxmox Virtual Environment',
  13
  14     loginData: null, // Data from last login call
  15
  16     onLogin: function(loginData) {},
  17
  18     // private
  19     updateLoginData: function(loginData) {
  20         var me = this;
  21         me.loginData = loginData;
  22         PVE.CSRFPreventionToken = loginData.CSRFPreventionToken;
  23         PVE.UserName = loginData.username;
  24
  25         if (loginData.cap) {
  26             Ext.state.Manager.set('GuiCap', loginData.cap);
  27         }
  28
  29         // creates a session cookie (expire = null)
  30         // that way the cookie gets deleted after browser window close
  31         Ext.util.Cookies.set('PVEAuthCookie', loginData.ticket, null, '/', null, true);
  32         me.onLogin(loginData);
  33     },
  34
  35     // private
  36     showLogin: function() {
  37         var me = this;
  38
  39         PVE.Utils.authClear();
  40         PVE.UserName = null;
  41         me.loginData = null;
  42
  43         if (!me.login) {
  44             me.login = Ext.create('PVE.window.LoginWindow', {
  45                 handler: function(data) {
  46                     me.login = null;
  47                     me.updateLoginData(data);
  48                     PVE.Utils.checked_command(function() {}); // display subscription status
  49                 }
  50             });
  51         }
  52         me.onLogin(null);
  53         me.login.show();
  54     },
  55
  56     initComponent : function() {
  57         var me = this;
  58
  59         Ext.tip.QuickTipManager.init();
  60
  61         // fixme: what about other errors
  62         Ext.Ajax.on('requestexception', function(conn, response, options) {
  63             if (response.status == 401) { // auth failure
  64                 me.showLogin();
  65             }
  66         });
  67
  68         me.callParent();
  69
  70         if (!PVE.Utils.authOK()) {
  71             me.showLogin();
  72         } else {
  73             if (me.loginData) {
  74                 me.onLogin(me.loginData);
  75             }
  76         }
  77
  78         Ext.TaskManager.start({
  79             run: function() {
  80                 var ticket = PVE.Utils.authOK();
  81                 if (!ticket || !PVE.UserName) {
  82                     return;
  83                 }
  84
  85                 Ext.Ajax.request({
  86                     params: {
  87                         username: PVE.UserName,
  88                         password: ticket
  89                     },
  90                     url: '/api2/json/access/ticket',
  91                     method: 'POST',
  92                     success: function(response, opts) {
  93                         var obj = Ext.decode(response.responseText);
  94                         me.updateLoginData(obj.data);
  95                     }
  96                 });
  97             },
  98             interval: 15*60*1000
  99         });
 100
 101     }
 102 });
 103
 104 Ext.define('PVE.ConsoleWorkspace', {
 105     extend: 'PVE.Workspace',
 106
 107     alias: ['widget.pveConsoleWorkspace'],
 108
 109     title: gettext('Console'),
 110
 111     initComponent : function() {
 112         // novnc is a string in param
 113         // but a boolean in content
 114         /*jslint confusion: true*/
 115         var me = this;
 116
 117         var param = Ext.Object.fromQueryString(window.location.search);
 118         var consoleType = me.consoleType || param.console;
 119
 120         param.novnc = (param.novnc === '1') ? true : false;
 121
 122         var content;
 123         if (consoleType === 'kvm') {
 124             me.title = "VM " + param.vmid;
 125             if (param.vmname) {
 126                 me.title += " ('" + param.vmname + "')";
 127             }
 128             content = {
 129                 xtype: 'pveKVMConsole',
 130                 novnc: param.novnc,
 131                 vmid: param.vmid,
 132                 nodename: param.node,
 133                 vmname: param.vmname,
 134                 toplevel: true
 135             };
 136         } else if (consoleType === 'lxc') {
 137             me.title = "CT " + param.vmid;
 138             if (param.vmname) {
 139                 me.title += " ('" + param.vmname + "')";
 140             }
 141             content = {
 142                 xtype: 'pveLxcConsole',
 143                 novnc: param.novnc,
 144                 vmid: param.vmid,
 145                 nodename: param.node,
 146                 vmname: param.vmname,
 147                 toplevel: true
 148             };
 149         } else if (consoleType === 'shell') {
 150             me.title = "node '" + param.node + "'";
 151             content = {
 152                 xtype: 'pveShell',
 153                 novnc: param.novnc,
 154                 nodename: param.node,
 155                 toplevel: true
 156             };
 157         } else if (consoleType === 'upgrade') {
 158             me.title = Ext.String.format(gettext('System upgrade on node {0}'), "'" + param.node + "'");
 159             content = {
 160                 xtype: 'pveShell',
 161                 novnc: param.novnc,
 162                 nodename: param.node,
 163                 ugradeSystem: true,
 164                 toplevel: true
 165             };
 166         } else {
 167             content = {
 168                 border: false,
 169                 bodyPadding: 10,
 170                 html: gettext('Error') + ': No such console type'
 171             };
 172         }
 173
 174         Ext.apply(me, {
 175             layout: { type: 'fit' },
 176             border: false,
 177             items: [ content ]
 178         });
 179
 180         me.callParent();
 181     }
 182 });
 183
 184 Ext.define('PVE.StdWorkspace', {
 185     extend: 'PVE.Workspace',
 186
 187     alias: ['widget.pveStdWorkspace'],
 188
 189     // private
 190     setContent: function(comp) {
 191         var me = this;
 192
 193         var cont = me.child('#content');
 194
 195         var lay = cont.getLayout();
 196
 197         var cur = lay.getActiveItem();
 198
 199         if (comp) {
 200             PVE.Utils.setErrorMask(cont, false);
 201             comp.border = false;
 202             cont.add(comp);
 203             if (cur !== null && lay.getNext()) {
 204                 lay.next();
 205                 var task = Ext.create('Ext.util.DelayedTask', function(){
 206                     cont.remove(cur);
 207                 });
 208                 task.delay(10);
 209             }
 210         }
 211         // else {
 212             // TODO: display something useful
 213
 214             // Note:: error mask has wrong zindex, so we do not
 215             // use that - see bug 114
 216             // PVE.Utils.setErrorMask(cont, 'nothing selected');
 217         //}
 218     },
 219
 220     selectById: function(nodeid) {
 221         var me = this;
 222         var tree = me.down('pveResourceTree');
 223         tree.selectById(nodeid);
 224     },
 225
 226     checkVmMigration: function(record) {
 227         var me = this;
 228         var tree = me.down('pveResourceTree');
 229         tree.checkVmMigration(record);
 230     },
 231
 232     onLogin: function(loginData) {
 233         var me = this;
 234
 235         me.updateUserInfo();
 236
 237         if (loginData) {
 238             PVE.data.ResourceStore.startUpdate();
 239
 240             PVE.Utils.API2Request({
 241                 url: '/version',
 242                 method: 'GET',
 243                 success: function(response) {
 244                     PVE.VersionInfo = response.result.data;
 245                     me.updateVersionInfo();
 246                 }
 247             });
 248         }
 249     },
 250
 251     updateUserInfo: function() {
 252         var me = this;
 253
 254         var ui = me.query('#userinfo')[0];
 255
 256         if (PVE.UserName) {
 257             var msg =  Ext.String.format(gettext("You are logged in as {0}"), "'" + PVE.UserName + "'");
 258             ui.update('<div class="x-unselectable" style="white-space:nowrap;">' + msg + '</div>');
 259         } else {
 260             ui.update('');
 261         }
 262         ui.updateLayout();
 263     },
 264
 265     updateVersionInfo: function() {
 266         var me = this;
 267
 268         var ui = me.query('#versioninfo')[0];
 269
 270         if (PVE.VersionInfo) {
 271             var version = PVE.VersionInfo.version + '-' + PVE.VersionInfo.release + '/' +
 272                 PVE.VersionInfo.repoid;
 273             ui.update('Proxmox Virtual Environment ' + version);
 274         } else {
 275             ui.update('Proxmox Virtual Environment');
 276         }
 277         ui.updateLayout();
 278     },
 279
 280     initComponent : function() {
 281         var me = this;
 282
 283         Ext.History.init();
 284
 285         var sprovider = Ext.create('PVE.StateProvider');
 286         Ext.state.Manager.setProvider(sprovider);
 287
 288         var selview = Ext.create('PVE.form.ViewSelector');
 289
 290         var rtree = Ext.createWidget('pveResourceTree', {
 291             viewFilter: selview.getViewFilter(),
 292             flex: 1,
 293             selModel: {
 294                 selType: 'treemodel',
 295                 listeners: {
 296                     selectionchange: function(sm, selected) {
 297                         var comp;
 298                         var tlckup = {
 299                             root: 'PVE.dc.Config',
 300                             node: 'PVE.node.Config',
 301                             qemu: 'PVE.qemu.Config',
 302                             lxc: 'PVE.lxc.Config',
 303                             storage: 'PVE.storage.Browser',
 304                             pool: 'pvePoolConfig'
 305                         };
 306
 307                         if (selected.length > 0) {
 308                             var n = selected[0];
 309                             comp = {
 310                                 xtype: tlckup[n.data.type || 'root'] ||
 311                                     'pvePanelConfig',
 312                                 layout: { type: 'fit' },
 313                                 showSearch: (n.data.id === 'root') ||
 314                                     Ext.isDefined(n.data.groupbyid),
 315                                 pveSelNode: n,
 316                                 workspace: me,
 317                                 viewFilter: selview.getViewFilter()
 318                             };
 319                             PVE.curSelectedNode = n;
 320                         }
 321
 322                         me.setContent(comp);
 323                     }
 324                 }
 325             }
 326         });
 327
 328         selview.on('select', function(combo, records) {
 329             if (records) {
 330                 var view = combo.getViewFilter();
 331                 rtree.setViewFilter(view);
 332             }
 333         });
 334
 335         var caps = sprovider.get('GuiCap');
 336
 337         var createVM = Ext.createWidget('button', {
 338             pack: 'end',
 339             margin: '3 5 0 0',
 340             baseCls: 'x-btn',
 341             iconCls: 'fa fa-desktop',
 342             text: gettext("Create VM"),
 343             disabled: !caps.vms['VM.Allocate'],
 344             handler: function() {
 345                 var wiz = Ext.create('PVE.qemu.CreateWizard', {});
 346                 wiz.show();
 347             }
 348         });
 349
 350         var createCT = Ext.createWidget('button', {
 351             pack: 'end',
 352             margin: '3 5 0 0',
 353             baseCls: 'x-btn',
 354             iconCls: 'fa fa-cube',
 355             text: gettext("Create CT"),
 356             disabled: !caps.vms['VM.Allocate'],
 357             handler: function() {
 358                 var wiz = Ext.create('PVE.lxc.CreateWizard', {});
 359                 wiz.show();
 360             }
 361         });
 362
 363         sprovider.on('statechange', function(sp, key, value) {
 364             if (key === 'GuiCap' && value) {
 365                 caps = value;
 366                 createVM.setDisabled(!caps.vms['VM.Allocate']);
 367                 createCT.setDisabled(!caps.vms['VM.Allocate']);
 368             }
 369         });
 370
 371         Ext.apply(me, {
 372             layout: { type: 'border' },
 373             border: false,
 374             items: [
 375                 {
 376                     region: 'north',
 377                     layout: {
 378                         type: 'hbox',
 379                         align: 'middle'
 380                     },
 381                     baseCls: 'x-plain',
 382                     defaults: {
 383                         baseCls: 'x-plain'
 384                     },
 385                     border: false,
 386                     margin: '2 0 2 5',
 387                     items: [
 388                         {
 389                             html: '<a class="x-unselectable" target=_blank href="http://www.proxmox.com">' +
 390                                 '<img height=30 width=209 src="/pve2/images/proxmox_logo.png"/></a>'
 391                         },
 392                         {
 393                             minWidth: 200,
 394                             flex: 1,
 395                             id: 'versioninfo',
 396                             html: 'Proxmox Virtual Environment'
 397                         },
 398                         {
 399                             pack: 'end',
 400                             margin: '0 10 0 0',
 401                             id: 'userinfo',
 402                             stateful: false
 403                         },
 404                         createVM,
 405                         createCT,
 406                         {
 407                             pack: 'end',
 408                             margin: '0 5 0 0',
 409                             xtype: 'button',
 410                             baseCls: 'x-btn',
 411                             iconCls: 'fa fa-sign-out',
 412                             text: gettext("Logout"),
 413                             handler: function() {
 414                                 PVE.data.ResourceStore.stopUpdate();
 415                                 me.showLogin();
 416                                 me.setContent();
 417                                 var rt = me.down('pveResourceTree');
 418                                 rt.clearTree();
 419                             }
 420                         }
 421                     ]
 422                 },
 423                 {
 424                     region: 'center',
 425                     stateful: true,
 426                     stateId: 'pvecenter',
 427                     minWidth: 100,
 428                     minHeight: 100,
 429                     id: 'content',
 430                     xtype: 'container',
 431                     layout: { type: 'card' },
 432                     border: false,
 433                     margin: '0 5 0 0',
 434                     items: []
 435                 },
 436                 {
 437                     region: 'west',
 438                     stateful: true,
 439                     stateId: 'pvewest',
 440                     itemId: 'west',
 441                     xtype: 'container',
 442                     border: false,
 443                     layout: { type: 'vbox', align: 'stretch' },
 444                     margin: '0 0 0 5',
 445                     split: true,
 446                     width: 200,
 447                     items: [ selview, rtree ],
 448                     listeners: {
 449                         resize: function(panel, width, height) {
 450                             var viewWidth = me.getSize().width;
 451                             if (width > viewWidth - 100) {
 452                                 panel.setWidth(viewWidth - 100);
 453                             }
 454                         }
 455                     }
 456                 },
 457                 {
 458                     xtype: 'pveStatusPanel',
 459                     stateful: true,
 460                     stateId: 'pvesouth',
 461                     itemId: 'south',
 462                     region: 'south',
 463                     margin:'0 5 5 5',
 464                     height: 200,
 465                     split:true,
 466                     listeners: {
 467                         resize: function(panel, width, height) {
 468                             console.log('test');
 469                             var viewHeight = me.getSize().height;
 470                             if (height > (viewHeight - 150)) {
 471                                 panel.setHeight(viewHeight - 150);
 472                             }
 473                         }
 474                     }
 475                 }
 476             ]
 477         });
 478
 479         me.callParent();
 480
 481         me.updateUserInfo();
 482     }
 483 });
 484