Merge pull request #1318 from moisseev/rrd-summary

[WebUI] Add summary to the Throughput tab

1 files changed, 110 insertions, 33 deletions

diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index 420ca93a7..eec754cb4 100644
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -27,6 +27,7 @@
         // begin
         //$.cookie.json = true;
         var pie;
+        var rrd_pie;
         var history;
         var errors;
         var graph;
@@ -63,6 +64,9 @@
             if (pie) {
                 pie.destroy();
             }
+            if (rrd_pie) {
+                rrd_pie.destroy();
+            }
             if (graph) {
                 graph.destroy();
                 graph = undefined;
@@ -617,6 +621,67 @@
             return obj;
         }
 
+        var rrd_pie_config = {
+            header: {},
+            size: {
+                canvasWidth: 400,
+                canvasHeight: 180,
+                pieInnerRadius: "20%",
+                pieOuterRadius: "80%"
+            },
+            labels: {
+                outer: {
+                    format: "none"
+                },
+                inner: {
+                    hideWhenLessThanPercentage: 8
+                },
+            },
+            misc: {
+                pieCenterOffset: {
+                    x: -120,
+                    y: 10,
+                },
+                gradient: {
+                    enabled: true,
+                },
+            },
+        };
+
+        var graph_options = {
+            title: "Rspamd throughput",
+            width: 1060,
+            height: 370,
+            yAxisLabel: "Message rate, msg/s",
+
+            type: selected.selType,
+            interpolate: selected.selInterpolate,
+            convert: selected.selConvert,
+
+            legend: {
+                space: 140,
+                entries: [{
+                    label: "Rejected",
+                    color: "#FF0000"
+                }, {
+                    label: "Temporary rejected",
+                    color: "#CC9966"
+                }, {
+                    label: "Subject rewrited",
+                    color: "#FF6600"
+                }, {
+                    label: "Probable spam",
+                    color: "#FFD700"
+                }, {
+                    label: "Greylisted",
+                    color: "#436EEE"
+                }, {
+                    label: "Clean",
+                    color: "#66cc00"
+                }]
+            }
+        };
+
         function initGraph() {
             // Get selectors' current state
             var selIds = ["selData", "selConvert", "selType", "selInterpolate"];
@@ -625,40 +690,49 @@
                 selected[id] = e.options[e.selectedIndex].value;
             });
 
-            var options = {
-                title: "Rspamd throughput",
-                width: 1060,
-                height: 370,
-                yAxisLabel: "Message rate, msg/s",
-
-                type: selected.selType,
-                interpolate: selected.selInterpolate,
-                convert: selected.selConvert,
-
-                legend: {
-                    space: 140,
-                    entries: [{
-                        label: "Rejected",
-                        color: "#FF0000"
-                    }, {
-                        label: "Temporary rejected",
-                        color: "#CC9966"
-                    }, {
-                        label: "Subject rewrited",
-                        color: "#FF6600"
-                    }, {
-                        label: "Probable spam",
-                        color: "#FFD700"
-                    }, {
-                        label: "Greylisted",
-                        color: "#436EEE"
-                    }, {
-                        label: "Clean",
-                        color: "#66cc00"
-                    }]
+            graph = new D3Evolution("graph", graph_options);
+        }
+
+        function getRrdSummary(json) {
+            const xExtents = d3.extent(d3.merge(json), function (d) { return d.x; });
+            const timeInterval = xExtents[1] - xExtents[0];
+
+            return json.map(function (curr, i) {
+                var avg = d3.mean(curr, function (d) { return d.y; });
+                var yExtents = d3.extent(curr, function (d) { return d.y; });
+
+                return {
+                    label: graph_options.legend.entries[i].label,
+                    value: avg && (avg * timeInterval) ^ 0,
+                    min: yExtents[0],
+                    avg: avg && avg.toFixed(6),
+                    max: yExtents[1],
+                    last: curr[curr.length - 1].y,
+                    color: graph_options.legend.entries[i].color,
+                };
+            }, []);
+        }
+
+        function drawRrdTable(data) {
+            $('#rrd-table').DataTable({
+                destroy: true,
+                paging: false,
+                searching: false,
+                info: false,
+                data: data,
+                columns: [
+                    { data: "label", title: "Action" },
+                    { data: "value", title: "Messages",       defaultContent: "" },
+                    { data: "min",   title: "Minimum, msg/s", defaultContent: "" },
+                    { data: "avg",   title: "Average, msg/s", defaultContent: "" },
+                    { data: "max",   title: "Maximum, msg/s", defaultContent: "" },
+                    { data: "last",  title: "Last, msg/s" },
+                ],
+
+                "fnRowCallback": function (nRow, aData) {
+                    $(nRow).css("color", aData.color)
                 }
-            };
-            graph = new D3Evolution("graph", options);
+            });
         }
 
         function getGraphData(type) {
@@ -674,7 +748,10 @@
                     xhr.setRequestHeader('Password', getPassword());
                 },
                 success: function (data) {
+                    const rrd_summary = getRrdSummary(data);
                     graph.data(data);
+                    rrd_pie = drawPie(rrd_pie, "rrd-pie", rrd_summary, rrd_pie_config);
+                    drawRrdTable(rrd_summary);
                 },
                 error: function (jqXHR, textStatus, errorThrown) {
                     alertMessage('alert-error', 'Cannot receive throughput data: ' +