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