[WebUI] Use Footable to draw Throughput summary table

2 files changed, 24 insertions, 20 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 64550a629..c86727960 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -559,13 +559,11 @@ td.maps-cell {
   height: 100%;
   width: 100%;
 }
-#rrd-table_wrapper {
-    z-index: 100;
-}
 #rrd-table {
     width: 100% !important;
     text-align: left;
     font-size: 12px;
+    z-index: 100;
 }
 #rrd-table td {
     padding-top: 2px;
diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
index cfe97b7d5..5fff7ed81 100644
--- a/interface/js/app/graph.js
+++ b/interface/js/app/graph.js
@@ -23,7 +23,7 @@
  THE SOFTWARE.
  */
 
-define(['jquery', 'd3evolution', 'datatables'],
+define(['jquery', 'd3evolution', 'footable'],
 function($, D3Evolution, unused) {
     var rrd_pie_config = {
         header: {},
@@ -128,24 +128,30 @@ function($, D3Evolution, unused) {
     }
 
     function drawRrdTable(data, unit) {
-        $('#rrd-table').DataTable({
-            destroy: true,
-            paging: false,
-            searching: false,
-            info: false,
-            data: data,
+        var rows = data.map(function (curr, i) {
+            return {
+                options: {
+                    style: {
+                        color: graph_options.legend.entries[i].color
+                    }
+                },
+                value: curr
+            };
+        }, []);
+
+        $('#rrd-table').footable({
+            sorting: {
+                enabled: true
+            },
             columns: [
-                { data: "label", title: "Action" },
-                { data: "value", title: "Messages",       defaultContent: "" },
-                { data: "min",   title: "Minimum, " + unit, defaultContent: "" },
-                { data: "avg",   title: "Average, " + unit, defaultContent: "" },
-                { data: "max",   title: "Maximum, " + unit, defaultContent: "" },
-                { data: "last",  title: "Last, " + unit },
+                { name: "label", title: "Action" },
+                { name: "value", title: "Messages",         defaultContent: "" },
+                { name: "min",   title: "Minimum, " + unit, defaultContent: "" },
+                { name: "avg",   title: "Average, " + unit, defaultContent: "" },
+                { name: "max",   title: "Maximum, " + unit, defaultContent: "" },
+                { name: "last",  title: "Last, " + unit },
             ],
-
-            "fnRowCallback": function (nRow, aData) {
-                $(nRow).css("color", aData.color);
-            }
+            rows: rows
         });
     }