Merge pull request #1537 from andryyy/master

[WebUI] Symbols table to footable, minor fixes

3 files changed, 129 insertions, 74 deletions

diff --git a/interface/js/app/config.js b/interface/js/app/config.js
index 999adce88..7b8ec9710 100644
--- a/interface/js/app/config.js
+++ b/interface/js/app/config.js
@@ -136,7 +136,7 @@ function($) {
 
     function loadActionsFromForm() {
         var values = [];
-        var inputs = $('#actionsForm :input[type="slider"]');
+        var inputs = $('#actionsForm :input[data-id="action"]');
         // Rspamd order: [spam,probable_spam,greylist]
         values[0] = parseFloat(inputs[2].value);
         values[1] = parseFloat(inputs[1].value);
@@ -183,7 +183,7 @@ function($) {
                             html: '<div class="form-group">' +
                                 '<label class="control-label col-sm-2">' + label + '</label>' +
                                 '<div class="controls slider-controls col-sm-10">' +
-                                '<input class="slider" type="slider" value="' + item.value + '">' +
+                                '<input class="action-scores form-control" data-id="action" type="number" value="' + item.value + '">' +
                                 '</div>' +
                                 '</div>'
                         });
@@ -205,9 +205,10 @@ function($) {
                         return e.html;
                     }).join('') +
                     '<br><div class="form-group">' +
+                    '<div class="btn-group">' +
                     '<button class="btn btn-primary" id="saveActionsBtn">Save actions</button>' +
                     '<button class="btn btn-primary" id="saveActionsClusterBtn">Save cluster</button>' +
