Sapan Bhatia | fbac39b | 2014-02-27 13:12:32 -0500 | [diff] [blame] | 1 | $(document).ready(function() { |
| 2 | |
| 3 | |
| 4 | function getServerData(url, label, value) { |
| 5 | var jqxhr = $.getJSON( url, function(data) { |
| 6 | if (value == 'nodesValue') { |
| 7 | var unit = ''; |
| 8 | window.nodesCnt = data; |
| 9 | } else if (value == 'cpuValue'){ |
| 10 | var unit = '%'; |
| 11 | window.cpuCnt = data; |
| 12 | } else if (value == 'bandwidthValue'){ |
| 13 | var unit = ''; |
| 14 | window.bandData = data; |
| 15 | } |
| 16 | var legend = data.legend; |
| 17 | var data = data.data; |
| 18 | var dataLength = data.length - 1; |
| 19 | $('.'+label).text(legend).show(); |
| 20 | $('.'+value).text(Math.round(data[dataLength][1])+unit).show(); |
| 21 | }) |
| 22 | |
| 23 | } |
| 24 | var selectedNodeTxt = $('.currentOriginalNode').text(); |
| 25 | selectedNodeTxt = selectedNodeTxt.trim(); |
| 26 | selectedNodeTxt = selectedNodeTxt.split(' ').join('');//selectedNodeTxt.replace(" ", "") |
| 27 | var parentNodeTxt = $('.selectedMainNav').text(); |
| 28 | parentNodeTxt = parentNodeTxt.replace("/\n",""); |
| 29 | parentNodeTxt = parentNodeTxt.replace("ยป",""); |
| 30 | parentNodeTxt = parentNodeTxt.trim(); |
| 31 | |
| 32 | baseNodeQuery = 'SELECT Minute(time) as Minute,COUNT(distinct %hostname) FROM [vicci.demoevents]'; |
| 33 | baseCpuQuery = 'SELECT Minute(time) as Minute,AVG(i0) as Cpu FROM [vicci.demoevents]'; |
| 34 | baseBwQuery = 'SELECT Minute(time) as Minute,AVG(i1) as Requests FROM [vicci.demoevents]'; |
| 35 | groupByClause = ' GROUP BY Minute ORDER BY Minute'; |
| 36 | |
| 37 | if (selectedNodeTxt ) { |
| 38 | if (parentNodeTxt.length > 0 && parentNodeTxt.charAt(parentNodeTxt.length-1)=='s') { |
| 39 | parentNodeTxt = parentNodeTxt.substring(0, parentNodeTxt.length-1); |
| 40 | } |
| 41 | if (parentNodeTxt=='Slice') { |
| 42 | whereClause = " WHERE s3='"+selectedNodeTxt+"'"; |
| 43 | } |
| 44 | else if (parentNodeTxt=='Site') { |
| 45 | whereClause = " WHERE s2='"+selectedNodeTxt+"' OR %hostname CONTAINS '"+selectedNodeTxt+"'"; |
| 46 | } |
| 47 | else if (parentNodeTxt=='Node') { |
| 48 | whereClause = " WHERE %hostname='"+selectedNodeTxt+"'"; |
| 49 | alert(whereClause); |
| 50 | } else { |
Sapan Bhatia | 1a89a07 | 2014-03-11 17:37:41 -0400 | [diff] [blame^] | 51 | console.log('Error: Unkown object type:'+parentNodeTxt); |
Sapan Bhatia | fbac39b | 2014-02-27 13:12:32 -0500 | [diff] [blame] | 52 | } |
| 53 | } else { |
Sapan Bhatia | 1a89a07 | 2014-03-11 17:37:41 -0400 | [diff] [blame^] | 54 | whereClause = ''; |
Sapan Bhatia | fbac39b | 2014-02-27 13:12:32 -0500 | [diff] [blame] | 55 | } |
Sapan Bhatia | 1a89a07 | 2014-03-11 17:37:41 -0400 | [diff] [blame^] | 56 | finalNodeQuery = encodeURIComponent(baseNodeQuery + whereClause + groupByClause); |
| 57 | finalCpuQuery = encodeURIComponent(baseCpuQuery + whereClause + groupByClause); |
| 58 | finalBwQuery = encodeURIComponent(baseBwQuery + whereClause + groupByClause); |
| 59 | getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Node+Count&tqx=saber&q='+finalNodeQuery,'nodesLabel','nodesValue'); |
| 60 | getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Load&tqx=saber&q='+finalCpuQuery,'cpuLabel','cpuValue'); |
| 61 | getServerData('http://cloud-scrutiny.appspot.com/command?action=send_query&legend=Bandwidth&tqx=saber&q='+finalBwQuery,'bandwidthLabel','bandwidthValue'); |
Sapan Bhatia | fbac39b | 2014-02-27 13:12:32 -0500 | [diff] [blame] | 62 | |
| 63 | $('.nodesLabel, .nodesValue').click(function() { |
| 64 | var jsonData = window.nodesCnt; |
| 65 | renderChart(jsonData); |
| 66 | }); |
| 67 | $('.cpuLabel, .cpuValue').click(function() { |
| 68 | var jsonData = window.cpuCnt; |
| 69 | renderChart(jsonData); |
| 70 | }); |
| 71 | $('.bandwidthLabel, .bandwidthValue').click(function() { |
| 72 | var jsonData = window.bandData; |
| 73 | renderChart(jsonData); |
| 74 | }); |
| 75 | |
| 76 | function renderChart(jsonData) { |
| 77 | $('#graph').empty(); |
| 78 | $('#chartsModal').modal('show'); |
| 79 | $('.modal-body').scrollTop(0) |
| 80 | var margin = {top: 0, right: 100, bottom: 100, left: 175}, |
| 81 | width = 520 - margin.left - margin.right, |
| 82 | height = 300 - margin.top - margin.bottom; |
| 83 | |
| 84 | var parseDate = d3.time.format("%Y-%m-%m-%H-%M").parse; |
| 85 | |
| 86 | var x = d3.time.scale() |
| 87 | .range([0, width]); |
| 88 | |
| 89 | var y = d3.scale.linear() |
| 90 | .range([height, 0]); |
| 91 | |
| 92 | var xAxis = d3.svg.axis() |
| 93 | .scale(x) |
| 94 | .ticks(d3.time.minutes, 15) |
| 95 | .orient("bottom"); |
| 96 | |
| 97 | var yAxis = d3.svg.axis() |
| 98 | .scale(y) |
| 99 | .ticks(4) |
| 100 | .orient("left"); |
| 101 | |
| 102 | var line = d3.svg.line() |
| 103 | .x(function(d) { return x(d.date); }) |
| 104 | .y(function(d) { return y(d.value); }); |
| 105 | |
| 106 | var svg = d3.select("#graph").append("svg") |
| 107 | .attr("width", width + margin.left + margin.right) |
| 108 | .attr("height", height + margin.top + margin.bottom) |
| 109 | .append("g") |
| 110 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
| 111 | |
| 112 | /*var data_path = "http://sabertooth.cs.princeton.edu/graphs/UpNodes"; |
| 113 | d3.json(data_path, function(error, input) {*/ |
| 114 | //jsonData = JSON.stringify(eval("(" + jsonData + ")")); |
| 115 | data = jsonData.data;//input['data']; |
| 116 | legend = jsonData.legend;//input['legend'] |
| 117 | $('#chartHeading').text(legend); |
| 118 | data.forEach(function(d) { |
| 119 | d.date = new Date(d[0]*1000); |
| 120 | d.value = +d[1]; |
| 121 | }); |
| 122 | x.domain(d3.extent(data, function(d) { return d.date; })); |
| 123 | |
| 124 | var e = d3.extent(data, function(d) { return d.value;}); |
| 125 | e = [e[0]-1,e[1]+1]; |
| 126 | |
| 127 | y.domain(e); |
| 128 | |
| 129 | svg.append("g") |
| 130 | .attr("class", "x axis") |
| 131 | .attr("transform", "translate(0," + height + ")") |
| 132 | .attr("x", 5) |
| 133 | .call(xAxis); |
| 134 | |
| 135 | svg.append("g") |
| 136 | .attr("class", "y axis") |
| 137 | .call(yAxis) |
| 138 | .append("text") |
| 139 | .attr("transform", "rotate(-90)") |
| 140 | .attr("y", 6) |
| 141 | .attr("dy", ".71em") |
| 142 | .style("text-anchor", "end") |
| 143 | .text(legend) |
| 144 | .attr("class", "legend"); |
| 145 | |
| 146 | svg.append("path") |
| 147 | .datum(data) |
| 148 | .attr("class", "line") |
| 149 | .attr("d", line); |
| 150 | //}); |
| 151 | } |
| 152 | |
| 153 | }) |