From 9f33ec64330d0b50896772abd73156abbd762305 Mon Sep 17 00:00:00 2001 From: Jared Dillard Date: Wed, 17 Aug 2016 14:46:22 -0500 Subject: change traffic graphs to d3 --- src/usr/local/www/css/pfSense-dark.css | 58 ++- src/usr/local/www/css/pfSense.css | 63 ++- src/usr/local/www/ifstats.php | 119 ++++- src/usr/local/www/js/traffic-graphs.js | 189 +++++++ src/usr/local/www/status_graph.php | 292 +++++++++-- .../www/widgets/widgets/traffic_graphs.widget.php | 542 ++++++++++++++++----- 6 files changed, 1079 insertions(+), 184 deletions(-) create mode 100644 src/usr/local/www/js/traffic-graphs.js (limited to 'src') diff --git a/src/usr/local/www/css/pfSense-dark.css b/src/usr/local/www/css/pfSense-dark.css index e8e6606..7a7dfc8 100644 --- a/src/usr/local/www/css/pfSense-dark.css +++ b/src/usr/local/www/css/pfSense-dark.css @@ -5,17 +5,49 @@ * Copyright (c) 2016 Electric Sheep Fencing, LLC * All rights reserved. * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: * - * http://www.apache.org/licenses/LICENSE-2.0 + * 1. Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * 2. Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in + * the documentation and/or other materials provided with the + * distribution. + * + * 3. All advertising materials mentioning features or use of this software + * must display the following acknowledgment: + * "This product includes software developed by the pfSense Project + * for use in the pfSense® software distribution. (http://www.pfsense.org/). + * + * 4. The names "pfSense" and "pfSense Project" must not be used to + * endorse or promote products derived from this software without + * prior written permission. For written permission, please contact + * coreteam@pfsense.org. + * + * 5. Products derived from this software may not be called "pfSense" + * nor may "pfSense" appear in their names without prior written + * permission of the Electric Sheep Fencing, LLC. + * + * 6. Redistributions of any form whatsoever must retain the following + * acknowledgment: + * + * "This product includes software developed by the pfSense Project + * for use in the pfSense software distribution (http://www.pfsense.org/). + * + * THIS SOFTWARE IS PROVIDED BY THE pfSense PROJECT ``AS IS'' AND ANY + * EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE pfSense PROJECT OR + * ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT + * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; + * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) + * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, + * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED + * OF THE POSSIBILITY OF SUCH DAMAGE. */ @import url("/css/pfSense.css"); @@ -486,6 +518,10 @@ textarea { /* D3 Styles */ +.traffic-widget-chart:not(:last-child) { + border-bottom: 2px solid #303030; +} + svg text { fill: #FFFFFF !important; } @@ -499,13 +535,13 @@ g.nv-axis text, g.nv-legend text { stroke: #616161 !important; } -#chart .nvtooltip > h3 { +.d3-chart .nvtooltip > h3 { background-color: rgba(66,66,66, 0.9); border-bottom: 1px solid #616161; color: #e0e0e0; } -#chart .nvtooltip { +.d3-chart .nvtooltip { background: rgba(97,97,97, 0.9); color: #e0e0e0; } diff --git a/src/usr/local/www/css/pfSense.css b/src/usr/local/www/css/pfSense.css index 24e86ad..b2535f2 100644 --- a/src/usr/local/www/css/pfSense.css +++ b/src/usr/local/www/css/pfSense.css @@ -5,17 +5,49 @@ * Copyright (c) 2016 Electric Sheep Fencing, LLC * All rights reserved. * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: * - * http://www.apache.org/licenses/LICENSE-2.0 + * 1. Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * 2. Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in + * the documentation and/or other materials provided with the + * distribution. + * + * 3. All advertising materials mentioning features or use of this software + * must display the following acknowledgment: + * "This product includes software developed by the pfSense Project + * for use in the pfSense® software distribution. (http://www.pfsense.org/). + * + * 4. The names "pfSense" and "pfSense Project" must not be used to + * endorse or promote products derived from this software without + * prior written permission. For written permission, please contact + * coreteam@pfsense.org. + * + * 5. Products derived from this software may not be called "pfSense" + * nor may "pfSense" appear in their names without prior written + * permission of the Electric Sheep Fencing, LLC. + * + * 6. Redistributions of any form whatsoever must retain the following + * acknowledgment: + * + * "This product includes software developed by the pfSense Project + * for use in the pfSense software distribution (http://www.pfsense.org/). + * + * THIS SOFTWARE IS PROVIDED BY THE pfSense PROJECT ``AS IS'' AND ANY + * EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE pfSense PROJECT OR + * ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT + * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; + * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) + * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, + * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED + * OF THE POSSIBILITY OF SUCH DAMAGE. */ @import url("/vendor/bootstrap/css/bootstrap.min.css"); @@ -924,14 +956,23 @@ svg { display: block; } -#chart, #chart svg { +.d3-chart, .d3-chart svg { margin: 0px; padding: 10px 0; height: 445px; width: 100%; } -#chart .nvtooltip > h3 { +.traffic-widget-chart, .traffic-widget-chart svg { + padding: 0; + height: 250px; +} + +.traffic-widget-chart:not(:last-child) { + border-bottom: 2px solid #ccc; +} + +.d3-chart .nvtooltip > h3 { font-size: 14px; } diff --git a/src/usr/local/www/ifstats.php b/src/usr/local/www/ifstats.php index f01eb25..f6dd1f4 100644 --- a/src/usr/local/www/ifstats.php +++ b/src/usr/local/www/ifstats.php @@ -1,22 +1,56 @@ diff --git a/src/usr/local/www/js/traffic-graphs.js b/src/usr/local/www/js/traffic-graphs.js new file mode 100644 index 0000000..7229917 --- /dev/null +++ b/src/usr/local/www/js/traffic-graphs.js @@ -0,0 +1,189 @@ +function draw_graph(refreshInterval, then) { + + d3.select("div[id^=nvtooltip-]").remove(); + d3.select(".interface-label").remove(); + + var invert = localStorage.getItem('invert'); + var size = localStorage.getItem('size'); + + startTime = 120 * refreshInterval; + then.setSeconds(then.getSeconds() - startTime); + var thenTime = then.getTime(); + + $.each( JSON.parse(localStorage.getItem('interfaces')), function( key, value ) { + + latest[value + 'in'] = 0; + latest[value + 'out'] = 0; + + var stepTime = thenTime; + + //initialize first 120 graph points to zero + for (i = 1; i < 120; i++) { + + stepTime = stepTime + (1000 * refreshInterval); + + myData[value].forEach(function(entry) { + entry.values.push({ + x: stepTime, + y: 0 + }); + }); + + } + + nv.addGraph(function() { + + charts[value] = nv.models.lineChart() + .useInteractiveGuideline(true) + .color(d3.scale.category20().range()) + .rightAlignYAxis(true) + .margin({top: 0, left:25, bottom: 30, right: 45}); + + charts[value] + .x(function(d,i) { return d.x }); + + charts[value].xAxis + .tickFormat(function (d) { + return d3.time.format('%M:%S')(new Date(d)); + }); + + //TODO change to localStorage.getItem('sizeLabel'); + var sizeLabel = $( "#traffic-graph-size option:selected" ).text(); + + d3.select('#traffic-chart-' + value + ' svg') + .append("text") + .attr('class', 'interface-label') + .attr("x", 20) + .attr("y", 20) + .attr("font-size", 18) + .text(value); + + charts[value].yAxis + .tickFormat(d3.format('.2s')) + .showMaxMin(false); + + d3.select('#traffic-chart-' + value + ' svg') + .datum(myData[value]) + .transition().duration(500) + .call(charts[value]); + + nv.utils.windowResize(charts[value].update); + + //custom tooltip contents + charts[value].interactiveLayer.tooltip.contentGenerator(function(data) { + + var units = 'b/s'; + console.log(localStorage.getItem('size')); + if(localStorage.getItem('size') === "1") { + units = 'B/s' + } + + var content = '

