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.StdWorkspace', {
 105     extend: 'PVE.Workspace',
 106
 107     alias: ['widget.pveStdWorkspace'],
 108
 109     // private
 110     setContent: function(comp) {
 111         var me = this;
 112
 113         var cont = me.child('#content');
 114
 115         var lay = cont.getLayout();
 116
 117         var cur = lay.getActiveItem();
 118
 119         if (comp) {
 120             PVE.Utils.setErrorMask(cont, false);
 121             comp.border = false;
 122             cont.add(comp);
 123             if (cur !== null && lay.getNext()) {
 124                 lay.next();
 125                 var task = Ext.create('Ext.util.DelayedTask', function(){
 126                     cont.remove(cur);
 127                 });
 128                 task.delay(10);
 129             }
 130         }
 131         else {
 132             // helper for cleaning the content when logging out
 133             cont.removeAll();
 134         }
 135     },
 136
 137     selectById: function(nodeid) {
 138         var me = this;
 139         var tree = me.down('pveResourceTree');
 140         tree.selectById(nodeid);
 141     },
 142
 143     checkVmMigration: function(record) {
 144         var me = this;
 145         var tree = me.down('pveResourceTree');
 146         tree.checkVmMigration(record);
 147     },
 148
 149     onLogin: function(loginData) {
 150         var me = this;
 151
 152         me.updateUserInfo();
 153
 154         if (loginData) {
 155             PVE.data.ResourceStore.startUpdate();
 156
 157             PVE.Utils.API2Request({
 158                 url: '/version',
 159                 method: 'GET',
 160                 success: function(response) {
 161                     PVE.VersionInfo = response.result.data;
 162                     me.updateVersionInfo();
 163                 }
 164             });
 165         }
 166     },
 167
 168     updateUserInfo: function() {
 169         var me = this;
 170
 171         var ui = me.query('#userinfo')[0];
 172
 173         if (PVE.UserName) {
 174             var msg =  Ext.String.format(gettext("You are logged in as {0}"), "'" + PVE.UserName + "'");
 175             ui.update('<div class="x-unselectable" style="white-space:nowrap;">' + msg + '</div>');
 176         } else {
 177             ui.update('');
 178         }
 179         ui.updateLayout();
 180     },
 181
 182     updateVersionInfo: function() {
 183         var me = this;
 184
 185         var ui = me.query('#versioninfo')[0];
 186
 187         if (PVE.VersionInfo) {
 188             var version = PVE.VersionInfo.version + '-' + PVE.VersionInfo.release + '/' +
 189                 PVE.VersionInfo.repoid;
 190             ui.update('Virtual Environment ' + version);
 191         } else {
 192             ui.update('Virtual Environment');
 193         }
 194         ui.updateLayout();
 195     },
 196
 197     initComponent : function() {
 198         var me = this;
 199
 200         Ext.History.init();
 201
 202         var sprovider = Ext.create('PVE.StateProvider');
 203         Ext.state.Manager.setProvider(sprovider);
 204
 205         var selview = Ext.create('PVE.form.ViewSelector');
 206
 207         var rtree = Ext.createWidget('pveResourceTree', {
 208             viewFilter: selview.getViewFilter(),
 209             flex: 1,
 210             selModel: {
 211                 selType: 'treemodel',
 212                 listeners: {
 213                     selectionchange: function(sm, selected) {
 214                         if (selected.length > 0) {
 215                             var n = selected[0];
 216                             var tlckup = {
 217                                 root: 'PVE.dc.Config',
 218                                 node: 'PVE.node.Config',
 219                                 qemu: 'PVE.qemu.Config',
 220                                 lxc: 'PVE.lxc.Config',
 221                                 storage: 'PVE.storage.Browser',
 222                                 pool: 'pvePoolConfig'
 223                             };
 224                             var comp = {
 225                                 xtype: tlckup[n.data.type || 'root'] ||
 226                                     'pvePanelConfig',
 227                                 showSearch: (n.data.id === 'root') ||
 228                                     Ext.isDefined(n.data.groupbyid),
 229                                 pveSelNode: n,
 230                                 workspace: me,
 231                                 viewFilter: selview.getViewFilter()
 232                             };
 233                             PVE.curSelectedNode = n;
 234                             me.setContent(comp);
 235                         }
 236                     }
 237                 }
 238             }
 239         });
 240
 241         selview.on('select', function(combo, records) {
 242             if (records) {
 243                 var view = combo.getViewFilter();
 244                 rtree.setViewFilter(view);
 245             }
 246         });
 247
 248         var caps = sprovider.get('GuiCap');
 249
 250         var createVM = Ext.createWidget('button', {
 251             pack: 'end',
 252             margin: '3 5 0 0',
 253             baseCls: 'x-btn',
 254             iconCls: 'fa fa-desktop',
 255             text: gettext("Create VM"),
 256             disabled: !caps.vms['VM.Allocate'],
 257             handler: function() {
 258                 var wiz = Ext.create('PVE.qemu.CreateWizard', {});
 259                 wiz.show();
 260             }
 261         });
 262
 263         var createCT = Ext.createWidget('button', {
 264             pack: 'end',
 265             margin: '3 5 0 0',
 266             baseCls: 'x-btn',
 267             iconCls: 'fa fa-cube',
 268             text: gettext("Create CT"),
 269             disabled: !caps.vms['VM.Allocate'],
 270             handler: function() {
 271                 var wiz = Ext.create('PVE.lxc.CreateWizard', {});
 272                 wiz.show();
 273             }
 274         });
 275
 276         sprovider.on('statechange', function(sp, key, value) {
 277             if (key === 'GuiCap' && value) {
 278                 caps = value;
 279                 createVM.setDisabled(!caps.vms['VM.Allocate']);
 280                 createCT.setDisabled(!caps.vms['VM.Allocate']);
 281             }
 282         });
 283
 284         Ext.apply(me, {
 285             layout: { type: 'border' },
 286             border: false,
 287             items: [
 288                 {
 289                     region: 'north',
 290                     layout: {
 291                         type: 'hbox',
 292                         align: 'middle'
 293                     },
 294                     baseCls: 'x-plain',
 295                     defaults: {
 296                         baseCls: 'x-plain'
 297                     },
 298                     border: false,
 299                     margin: '2 0 2 5',
 300                     items: [
 301                         {
 302                             html: '<a class="x-unselectable" target=_blank href="http://www.proxmox.com">' +
 303                                 '<img style="padding-top:4px;padding-right:5px" src="/pve2/images/proxmox_logo.png"/></a>'
 304                         },
 305                         {
 306                             minWidth: 200,
 307                             id: 'versioninfo',
 308                             html: 'Virtual Environment'
 309                         },
 310                         {
 311                             xtype: 'pveGlobalSearchField',
 312                             tree: rtree
 313                         },
 314                         {
 315                             flex: 1
 316                         },
 317                         {
 318                             pack: 'end',
 319                             id: 'userinfo',
 320                             stateful: false
 321                         },
 322                         {
 323                             xtype: 'button',
 324                             margin: '0 10 0 3',
 325                             iconCls: 'fa black fa-gear',
 326                             userCls: 'pointer',
 327                             handler: function() {
 328                                 var win = Ext.create('PVE.window.Settings');
 329                                 win.show();
 330                             }
 331                         },
 332                         {
 333                             xtype: 'pveHelpButton',
 334                             hidden: false,
 335                             baseCls: 'x-btn',
 336                             iconCls: 'fa fa-info-circle x-btn-icon-el-default-toolbar-small ',
 337                             listenToGlobalEvent: false,
 338                             onlineHelp: 'pve_documentation_index',
 339                             margin: '0 5 0 0'
 340                         },
 341                         createVM,
 342                         createCT,
 343                         {
 344                             pack: 'end',
 345                             margin: '0 5 0 0',
 346                             xtype: 'button',
 347                             baseCls: 'x-btn',
 348                             iconCls: 'fa fa-sign-out',
 349                             text: gettext("Logout"),
 350                             handler: function() {
 351                                 PVE.data.ResourceStore.loadData([], false);
 352                                 me.showLogin();
 353                                 me.setContent(null);
 354                                 var rt = me.down('pveResourceTree');
 355                                 rt.clearTree();
 356
 357                                 // empty the stores of the StatusPanel child items
 358                                 var statusPanels = Ext.ComponentQuery.query('pveStatusPanel grid');
 359                                 Ext.Array.forEach(statusPanels, function(comp) {
 360                                     if (comp.getStore()) {
 361                                         comp.getStore().loadData([], false);
 362                                     }
 363                                 });
 364                             }
 365                         }
 366                     ]
 367                 },
 368                 {
 369                     region: 'center',
 370                     stateful: true,
 371                     stateId: 'pvecenter',
 372                     minWidth: 100,
 373                     minHeight: 100,
 374                     id: 'content',
 375                     xtype: 'container',
 376                     layout: { type: 'card' },
 377                     border: false,
 378                     margin: '0 5 0 0',
 379                     items: []
 380                 },
 381                 {
 382                     region: 'west',
 383                     stateful: true,
 384                     stateId: 'pvewest',
 385                     itemId: 'west',
 386                     xtype: 'container',
 387                     border: false,
 388                     layout: { type: 'vbox', align: 'stretch' },
 389                     margin: '0 0 0 5',
 390                     split: true,
 391                     width: 200,
 392                     items: [ selview, rtree ],
 393                     listeners: {
 394                         resize: function(panel, width, height) {
 395                             var viewWidth = me.getSize().width;
 396                             if (width > viewWidth - 100) {
 397                                 panel.setWidth(viewWidth - 100);
 398                             }
 399                         }
 400                     }
 401                 },
 402                 {
 403                     xtype: 'pveStatusPanel',
 404                     stateful: true,
 405                     stateId: 'pvesouth',
 406                     itemId: 'south',
 407                     region: 'south',
 408                     margin:'0 5 5 5',
 409                     title: gettext('Logs'),
 410                     collapsible: true,
 411                     header: false,
 412                     height: 200,
 413                     split:true,
 414                     listeners: {
 415                         resize: function(panel, width, height) {
 416                             var viewHeight = me.getSize().height;
 417                             if (height > (viewHeight - 150)) {
 418                                 panel.setHeight(viewHeight - 150);
 419                             }
 420                         }
 421                     }
 422                 }
 423             ]
 424         });
 425
 426         me.callParent();
 427
 428         me.updateUserInfo();
 429
 430         // on resize, center all modal windows
 431         Ext.on('resize', function(){
 432             var wins = Ext.ComponentQuery.query('window[modal]');
 433             if (wins.length > 0) {
 434                 wins.forEach(function(win){
 435                     win.alignTo(me, 'c-c');
 436                 });
 437             }
 438         });
 439     }
 440 });
 441