Use FooTable to draw symbol table

1 files changed, 99 insertions, 42 deletions

diff --git a/interface/js/app/symbols.js b/interface/js/app/symbols.js
index f1169e544..6d7463620 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 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 + '"></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","width":300,"maxWidth":300,"overflow":"hidden","textOverflow":"ellipsis","wordBreak":"keep-all","whiteSpace":"nowrap"}},
+                      {"name":"symbol","title":"Symbol","style":{"font-size":"11px","width":150,"maxWidth":150}},
+                      {"name":"description","title":"Description","breakpoints":"xs sm","style":{"font-size":"11px","width":110,"maxWidth":110}},
+                      {"name":"weight","title":"Score","style":{"font-size":"11px","maxWidth":110}},
+                      {"name":"frequency","title":"Frequency","breakpoints":"xs sm","style":{"font-size":"11px","width":550,"maxWidth":550}},
+                      {"name":"time","title":"Avg. time","breakpoints":"xs sm","style":{"font-size":"11px"}},
+                      {"name":"save","title":"Save","style":{"font-size":"11px","width":90,"maxWidth":90}},
                     ],
-                });
-                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);