mail proxy: networks: consitent add/edit/remove button & modernization

[pmg-gui.git] / js / PostfixMailQueue.js

diff --git a/js/PostfixMailQueue.js b/js/PostfixMailQueue.js
index 80c5cdf51205e307dd768f48ee60c7b7ede8522e..8b4ee8cca216b9daa1b059885a39e6179f8d5441 100644 (file)
--- a/js/PostfixMailQueue.js
+++ b/js/PostfixMailQueue.js
@@ -1,13 +1,12 @@
-/*global Proxmox*/
 Ext.define('pmg-mailq', {
     extend: 'Ext.data.Model',
     fields: [
        'queue_id', 'queue_name',
-       { type: 'date',  dateFormat: 'timestamp', name: 'arrival_time'},
-       { type: 'integer', name: 'message_size'},
-       'sender', 'receiver', 'reason'
+       { type: 'date', dateFormat: 'timestamp', name: 'arrival_time' },
+       { type: 'integer', name: 'message_size' },
+       'sender', 'receiver', 'reason',
     ],
-    idProperty: 'queue_id'
+    idProperty: 'queue_id',
 });
 
 Ext.define('PMG.Postfix.MailQueue', {
@@ -24,7 +23,9 @@ Ext.define('PMG.Postfix.MailQueue', {
        xclass: 'Ext.data.BufferedStore',
        model: 'pmg-mailq',
        remoteFilter: true,
-       pageSize: 2000
+       remoteSort: true,
+       sorters: 'arrival_time',
+       pageSize: 2000,
     },
 
     controller: {
@@ -32,7 +33,9 @@ Ext.define('PMG.Postfix.MailQueue', {
        xclass: 'Ext.app.ViewController',
 
        init: function(view) {
-           if (view.nodename) view.setNodename(view.nodename);
+           if (view.nodename) {
+               view.setNodename(view.nodename);
+           }
 
            view.delayFilterTask = new Ext.util.DelayedTask(function() {
                var filter = view.lookupReference('filter').getValue();
@@ -55,11 +58,10 @@ Ext.define('PMG.Postfix.MailQueue', {
                    view.queuename + '/' + rec.data.queue_id,
                method: 'POST',
                waitMsgTarget: view,
-               failure: function (response, opts) {
+               failure: function(response, opts) {
                    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-               }
+               },
            });
-
        },
 
        onRemove: function(button, event, rec) {
@@ -74,9 +76,9 @@ Ext.define('PMG.Postfix.MailQueue', {
                    view.selModel.deselectAll();
                    view.store.load();
                },
-               failure: function (response, opts) {
+               failure: function(response, opts) {
                    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-               }
+               },
            });
        },
 
@@ -100,12 +102,12 @@ Ext.define('PMG.Postfix.MailQueue', {
                },
                itemdblclick: function(grid, rec, item, index, event) {
                    this.onHeaders(grid, event, rec);
-               }
+               },
            },
            'field[reference=filter]': {
-               change: 'onChangeFilter'
-           }
-       }
+               change: 'onChangeFilter',
+           },
+       },
     },
 
     tbar: [
@@ -113,83 +115,88 @@ Ext.define('PMG.Postfix.MailQueue', {
            xtype: 'proxmoxButton',
            disabled: true,
            text: gettext('Headers'),
-           handler: 'onHeaders'
+           handler: 'onHeaders',
        },
        {
            xtype: 'proxmoxButton',
            disabled: true,
            text: gettext('Flush'),
-           handler: 'onFlush'
+           handler: 'onFlush',
        },
        {
            xtype: 'proxmoxStdRemoveButton',
-           handler: 'onRemove'
+           handler: 'onRemove',
        },
        {
            xtype: 'label',
-           html: gettext('Filter') + ':'
+           html: gettext('Filter') + ':',
        },
        {
            xtype: 'textfield',
            width: 300,
-           reference: 'filter'
-       }
+           reference: 'filter',
+       },
     ],
 
     columns: [
        {
            header: gettext('Time'),
-           width: 150,
+           flex: 2,
            renderer: Ext.util.Format.dateRenderer("Y-m-d H:i:s"),
-           dataIndex: 'arrival_time'
+           dataIndex: 'arrival_time',
        },
        {
-           header: 'KByte',
-           width: 80,
-           dataIndex: 'message_size'
+           header: 'Size',
+           renderer: Proxmox.Utils.render_size,
+           flex: 1,
+           dataIndex: 'message_size',
        },
        {
            header: gettext('Sender'),
-           width: 200,
-           dataIndex: 'sender'
+           flex: 2,
+           dataIndex: 'sender',
        },
        {
            header: gettext('Receiver'),
-           width: 200,
-           dataIndex: 'receiver'
+           flex: 2,
+           dataIndex: 'receiver',
        },
        {
            header: gettext('Reason'),
-           flex: 1,
-           dataIndex: 'reason'
-       }
+           flex: 8,
+           dataIndex: 'reason',
+       },
     ],
 
     pendingLoad: false,
 
     updateProxy: function() {
-       var me = this;
+       let me = this;
 
-       if (me.pendingLoad) return;
+       if (me.pendingLoad) {
+           return;
+       }
 
-       var proxy = {
+       let proxy = {
            type: 'proxmox',
            startParam: 'start',
            limitParam: 'limit',
-           url: "/api2/json/nodes/" + me.nodename + "/postfix/queue/" + me.queuename
+           sortParam: 'sortfield',
+           directionParam: 'sortdir',
+           simpleSortMode: true,
+           url: "/api2/json/nodes/" + me.nodename + "/postfix/queue/" + me.queuename,
        };
 
-       var filter = me.filter;
-       var nodename = me.nodename;
-       var queuename = me.queuename;
-
-       if (filter) { proxy.extraParams = { filter: filter }; }
-
+       let filter = me.filter;
+       if (filter) {
+           proxy.extraParams = { filter: filter };
+       }
 
        me.store.setProxy(proxy);
 
+       let nodename = me.nodename;
+       let queuename = me.queuename;
        me.pendingLoad = true;
-
        me.store.load(function() {
            me.pendingLoad = false;
            if (me.nodename !== nodename || me.filter !== filter || me.queuename !== queuename) {
@@ -205,8 +212,10 @@ Ext.define('PMG.Postfix.MailQueue', {
     },
 
     setNodename: function(nodename) {
-       var me = this;
-
+       let me = this;
+       if (nodename === me.nodename) {
+           return; // nothing to do
+       }
        me.nodename = nodename;
 
        me.updateProxy();
@@ -218,6 +227,6 @@ Ext.define('PMG.Postfix.MailQueue', {
        me.queuename = queuename;
 
        me.updateProxy();
-    }
+    },
 
 });