]> git.proxmox.com Git - pmg-gui.git/blobdiff - js/SpamQuarantine.js
quarantine: restore behavior of selecting next in list after action
[pmg-gui.git] / js / SpamQuarantine.js
index f5c08f3ae3c4edefd191c60ab99de42db2893164..f580ab3cf468f922a187c5273b6396a72f855b3a 100644 (file)
@@ -3,18 +3,18 @@ Ext.define('pmg-spam-archive', {
     fields: [
        { type: 'number', name: 'spamavg' },
        { type: 'integer', name: 'count' },
-        { type: 'date', dateFormat: 'timestamp', name: 'day' }
+        { type: 'date', dateFormat: 'timestamp', name: 'day' },
     ],
     proxy: {
         type: 'proxmox',
-        url: "/api2/json/quarantine/spam"
+        url: "/api2/json/quarantine/spam",
     },
-    idProperty: 'day'
+    idProperty: 'day',
 });
 
 Ext.define('pmg-spam-list', {
     extend: 'Ext.data.Model',
-    fields: [ 'id', 'envelope_sender', 'from', 'sender', 'receiver', 'subject',
+    fields: ['id', 'envelope_sender', 'from', 'sender', 'receiver', 'subject',
        { type: 'number', name: 'spamlevel' },
        { type: 'integer', name: 'bytes' },
        { type: 'date', dateFormat: 'timestamp', name: 'time' },
@@ -23,119 +23,14 @@ Ext.define('pmg-spam-list', {
            name: 'day',
            convert: function(v, rec) {
                return Ext.Date.format(rec.get('time'), 'Y-m-d');
-           }, depends: ['time']
-       }
+           }, depends: ['time'],
+       },
     ],
     proxy: {
         type: 'proxmox',
        url: "/api2/json/quarantine/spam",
     },
-    idProperty: 'id'
-});
-
-Ext.define('PMG.SpamList', {
-    extend: 'Ext.grid.GridPanel',
-    xtype: 'pmgSpamList',
-
-    title: gettext('Spam List'),
-
-    emptyText: gettext('No E-Mail address selected'),
-    viewConfig: {
-       deferEmptyText: false
-    },
-
-    setUser: function(user) {
-       var me = this;
-       var params = me.getStore().getProxy().getExtraParams();
-       params.pmail = user;
-       me.getStore().getProxy().setExtraParams(params);
-       me.user = user;
-    },
-
-    setFrom: function(from) {
-       var me = this;
-       var params = me.getStore().getProxy().getExtraParams();
-       params.starttime = from;
-       me.getStore().getProxy().setExtraParams(params);
-    },
-
-    setTo: function(to) {
-       var me = this;
-       var params = me.getStore().getProxy().getExtraParams();
-       params.endtime = to;
-       me.getStore().getProxy().setExtraParams(params);
-    },
-
-    load: function() {
-       var me = this;
-       if (me.user || PMG.view === 'quarantine') {
-           // extjs has no method to dynamically change the emptytext on
-           // grids, so we have to do it this way
-           var view = me.getView();
-           view.emptyText = '<div class="x-grid-empty">'+ gettext('No Spam E-Mails found') + '</div>';
-           view.refresh();
-       }
-       me.getStore().load();
-    },
-
-    store: {
-       model: 'pmg-spam-list',
-       groupField: 'day',
-       groupDir: 'DESC',
-       sorters: [{
-           property: 'time',
-           direction: 'DESC'
-       }]
-    },
-
-    features: [
-       {
-           ftype: 'grouping',
-           groupHeaderTpl: '{columnName}: {name} ({children.length})'
-       }
-    ],
-
-    columns: [
-        {
-            header: gettext('Sender/Subject'),
-            dataIndex: 'subject',
-           renderer: function(value, metaData, rec) {
-               var subject = Ext.htmlEncode(value);
-               var from = Ext.htmlEncode(rec.data.from);
-               var sender = Ext.htmlEncode(rec.data.sender);
-               if (sender) {
-                   from = Ext.String.format(gettext("{0} on behalf of {1}"),
-                                            sender, from);
-               }
-               return '<small>' + from + '</small><br>' + subject;
-           },
-           flex: 1
-        },
-       {
-           header: gettext('Score'),
-           dataIndex: 'spamlevel',
-           align: 'right',
-           width: 70,
-       },
-       {
-           header: gettext('Size') + ' (KB)',
-           renderer: function(v) { return Ext.Number.toFixed(v/1024, 0); },
-           dataIndex: 'bytes',
-           align: 'right',
-           width: 90,
-       },
-       {
-           header: gettext('Date'),
-           dataIndex: 'day',
-           hidden: true
-       },
-       {
-           xtype: 'datecolumn',
-           header: gettext('Time'),
-           dataIndex: 'time',
-           format: 'H:m:s'
-       },
-    ]
+    idProperty: 'id',
 });
 
 Ext.define('PMG.SpamQuarantine', {
@@ -143,215 +38,347 @@ Ext.define('PMG.SpamQuarantine', {
     xtype: 'pmgSpamQuarantine',
 
     border: false,
-    layout: 'border',
+    layout: { type: 'border' },
 
     defaults: { border: false },
 
-    controller: {
-
-        xclass: 'Ext.app.ViewController',
-
-        init: function(view) {
-           var me = this;
-           var spamlist = me.lookupReference('spamlist');
-           if (PMG.view === 'quarantine') {
-               spamlist.down('combobox[name=email]').setVisible(false);
-               spamlist.load();
-           }
-
-           // we to this to trigger the change event of those fields
-           var today = new Date();
-           spamlist.down('datefield[name=from]').setValue(today);
-           spamlist.down('datefield[name=to]').setValue(today);
-        },
+    // from mail link
+    cselect: undefined,
 
-       changeEmail: function(tb, value) {
-           var spamlist = this.lookupReference('spamlist');
-           spamlist.setUser(value);
-           spamlist.load();
+    viewModel: {
+       parent: null,
+       data: {
+           mailid: '',
        },
-
-       resetEmail: function() {
-           if (PMG.view !== 'quarantine') {
-               var spamlist = this.lookupReference('spamlist');
-               spamlist.setUser(undefined);
-           }
+       formulas: {
+           downloadMailURL: get => '/api2/json/quarantine/download?mailid=' + encodeURIComponent(get('mailid')),
        },
+    },
+    controller: {
 
-       onSelectMail: function() {
-           var me = this;
-           var spamlist = this.lookupReference('spamlist');
-           var rec = spamlist.selModel.getSelection()[0];
+       xclass: 'Ext.app.ViewController',
 
+       updatePreview: function(raw, rec) {
            var preview = this.lookupReference('preview');
 
-           if (!rec || !rec.data || !rec.data.id)  {
+           if (!rec || !rec.data || !rec.data.id) {
                preview.update('');
-               me.lookupReference('preview').setDisabled(true);
+               preview.setDisabled(true);
                return;
            }
 
-           me.lookupReference('preview').setDisabled(false);
-
-           var raw = me.raw || false;
-
-           var url = '/api2/htmlmail/quarantine/content?id=' + rec.data.id + ((raw)?'&raw=1':'');
+           var url = '/api2/htmlmail/quarantine/content?id=' + rec.data.id + (raw?'&raw=1':'');
+           preview.setDisabled(false);
+           this.lookupReference('raw').setDisabled(false);
+           this.lookupReference('spam').setDisabled(false);
+           this.lookupReference('download').setDisabled(false);
            preview.update("<iframe frameborder=0 width=100% height=100% sandbox='allow-same-origin' src='" + url +"'></iframe>");
        },
 
-       rawMail: function(button) {
-           var me = this;
-           me.lookupReference('html').setVisible(true);
-           button.setVisible(false);
-           me.raw = true;
-           me.onSelectMail();
+       multiSelect: function(selection) {
+           var preview = this.lookupReference('preview');
+           var raw = this.lookupReference('raw');
+           var spam = this.lookupReference('spam');
+           var spaminfo = this.lookupReference('spaminfo');
+           var mailinfo = this.lookupReference('mailinfo');
+           var download = this.lookupReference('download');
+
+           preview.setDisabled(false);
+           preview.update(`<h3 style="padding-left:5px;">${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`);
+           raw.setDisabled(true);
+           spam.setDisabled(true);
+           spam.setPressed(false);
+           spaminfo.setVisible(false);
+           mailinfo.setVisible(false);
+           download.setDisabled(true);
        },
 
-       htmlMail: function(button) {
+       toggleRaw: function(button) {
            var me = this;
-           me.lookupReference('raw').setVisible(true);
-           button.setVisible(false);
-           me.raw = false;
-           me.onSelectMail();
+           var list = me.lookupReference('list');
+           var rec = list.selModel.getSelection()[0];
+           me.lookupReference('mailinfo').setVisible(me.raw);
+           me.raw = !me.raw;
+           me.updatePreview(me.raw, rec);
        },
 
-       changeTime: function(field, value) {
+       btnHandler: function(button, e) {
            var me = this;
-           if (!value) {
+           var action = button.reference;
+           var list = this.lookupReference('list');
+           var selected = list.getSelection();
+           me.doAction(action, selected);
+       },
+
+       doAction: function(action, selected) {
+           if (!selected.length) {
                return;
            }
-           var val = value.getTime()/1000;
-           var spamlist = me.lookupReference('spamlist');
-           var combobox = me.lookupReference('email');
-           var params = combobox.getStore().getProxy().getExtraParams();
 
-           var to = me.lookupReference('to');
-           var from = me.lookupReference('from');
+           var list = this.lookupReference('list');
+
+           if (selected.length > 1) {
+               let idlist = selected.map(item => item.data.id);
+               Ext.Msg.confirm(
+                   gettext('Confirm'),
+                   Ext.String.format(
+                       gettext("Action '{0}' for '{1}' items"),
+                       action, selected.length,
+                   ),
+                   async function(button) {
+                       if (button !== 'yes') {
+                           return;
+                       }
+
+                       list.mask(gettext('Processing...'), 'x-mask-loading');
+
+                       const sliceSize = 2500, maxInFlight = 2;
+                       let batches = [], batchCount = Math.ceil(selected.length / sliceSize);
+                       for (let i = 0; i * sliceSize < selected.length; i++) {
+                           let sliceStart = i * sliceSize;
+                           let sliceEnd = Math.min(sliceStart + sliceSize, selected.length);
+                           batches.push(
+                               PMG.Async.doQAction(
+                                   action,
+                                   idlist.slice(sliceStart, sliceEnd),
+                                   i + 1,
+                                   batchCount,
+                               ),
+                           );
+                           if (batches.length >= maxInFlight) {
+                               await Promise.allSettled(batches); // eslint-disable-line no-await-in-loop
+                               batches = [];
+                           }
+                       }
+                       await Promise.allSettled(batches); // await possible remaining ones
+                       list.unmask();
+                       // below can be slow, we could remove directly from the in-memory store, but
+                       // with lots of elements and some failures we could be quite out of sync?
+                       list.getController().load();
+                   },
+               );
+               return;
+           }
 
-           if (field.name === 'from') {
-               spamlist.setFrom(val);
-               params.starttime = val;
-               to.setMinValue(value);
+           PMG.Utils.doQuarantineAction(action, selected[0].data.id, function() {
+               // success -> remove directly to avoid slow store reload for a single-element action
+               list.getStore().remove(selected[0]);
+               list.getController().restoreSavedSelection();
+           });
+       },
 
-           } else if (field.name === 'to') {
-               spamlist.setTo(val + 24*60*60);
-               params.endtime = val + 24*60*60;
-               from.setMaxValue(value);
-           } else {
+       onSelectMail: function() {
+           var me = this;
+           var list = this.lookupReference('list');
+           var selection = list.selModel.getSelection();
+           if (selection.length > 1) {
+               me.multiSelect(selection);
                return;
            }
 
-           // the combobox does not know anything about the extraparams
-           // so we disable queryCaching until we expand (and query) again
-           combobox.queryCaching = false;
-           combobox.getStore().getProxy().setExtraParams(params);
+           var rec = selection[0] || {};
+
+           me.getViewModel().set('mailid', rec.data ? rec.data.id : '');
+           me.updatePreview(me.raw || false, rec);
+           me.lookupReference('spaminfo').setID(rec);
+           me.lookupReference('mailinfo').setVisible(!!rec.data && !me.raw);
+           me.lookupReference('mailinfo').update(rec.data);
+       },
+
+       toggleSpamInfo: function(btn) {
+           var grid = this.lookupReference('spaminfo');
+           grid.setVisible(!grid.isVisible());
+       },
+
+       openContextMenu: function(table, record, tr, index, event) {
+           event.stopEvent();
+           let me = this;
+           let list = me.lookup('list');
+           Ext.create('PMG.menu.SpamContextMenu', {
+               callback: action => me.doAction(action, list.getSelection()),
+           }).showAt(event.getXY());
+       },
+
+       keyPress: function(table, record, item, index, event) {
+           var me = this;
+           var list = me.lookup('list');
+           var key = event.getKey();
+           var action = '';
+           switch (key) {
+               case event.DELETE:
+               case 127:
+                   action = 'delete';
+                   break;
+               case Ext.event.Event.D:
+               case Ext.event.Event.D + 32:
+                   action = 'deliver';
+                   break;
+               case Ext.event.Event.W:
+               case Ext.event.Event.W + 32:
+                   action = 'whitelist';
+                   break;
+               case Ext.event.Event.B:
+               case Ext.event.Event.B + 32:
+                   action = 'blacklist';
+                   break;
+           }
 
-           // we are reloading when we already have an email selected,
-           // or are in the user quarantine view
-           if (combobox.getValue() || PMG.view === 'quarantine') {
-               spamlist.load();
+           if (action !== '') {
+               me.doAction(action, list.getSelection());
            }
        },
 
-       setQueryCaching: function() {
-           this.lookupReference('email').queryCaching = true;
+       init: function(view) {
+           this.lookup('list').cselect = view.cselect;
        },
 
        control: {
-           '#':{
-               beforedestroy: 'resetEmail'
-           },
            'button[reference=raw]': {
-               click: 'rawMail'
-           },
-           'button[reference=html]': {
-               click: 'htmlMail'
+               click: 'toggleRaw',
            },
-           'combobox[name=email]': {
-               change: {
-                   fn: 'changeEmail',
-                   buffer: 500
-               },
-               expand: 'setQueryCaching'
-           },
-           'datefield': {
-               change: 'changeTime'
+           'button[reference=spam]': {
+               click: 'toggleSpamInfo',
            },
-           'pmgSpamList':{
-               selectionChange: 'onSelectMail'
+           'pmgQuarantineList': {
+               selectionChange: 'onSelectMail',
+               itemkeypress: 'keyPress',
+               rowcontextmenu: 'openContextMenu',
            },
-       }
+       },
     },
 
     items: [
        {
-           tbar: {
-               layout: {
-                   type: 'vbox',
-                   align: 'stretch'
-               },
-               defaults: {
-                   margin: 2,
-               },
-               items: [
-                   {
-                       fieldLabel: gettext('From'),
-                       reference: 'from',
-                       xtype: 'datefield',
-                       format: 'Y-m-d',
-                       name: 'from'
-                   },
-                   {
-                       fieldLabel: gettext('To'),
-                       reference: 'to',
-                       xtype: 'datefield',
-                       format: 'Y-m-d',
-                       name: 'to'
-                   },
-                   {
-                       xtype: 'combobox',
-                       displayField: 'mail',
-                       valueField: 'mail',
-                       store: {
-                           proxy: {
-                               type: 'proxmox',
-                               url: '/api2/json/quarantine/spamusers'
-                           }
-                       },
-                       queryParam: false,
-                       queryCaching: false,
-                       editable: false,
-                       reference: 'email',
-                       name: 'email',
-                       fieldLabel: 'E-Mail',
-                   }]
-           },
-           xtype: 'pmgSpamList',
-           reference: 'spamlist',
+           title: gettext('Spam Quarantine'),
+           xtype: 'pmgQuarantineList',
+           selModel: 'checkboxmodel',
+           emailSelection: true,
+           reference: 'list',
            region: 'west',
            width: 500,
            split: true,
            collapsible: false,
+           store: {
+               model: 'pmg-spam-list',
+               groupField: 'day',
+               groupDir: 'DESC',
+               sorters: [{
+                   property: 'time',
+                   direction: 'DESC',
+               }],
+           },
+
+           columns: [
+               {
+                   header: gettext('Sender/Subject'),
+                   dataIndex: 'subject',
+                   renderer: PMG.Utils.sender_renderer,
+                   flex: 1,
+               },
+               {
+                   header: gettext('Score'),
+                   dataIndex: 'spamlevel',
+                   align: 'right',
+                   width: 70,
+               },
+               {
+                   header: gettext('Size') + ' (KB)',
+                   renderer: function(v) { return Ext.Number.toFixed(v/1024, 0); },
+                   dataIndex: 'bytes',
+                   align: 'right',
+                   width: 90,
+               },
+               {
+                   header: gettext('Date'),
+                   dataIndex: 'day',
+                   hidden: true,
+               },
+               {
+                   xtype: 'datecolumn',
+                   header: gettext('Time'),
+                   dataIndex: 'time',
+                   format: 'H:i:s',
+               },
+           ],
        },
        {
            title: gettext('Selected Mail'),
-           border: 0,
+           border: false,
            region: 'center',
            split: true,
            reference: 'preview',
            disabled: true,
-           tbar: [{
-               xtype: 'button',
-               reference: 'raw',
-               text: gettext('Show Raw'),
-               iconCls: 'fa fa-file-code-o'
-           },{
-               xtype: 'button',
-               reference: 'html',
-               hidden: true,
-               text: gettext('Show HTML'),
-               iconCls: 'fa fa-file-text-o'
-           }]
-       }
-    ]
+           dockedItems: [
+               {
+                   xtype: 'toolbar',
+                   dock: 'top',
+                   items: [
+                       {
+                           xtype: 'button',
+                           reference: 'raw',
+                           text: gettext('Toggle Raw'),
+                           enableToggle: true,
+                           iconCls: 'fa fa-file-code-o',
+                       },
+                       {
+                           xtype: 'button',
+                           reference: 'spam',
+                           text: gettext('Toggle Spam Info'),
+                           enableToggle: true,
+                           iconCls: 'fa fa-bullhorn',
+                       },
+                       '->',
+                       {
+                           xtype: 'button',
+                           reference: 'download',
+                           text: gettext('Download'),
+                           setDownload: function(id) {
+                               this.el.dom.download = id + ".eml";
+                           },
+                           bind: {
+                               href: '{downloadMailURL}',
+                               download: '{mailid}',
+                           },
+                           iconCls: 'fa fa-download',
+                       },
+                       '-',
+                       {
+                           reference: 'whitelist',
+                           text: gettext('Whitelist'),
+                           iconCls: 'fa fa-check',
+                           handler: 'btnHandler',
+                       },
+                       {
+                           reference: 'blacklist',
+                           text: gettext('Blacklist'),
+                           iconCls: 'fa fa-times',
+                           handler: 'btnHandler',
+                       },
+                       {
+                           reference: 'deliver',
+                           text: gettext('Deliver'),
+                           iconCls: 'fa fa-paper-plane-o',
+                           handler: 'btnHandler',
+                       },
+                       {
+                           reference: 'delete',
+                           text: gettext('Delete'),
+                           iconCls: 'fa fa-trash-o',
+                           handler: 'btnHandler',
+                       },
+                   ],
+               },
+               {
+                   xtype: 'pmgSpamInfoGrid',
+                   border: false,
+                   reference: 'spaminfo',
+               },
+               {
+                   xtype: 'pmgMailInfo',
+                   hidden: true,
+                   reference: 'mailinfo',
+               },
+           ],
+       },
+    ],
 });