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