[Feature] Add throughput graph for RRD backend to WebUI

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index c47abbb0859aa15ee77cdde8c0a1e4a3195ee463..87ecc3bb3b3f85f34d98204ef3e78eb059f67682 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -653,3 +653,11 @@ td.maps-cell {
 #historyLog_wrapper div.row:last-child > div {
     padding: 5px 20px 0 20px;
     }
+
+/* Throughput graph controls */
+#graph_controls select {
+    margin: 10px 20px 0;
+    display: inline-block;
+    width: auto;
+    border: 1px solid grey;
+}

diff --git a/interface/index.html b/interface/index.html
index a02a2d668a7f01fce2312ade6a00a8397139ec75..eb69257365e369ce66dbeced4fe649da2aae7a66 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -9,6 +9,7 @@
        <link href="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="./css/datatables.min.css"/>
+       <link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/moisseev/D3Evolution/fb6ea62c43e26e728b48a43012fb796c5ab6689c/d3evolution.css">
        <link href="./css/rspamd.css" rel="stylesheet">
 </head>
 
@@ -25,6 +26,9 @@
                </ul>
                <ul class="nav navbar-nav nav-pills" role="tablist">
                        <li role="presentation" class="active"><a id="status_nav" aria-controls="status" role="tab" href="#status" data-toggle="tab">Status</a></li>
+<!--
+                       <li role="presentation"><a id="throughput_nav" aria-controls="throughput" role="tab" href="#throughput" data-toggle="tab">Throughput</a></li>
+-->
                        <li role="presentation"><a id="configuration_nav" aria-controls="configuration" role="tab" href="#configuration" data-toggle="tab">Configuration</a></li>
                        <li role="presentation"><a id="learning_nav" aria-controls="learning" role="tab" href="#learning" data-toggle="tab">Learning</a></li>
                        <li role="presentation"><a id="scan_nav"aria-controls="scan" role="tab"  href="#scan" data-toggle="tab">Scan</a></li>
@@ -64,6 +68,49 @@
                                </div>
                        </div>
 
+                       <div class="tab-pane" id="throughput">
+                               <div class="widget-box">
+                                       <div class="widget-title">
+                                               <span class="icon"><i class="glyphicon glyphicon-stats"></i></span>
+                                               <h5>Throughput</h5>
+                                       </div>
+                                       <div class="widget-content chart-content">
+                                               <div class="row row-chart">
+                                                       <div class="chart" id="graph">
+                                                               <span class="notice">Loading..</span>
+                                                               <noscript>Please enable Javascript</noscript>
+                                                       </div>
+                                               </div>
+                                               <form id="graph_controls" action="#">
+                                                       Select dataset:
+                                                       <select id="selData" class="form-control">
+                                                               <option value="hourly" selected>Hourly</option>
+                                                               <option value="daily">Daily</option>
+                                                               <option value="weekly">Weekly</option>
+                                                               <option value="monthly">Monthly</option>
+                                                       </select>
+                                                       Select chart type:
+                                                       <select id="selType" class="form-control">
+                                                               <option value="line" selected>Line</option>
+                                                               <option value="area">Stacked area</option>
+                                                       </select>
+                                                       Select <a title="View Mike Bostock's Block." href="https://bl.ocks.org/mbostock/4342190" target="_blank">interpolation mode</a>:
+                                                       <select id="selInterpolate" class="form-control">
+                                                               <option value="linear" selected>linear</option>
+                                                               <option value="step-before">step-before</option>
+                                                               <option value="step-after">step-after</option>
+                                                               <option value="basis">basis</option>
+                                                               <option value="basis-open">basis-open</option>
+                                                               <option value="bundle">bundle</option>
+                                                               <option value="cardinal">cardinal</option>
+                                                               <option value="cardinal-open">cardinal-open</option>
+                                                               <option value="monotone">monotone</option>
+                                                       </select>
+                                               </form>
+                                       </div>
+                               </div>
+                       </div>
+
                        <div class="tab-pane" id="configuration">
                                <div class="widget-box">
                                        <div class="widget-title">
@@ -313,6 +360,7 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script src="./js/d3pie.min.js"></script>
+<script src="//cdn.rawgit.com/moisseev/D3Evolution/fb6ea62c43e26e728b48a43012fb796c5ab6689c/d3evolution.js"></script>
 <script src="./js/rspamd.js"></script>
 <script type="text/javascript" src="./js/datatables.min.js"></script>
 

diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index 2fcc6bfc36cb7d139d04754445d9b81dffd1082a..7b55e1cf95e1b0ea7d9d50f3d4c618e37fdecda0 100644 (file)
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -28,10 +28,30 @@
         //$.cookie.json = true;
         var pie;
         var history;
+        var graph;
+
+        var selected = []; // Keep graph selectors state
+
+        // Bind event handlers to selectors
+        $("#selData").change(function () {
+            selected.selData = this.value;
+            getGraphData(this.value);
+        });
+        $("#selType").change(function () {
+            graph.type(this.value);
+        });
+        $("#selInterpolate").change(function () {
+            graph.interpolate(this.value);
+        });
+
         $('#disconnect').on('click', function (event) {
             if (pie) {
                 pie.destroy();
             }
+            if (graph) {
+                graph.destroy();
+                graph = undefined;
+            }
             if (history) {
                 history.destroy();
             }
@@ -43,6 +63,7 @@
         $('#refresh').on('click', function (event) {
             statWidgets();
             getChart();
+            getGraphData(selected.selData);
         });
         // @supports session storage
         function supportsSessionStorage() {
@@ -461,6 +482,54 @@
                 }
             });
         }
+
+        function initGraph() {
+            // Get selectors' current state
+            var selIds = ["selData", "selType", "selInterpolate"];
+            selIds.forEach(function (id) {
+                var e = document.getElementById(id);
+                selected[id] = e.options[e.selectedIndex].value;
+            });
+
+            var options = {
+                title: "Rspamd throughput",
+                width: 1060,
+                height: 370,
+
+                type: selected.selType,
+                interpolate: selected.selInterpolate,
+
+                legend: {
+                    entries: [
+                        {label: "Rejected",      color: "#FF0000"},
+                        {label: "Probable spam", color: "#FFD700"},
+                        {label: "Greylisted",    color: "#436EEE"},
+                        {label: "Clean",         color: "#66cc00"}
+                    ]
+                }
+            };
+            graph = new D3Evolution("graph", options);
+        }
+
+        function getGraphData(type) {
+            $.ajax({
+                dataType: 'json',
+                type: 'GET',
+                url: 'graph?type=',
+                data: type,
+                beforeSend: function (xhr) {
+                    xhr.setRequestHeader('Password', getPassword());
+                },
+                success: function (data) {
+                    graph.data(data);
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    alertMessage('alert-error', 'Cannot receive throughput data: ' +
+                        textStatus + ' ' + jqXHR.status + ' ' + errorThrown);
+                }
+            });
+        }
+
         // @get history log
         // function getChart() {
         // //console.log(data)
@@ -1115,6 +1184,7 @@
             getSymbols();
             getHistory();
             getChart();
+            initGraph();
             $('#progress').hide();
             $(disconnect).show();
         }
@@ -1128,5 +1198,8 @@
         $('#status_nav').bind('click', function (e) {
             getChart();
         });
+        $('#throughput_nav').bind('click', function () {
+            getGraphData(selected.selData);
+        });
     });
 })();