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