js/QuarantineView.js

   1 Ext.define('PMG.QuarantineNavigationTree', {
   2     extend: 'Ext.list.Tree',
   3     xtype: 'quarantinenavigationtree',
   4
   5     select: function(path) {
   6         let me = this;
   7         let item = me.getStore().findRecord('path', path, 0, false, true, true);
   8         me.setSelection(item);
   9     },
  10
  11     store: {
  12         root: {
  13             expanded: true,
  14             children: [
  15                 {
  16                     text: gettext('Spam Quarantine'),
  17                     iconCls: 'fa fa-cubes',
  18                     path: 'pmgSpamQuarantine',
  19                     expanded: true,
  20                     children: [
  21                         {
  22                             text: gettext('Whitelist'),
  23                             iconCls: 'fa fa-file-o',
  24                             path: 'pmgUserWhitelist',
  25                             leaf: true,
  26                         },
  27                         {
  28                             text: gettext('Blacklist'),
  29                             iconCls: 'fa fa-file',
  30                             path: 'pmgUserBlacklist',
  31                             leaf: true,
  32                         },
  33                     ],
  34                 },
  35             ],
  36         },
  37     },
  38
  39     animation: false,
  40     expanderOnly: true,
  41     expanderFirst: false,
  42     ui: 'pve-nav',
  43 });
  44
  45 Ext.define('PMG.QuarantineView', {
  46     extend: 'Ext.container.Container',
  47     xtype: 'quarantineview',
  48
  49     title: 'Proxmox Mail Gateway Quarantine',
  50
  51     controller: {
  52         xclass: 'Ext.app.ViewController',
  53         routes: {
  54             ':path:subpath': {
  55                 action: 'changePath',
  56                 before: 'beforeChangePath',
  57                 conditions: {
  58                     ':path': '(?:([%a-zA-Z0-9\\-\\_\\s,]+))',
  59                     ':subpath': '(?:(?::)([%a-zA-Z0-9\\-\\_\\s,]+))?',
  60                 },
  61             },
  62         },
  63
  64         beforeChangePath: function(path, subpathOrAction, action) {
  65             let me = this;
  66
  67             let subpath = subpathOrAction;
  68             if (!action) {
  69                 action = subpathOrAction;
  70                 subpath = undefined;
  71             }
  72
  73             if (!Ext.ClassManager.getByAlias('widget.'+ path)) {
  74                 console.warn('xtype "'+path+'" not found');
  75                 action.stop();
  76                 return;
  77             }
  78
  79             let lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
  80             if (lastpanel && lastpanel.xtype === path) {
  81                 // we have the right component already,
  82                 // we just need to select the correct tab
  83                 // default to the first
  84                 subpath = subpath || 0;
  85                 if (lastpanel.getActiveTab) {
  86                     // we assume lastpanel is a tabpanel
  87                     if (lastpanel.getActiveTab().getItemId() !== subpath) {
  88                         // set the active tab
  89                         lastpanel.setActiveTab(subpath);
  90                     }
  91                     // else we are already there
  92                 }
  93                 action.stop();
  94                 return;
  95             }
  96
  97             action.resume();
  98         },
  99
 100         changePath: function(path, subpath) {
 101             let me = this;
 102             let contentpanel = me.lookupReference('contentpanel');
 103             let lastpanel = contentpanel.getLayout().getActiveItem();
 104
 105             let obj = contentpanel.add({ xtype: path, cselect: subpath });
 106             let treelist = me.lookupReference('navtree');
 107
 108             treelist.suspendEvents();
 109             treelist.select(path);
 110             treelist.resumeEvents();
 111
 112             if (Ext.isFunction(obj.setActiveTab)) {
 113                 obj.setActiveTab(subpath || 0);
 114                 obj.addListener('tabchange', function(tabpanel, newc, oldc) {
 115                     let newpath = path;
 116
 117                     // only add the subpath part for the
 118                     // non-default tabs
 119                     if (tabpanel.items.findIndex('id', newc.id) !== 0) {
 120                         newpath += ":" + newc.getItemId();
 121                     }
 122
 123                     me.redirectTo(newpath);
 124                 });
 125             }
 126
 127             contentpanel.setActiveItem(obj);
 128
 129             if (lastpanel) {
 130                 contentpanel.remove(lastpanel, { destroy: true });
 131             }
 132         },
 133
 134         logout: function() {
 135             PMG.app.logout();
 136         },
 137
 138         changeLanguage: function() {
 139             Ext.create('Proxmox.window.LanguageEditWindow', {
 140                 cookieName: 'PMGLangCookie',
 141             }).show();
 142         },
 143
 144         changeTheme: () => Ext.create('Proxmox.window.ThemeEditWindow', {
 145                 cookieName: 'PMGThemeCookie',
 146                 autoShow: true,
 147         }),
 148         navigate: function(treelist, item) {
 149             this.redirectTo(item.get('path'));
 150         },
 151
 152         execQuarantineAction: function(qa) {
 153             PMG.Utils.doQuarantineAction(qa.action, qa.cselect);
 154         },
 155
 156         control: {
 157             '[reference=logoutButton]': {
 158                 click: 'logout',
 159             },
 160             '[reference=languageButton]': {
 161                 click: 'changeLanguage',
 162             },
 163             '[reference=themeButton]': {
 164                 click: 'changeTheme',
 165             },
 166         },
 167
 168         init: function(view) {
 169             let me = this;
 170
 171             // load username
 172             let username = Proxmox.UserName.replace(/@quarantine$/, '');
 173             me.lookupReference('usernameinfo').setText(username);
 174
 175             // show login on requestexception
 176             // fixme: what about other errors
 177             Ext.Ajax.on('requestexception', function(conn, response, options) {
 178                 if (response.status === 401) { // auth failure
 179                     me.logout();
 180                 }
 181             });
 182
 183             let qa = PMG.Utils.extractQuarantineAction();
 184             let token;
 185             if (qa) {
 186                 token = 'pmgSpamQuarantine';
 187                 if (qa.action === 'blacklist') { token = 'pmgUserBlacklist'; }
 188                 if (qa.action === 'whitelist') { token = 'pmgUserWhitelist'; }
 189                 if (qa.cselect) {
 190                     token += ':' + qa.cselect;
 191                 }
 192                 this.redirectTo(token, true);
 193                 if (qa.action) {
 194                     me.execQuarantineAction(qa);
 195                 }
 196             } else {
 197                 // select treeitem and load page from url fragment
 198
 199                 token = Ext.util.History.getToken() || 'pmgSpamQuarantine';
 200                 this.redirectTo(token, true);
 201             }
 202         },
 203     },
 204
 205     plugins: 'viewport',
 206
 207     layout: {
 208         type: 'border',
 209     },
 210
 211     items: [
 212         {
 213             region: 'north',
 214             xtype: 'container',
 215             layout: {
 216                 type: 'hbox',
 217                 align: 'middle',
 218             },
 219             margin: '2 0 2 5',
 220             height: 38,
 221             items: [
 222                 {
 223                     xtype: 'proxmoxlogo',
 224                 },
 225                 {
 226                     padding: '0 0 0 5',
 227                     xtype: 'versioninfo',
 228                 },
 229                 {
 230                     flex: 1,
 231                 },
 232                 {
 233                     xtype: 'button',
 234                     reference: 'usernameinfo',
 235                     style: {
 236                         // proxmox dark grey p light grey as border
 237                         backgroundColor: '#464d4d',
 238                         borderColor: '#ABBABA',
 239                     },
 240                     margin: '0 5 0 0',
 241                     iconCls: 'fa fa-user',
 242                     menu: [
 243                         {
 244                             reference: 'themeButton',
 245                             iconCls: 'fa fa-paint-brush',
 246                             text: gettext('Theme'),
 247                         },
 248                         {
 249                             iconCls: 'fa fa-language',
 250                             text: gettext('Language'),
 251                             reference: 'languageButton',
 252                         },
 253                         '-',
 254                         {
 255                             reference: 'logoutButton',
 256                             iconCls: 'fa fa-sign-out',
 257                             text: gettext('Logout'),
 258                         },
 259                     ],
 260                 },
 261             ],
 262         },
 263         {
 264             xtype: 'panel',
 265             scrollable: 'y',
 266             border: false,
 267             region: 'west',
 268             layout: {
 269                 type: 'vbox',
 270                 align: 'stretch',
 271             },
 272             items: [
 273                 {
 274                     xtype: 'quarantinenavigationtree',
 275                     reference: 'navtree',
 276                     minWidth: 180,
 277                     // we have to define it here until extjs 6.2 because of a bug where a
 278                     // viewcontroller does not detect the selectionchange event of a treelist
 279                     listeners: {
 280                         selectionchange: 'navigate',
 281                     },
 282                 },
 283                 {
 284                     xtype: 'box',
 285                     cls: 'x-treelist-pve-nav',
 286                     flex: 1,
 287                 },
 288             ],
 289         },
 290         {
 291             xtype: 'panel',
 292             layout: {
 293                 type: 'card',
 294             },
 295             region: 'center',
 296             border: false,
 297             reference: 'contentpanel',
 298         },
 299     ],
 300 });