planetstack/templates/admin/dashboard/hpc_historical.html

   1
   2     <script type="text/javascript" src="//www.google.com/jsapi"></script>
   3     <link rel="stylesheet" href="/static/hpc_historical.css">
   4     <script type="text/javascript">
   5                 google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
   6     </script>
   7
   8     <script type="text/javascript">
   9 var queryString = encodeURIComponent("SELECT MINUTE(time) as Time, city, s8 as Node, REGEXP_REPLACE(s8,r'node[0-9]+\.(.*)\.vicci\.org',r'\\1') as Site, AVG(i0) as Cpu, AVG(i1) as Requests FROM [vicci.demoevents] WHERE i0 is not null AND s8 contains 'vicci.org' and not city IN ('princeton','Unknown') and city is not null GROUP BY Time,city,Site,Node ORDER BY Time;");
  10                         var serverPart = "http://cloud-scrutiny.appspot.com/command?action=send_query&force=ColumnChart&q="
  11                         var dataSourceUrl = serverPart + queryString;
  12                         var query;
  13
  14                         var options = {
  15            width: 600,
  16            height: 400,
  17            showRowNumber: false,
  18            pages:true,
  19        numRows:9,
  20            backgroundColor: "black"
  21                         };
  22
  23 google.setOnLoadCallback(function() { sendAndDraw(dataSourceUrl); });
  24
  25 function showNodeAgg(dt) {
  26                 var tab = new google.visualization.ChartWrapper({
  27           'chartType': 'Table',
  28           'containerId': 'chart3',
  29           'options': {
  30             'width': 300,
  31             'height': 300,
  32             'title': 'Network-wide usage',
  33                         'page': 'enable',
  34                         'pageSize': 10
  35           },
  36           'view': {'columns': [0, 1, 2]}
  37         });
  38
  39         tab.setDataTable(dt);
  40         tab.draw();
  41 }
  42
  43 function showSiteTimeAgg(dt) {
  44                 var lineChart = new google.visualization.ChartWrapper({
  45           'chartType': 'LineChart',
  46           'containerId': 'chart4',
  47           'options': {
  48             'width': 300,
  49             'height': 300,
  50             'title': 'Network-wide usage',
  51                         'pages': true,
  52                         'numRows': 9
  53           },
  54           'view': {'columns': [0, 1, 2]}
  55         });
  56         lineChart.setDataTable(dt);
  57         lineChart.draw();
  58                 /*
  59                 var scatterChart = new google.visualization.ChartWrapper({
  60           'chartType': 'ScatterChart',
  61           'containerId': 'chart5',
  62           'options': {
  63             'width': 300,
  64             'height': 300,
  65           },
  66           // from the 'data' DataTable.
  67           'view': {'columns': [1, 2]}
  68         });
  69                 scatterChart.setDataTable(dt);
  70                 scatterChart.draw();*/
  71 }
  72 function showSiteAgg(dt) {
  73                 var barChart = new google.visualization.ChartWrapper({
  74           'chartType': 'ColumnChart',
  75           'containerId': 'chart1',
  76           'options': {
  77             'width': 300,
  78             'height': 300,
  79             'title': 'Site-wise usage',
  80                         'pages': true,
  81                         'numRows': 9
  82           },
  83           // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
  84           // from the 'data' DataTable.
  85           'view': {'columns': [1, 2, 3]}
  86         });
  87         barChart.setDataTable(dt);
  88         barChart.draw();
  89                 var geoChart = new google.visualization.ChartWrapper({
  90           'chartType': 'GeoChart',
  91           'containerId': 'chart2',
  92           'options': {
  93             'width': 300,
  94             'height': 300,
  95                         'displayMode': 'markers',
  96                         'region':'021',
  97             'title': 'Usage map',
  98                 colorAxis: {colors: ['green', 'purple', 'red']}
  99           },
 100           // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
 101           // from the 'data' DataTable.
 102           'view': {'columns': [0, 2,3]}
 103         });
 104                 geoChart.setDataTable(dt);
 105                 geoChart.draw();
 106
 107                 var histogram = new google.visualization.ChartWrapper({
 108           'chartType': 'Histogram',
 109           'containerId': 'chart6',
 110           'options': {
 111             'width': 300,
 112             'height': 300,
 113           },
 114                   'title': 'Sites by load',
 115           // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
 116           // from the 'data' DataTable.
 117           'view': {'columns': [1, 2]}
 118         });
 119                 histogram.setDataTable(dt);
 120                 histogram.draw();
 121
 122 }
 123
 124 function handleResponse(response) {
 125 var supportedClasses = {
 126                 'Table':google.visualization.Table,
 127                 'LineChart':google.visualization.LineChart,
 128                 'ScatterChart':google.visualization.ScatterChart,
 129                 'ColumnChart':google.visualization.ColumnChart,
 130                 'GeoChart':google.visualization.GeoChart,
 131                 'PieChart':google.visualization.PieChart,
 132                 'Histogram':google.visualization.Histogram
 133         };
 134
 135         /*var slider2 = new google.visualization.ControlWrapper({
 136     'controlType': 'NumberRangeFilter',
 137     'containerId': 'control3',
 138     'options': {
 139       'filterColumnLabel': 'Cpu',
 140       minValue: 0,
 141       maxValue: 100,
 142           ui: { ticks: 10}
 143     }
 144   });*/
 145
 146   var timeSlider = new google.visualization.ControlWrapper({
 147     'controlType': 'NumberRangeFilter',
 148     'containerId': 'control1',
 149     'options': {
 150       'filterColumnLabel': 'Time',
 151           ui: { ticks: 10}
 152     }
 153   });
 154
 155   // Define a bar chart
 156   var barChart = new google.visualization.ChartWrapper({
 157     'chartType': 'BarChart',
 158     'containerId': 'chart1',
 159     'options': {
 160       'width': 400,
 161       'height': 300,
 162       'hAxis': {'minValue': 0, 'maxValue': 60},
 163       'chartArea': {top: 0, right: 0, bottom: 0}
 164     }
 165   });
 166
 167         var categoryPicker = new google.visualization.ControlWrapper({
 168           'controlType': 'CategoryFilter',
 169           'allowMultiple': true,
 170           'containerId': 'control2',
 171           'options': {
 172             'filterColumnLabel': 'Site',
 173             'ui': {
 174             'labelStacking': 'vertical',
 175               'allowTyping': false
 176             }
 177           }
 178         });
 179         //var container = document.getElementById('datatable');
 180         //var table = new google.visualization.LineChart(container);
 181         //var table = new google.visualization.ColumnChart(container);
 182
 183         var proxy = new google.visualization.ChartWrapper({
 184           'chartType': 'Table',
 185           'containerId': 'chart7',
 186           'options': {
 187             'width': 800,
 188             'height': 300,
 189                         pageSize:5,
 190                         page:'enable',
 191             'legend': 'none',
 192             'title': 'Nodes'
 193           },
 194           // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
 195           // from the 'data' DataTable.
 196           'view': {'columns': [0,1,2,3,4,5]}
 197         });
 198
 199         function core_sum(arr) {
 200                 var ret = 0;
 201                 for (var i = 0; i < arr.length; i++) {
 202                         ret+=arr[i]/1000;
 203                 }
 204                 return ret;
 205         }
 206
 207         function scaled_sum(arr) {
 208                 var ret = 0;
 209                 for (var i = 0; i < arr.length; i++) {
 210                         ret+=arr[i]/1000;
 211                 }
 212                 return ret;
 213         }
 214
 215         function count_uniq(arr) {
 216                 var counts = {};
 217                 var ret = 0;
 218                 console.log('Starting ret '+ret);
 219                 for (var i = 0; i < arr.length; i++) {
 220                                 if (!counts[arr[i]]) ret+=1;
 221                             counts[arr[i]] = 1;
 222                 }
 223                 return ret;
 224         }
 225         google.visualization.events.addListener(proxy, 'ready', function () {
 226         // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
 227         var dt = proxy.getDataTable();
 228                 var groupedData1 = google.visualization.data.group(dt, [0], [{
 229             column: 4,
 230             type: 'number',
 231             label: dt.getColumnLabel(4),
 232             aggregation: google.visualization.data.sum
 233         },{
 234                         column: 5,
 235             type: 'number',
 236             label: dt.getColumnLabel(5),
 237             aggregation: google.visualization.data.sum
 238                 }]);
 239
 240         showSiteTimeAgg(groupedData1);
 241     });
 242
 243         /*google.visualization.events.addListener(proxy, 'ready', function () {
 244         // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
 245         var dt = proxy.getDataTable();
 246         var groupedData0 = google.visualization.data.group(dt, [2], [{
 247             column: 4,
 248             type: 'number',
 249             label: dt.getColumnLabel(4),
 250             aggregation: google.visualization.data.sum
 251         },{
 252                         column: 5,
 253             type: 'number',
 254             label: dt.getColumnLabel(5),
 255             aggregation: google.visualization.data.sum
 256                 }]);
 257         // after grouping, the data will be sorted by column 0, then 1, then 2
 258         // if you want a different order, you have to re-sort
 259                 showNodeAgg(groupedData0);
 260                 });*/
 261
 262         google.visualization.events.addListener(proxy, 'ready', function () {
 263         // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
 264         var dt = proxy.getDataTable();
 265         var groupedData0 = google.visualization.data.group(dt, [1,3], [{
 266             column: 4,
 267             type: 'number',
 268             label: 'Cores',
 269             aggregation: core_sum
 270         },{
 271                         column: 5,
 272             type: 'number',
 273             label: dt.getColumnLabel(5),
 274             aggregation: scaled_sum
 275                 }]);
 276         // after grouping, the data will be sorted by column 0, then 1, then 2
 277         // if you want a different order, you have to re-sort
 278                 showSiteAgg(groupedData0);
 279             });
 280
 281         data = response.getDataTable();
 282         new google.visualization.Dashboard(document.getElementById('dashboard')).
 283             // Establish bindings, declaring the both the slider and the category
 284             // picker will drive both charts.
 285             bind([categoryPicker,timeSlider], [proxy]).
 286             // Draw the entire dashboard.
 287             draw(data);
 288
 289 }
 290 function sendAndDraw(queryString) {
 291         query = new google.visualization.Query(queryString)
 292         query && query.abort();
 293         query.send(function(response) {handleResponse(response);});
 294 }
 295
 296
 297     </script>
 298     <div id="dashboard" class="container">
 299                 <div class="row">
 300                         <div class="col-md-8">
 301                                 <div class="col-md-4" id="control2"></div>
 302                                 <div class="col-md-4" id="control1"></div>
 303                                 <!--<div class="col-md-4" id="control3"></div>-->
 304                         </div>
 305                 </div>
 306                 <div class="row">
 307                         <div class="col-md-8">
 308                                 <div class="col-md-4" id="chart1">
 309                                 </div>
 310                                 <div class="col-md-4" id="chart2">
 311                                 </div>
 312                                 <!--
 313                                 <div class="col-md-4" id="chart3">
 314                                 </div>-->
 315                         </div>
 316                 </div>
 317                 <div class="row">
 318                         <div class="col-md-8">
 319                                 <div class="col-md-4" id="chart4">
 320                                 </div>
 321                                 <!--
 322                                 <div class="col-md-4" id="chart5">
 323                                 </div>-->
 324                                 <div class="col-md-4" id="chart6">
 325                                 </div>
 326                         </div>
 327                 </div>
 328     </div>
 329         <div id="chart7" style="display:none"></div>