www/MainView.js

   1 Ext.define('PBS.MainView', {
   2     extend: 'Ext.container.Container',
   3     xtype: 'mainview',
   4
   5     title: 'Proxmox Backup Server',
   6
   7     controller: {
   8         xclass: 'Ext.app.ViewController',
   9         routes: {
  10             ':path:subpath': {
  11                 action: 'changePath',
  12                 before: 'beforeChangePath',
  13                 conditions : {
  14                     ':path'    : '(?:([%a-zA-Z0-9\\-\\_\\s,]+))',
  15                     ':subpath' : '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?'
  16                 }
  17             }
  18         },
  19
  20         beforeChangePath: function(path, subpath, action) {
  21             var me = this;
  22
  23             if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
  24                 console.warn('xtype "'+path+'" not found');
  25                 action.stop();
  26                 return;
  27             }
  28
  29             var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
  30             if (lastpanel && lastpanel.xtype === path) {
  31                 // we have the right component already,
  32                 // we just need to select the correct tab
  33                 // default to the first
  34                 subpath = subpath || 0;
  35                 if (lastpanel.getActiveTab) {
  36                     // we assume lastpanel is a tabpanel
  37                     if (lastpanel.getActiveTab().getItemId() !== subpath) {
  38                         // set the active tab
  39                         lastpanel.setActiveTab(subpath);
  40                     }
  41                     // else we are already there
  42                 }
  43                 action.stop();
  44                 return;
  45             }
  46
  47             action.resume();
  48         },
  49
  50         changePath: function(path,subpath) {
  51             var me = this;
  52             var contentpanel = me.lookupReference('contentpanel');
  53             var lastpanel = contentpanel.getLayout().getActiveItem();
  54
  55             var obj = contentpanel.add({ xtype: path });
  56             var treelist = me.lookupReference('navtree');
  57
  58             treelist.suspendEvents();
  59             treelist.select(path);
  60             treelist.resumeEvents();
  61
  62             if (Ext.isFunction(obj.setActiveTab)) {
  63                 obj.setActiveTab(subpath || 0);
  64                 obj.addListener('tabchange', function(tabpanel, newc, oldc) {
  65                     var newpath = path;
  66
  67                     // only add the subpath part for the
  68                     // non-default tabs
  69                     if (tabpanel.items.findIndex('id', newc.id) !== 0) {
  70                         newpath += ":" + newc.getItemId();
  71                     }
  72
  73                     me.redirectTo(newpath);
  74                 });
  75             }
  76
  77             contentpanel.setActiveItem(obj);
  78
  79             if (lastpanel) {
  80                 contentpanel.remove(lastpanel, { destroy: true });
  81             }
  82
  83         },
  84
  85         logout: function() {
  86             PBS.app.logout();
  87         },
  88
  89         navigate: function(treelist, item) {
  90             this.redirectTo(item.get('path'));
  91         },
  92
  93         control: {
  94             'button[reference=logoutButton]': {
  95                 click: 'logout'
  96             }
  97         },
  98
  99         init: function(view) {
 100             var me = this;
 101
 102             me.lookupReference('usernameinfo').update({username:Proxmox.UserName});
 103
 104             // show login on requestexception
 105             // fixme: what about other errors
 106             Ext.Ajax.on('requestexception', function(conn, response, options) {
 107                 if (response.status == 401) { // auth failure
 108                     me.logout();
 109                 }
 110             });
 111
 112             // get ticket periodically
 113             Ext.TaskManager.start({
 114                 run: function() {
 115                     var ticket = Proxmox.Utils.authOK();
 116                     if (!ticket || !Proxmox.UserName) {
 117                         return;
 118                     }
 119
 120                     Ext.Ajax.request({
 121                         params: {
 122                             username: Proxmox.UserName,
 123                             password: ticket
 124                         },
 125                         url: '/api2/json/access/ticket',
 126                         method: 'POST',
 127                         failure: function() {
 128                             me.logout();
 129                         },
 130                         success: function(response, opts) {
 131                             var obj = Ext.decode(response.responseText);
 132                             PBS.Utils.updateLoginData(obj.data);
 133                         }
 134                     });
 135                 },
 136                 interval: 15*60*1000
 137             });
 138
 139
 140             // select treeitem and load page from url fragment, if set
 141             let token = Ext.util.History.getToken() || 'pbsDashboard';
 142             this.redirectTo(token, true);
 143         }
 144     },
 145
 146     plugins: 'viewport',
 147
 148     layout: { type: 'border' },
 149
 150     items: [
 151         {
 152             region: 'north',
 153             xtype: 'container',
 154             layout: {
 155                 type: 'hbox',
 156                 align: 'middle'
 157             },
 158             margin: '2 5 2 5',
 159             height: 38,
 160             items: [
 161                 {
 162                     xtype: 'proxmoxlogo'
 163                 },
 164                 {
 165                     xtype: 'versioninfo'
 166                 },
 167                 {
 168                     flex: 1
 169                 },
 170                 {
 171                     baseCls: 'x-plain',
 172                     reference: 'usernameinfo',
 173                     padding: '0 5',
 174                     tpl: Ext.String.format(gettext("You are logged in as {0}"), "'{username}'")
 175                 },
 176                 {
 177                     xtype: 'button',
 178                     baseCls: 'x-btn',
 179                     cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 180                     iconCls: 'fa fa-book x-btn-icon-el-default-toolbar-small ',
 181                     text: gettext('Documentation'),
 182                     href: '/docs/index.html',
 183                     margin: '0 5 0 0',
 184                 },
 185                 {
 186                     reference: 'logoutButton',
 187                     xtype: 'button',
 188                     iconCls: 'fa fa-sign-out',
 189                     text: gettext('Logout')
 190                 }
 191             ]
 192         },
 193         {
 194             xtype: 'panel',
 195             scrollable: 'y',
 196             border: false,
 197             region: 'west',
 198             layout: {
 199                 type: 'vbox',
 200                 align: 'stretch'
 201             },
 202             items: [{
 203                 xtype: 'navigationtree',
 204                 minWidth: 180,
 205                 reference: 'navtree',
 206                 // we have to define it here until extjs 6.2
 207                 // because of a bug where a viewcontroller does not detect
 208                 // the selectionchange event of a treelist
 209                 listeners: {
 210                     selectionchange: 'navigate'
 211                 }
 212             }, {
 213                 xtype: 'box',
 214                 cls: 'x-treelist-nav',
 215                 flex: 1
 216             }]
 217         },
 218         {
 219             xtype: 'panel',
 220             layout: { type: 'card' },
 221             region: 'center',
 222             border: false,
 223             reference: 'contentpanel'
 224         }
 225     ]
 226 });
 227
 228