From: Sapan Bhatia Date: Thu, 27 Feb 2014 18:12:32 +0000 (-0500) Subject: main.js - graph support from mtuity, modified to pull data from Cloud Scrutiny/Big... X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=fbac39b6c6db61c126f2f89ad3026d09c9157a29;p=plstackapi.git main.js - graph support from mtuity, modified to pull data from Cloud Scrutiny/Big Query --- diff --git a/planetstack/core/static/main.js b/planetstack/core/static/main.js new file mode 100644 index 0000000..f6f7475 --- /dev/null +++ b/planetstack/core/static/main.js @@ -0,0 +1,153 @@ +$(document).ready(function() { + + + function getServerData(url, label, value) { + var jqxhr = $.getJSON( url, function(data) { + if (value == 'nodesValue') { + var unit = ''; + window.nodesCnt = data; + } else if (value == 'cpuValue'){ + var unit = '%'; + window.cpuCnt = data; + } else if (value == 'bandwidthValue'){ + var unit = ''; + window.bandData = data; + } + var legend = data.legend; + var data = data.data; + var dataLength = data.length - 1; + $('.'+label).text(legend).show(); + $('.'+value).text(Math.round(data[dataLength][1])+unit).show(); + }) + + } + var selectedNodeTxt = $('.currentOriginalNode').text(); + selectedNodeTxt = selectedNodeTxt.trim(); + selectedNodeTxt = selectedNodeTxt.split(' ').join('');//selectedNodeTxt.replace(" ", "") + var parentNodeTxt = $('.selectedMainNav').text(); + parentNodeTxt = parentNodeTxt.replace("/\n",""); + parentNodeTxt = parentNodeTxt.replace("»",""); + parentNodeTxt = parentNodeTxt.trim(); + + baseNodeQuery = 'SELECT Minute(time) as Minute,COUNT(distinct %hostname) FROM [vicci.demoevents]'; + baseCpuQuery = 'SELECT Minute(time) as Minute,AVG(i0) as Cpu FROM [vicci.demoevents]'; + baseBwQuery = 'SELECT Minute(time) as Minute,AVG(i1) as Requests FROM [vicci.demoevents]'; + groupByClause = ' GROUP BY Minute ORDER BY Minute'; + + if (selectedNodeTxt ) { + if (parentNodeTxt.length > 0 && parentNodeTxt.charAt(parentNodeTxt.length-1)=='s') { + parentNodeTxt = parentNodeTxt.substring(0, parentNodeTxt.length-1); + } + if (parentNodeTxt=='Slice') { + whereClause = " WHERE s3='"+selectedNodeTxt+"'"; + } + else if (parentNodeTxt=='Site') { + whereClause = " WHERE s2='"+selectedNodeTxt+"' OR %hostname CONTAINS '"+selectedNodeTxt+"'"; + } + else if (parentNodeTxt=='Node') { + whereClause = " WHERE %hostname='"+selectedNodeTxt+"'"; + alert(whereClause); + } else { + console.log('Error: Unkown object type:'+parentNodeTxt) + } + } else { + whereClause = '' + } + finalNodeQuery = encodeURIComponent(baseNodeQuery + whereClause + groupByClause) + finalCpuQuery = encodeURIComponent(baseCpuQuery + whereClause + groupByClause) + finalBwQuery = encodeURIComponent(baseBwQuery + whereClause + groupByClause) + getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Node+Count&tqx=saber&q='+finalNodeQuery,'nodesLabel','nodesValue') + getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Load&tqx=saber&q='+finalCpuQuery,'cpuLabel','cpuValue') + getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Bandwidth&tqx=saber&q='+finalBwQuery,'bandwidthLabel','bandwidthValue') + + $('.nodesLabel, .nodesValue').click(function() { + var jsonData = window.nodesCnt; + renderChart(jsonData); + }); + $('.cpuLabel, .cpuValue').click(function() { + var jsonData = window.cpuCnt; + renderChart(jsonData); + }); + $('.bandwidthLabel, .bandwidthValue').click(function() { + var jsonData = window.bandData; + renderChart(jsonData); + }); + + function renderChart(jsonData) { + $('#graph').empty(); + $('#chartsModal').modal('show'); + $('.modal-body').scrollTop(0) + var margin = {top: 0, right: 100, bottom: 100, left: 175}, + width = 520 - margin.left - margin.right, + height = 300 - margin.top - margin.bottom; + + var parseDate = d3.time.format("%Y-%m-%m-%H-%M").parse; + + var x = d3.time.scale() + .range([0, width]); + + var y = d3.scale.linear() + .range([height, 0]); + + var xAxis = d3.svg.axis() + .scale(x) + .ticks(d3.time.minutes, 15) + .orient("bottom"); + + var yAxis = d3.svg.axis() + .scale(y) + .ticks(4) + .orient("left"); + + var line = d3.svg.line() + .x(function(d) { return x(d.date); }) + .y(function(d) { return y(d.value); }); + + var svg = d3.select("#graph").append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + /*var data_path = "http://sabertooth.cs.princeton.edu/graphs/UpNodes"; + d3.json(data_path, function(error, input) {*/ + //jsonData = JSON.stringify(eval("(" + jsonData + ")")); + data = jsonData.data;//input['data']; + legend = jsonData.legend;//input['legend'] + $('#chartHeading').text(legend); + data.forEach(function(d) { + d.date = new Date(d[0]*1000); + d.value = +d[1]; + }); + x.domain(d3.extent(data, function(d) { return d.date; })); + + var e = d3.extent(data, function(d) { return d.value;}); + e = [e[0]-1,e[1]+1]; + + y.domain(e); + + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .attr("x", 5) + .call(xAxis); + + svg.append("g") + .attr("class", "y axis") + .call(yAxis) + .append("text") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", ".71em") + .style("text-anchor", "end") + .text(legend) + .attr("class", "legend"); + + svg.append("path") + .datum(data) + .attr("class", "line") + .attr("d", line); + //}); + } + +}) diff --git a/planetstack/core/static/planetstack.css b/planetstack/core/static/planetstack.css index 59b2199..d59adb7 100644 --- a/planetstack/core/static/planetstack.css +++ b/planetstack/core/static/planetstack.css @@ -488,15 +488,12 @@ opacity:1; background-position: 0;*/ } -.icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation, .icon-app{ +.icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation{ background-position: left center; width:22px; height:22px; } -.icon-app { -background-image: url("opencloudApp.png"); -} .icon-home { background-image: url("Home.png"); } @@ -564,3 +561,132 @@ text-decoration: underline; width: 700px; height: 400px; } + + + + + +/* Charts CSS */ +p.numeral +{ + font-size:32pt; + color:#ffffff; + opacity: 0.7; + font-family:Helvetica Neue; + font-weight:100; + text-align:center; + line-height:75%; +} + +.helper-text +{ + border: 1px solid #fff; + padding: 7px; + border-radius: 18px; + font-size:13pt; + color:#ffffff; + opacity: 0.7; + font-family:Helvetica Neue; + font-weight:200; + text-align:center; + line-height:100%; +} +p.osobject +{ + font-size:12pt; + color:#ffffff; + opacity: 0.7; + font-family:Helvetica Neue; + font-weight:200; + text-align:center; + line-height:100%; +} + +p.heading +{ + font-size:20pt; + color:#ffffff; + opacity: 0.7; + font-family:Helvetica Neue; + font-weight:200; + text-align:center; +} + +/*p.heading +{ + font-size:32pt; + color:#ffffff; + opacity: 0.7; + font-family:Helvetica Neue; + font-weight:200; + text-align:center; +}*/ + +div.graph +{ + height:340px; +} + +div.numeral +{ + height:120px; +} + +div.heading +{ + height:10px; +} + +div.padding +{ + height:20px; +} + +div.chartContainer +{ + background-image:url('chartsBg.jpg'); + width:527px; + height:400px; + border:1px; +} + +/* D3 */ + +.axis path, +.axis line { + fill: none; + stroke: #ffffff; + opacity: 0.7; + shape-rendering: crispEdges; +} + + +.x.axis path { + display: none; +} + +.x.axis text { + fill: white; + opacity: 0.5; +} + +.y.axis text { + opacity: 0.5; + fill: white; +} + +.y.axis text.legend { + opacity: 1.0; + fill: white; + font-size:8pt; +} + +.line { + fill: none; + stroke: white; + stroke-width: 3px; + opacity: 0.6; +} + + +/* Charts CSS */