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         Proxmox.Utils.setAuthData(loginData);
  23
  24         var rt = me.down('pveResourceTree');
  25         rt.setDatacenterText(loginData.clustername);
  26
  27         if (loginData.cap) {
  28             Ext.state.Manager.set('GuiCap', loginData.cap);
  29         }
  30
  31         me.onLogin(loginData);
  32     },
  33
  34     // private
  35     showLogin: function() {
  36         var me = this;
  37
  38         Proxmox.Utils.authClear();
  39         Proxmox.UserName = null;
  40         me.loginData = null;
  41
  42         if (!me.login) {
  43             me.login = Ext.create('PVE.window.LoginWindow', {
  44                 handler: function(data) {
  45                     me.login = null;
  46                     me.updateLoginData(data);
  47                     Proxmox.Utils.checked_command(function() {}); // display subscription status
  48                 }
  49             });
  50         }
  51         me.onLogin(null);
  52         me.login.show();
  53     },
  54
  55     initComponent : function() {
  56         var me = this;
  57
  58         Ext.tip.QuickTipManager.init();
  59
  60         // fixme: what about other errors
  61         Ext.Ajax.on('requestexception', function(conn, response, options) {
  62             if (response.status == 401 && !PVE.Utils.silenceAuthFailures) { // auth failure
  63                 me.showLogin();
  64             }
  65         });
  66
  67         me.callParent();
  68
  69         if (!Proxmox.Utils.authOK()) {
  70             me.showLogin();
  71         } else {
  72             if (me.loginData) {
  73                 me.onLogin(me.loginData);
  74             }
  75         }
  76
  77         Ext.TaskManager.start({
  78             run: function() {
  79                 var ticket = Proxmox.Utils.authOK();
  80                 if (!ticket || !Proxmox.UserName) {
  81                     return;
  82                 }
  83
  84                 Ext.Ajax.request({
  85                     params: {
  86                         username: Proxmox.UserName,
  87                         password: ticket
  88                     },
  89                     url: '/api2/json/access/ticket',
  90                     method: 'POST',
  91                     success: function(response, opts) {
  92                         var obj = Ext.decode(response.responseText);
  93                         me.updateLoginData(obj.data);
  94                     }
  95                 });
  96             },
  97             interval: 15*60*1000
  98         });
  99
 100     }
 101 });
 102
 103 Ext.define('PVE.StdWorkspace', {
 104     extend: 'PVE.Workspace',
 105
 106     alias: ['widget.pveStdWorkspace'],
 107
 108     // private
 109     setContent: function(comp) {
 110         var me = this;
 111
 112         var cont = me.child('#content');
 113
 114         var lay = cont.getLayout();
 115
 116         var cur = lay.getActiveItem();
 117
 118         if (comp) {
 119             Proxmox.Utils.setErrorMask(cont, false);
 120             comp.border = false;
 121             cont.add(comp);
 122             if (cur !== null && lay.getNext()) {
 123                 lay.next();
 124                 var task = Ext.create('Ext.util.DelayedTask', function(){
 125                     cont.remove(cur);
 126                 });
 127                 task.delay(10);
 128             }
 129         }
 130         else {
 131             // helper for cleaning the content when logging out
 132             cont.removeAll();
 133         }
 134     },
 135
 136     selectById: function(nodeid) {
 137         var me = this;
 138         var tree = me.down('pveResourceTree');
 139         tree.selectById(nodeid);
 140     },
 141
 142     onLogin: function(loginData) {
 143         var me = this;
 144
 145         me.updateUserInfo();
 146
 147         if (loginData) {
 148             PVE.data.ResourceStore.startUpdate();
 149
 150             Proxmox.Utils.API2Request({
 151                 url: '/version',
 152                 method: 'GET',
 153                 success: function(response) {
 154                     PVE.VersionInfo = response.result.data;
 155                     me.updateVersionInfo();
 156                 }
 157             });
 158         }
 159     },
 160
 161     updateUserInfo: function() {
 162         var me = this;
 163         var ui = me.query('#userinfo')[0];
 164         ui.setText(Proxmox.UserName || '');
 165         ui.updateLayout();
 166     },
 167
 168     updateVersionInfo: function() {
 169         var me = this;
 170
 171         var ui = me.query('#versioninfo')[0];
 172
 173         if (PVE.VersionInfo) {
 174             var version = PVE.VersionInfo.version;
 175             ui.update('Virtual Environment ' + version);
 176         } else {
 177             ui.update('Virtual Environment');
 178         }
 179         ui.updateLayout();
 180     },
 181
 182     initComponent : function() {
 183         var me = this;
 184
 185         Ext.History.init();
 186
 187         var sprovider = Ext.create('PVE.StateProvider');
 188         Ext.state.Manager.setProvider(sprovider);
 189
 190         var selview = Ext.create('PVE.form.ViewSelector');
 191
 192         var rtree = Ext.createWidget('pveResourceTree', {
 193             viewFilter: selview.getViewFilter(),
 194             flex: 1,
 195             selModel: {
 196                 selType: 'treemodel',
 197                 listeners: {
 198                     selectionchange: function(sm, selected) {
 199                         if (selected.length > 0) {
 200                             var n = selected[0];
 201                             var tlckup = {
 202                                 root: 'PVE.dc.Config',
 203                                 node: 'PVE.node.Config',
 204                                 qemu: 'PVE.qemu.Config',
 205                                 lxc: 'PVE.lxc.Config',
 206                                 storage: 'PVE.storage.Browser',
 207                                 pool: 'pvePoolConfig'
 208                             };
 209                             var comp = {
 210                                 xtype: tlckup[n.data.type || 'root'] ||
 211                                     'pvePanelConfig',
 212                                 showSearch: (n.data.id === 'root') ||
 213                                     Ext.isDefined(n.data.groupbyid),
 214                                 pveSelNode: n,
 215                                 workspace: me,
 216                                 viewFilter: selview.getViewFilter()
 217                             };
 218                             PVE.curSelectedNode = n;
 219                             me.setContent(comp);
 220                         }
 221                     }
 222                 }
 223             }
 224         });
 225
 226         selview.on('select', function(combo, records) {
 227             if (records) {
 228                 var view = combo.getViewFilter();
 229                 rtree.setViewFilter(view);
 230             }
 231         });
 232
 233         var caps = sprovider.get('GuiCap');
 234
 235         var createVM = Ext.createWidget('button', {
 236             pack: 'end',
 237             margin: '3 5 0 0',
 238             baseCls: 'x-btn',
 239             iconCls: 'fa fa-desktop',
 240             text: gettext("Create VM"),
 241             disabled: !caps.vms['VM.Allocate'],
 242             handler: function() {
 243                 var wiz = Ext.create('PVE.qemu.CreateWizard', {});
 244                 wiz.show();
 245             }
 246         });
 247
 248         var createCT = Ext.createWidget('button', {
 249             pack: 'end',
 250             margin: '3 5 0 0',
 251             baseCls: 'x-btn',
 252             iconCls: 'fa fa-cube',
 253             text: gettext("Create CT"),
 254             disabled: !caps.vms['VM.Allocate'],
 255             handler: function() {
 256                 var wiz = Ext.create('PVE.lxc.CreateWizard', {});
 257                 wiz.show();
 258             }
 259         });
 260
 261         sprovider.on('statechange', function(sp, key, value) {
 262             if (key === 'GuiCap' && value) {
 263                 caps = value;
 264                 createVM.setDisabled(!caps.vms['VM.Allocate']);
 265                 createCT.setDisabled(!caps.vms['VM.Allocate']);
 266             }
 267         });
 268
 269         Ext.apply(me, {
 270             layout: { type: 'border' },
 271             border: false,
 272             items: [
 273                 {
 274                     region: 'north',
 275                     layout: {
 276                         type: 'hbox',
 277                         align: 'middle'
 278                     },
 279                     baseCls: 'x-plain',
 280                     defaults: {
 281                         baseCls: 'x-plain'
 282                     },
 283                     border: false,
 284                     margin: '2 0 2 5',
 285                     items: [
 286                         {
 287                             html: '<a class="x-unselectable" target=_blank href="http://www.proxmox.com">' +
 288                                 '<img style="padding-top:4px;padding-right:5px" src="/pve2/images/proxmox_logo.png"/></a>'
 289                         },
 290                         {
 291                             minWidth: 150,
 292                             id: 'versioninfo',
 293                             html: 'Virtual Environment'
 294                         },
 295                         {
 296                             padding: 5,
 297                             html: '<a href="https://bugzilla.proxmox.com" target="_blank">BETA</a>'
 298                         },
 299                         {
 300                             xtype: 'pveGlobalSearchField',
 301                             tree: rtree
 302                         },
 303                         {
 304                             flex: 1
 305                         },
 306                         {
 307                             xtype: 'proxmoxHelpButton',
 308                             hidden: false,
 309                             baseCls: 'x-btn',
 310                             iconCls: 'fa fa-book x-btn-icon-el-default-toolbar-small ',
 311                             listenToGlobalEvent: false,
 312                             onlineHelp: 'pve_documentation_index',
 313                             text: gettext('Documentation'),
 314                             margin: '0 5 0 0'
 315                         },
 316                         createVM,
 317                         createCT,
 318                         {
 319                             pack: 'end',
 320                             margin: '0 5 0 0',
 321                             id: 'userinfo',
 322                             xtype: 'button',
 323                             baseCls: 'x-btn',
 324                             style: {
 325                                 // proxmox dark grey p light grey as border
 326                                 backgroundColor: '#464d4d',
 327                                 borderColor: '#ABBABA'
 328                             },
 329                             iconCls: 'fa fa-user',
 330                             menu: [
 331                                 {
 332                                     iconCls: 'fa fa-gear',
 333                                     text: gettext('My Settings'),
 334                                     handler: function() {
 335                                         var win = Ext.create('PVE.window.Settings');
 336                                         win.show();
 337                                     }
 338                                 },
 339                                 {
 340                                     text: gettext('Password'),
 341                                     iconCls: 'fa fa-fw fa-key',
 342                                     handler: function() {
 343                                         var win = Ext.create('Proxmox.window.PasswordEdit', {
 344                                             userid: Proxmox.UserName
 345                                         });
 346                                         win.show();
 347                                     }
 348                                 },
 349                                 {
 350                                     text: 'TFA',
 351                                     iconCls: 'fa fa-fw fa-lock',
 352                                     handler: function(btn, event, rec) {
 353                                         var win = Ext.create('PVE.window.TFAEdit',{
 354                                             userid: Proxmox.UserName
 355                                         });
 356                                         win.show();
 357                                     }
 358                                 },
 359                                 '-',
 360                                 {
 361                                     iconCls: 'fa fa-fw fa-sign-out',
 362                                     text: gettext("Logout"),
 363                                     handler: function() {
 364                                         PVE.data.ResourceStore.loadData([], false);
 365                                         me.showLogin();
 366                                         me.setContent(null);
 367                                         var rt = me.down('pveResourceTree');
 368                                         rt.setDatacenterText(undefined);
 369                                         rt.clearTree();
 370
 371                                         // empty the stores of the StatusPanel child items
 372                                         var statusPanels = Ext.ComponentQuery.query('pveStatusPanel grid');
 373                                         Ext.Array.forEach(statusPanels, function(comp) {
 374                                             if (comp.getStore()) {
 375                                                 comp.getStore().loadData([], false);
 376                                             }
 377                                         });
 378                                     }
 379                                 }
 380                             ]
 381                         }
 382                     ]
 383                 },
 384                 {
 385                     region: 'center',
 386                     stateful: true,
 387                     stateId: 'pvecenter',
 388                     minWidth: 100,
 389                     minHeight: 100,
 390                     id: 'content',
 391                     xtype: 'container',
 392                     layout: { type: 'card' },
 393                     border: false,
 394                     margin: '0 5 0 0',
 395                     items: []
 396                 },
 397                 {
 398                     region: 'west',
 399                     stateful: true,
 400                     stateId: 'pvewest',
 401                     itemId: 'west',
 402                     xtype: 'container',
 403                     border: false,
 404                     layout: { type: 'vbox', align: 'stretch' },
 405                     margin: '0 0 0 5',
 406                     split: true,
 407                     width: 200,
 408                     items: [ selview, rtree ],
 409                     listeners: {
 410                         resize: function(panel, width, height) {
 411                             var viewWidth = me.getSize().width;
 412                             if (width > viewWidth - 100) {
 413                                 panel.setWidth(viewWidth - 100);
 414                             }
 415                         }
 416                     }
 417                 },
 418                 {
 419                     xtype: 'pveStatusPanel',
 420                     stateful: true,
 421                     stateId: 'pvesouth',
 422                     itemId: 'south',
 423                     region: 'south',
 424                     margin:'0 5 5 5',
 425                     title: gettext('Logs'),
 426                     collapsible: true,
 427                     header: false,
 428                     height: 200,
 429                     split:true,
 430                     listeners: {
 431                         resize: function(panel, width, height) {
 432                             var viewHeight = me.getSize().height;
 433                             if (height > (viewHeight - 150)) {
 434                                 panel.setHeight(viewHeight - 150);
 435                             }
 436                         }
 437                     }
 438                 }
 439             ]
 440         });
 441
 442         me.callParent();
 443
 444         me.updateUserInfo();
 445
 446         // on resize, center all modal windows
 447         Ext.on('resize', function(){
 448             var wins = Ext.ComponentQuery.query('window[modal]');
 449             if (wins.length > 0) {
 450                 wins.forEach(function(win){
 451                     win.alignTo(me, 'c-c');
 452                 });
 453             }
 454         });
 455     }
 456 });
 457