[Feature] Add throughput graph for RRD backend to WebUI

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;
+}

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>
 

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);
+        });
     });
 })();