From 4a13700cc5b5e3ff831dcd03c8e75a15e8463cea Mon Sep 17 00:00:00 2001
From: Alexander Moisseev <moiseev@mezonplus.ru>
Date: Tue, 21 Aug 2018 21:45:23 +0300
Subject: [WebUI] Avoid throughput summary table reinitialization

on data update
---
 interface/js/app/graph.js | 77 +++++++++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 29 deletions(-)

(limited to 'interface')

diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
index 46c6062fd..12e6b4676 100644
--- a/interface/js/app/graph.js
+++ b/interface/js/app/graph.js
@@ -23,11 +23,13 @@
  THE SOFTWARE.
  */
 
-/* global d3:false */
+/* global d3:false, FooTable:false */
 
 define(["jquery", "d3evolution", "footable"],
     function ($, D3Evolution) {
         "use strict";
+        var ft;
+
         var rrd_pie_config = {
             header: {},
             size: {
@@ -137,7 +139,7 @@ define(["jquery", "d3evolution", "footable"],
             }, []);
         }
 
-        function drawRrdTable(data, unit) {
+        function updateSummaryTable(data) {
             var total_messages = 0;
             var rows = data.map(function (curr, i) {
                 total_messages += curr.value;
@@ -153,58 +155,75 @@ define(["jquery", "d3evolution", "footable"],
 
             document.getElementById("rrd-total-value").innerHTML = total_messages;
 
-            $("#rrd-table").footable({
+            ft.rows.load(rows);
+        }
+
+        function initSummaryTable(data, unit) {
+            return FooTable.init("#rrd-table", {
                 sorting: {
                     enabled: true
                 },
                 columns: [
                     {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: "min", title: "Minimum, <span class=\"unit\">" + unit + "</span>", defaultContent: ""},
+                    {name: "avg", title: "Average, <span class=\"unit\">" + unit + "</span>", defaultContent: ""},
+                    {name: "max", title: "Maximum, <span class=\"unit\">" + unit + "</span>", defaultContent: ""},
                     {name: "last", title: "Last, " + unit},
                 ],
-                rows: rows
+                on: {
+                    "ready.ft.table": function () {
+                        updateSummaryTable(data);
+                    }
+                }
             });
         }
 
+        function drawRrdTable(data, unit) {
+            if (ft) {
+                updateSummaryTable(data);
+            } else {
+                ft = initSummaryTable(data, unit);
+            }
+        }
+
         var ui = {};
         var prevUnit = "msg/s";
 
         ui.draw = function (rspamd, graphs, neighbours, checked_server, type) {
-
             function updateWidgets(data) {
-            // Autoranging
-                var scaleFactor = 1;
+                var rrd_summary = [];
                 var unit = "msg/s";
-                var yMax = d3.max(d3.merge(data), function (d) { return d.y; });
-                if (yMax < 1) {
-                    scaleFactor = 60;
-                    unit = "msg/min";
-                    data.forEach(function (s) {
-                        s.forEach(function (d) {
-                            if (d.y !== null) { d.y *= scaleFactor; }
+
+                if (data) {
+                    // Autoranging
+                    var scaleFactor = 1;
+                    var yMax = d3.max(d3.merge(data), function (d) { return d.y; });
+                    if (yMax < 1) {
+                        scaleFactor = 60;
+                        unit = "msg/min";
+                        data.forEach(function (s) {
+                            s.forEach(function (d) {
+                                if (d.y !== null) { d.y *= scaleFactor; }
+                            });
                         });
-                    });
+                    }
+
+                    rrd_summary = getRrdSummary(data, scaleFactor);
+                    graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
+                        "rrd-pie",
+                        rrd_summary,
+                        rrd_pie_config);
+                } else if (graphs.rrd_pie) {
+                    graphs.rrd_pie.destroy();
                 }
 
                 graphs.graph.data(data);
                 if (unit !== prevUnit) {
                     graphs.graph.yAxisLabel("Message rate, " + unit);
+                    $(".unit").text(unit);
                     prevUnit = unit;
                 }
-
-                if (!data) {
-                    graphs.rrd_pie.destroy();
-                    drawRrdTable([]);
-                    return;
-                }
-                var rrd_summary = getRrdSummary(data, scaleFactor);
-                graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
-                    "rrd-pie",
-                    rrd_summary,
-                    rrd_pie_config);
                 drawRrdTable(rrd_summary, unit);
             }
 
-- 
cgit v1.2.3