js/QuarantineView.js

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