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             let xtype = path;
  24             let datastore;
  25             let isDataStore = PBS.Utils.isDataStorePath(path);
  26             if (isDataStore) {
  27                 xtype = 'pbsDataStorePanel';
  28                 datastore = PBS.Utils.getDataStoreFromPath(path);
  29             }
  30
  31             if (!Ext.ClassManager.getByAlias(`widget.${xtype}`)) {
  32                 console.warn(`xtype ${xtype} not found`);
  33                 action.stop();
  34                 return;
  35             }
  36
  37             var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
  38             if (lastpanel && lastpanel.xtype === xtype) {
  39                 if (isDataStore) {
  40                     if (datastore === lastpanel.datastore) {
  41                         action.stop();
  42                         return;
  43                     }
  44                 } else {
  45                     // we have the right component already,
  46                     // we just need to select the correct tab
  47                     // default to the first
  48                     subpath = subpath || 0;
  49                     if (lastpanel.getActiveTab) {
  50                         // we assume lastpanel is a tabpanel
  51                         if (lastpanel.getActiveTab().getItemId() !== subpath) {
  52                             // set the active tab
  53                             lastpanel.setActiveTab(subpath);
  54                         }
  55                         // else we are already there
  56                     }
  57                     action.stop();
  58                     return;
  59                 }
  60             }
  61
  62             action.resume();
  63         },
  64
  65         changePath: function(path, subpath) {
  66             var me = this;
  67             var contentpanel = me.lookupReference('contentpanel');
  68             var lastpanel = contentpanel.getLayout().getActiveItem();
  69
  70             var obj;
  71             if (PBS.Utils.isDataStorePath(path)) {
  72                 let datastore = PBS.Utils.getDataStoreFromPath(path);
  73                 obj = contentpanel.add({
  74                     xtype: 'pbsDataStorePanel',
  75                     nodename: 'localhost',
  76                     datastore,
  77                 });
  78             } else {
  79                 obj = contentpanel.add({
  80                     xtype: path,
  81                     nodename: 'localhost',
  82                     border: false,
  83                 });
  84             }
  85
  86             var treelist = me.lookupReference('navtree');
  87
  88             treelist.suspendEvents();
  89             if (subpath === undefined) {
  90                 treelist.select(path);
  91             } else {
  92                 treelist.select(path + ':' + subpath);
  93             }
  94             treelist.resumeEvents();
  95
  96             if (Ext.isFunction(obj.setActiveTab)) {
  97                 obj.setActiveTab(subpath || 0);
  98                 obj.addListener('tabchange', function(tabpanel, newc, oldc) {
  99                     var newpath = path;
 100
 101                     // only add the subpath part for the
 102                     // non-default tabs
 103                     if (tabpanel.items.findIndex('id', newc.id) !== 0) {
 104                         newpath += ":" + newc.getItemId();
 105                     }
 106
 107                     me.redirectTo(newpath);
 108                 });
 109             }
 110
 111             contentpanel.setActiveItem(obj);
 112
 113             if (lastpanel) {
 114                 contentpanel.remove(lastpanel, { destroy: true });
 115             }
 116         },
 117
 118         logout: function() {
 119             PBS.app.logout();
 120         },
 121
 122         navigate: function(treelist, item) {
 123             this.redirectTo(item.get('path'));
 124         },
 125
 126         control: {
 127             '[reference=logoutButton]': {
 128                 click: 'logout',
 129             },
 130         },
 131
 132         init: function(view) {
 133             var me = this;
 134
 135             PBS.data.RunningTasksStore.startUpdate();
 136             me.lookupReference('usernameinfo').setText(Proxmox.UserName);
 137
 138             // show login on requestexception
 139             // fixme: what about other errors
 140             Ext.Ajax.on('requestexception', function(conn, response, options) {
 141                 if (response.status === 401 || response.status === '401') { // auth failure
 142                     me.logout();
 143                 }
 144             });
 145
 146             // get ticket periodically
 147             Ext.TaskManager.start({
 148                 run: function() {
 149                     var ticket = Proxmox.Utils.authOK();
 150                     if (!ticket || !Proxmox.UserName) {
 151                         return;
 152                     }
 153
 154                     Ext.Ajax.request({
 155                         params: {
 156                             username: Proxmox.UserName,
 157                             password: ticket,
 158                         },
 159                         url: '/api2/json/access/ticket',
 160                         method: 'POST',
 161                         failure: function() {
 162                             me.logout();
 163                         },
 164                         success: function(response, opts) {
 165                             var obj = Ext.decode(response.responseText);
 166                             PBS.Utils.updateLoginData(obj.data);
 167                         },
 168                     });
 169                 },
 170                 interval: 15*60*1000,
 171             });
 172
 173
 174             // select treeitem and load page from url fragment, if set
 175             let token = Ext.util.History.getToken() || 'pbsDashboard';
 176             this.redirectTo(token, true);
 177         },
 178     },
 179
 180     plugins: 'viewport',
 181
 182     layout: { type: 'border' },
 183
 184     items: [
 185         {
 186             region: 'north',
 187             xtype: 'container',
 188             layout: {
 189                 type: 'hbox',
 190                 align: 'middle',
 191             },
 192             margin: '2 0 2 5',
 193             height: 38,
 194             items: [
 195                 {
 196                     xtype: 'proxmoxlogo',
 197                     prefix: '',
 198                 },
 199                 {
 200                     padding: '0 0 0 5',
 201                     xtype: 'versioninfo',
 202                 },
 203                 {
 204                     padding: 5,
 205                     html: '<a href="https://bugzilla.proxmox.com" target="_blank">BETA</a>',
 206                     baseCls: 'x-plain',
 207                 },
 208                 {
 209                     flex: 1,
 210                     baseCls: 'x-plain',
 211                 },
 212                 {
 213                     xtype: 'button',
 214                     baseCls: 'x-btn',
 215                     cls: 'x-btn-default-toolbar-small proxmox-inline-button',
 216                     iconCls: 'fa fa-book x-btn-icon-el-default-toolbar-small ',
 217                     text: gettext('Documentation'),
 218                     href: '/docs/index.html',
 219                     margin: '0 5 0 0',
 220                 },
 221                 {
 222                     xtype: 'pbsTaskButton',
 223                     margin: '0 5 0 0',
 224                 },
 225                 {
 226                     xtype: 'button',
 227                     reference: 'usernameinfo',
 228                     style: {
 229                         // proxmox dark grey p light grey as border
 230                         backgroundColor: '#464d4d',
 231                         borderColor: '#ABBABA',
 232                     },
 233                     margin: '0 5 0 0',
 234                     iconCls: 'fa fa-user',
 235                     menu: [
 236                         {
 237                             reference: 'logoutButton',
 238                             iconCls: 'fa fa-sign-out',
 239                             text: gettext('Logout'),
 240                         },
 241                     ],
 242                 },
 243             ],
 244         },
 245         {
 246             xtype: 'panel',
 247             scrollable: 'y',
 248             border: false,
 249             region: 'west',
 250             layout: {
 251                 type: 'vbox',
 252                 align: 'stretch',
 253             },
 254             items: [{
 255                 xtype: 'navigationtree',
 256                 minWidth: 180,
 257                 reference: 'navtree',
 258                 // we have to define it here until extjs 6.2
 259                 // because of a bug where a viewcontroller does not detect
 260                 // the selectionchange event of a treelist
 261                 listeners: {
 262                     selectionchange: 'navigate',
 263                 },
 264             }, {
 265                 xtype: 'box',
 266                 cls: 'x-treelist-nav',
 267                 flex: 1,
 268             }],
 269         },
 270         {
 271             xtype: 'panel',
 272             layout: { type: 'card' },
 273             region: 'center',
 274             border: false,
 275             reference: 'contentpanel',
 276         },
 277     ],
 278 });