-                    '</div></fieldset></form>');
+                    '</div></div></fieldset></form>');
                 if (rspamd.read_only) {
                     $('#saveActionsClusterBtn').attr('disabled', true);
                     $('#saveActionsBtn').attr('disabled', true);
diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index 76c365f4a..63fe8e0dd 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -22,13 +22,12 @@
  THE SOFTWARE.
  */
 
-define(['jquery', 'datatables', 'footable'],
+define(['jquery', 'footable'],
 function($) {
     var interface = {};
 
     function unix_time_format(tm) {
         var date = new Date(tm ? tm * 1000 : 0);
-
         return date.toLocaleString();
     }
 
@@ -73,6 +72,7 @@ function($) {
         var items = [];
 
         $.each(data, function (i, item) {
+            item.time = unix_time_format(item.unix_time)
             if (item.action === 'clean' || item.action === 'no action') {
                 item.action = "<div style='font-size:11px' class='label label-success'>" + item.action + "</div>";
             } else if (item.action === 'rewrite subject' || item.action === 'add header' || item.action === 'probable spam') {
@@ -248,37 +248,34 @@ function($) {
                 rspamd.alertMessage('alert-error', 'Cannot receive errors');
             },
             success: function (data) {
-                $.each(data, function (i, item) {
-
-                    items.push(
-                        '<tr><td data-order="' + item.ts + '">' + new Date(item.ts * 1000) + '</td>' +
-                        '<td data-order="' + item.type + '">' + item.type + '</td>' +
-                        '<td data-order="' + item.pid + '">' + item.pid + '</td>' +
-                        '<td data-order="' + item.module + '">' + item.module + '</td>' +
-                        '<td data-order="' + item.id + '">' + item.id + '</td>' +
-                        '<td data-order="' + item.message + '"><div class="cell-overflow" tabindex="1" title="' + item.message + '">' + item.message + '</div></td></tr>'
-                    );
+              $.each(data, function (i, item) {
+                  items.push(
+                    item.ts = unix_time_format(item.ts)
+                  );
                 });
-                $('<tbody/>', {
-                    html: items.join('')
-                }).insertAfter('#errorsLog thead');
-                tables.errors = $('#errorsLog').DataTable({
-                    "paging": true,
-                    "orderMulti": false,
-                    "order": [
-                        [0, "desc"],
-                    ],
-                    "info": false,
+                $('#errorsLog').footable({
                     "columns": [
-                        {"width": "15%", "searchable": true, "orderable": true, "type": "num"},
-                        {"width": "5%", "searchable": true, "orderable": true},
-                        {"width": "5%", "searchable": true, "orderable": true},
-                        {"width": "3%", "searchable": true, "orderable": true},
-                        {"width": "3%", "searchable": true, "orderable": true},
-                        {"width": "65%", "searchable": true, "orderable": true},
+                      {"sorted": true,"direction": "DESC","name":"ts","title":"Time","style":{"font-size":"11px","width":300,"maxWidth":300}},
+                      {"name":"type","title":"Worker type","breakpoints":"xs sm","style":{"font-size":"11px","width":150,"maxWidth":150}},
+                      {"name":"pid","title":"PID","breakpoints":"xs sm","style":{"font-size":"11px","width":110,"maxWidth":110}},
+                      {"name":"module","title":"Module","style":{"font-size":"11px"}},
+                      {"name":"id","title":"Internal ID","style":{"font-size":"11px"}},
+                      {"name":"message","title":"Message","breakpoints":"xs sm","style":{"font-size":"11px"}},
                     ],
+                    "rows": data,
+                    "paging": {
+                      "enabled": true,
+                      "limit": 5,
+                      "size": 25
+                    },
+                    "filtering": {
+                      "enabled": true,
+                      "position": "left"
+                    },
+                    "sorting": {
+                      "enabled": true
+                    }
                 });
-                tables.errors.columns.adjust().draw();
             }
         });
     };
diff --git a/interface/js/app/symbols.js b/interface/js/app/symbols.js
index f1169e544..6e9d01634 100644
--- a/interface/js/app/symbols.js
+++ b/interface/js/app/symbols.js
@@ -22,7 +22,7 @@
  THE SOFTWARE.
  */
 
-define(['jquery', 'datatables'],
+define(['jquery', 'footable'],
 function($) {
     var interface = {}
 
@@ -36,6 +36,7 @@ function($) {
                 value: parseFloat($(this).val())
             });
         });
+
         if (is_cluster) {
             rspamd.queryNeighbours(url, function () {
                 rspamd.alertMessage('alert-modal alert-success', 'Symbols successfully saved');
@@ -94,6 +95,8 @@ function($) {
                 xhr.setRequestHeader('Password', rspamd.getPassword());
             },
             success: function (data) {
+                var distinct_groups = [];
+                var lookup = {};
                 $.each(data, function (i, group) {
                     $.each(group.rules, function (i, item) {
                         var max = 20;
@@ -101,6 +104,7 @@ function($) {
                         if (item.weight > max) {
                             max = item.weight * 2;
                         }
+                        item.group = group.group
                         if (item.weight < min) {
                             min = item.weight * 2;
                         }
@@ -110,57 +114,110 @@ function($) {
                         } else {
                             label_class = 'scorebar-spam';
                         }
-
+                        item.weight = '<input class="form-control input-sm mb-disabled ' + label_class +
+                            '" data-role="numerictextbox" autocomplete="off" "type="number" class="input" min="' +
+                            min + '" max="' +
+                            max + '" step="' + decimalStep(item.weight) +
+                            '" tabindex="1" value="' + Number(item.weight).toFixed(3) +
+                            '" id="_sym_' + item.symbol + '"></input>'
                         if (!item.time) {
                             item.time = 0;
                         }
+                        item.time = Number(item.time).toFixed(2) + 's'
                         if (!item.frequency) {
                             item.frequency = 0;
                         }
-                        items.push('<tr>' +
-                            '<td data-order="' + group.group + '"><div class="cell-overflow" tabindex="1" title="' + group.group + '">' + group.group + '</div></td>' +
-                            '<td data-order="' + item.symbol + '"><strong>' + item.symbol + '</strong></td>' +
-                            '<td data-order="' + item.description + '"><div class="cell-overflow" tabindex="1" title="' + item.description + '">' + item.description + '</div></td>' +
-                            '<td data-order="' + item.weight + '"><input class="numeric mb-disabled ' + label_class +
-                            '" data-role="numerictextbox" autocomplete="off" "type="number" class="input" min="' +
-                            min + '" max="' +
-                            max + '" step="' + decimalStep(item.weight) +
-                            '" tabindex="1" value="' + Number(item.weight).toFixed(3) +
-                            '" id="_sym_' + item.symbol + '"></span></td>' +
-                            '<td data-order="' + item.frequency + '">' + item.frequency + '</td>' +
-                            '<td data-order="' + item.time + '">' + Number(item.time).toFixed(2) + 'ms</td>' +
-                            '<td><button type="button" class="btn btn-primary btn-sm mb-disabled">Save</button></td>' +
-                            '<td><button type="button" class="btn btn-primary btn-sm mb-disabled">Save cluster</button></td></tr>');
+                        item.frequency = Number(item.frequency).toFixed(2)
+                        if (!(item.group in lookup)) {
+                          lookup[item.group] = 1;
+                          distinct_groups.push(item.group);
+                        }
+                        item.save = '<button type="button" data-save="local" class="btn btn-primary btn-sm mb-disabled">Save</button>' +
+                        '&nbsp;<button data-save="cluster" type="button" class="btn btn-primary btn-sm mb-disabled">Save in cluster</button>';
+                        items.push(item)
                     });
                 });
-                $('<tbody/>', {
-                    html: items.join('')
-                }).insertAfter('#symbolsTable thead');
-                tables.symbols = $('#symbolsTable').DataTable({
-                    "paging": false,
-                    "orderMulti": true,
-                    "order": [
-                        [0, "asc"],
-                        [1, "asc"],
-                        [3, "desc"]
-                    ],
-                    "info": false,
+                FooTable.groupFilter = FooTable.Filtering.extend({
+                construct : function(instance) {
+                    this._super(instance);
+                    this.groups = distinct_groups;
+                    this.def = 'Any group';
+                    this.$group = null;
+                },
+                $create : function() {
+                    this._super();
+                    var self = this, $form_grp = $('<div/>', {
+                        'class' : 'form-group'
+                    }).append($('<label/>', {
+                        'class' : 'sr-only',
+                        text : 'Group'
+                    })).prependTo(self.$form);
+
+                    self.$group = $('<select/>', {
+                        'class' : 'form-control'
+                    }).on('change', {
+                        self : self
+                    }, self._onStatusDropdownChanged).append(
+                            $('<option/>', {
+                                text : self.def
+                            })).appendTo($form_grp);
+
+                    $.each(self.groups, function(i, group) {
+                        self.$group.append($('<option/>').text(group));
+                    });
+                },
+                _onStatusDropdownChanged : function(e) {
+                    var self = e.data.self, selected = $(this).val();
+                    if (selected !== self.def) {
+                        self.addFilter('group', selected, [ 'group' ]);
+                    } else {
+                        self.removeFilter('group');
+                    }
+                    self.filter();
+                },
+                draw : function() {
+                    this._super();
+                    var group = this.find('group');
+                    if (group instanceof FooTable.Filter) {
+                        this.$group.val(group.query.val());
+                    } else {
+                        this.$group.val(this.def);
+                    }
+                }
+                });
+
+                $('#symbolsTable').footable({
                     "columns": [
-                        {"width": "7%", "searchable": true, "orderable": true},
-                        {"width": "20%", "searchable": true, "orderable": true},
-                        {"width": "30%", "searchable": false, "orderable": false},
-                        {"width": "7%", "searchable": false, "orderable": true, "type": "num"},
-                        {"searchable": false, "orderable": true, "type": "num"},
-                        {"searchable": false, "orderable": true, "type": "num"},
-                        {"width": "5%", "searchable": false, "orderable": false, "type": "html"},
-                        {"width": "7%", "searchable": false, "orderable": false, "type": "html"}
+                      {"sorted": true,"direction": "ASC", "name":"group","title":"Group","style":{"font-size":"11px"}},
+                      {"name":"symbol","title":"Symbol","style":{"font-size":"11px"}},
+                      {"name":"description","title":"Description","breakpoints":"xs sm","style":{"font-size":"11px"}},
+                      {"name":"weight","title":"Score","style":{"font-size":"11px"}},
+                      {"name":"frequency","title":"Frequency","breakpoints":"xs sm","style":{"font-size":"11px"}},
+                      {"name":"time","title":"Avg. time","breakpoints":"xs sm","style":{"font-size":"11px"}},
+                      {"name":"save","title":"Save","style":{"font-size":"11px"}},
                     ],
-                });
-                tables.symbols.columns.adjust().draw();
-                $('#symbolsTable :button').on('click', function() {
-                    var value = $(this).attr("value");
-                    saveSymbols(rspamd, "./savesymbols", "symbolsTable",
-                            value == 'Save cluster');
+                    "rows": items,
+                    "paging": {
+                      "enabled": true,
+                      "limit": 5,
+                      "size": 25
+                    },
+                    "filtering": {
+                      "enabled": true,
+                      "position": "left"
+                    },
+                    "sorting": {
+                      "enabled": true
+                    },
+                    components: {
+                      filtering: FooTable.groupFilter
+                    }
+                }, function tableHook() {
+                  $('#symbolsTable :button').on('click', function() {
+                    var value = $(this).data('save');
+                    if (!value) return
+                    saveSymbols(rspamd, "./savesymbols", "symbolsTable", value == 'cluster');
+                  });
                 });
                 if (rspamd.read_only) {
                     $( ".mb-disabled" ).attr('disabled', true);