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             Proxmox.Utils.API2Request({
 162                 url: '/cluster/sdn',
 163                 method: 'GET',
 164                 success: function(response) {
 165                     PVE.SDNInfo = response.result.data;
 166                 },
 167                 failure: function(response) {
 168                     PVE.SDNInfo = null;
 169                     let ui = Ext.ComponentQuery.query('treelistitem[text="SDN"]')[0];
 170                     if (ui) {
 171                         ui.addCls('x-hidden-display');
 172                     }
 173                 },
 174             });
 175         }
 176     },
 177
 178     updateUserInfo: function() {
 179         let me = this;
 180         let ui = me.query('#userinfo')[0];
 181         ui.setText(Ext.String.htmlEncode(Proxmox.UserName || ''));
 182         ui.updateLayout();
 183     },
 184
 185     updateVersionInfo: function() {
 186         let me = this;
 187
 188         let ui = me.query('#versioninfo')[0];
 189
 190         if (PVE.VersionInfo) {
 191             let version = PVE.VersionInfo.version;
 192             ui.update('Virtual Environment ' + version);
 193         } else {
 194             ui.update('Virtual Environment');
 195         }
 196         ui.updateLayout();
 197     },
 198
 199     initComponent: function() {
 200         let me = this;
 201
 202         Ext.History.init();
 203
 204         let appState = Ext.create('PVE.StateProvider');
 205         Ext.state.Manager.setProvider(appState);
 206
 207         let selview = Ext.create('PVE.form.ViewSelector');
 208
 209         let rtree = Ext.createWidget('pveResourceTree', {
 210             viewFilter: selview.getViewFilter(),
 211             flex: 1,
 212             selModel: {
 213                 selType: 'treemodel',
 214                 listeners: {
 215                     selectionchange: function(sm, selected) {
 216                         if (selected.length <= 0) {
 217                             return;
 218                         }
 219                         let treeNode = selected[0];
 220                         let treeTypeToClass = {
 221                             root: 'PVE.dc.Config',
 222                             node: 'PVE.node.Config',
 223                             qemu: 'PVE.qemu.Config',
 224                             lxc: 'PVE.lxc.Config',
 225                             storage: 'PVE.storage.Browser',
 226                             sdn: 'PVE.sdn.Browser',
 227                             pool: 'pvePoolConfig',
 228                         };
 229                         PVE.curSelectedNode = treeNode;
 230                         me.setContent({
 231                             xtype: treeTypeToClass[treeNode.data.type || 'root'] || 'pvePanelConfig',
 232                             showSearch: treeNode.data.id === 'root' || Ext.isDefined(treeNode.data.groupbyid),
 233                             pveSelNode: treeNode,
 234                             workspace: me,
 235                             viewFilter: selview.getViewFilter(),
 236                         });
 237                     },
 238                 },
 239             },
 240         });
 241
 242         selview.on('select', function(combo, records) {
 243             if (records) {
 244                 let view = combo.getViewFilter();
 245                 rtree.setViewFilter(view);
 246             }
 247         });
 248
 249         let caps = appState.get('GuiCap');
 250
 251         let createVM = Ext.createWidget('button', {
 252             pack: 'end',
 253             margin: '3 5 0 0',
 254             baseCls: 'x-btn',
 255             iconCls: 'fa fa-desktop',
 256             text: gettext("Create VM"),
 257             disabled: !caps.vms['VM.Allocate'],
 258             handler: function() {
 259                 let wiz = Ext.create('PVE.qemu.CreateWizard', {});
 260                 wiz.show();
 261             },
 262         });
 263
 264         let createCT = Ext.createWidget('button', {
 265             pack: 'end',
 266             margin: '3 5 0 0',
 267             baseCls: 'x-btn',
 268             iconCls: 'fa fa-cube',
 269             text: gettext("Create CT"),
 270             disabled: !caps.vms['VM.Allocate'],
 271             handler: function() {
 272                 let wiz = Ext.create('PVE.lxc.CreateWizard', {});
 273                 wiz.show();
 274             },
 275         });
 276
 277         appState.on('statechange', function(sp, key, value) {
 278             if (key === 'GuiCap' && value) {
 279                 caps = value;
 280                 createVM.setDisabled(!caps.vms['VM.Allocate']);
 281                 createCT.setDisabled(!caps.vms['VM.Allocate']);
 282             }
 283         });
 284
 285         Ext.apply(me, {
 286             layout: { type: 'border' },
 287             border: false,
 288             items: [
 289                 {
 290                     region: 'north',
 291                     layout: {
 292                         type: 'hbox',
 293                         align: 'middle',
 294                     },
 295                     baseCls: 'x-plain',
 296                     defaults: {
 297                         baseCls: 'x-plain',
 298                     },
 299                     border: false,
 300                     margin: '2 0 2 5',
 301                     items: [
 302                         {
 303                             xtype: 'proxmoxlogo',
 304                         },
 305                         {
 306                             minWidth: 150,
 307                             id: 'versioninfo',
 308                             html: 'Virtual Environment',
 309                         },
 310                         {
 311                             padding: 5,
 312                             html: '<a href="https://bugzilla.proxmox.com" target="_blank">BETA</a>'
 313                         },
 314                         {
 315                             xtype: 'pveGlobalSearchField',
 316                             tree: rtree,
 317                         },
 318                         {
 319                             flex: 1,
 320                         },
 321                         {
 322                             xtype: 'proxmoxHelpButton',
 323                             hidden: false,
 324                             baseCls: 'x-btn',
 325                             iconCls: 'fa fa-book x-btn-icon-el-default-toolbar-small ',
 326                             listenToGlobalEvent: false,
 327                             onlineHelp: 'pve_documentation_index',
 328                             text: gettext('Documentation'),
 329                             margin: '0 5 0 0',
 330                         },
 331                         createVM,
 332                         createCT,
 333                         {
 334                             pack: 'end',
 335                             margin: '0 5 0 0',
 336                             id: 'userinfo',
 337                             xtype: 'button',
 338                             baseCls: 'x-btn',
 339                             style: {
 340                                 // proxmox dark grey p light grey as border
 341                                 backgroundColor: '#464d4d',
 342                                 borderColor: '#ABBABA',
 343                             },
 344                             iconCls: 'fa fa-user',
 345                             menu: [
 346                                 {
 347                                     iconCls: 'fa fa-gear',
 348                                     text: gettext('My Settings'),
 349                                     handler: function() {
 350                                         var win = Ext.create('PVE.window.Settings');
 351                                         win.show();
 352                                     },
 353                                 },
 354                                 {
 355                                     text: gettext('Password'),
 356                                     iconCls: 'fa fa-fw fa-key',
 357                                     handler: function() {
 358                                         var win = Ext.create('Proxmox.window.PasswordEdit', {
 359                                             userid: Proxmox.UserName,
 360                                         });
 361                                         win.show();
 362                                     },
 363                                 },
 364                                 {
 365                                     text: 'TFA',
 366                                     iconCls: 'fa fa-fw fa-lock',
 367                                     handler: function(btn, event, rec) {
 368                                         var win = Ext.create('PVE.window.TFAEdit', {
 369                                             userid: Proxmox.UserName,
 370                                         });
 371                                         win.show();
 372                                     },
 373                                 },
 374                                 {
 375                                     iconCls: 'fa fa-language',
 376                                     text: gettext('Language'),
 377                                     handler: function() {
 378                                         Ext.create('Proxmox.window.LanguageEditWindow')
 379                                             .show();
 380                                     },
 381                                 },
 382                                 '-',
 383                                 {
 384                                     iconCls: 'fa fa-fw fa-sign-out',
 385                                     text: gettext("Logout"),
 386                                     handler: function() {
 387                                         PVE.data.ResourceStore.loadData([], false);
 388                                         me.showLogin();
 389                                         me.setContent(null);
 390                                         var rt = me.down('pveResourceTree');
 391                                         rt.setDatacenterText(undefined);
 392                                         rt.clearTree();
 393
 394                                         // empty the stores of the StatusPanel child items
 395                                         var statusPanels = Ext.ComponentQuery.query('pveStatusPanel grid');
 396                                         Ext.Array.forEach(statusPanels, function(comp) {
 397                                             if (comp.getStore()) {
 398                                                 comp.getStore().loadData([], false);
 399                                             }
 400                                         });
 401                                     },
 402                                 },
 403                             ],
 404                         },
 405                     ],
 406                 },
 407                 {
 408                     region: 'center',
 409                     stateful: true,
 410                     stateId: 'pvecenter',
 411                     minWidth: 100,
 412                     minHeight: 100,
 413                     id: 'content',
 414                     xtype: 'container',
 415                     layout: { type: 'card' },
 416                     border: false,
 417                     margin: '0 5 0 0',
 418                     items: [],
 419                 },
 420                 {
 421                     region: 'west',
 422                     stateful: true,
 423                     stateId: 'pvewest',
 424                     itemId: 'west',
 425                     xtype: 'container',
 426                     border: false,
 427                     layout: { type: 'vbox', align: 'stretch' },
 428                     margin: '0 0 0 5',
 429                     split: true,
 430                     width: 200,
 431                     items: [selview, rtree],
 432                     listeners: {
 433                         resize: function(panel, width, height) {
 434                             var viewWidth = me.getSize().width;
 435                             if (width > viewWidth - 100) {
 436                                 panel.setWidth(viewWidth - 100);
 437                             }
 438                         },
 439                     },
 440                 },
 441                 {
 442                     xtype: 'pveStatusPanel',
 443                     stateful: true,
 444                     stateId: 'pvesouth',
 445                     itemId: 'south',
 446                     region: 'south',
 447                     margin: '0 5 5 5',
 448                     title: gettext('Logs'),
 449                     collapsible: true,
 450                     header: false,
 451                     height: 200,
 452                     split: true,
 453                     listeners: {
 454                         resize: function(panel, width, height) {
 455                             var viewHeight = me.getSize().height;
 456                             if (height > viewHeight - 150) {
 457                                 panel.setHeight(viewHeight - 150);
 458                             }
 459                         },
 460                     },
 461                 },
 462             ],
 463         });
 464
 465         me.callParent();
 466
 467         me.updateUserInfo();
 468
 469         // on resize, center all modal windows
 470         Ext.on('resize', function() {
 471             let modalWindows = Ext.ComponentQuery.query('window[modal]');
 472             if (modalWindows.length > 0) {
 473                 modalWindows.forEach(win => win.alignTo(me, 'c-c'));
 474             }
 475         });
 476     },
 477 });
 478