[WebUI] Add graph tab

3 files changed, 300 insertions, 245 deletions

diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
new file mode 100644
index 000000000..2d5341446
--- /dev/null
+++ b/interface/js/app/graph.js
@@ -0,0 +1,195 @@
+/*
+ The MIT License (MIT)
+
+ Copyright (C) 2017 Vsevolod Stakhov <vsevolod@highsecure.ru>
+ Copyright (C) 2017 Alexander Moisseev
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ */
+
+define(['jquery', 'd3evolution', 'humanize'],
+function($, D3Evolution) {
+    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",
+
+        legend: {
+            space: 140,
+            entries: [{
+                label: "Rejected",
+                color: "#FF0000"
+            }, {
+                label: "Temporary rejected",
+                color: "#BF8040"
+            }, {
+                label: "Subject rewrited",
+                color: "#FF6600"
+            }, {
+                label: "Probable spam",
+                color: "#FFAD00"
+            }, {
+                label: "Greylisted",
+                color: "#436EEE"
+            }, {
+                label: "Clean",
+                color: "#66CC00"
+            }]
+        }
+    };
+
+    function initGraph() {
+        // Get selectors' current state
+        function getSelector(id) {
+            var e = document.getElementById(id);
+            return e.options[e.selectedIndex].value;
+        }
+        var graph = new D3Evolution("graph", $.extend({}, graph_options, {
+            type:        getSelector("selType"),
+            interpolate: getSelector("selInterpolate"),
+            convert:     getSelector("selConvert"),
+        }));
+        $("#selConvert").change(function () {
+            graph.convert(this.value);
+        });
+        $("#selType").change(function () {
+            graph.type(this.value);
+        });
+        $("#selInterpolate").change(function () {
+            graph.interpolate(this.value);
+        });
+
+        return graph;
+    }
+
+    function getRrdSummary(json) {
+        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 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);
+            }
+        });
+    }
+
+    var interface = {};
+
+    interface.draw = function(rspamd, graphs, checked_server, type) {
+        if (graphs.graph === undefined) {
+            graphs.graph = initGraph();
+        }
+
+        if (type === undefined) {
+            function getSelector(id) {
+                var e = document.getElementById(id);
+                return e.options[e.selectedIndex].value;
+            }
+            type = getSelector("selData");
+        }
+
+        $.ajax({
+            dataType: 'json',
+            type: 'GET',
+            url: 'graph',
+            jsonp: false,
+            data: {
+                "type": type
+            },
+            beforeSend: function (xhr) {
+                xhr.setRequestHeader('Password', rspamd.getPassword());
+            },
+            success: function (data) {
+                var rrd_summary = getRrdSummary(data);
+                graphs.graph.data(data);
+                graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
+                    "rrd-pie",
+                    rrd_summary,
+                    rrd_pie_config);
+                drawRrdTable(rrd_summary);
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                rspamd.alertMessage('alert-error', 'Cannot receive throughput data: ' +
+                    textStatus + ' ' + jqXHR.status + ' ' + errorThrown);
+            }
+        });
+    };
+
+
+    return interface;
+});
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 800ad20fe..a7d3f4156 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -22,8 +22,8 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
  */
