planetstack/core/static/main.js

   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 {
  51                         console.log('Error: Unkown object type:'+parentNodeTxt)
  52                 }
  53         } else {
  54                 whereClause = ''
  55         }
  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')
  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 })