' + d3.time.format('%Y-%m-%d %H:%M:%S')(new Date(data.value)) + '

'; + + for ( var v = 0; v < data.series.length; v++ ){ + + var rawValue = data.series[v].value; + + if((invert === "true") && data.series[v].key.includes("(out)")) { + rawValue = 0 - rawValue; + } + + var sValue = d3.formatPrefix(rawValue); + + //TODO change unit based on unit size + var formattedVal = sValue.scale(rawValue).toFixed(2) + ' ' + sValue.symbol + units; + + content += ''; + + } + + content += '
' + data.series[v].key + '' + formattedVal + '
'; + + return content; + + }); + + return charts[value]; + }); + + }); + + //only update the graphs when tab is active in window to save resources and prevent build up + updateIds = Visibility.every(refreshInterval * 1000, function(){ + + d3.json("ifstats.php") + .header("Content-Type", "application/x-www-form-urlencoded") + .post('if='+JSON.parse(localStorage.getItem('interfaces')).join('|'), function(error, json) { //TODO all ifs again + + if (error) { + + Visibility.stop(updateIds); + $(".traffic-widget-chart").remove(); + $("#traffic-chart-error").show().html('Error: ' + error); + return console.warn(error); + + } + + if (json.error) { + + Visibility.stop(updateIds); + $(".traffic-widget-chart").remove(); + $("#traffic-chart-error").show().html('Error: ' + json.error); + return console.warn(json.error); + + } + + now = new Date(Date.now()); + + $.each(json, function( key, ifVals ) { + + if(!myData[key][0].first) { + + var trafficIn = ((ifVals[0].values[1] * size) - latest[ifVals[0].key]) / refreshInterval; + var trafficOut = ((ifVals[1].values[1] * size) - latest[ifVals[1].key]) / refreshInterval; + + if((localStorage.getItem('invert') === "true")) { + trafficOut = 0 - trafficOut; + } + + myData[key][0].values.push({ + x: now.getTime(), + y: trafficIn + }); + + myData[key][1].values.push({ + x: now.getTime(), + y: trafficOut + }); + + } else { + myData[key][0].values.push({ + x: now.getTime(), + y: 0 + }); + + myData[key][1].values.push({ + x: now.getTime(), + y: 0 + }); + } + + latest[ifVals[0].key] = ifVals[0].values[1] * size; + latest[ifVals[1].key] = ifVals[1].values[1] * size; + + myData[key][0].first = false; + myData[key][1].first = false; + + + myData[key][0].values.shift(); + myData[key][1].values.shift(); + + charts[key].update(); + + }); + + }); + + }); + +} \ No newline at end of file diff --git a/src/usr/local/www/status_graph.php b/src/usr/local/www/status_graph.php index e79272a..638eaf2 100644 --- a/src/usr/local/www/status_graph.php +++ b/src/usr/local/www/status_graph.php @@ -10,17 +10,49 @@ * Copyright (c) 2003-2004 Manuel Kasper . * All rights reserved. * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: * - * http://www.apache.org/licenses/LICENSE-2.0 + * 1. Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * 2. Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in + * the documentation and/or other materials provided with the + * distribution. + * + * 3. All advertising materials mentioning features or use of this software + * must display the following acknowledgment: + * "This product includes software developed by the pfSense Project + * for use in the pfSense® software distribution. (http://www.pfsense.org/). + * + * 4. The names "pfSense" and "pfSense Project" must not be used to + * endorse or promote products derived from this software without + * prior written permission. For written permission, please contact + * coreteam@pfsense.org. + * + * 5. Products derived from this software may not be called "pfSense" + * nor may "pfSense" appear in their names without prior written + * permission of the Electric Sheep Fencing, LLC. + * + * 6. Redistributions of any form whatsoever must retain the following + * acknowledgment: + * + * "This product includes software developed by the pfSense Project + * for use in the pfSense software distribution (http://www.pfsense.org/). + * + * THIS SOFTWARE IS PROVIDED BY THE pfSense PROJECT ``AS IS'' AND ANY + * EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE pfSense PROJECT OR + * ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT + * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; + * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) + * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, + * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED + * OF THE POSSIBILITY OF SUCH DAMAGE. */ ##|+PRIV @@ -36,18 +68,6 @@ require_once("guiconfig.inc"); require_once("ipsec.inc"); -if ($_POST['width']) { - $width = $_POST['width']; -} else { - $width = "100%"; -} - -if ($_POST['height']) { - $height = $_POST['height']; -} else { - $height = "200"; -} - // Get configured interface list $ifdescrs = get_configured_interface_with_descr(); if (ipsec_enabled()) { @@ -186,6 +206,226 @@ $form->add($section); print $form; ?> + + + + + + + + + + + + + + + + + + + '; + echo ' '; + echo ''; + } + ?> + + + + -