-define(['jquery', 'visibility', 'bootstrap'],
-    function ($, D3Evolution, d3pie, visibility, DataTable) {
+define(['jquery', 'd3pie', 'visibility', 'bootstrap'],
+    function ($, d3pie, visibility, DataTable) {
         // begin
         var graphs = {};
         var tables = {};
@@ -94,13 +94,18 @@ define(['jquery', 'visibility', 'bootstrap'],
                     });
                     break;
                 case "#throughput_nav":
-                    getGraphData(selData);
+                    require(['app/graph'], function(graph) {
+                        graph.draw(interface, graphs, checked_server, selData);
+                    });
+
                     var autoRefresh = {
                         hourly: 60000,
                         daily: 300000
                     };
                     timer_id.throughput = Visibility.every(autoRefresh[selData] || 3600000, function () {
-                        getGraphData(selData);
+                        require(['app/graph'], function(graph) {
+                            graph.draw(interface, graphs, checked_server, selData);
+                        });
                     });
                     break;
                 case "#configuration_nav":
@@ -172,15 +177,6 @@ define(['jquery', 'visibility', 'bootstrap'],
                 selData = this.value;
                 tabClick("#throughput_nav");
             });
-            $("#selConvert").change(function () {
-                graph.convert(this.value);
-            });
-            $("#selType").change(function () {
-                graph.type(this.value);
-            });
-            $("#selInterpolate").change(function () {
-                graph.interpolate(this.value);
-            });
             $.ajaxSetup({
                 timeout: 2000,
                 jsonp: false
@@ -389,6 +385,98 @@ define(['jquery', 'visibility', 'bootstrap'],
             });
         };
 
+        interface.drawPie = function(obj, id, data, conf) {
+            if (obj) {
+                obj.updateProp("data.content",
+                    data.filter(function (elt) {
+                        return elt.value > 0;
+                    })
+                );
+            } else {
+                obj = new d3pie(id,
+                    $.extend({}, {
+                        "header": {
+                            "title": {
+                                "text": "Rspamd filter stats",
+                                "fontSize": 24,
+                                "font": "open sans"
+                            },
+                            "subtitle": {
+                                "color": "#999999",
+                                "fontSize": 12,
+                                "font": "open sans"
+                            },
+                            "titleSubtitlePadding": 9
+                        },
+                        "footer": {
+                            "color": "#999999",
+                            "fontSize": 10,
+                            "font": "open sans",
+                            "location": "bottom-left"
+                        },
+                        "size": {
+                            "canvasWidth": 600,
+                            "canvasHeight": 400,
+                            "pieInnerRadius": "20%",
+                            "pieOuterRadius": "85%"
+                        },
+                        "data": {
+                            //"sortOrder": "value-desc",
+                            "content": data.filter(function (elt) {
+                                return elt.value > 0;
+                            })
+                        },
+                        "labels": {
+                            "outer": {
+                                "hideWhenLessThanPercentage": 1,
+                                "pieDistance": 30
+                            },
+                            "inner": {
+                                "hideWhenLessThanPercentage": 4
+                            },
+                            "mainLabel": {
+                                "fontSize": 14
+                            },
+                            "percentage": {
+                                "color": "#eeeeee",
+                                "fontSize": 14,
+                                "decimalPlaces": 0
+                            },
+                            "lines": {
+                                "enabled": true
+                            },
+                            "truncation": {
+                                "enabled": true
+                            }
+                        },
+                        "tooltips": {
+                            "enabled": true,
+                            "type": "placeholder",
+                            "string": "{label}: {value}, {percentage}%"
+                        },
+                        "effects": {
+                            "pullOutSegmentOnClick": {
+                                "effect": "back",
+                                "speed": 400,
+                                "size": 8
+                            },
+                            "load": {
+                                "effect": "none"
+                            }
+                        },
+                        "misc": {
+                            "gradient": {
+                                "enabled": true,
+                                "percentage": 100
+                            }
+                        }
+                    }, conf));
+            }
+            return obj;
+        };
+
+        interface.getPassword = getPassword;
+
         return interface;
 
         // @alert popover
@@ -500,145 +588,7 @@ define(['jquery', 'visibility', 'bootstrap'],
             $('#modalBody form').hide();
         });
 
-        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",
-
-            legend: {
-                space: 140,
-                entries: [{
-                    label: "Rejected",
-                    color: "#FF0000"
-                }, {
-                    label: "Temporary rejected",
-                    color: "#BF8040"
-                }, {
-                    label: "Subject rewrited",
-                    color: "#FF6600"
-                }, {
-                    label: "Probable spam",
-                    color: "#FFAD00"
-                }, {
-                    label: "Greylisted",
-                    color: "#436EEE"
-                }, {
-                    label: "Clean",
-                    color: "#66CC00"
-                }]
-            }
-        };
-
-        function initGraph() {
-            // Get selectors' current state
-            function getSelector(id) {
-                var e = document.getElementById(id);
-                return e.options[e.selectedIndex].value;
-            }
-
-            selData = getSelector("selData");
-
-            graph = new D3Evolution("graph", $.extend({}, graph_options, {
-                type:        getSelector("selType"),
-                interpolate: getSelector("selInterpolate"),
-                convert:     getSelector("selConvert"),
-            }));
-        }
-
-        function getRrdSummary(json) {
-            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 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);
-                }
-            });
-        }
-
-        function getGraphData(type) {
-            $.ajax({
-                dataType: 'json',
-                type: 'GET',
-                url: 'graph',
-                jsonp: false,
-                data: {
-                    "type": type
-                },
-                beforeSend: function (xhr) {
-                    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: ' +
-                        textStatus + ' ' + jqXHR.status + ' ' + errorThrown);
-                }
-            });
-        }
 
         // @get history log
         // function getChart() {
