commit ee9ef02: [WebUI] Update Throughput summary values dynamically

[Alexander Moisseev]

Author: Alexander Moisseev
Date: 2019-03-29 10:33:12 +0300
URL: https://github.com/rspamd/rspamd/commit/ee9ef02177c8f551bee1fec1493a76135873aa8b

[WebUI] Update Throughput summary values dynamically
instead of reloading table rows

---
 interface/js/app/graph.js | 52 +++++++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
index c148434ca..e01d97aff 100644
--- a/interface/js/app/graph.js
+++ b/interface/js/app/graph.js
@@ -119,16 +119,18 @@ define(["jquery", "d3evolution", "footable"],
             var xExtents = d3.extent(d3.merge(json), function (d) { return d.x; });
             var timeInterval = xExtents[1] - xExtents[0];
 
-            return json.map(function (curr, i) {
+            var total = 0;
+            var rows = json.map(function (curr, i) {
                 // Time intervals that don't have data are excluded from average calculation as d3.mean()ignores nulls
                 var avg = d3.mean(curr, function (d) { return d.y; });
                 // To find an integral on the whole time interval we need to convert nulls to zeroes
-                var value = d3.mean(curr, function (d) { return Number(d.y); }) * timeInterval / scaleFactor;
+                var value = d3.mean(curr, function (d) { return Number(d.y); }) * timeInterval / scaleFactor ^ 0; // eslint-disable-line no-bitwise
                 var yExtents = d3.extent(curr, function (d) { return d.y; });
 
+                total += value;
                 return {
                     label: graph_options.legend.entries[i].label,
-                    value: value ^ 0, // eslint-disable-line no-bitwise
+                    value: value,
                     min: Number(yExtents[0].toFixed(6)),
                     avg: Number(avg.toFixed(6)),
                     max: Number(yExtents[1].toFixed(6)),
@@ -136,6 +138,11 @@ define(["jquery", "d3evolution", "footable"],
                     color: graph_options.legend.entries[i].color,
                 };
             }, []);
+
+            return {
+                rows: rows,
+                total: total
+            };
         }
 
         function initSummaryTable(tables, rows, unit) {
@@ -151,28 +158,24 @@ define(["jquery", "d3evolution", "footable"],
                     {name:"max", title:"Maximum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
                     {name:"last", title:"Last, " + unit},
                 ],
-                rows: rows
+                rows: rows.map(function (curr, i) {
+                    return {
+                        options: {
+                            style: {
+                                color: graph_options.legend.entries[i].color
+                            }
+                        },
+                        value: curr
+                    };
+                }, [])
             });
         }
 
-        function drawRrdTable(tables, data, unit) {
-            var total_messages = 0;
-            var rows = data.map(function (curr, i) {
-                total_messages += curr.value;
-                return {
-                    options: {
-                        style: {
-                            color: graph_options.legend.entries[i].color
-                        }
-                    },
-                    value: curr
-                };
-            }, []);
-
-            document.getElementById("rrd-total-value").innerHTML = total_messages;
-
+        function drawRrdTable(tables, rows, unit) {
             if (Object.prototype.hasOwnProperty.call(tables, "rrd_summary")) {
-                tables.rrd_summary.rows.load(rows);
+                $.each(tables.rrd_summary.rows.all, function (i, row) {
+                    row.val(rows[i], false, true);
+                });
             } else {
                 initSummaryTable(tables, rows, unit);
             }
@@ -183,7 +186,7 @@ define(["jquery", "d3evolution", "footable"],
 
         ui.draw = function (rspamd, graphs, tables, neighbours, checked_server, type) {
             function updateWidgets(data) {
-                var rrd_summary = [];
+                var rrd_summary = {rows:[]};
                 var unit = "msg/s";
 
                 if (data) {
@@ -203,7 +206,7 @@ define(["jquery", "d3evolution", "footable"],
                     rrd_summary = getRrdSummary(data, scaleFactor);
                     graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
                         "rrd-pie",
-                        rrd_summary,
+                        rrd_summary.rows,
                         rrd_pie_config);
                 } else if (graphs.rrd_pie) {
                     graphs.rrd_pie.destroy();
@@ -215,7 +218,8 @@ define(["jquery", "d3evolution", "footable"],
                     $(".unit").text(unit);
                     prevUnit = unit;
                 }
-                drawRrdTable(tables, rrd_summary, unit);
+                drawRrdTable(tables, rrd_summary.rows, unit);
+                document.getElementById("rrd-total-value").innerHTML = rrd_summary.total;
             }
 
             if (!graphs.graph) {