diff --git a/interface/js/app/stats.js b/interface/js/app/stats.js
index 51e13b385..e2ce33d0f 100644
--- a/interface/js/app/stats.js
+++ b/interface/js/app/stats.js
@@ -139,7 +139,7 @@ function($, d3pie, Humanize) {
         $(widgets).show();
     }
 
-     function getChart(pie, checked_server) {
+     function getChart(rspamd, pie, checked_server) {
         var creds = JSON.parse(sessionStorage.getItem('Credentials'));
         if (creds && creds[checked_server]) {
             var data = creds[checked_server].data;
@@ -169,100 +169,10 @@ function($, d3pie, Humanize) {
                 "data" : data.reject,
                 "value" : data.reject
             } ];
-            return drawPie(pie, "chart", new_data);
-        }
-    }
 
-    function drawPie(obj, id, data, conf) {
-        if (obj) {
-            obj.updateProp("data.content",
-                data.filter(function (elt) {
-                    return elt.value > 0;
-                })
-            );
-        } else {
-            obj = new d3pie(id,
-                $.extend({}, {
-                    "header": {
-                        "title": {
-                            "text": "Rspamd filter stats",
-                            "fontSize": 24,
-                            "font": "open sans"
-                        },
-                        "subtitle": {
-                            "color": "#999999",
-                            "fontSize": 12,
-                            "font": "open sans"
-                        },
-                        "titleSubtitlePadding": 9
-                    },
-                    "footer": {
-                        "color": "#999999",
-                        "fontSize": 10,
-                        "font": "open sans",
-                        "location": "bottom-left"
-                    },
-                    "size": {
-                        "canvasWidth": 600,
-                        "canvasHeight": 400,
-                        "pieInnerRadius": "20%",
-                        "pieOuterRadius": "85%"
-                    },
-                    "data": {
-                        //"sortOrder": "value-desc",
-                        "content": data.filter(function (elt) {
-                            return elt.value > 0;
-                        })
-                    },
-                    "labels": {
-                        "outer": {
-                            "hideWhenLessThanPercentage": 1,
-                            "pieDistance": 30
-                        },
-                        "inner": {
-                            "hideWhenLessThanPercentage": 4
-                        },
-                        "mainLabel": {
-                            "fontSize": 14
-                        },
-                        "percentage": {
-                            "color": "#eeeeee",
-                            "fontSize": 14,
-                            "decimalPlaces": 0
-                        },
-                        "lines": {
-                            "enabled": true
-                        },
-                        "truncation": {
-                            "enabled": true
-                        }
-                    },
-                    "tooltips": {
-                        "enabled": true,
-                        "type": "placeholder",
-                        "string": "{label}: {value}, {percentage}%"
-                    },
-                    "effects": {
-                        "pullOutSegmentOnClick": {
-                            "effect": "back",
-                            "speed": 400,
-                            "size": 8
-                        },
-                        "load": {
-                            "effect": "none"
-                        }
-                    },
-                    "misc": {
-                        "gradient": {
-                            "enabled": true,
-                            "percentage": 100
-                        }
-                    }
-                }, conf));
+            return rspamd.drawPie(pie, "chart", new_data);
         }
-        return obj;
     }
-
     // Public API
     var interface = {
         statWidgets: function(rspamd, graphs, checked_server) {
@@ -311,7 +221,7 @@ function($, d3pie, Humanize) {
                 });
                 sessionStorage.setItem("Credentials", JSON.stringify(to_Credentials));
                 displayStatWidgets(checked_server);
-                graphs.chart = getChart(graphs.chart, checked_server);
+                graphs.chart = getChart(rspamd, graphs.chart, checked_server);
             },
             function (serv, jqXHR, textStatus, errorThrown) {
                 var alert_status = serv.name + '_alerted';
@@ -327,4 +237,4 @@ function($, d3pie, Humanize) {
 
     return interface;
 }
-);
\ No newline at end of file
+);