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
  10      var options = {
  11 \r         width: 600,
  12          height: 400,
  13          showRowNumber: false,
  14          pages: true,
  15          numRows: 9,
  16          backgroundColor: "black"
  17      };
  18
  19      // ask django for a data source URL to use for the graphs
  20
  21      function updateDataSourceUrl() {
  22          var sliceName = $("#historical_slicename :selected").text();
  23          var queryString = "/analytics/bigquery/?timeBucket=600&maxAge=86400&sum=@bytes_sent&avg=@cpu&groupBy=Time,city,@hostname,@site&slice=" + sliceName;
  24
  25          $( "#control1").html("");
  26          $( "#control2").html("");
  27          $( "#chart-site-agg" ).html("<div class='loading'>Loading ...</div>");
  28          $( "#chart-site-time" ).html("");
  29          $( "#chart-geo" ).html("");
  30
  31          $.ajax({
  32              url: queryString,
  33              dataType: 'json',
  34              type: 'GET',
  35              success: function (newData) {
  36                  sendAndDraw(newData["dataSourceUrl"])
  37              }
  38          });
  39      }
  40
  41      TIME_COL = 0;
  42      BANDWIDTH_COL = 2;
  43      CPU_COL = 1;
  44      CITY_COL = 3;
  45      NODE_COL = 4;
  46      SITE_COL = 5;
  47
  48      google.setOnLoadCallback(function () {
  49          $('#historical_slicename').change(function()
  50          {
  51              updateDataSourceUrl();
  52          });
  53
  54          updateDataSourceUrl();
  55      });
  56
  57      function showSiteTimeAgg(dt) {
  58          var lineChart = new google.visualization.ChartWrapper({
  59              'chartType': 'LineChart',
  60              'containerId': 'chart-site-time',
  61              'options': {
  62                  'width': 320,
  63                  'height': 300,
  64                  'title': 'Network-wide usage',
  65                  'pages': true,
  66                  'numRows': 9
  67              },
  68              'view': {
  69                  'columns': [0, 1, 2]
  70              }
  71          });
  72          lineChart.setDataTable(dt);
  73          lineChart.draw();
  74      }
  75
  76      function showSiteAgg(dt) {
  77          var barChart = new google.visualization.ChartWrapper({
  78              'chartType': 'ColumnChart',
  79              'containerId': 'chart-site-agg',
  80              'options': {
  81                  'width': 670,
  82                  'height': 300,
  83                  'title': 'Site-wise usage',
  84                  'pages': true,
  85                  'numRows': 9
  86              },
  87              'view': {
  88                  'columns': [1, 2, 3]
  89              }
  90          });
  91          barChart.setDataTable(dt);
  92          barChart.draw();
  93          var geoChart = new google.visualization.ChartWrapper({
  94              'chartType': 'GeoChart',
  95              'containerId': 'chart-geo',
  96              'options': {
  97                  'width': 320,
  98                  'height': 300,
  99                  'displayMode': 'markers',
 100                  'region': '021',
 101                  'title': 'Usage map',
 102                  colorAxis: {
 103                      colors: ['green', 'purple', 'red']
 104                  }
 105              },
 106              'view': {
 107                  'columns': [0, 2, 3]
 108              }
 109          });
 110          geoChart.setDataTable(dt);
 111          geoChart.draw();
 112      }
 113
 114      function handleResponse(response) {
 115          var timeSlider = new google.visualization.ControlWrapper({
 116              'controlType': 'DateRangeFilter',
 117              'containerId': 'control1',
 118              'options': {
 119                  'filterColumnLabel': 'Time',
 120                  ui: {
 121                      ticks: 10,
 122                      step: "minute"
 123                  }
 124              }
 125          });
 126
 127          var categoryPicker = new google.visualization.ControlWrapper({
 128              'controlType': 'CategoryFilter',
 129              'allowMultiple': true,
 130              'containerId': 'control2',
 131              'options': {
 132                  'filterColumnLabel': 'site',
 133                  'ui': {
 134                      'labelStacking': 'vertical',
 135                      'allowTyping': false
 136                  }
 137              }
 138          });
 139
 140          var proxy = new google.visualization.ChartWrapper({
 141              'chartType': 'Table',
 142              'containerId': 'chart7',
 143              'options': {
 144                  'width': 800,
 145                  'height': 300,
 146                  pageSize: 5,
 147                  page: 'enable',
 148                  'legend': 'none',
 149                  'title': 'Nodes'
 150              },
 151              'view': {
 152                  'columns': [0, 1, 2, 3, 4, 5]
 153              }
 154          });
 155
 156          function avg_bandwidth(arr) {
 157                 var ret = 0;
 158                 for (var i = 0; i < arr.length; i++) {
 159                         ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
 160                 }
 161                 if (arr.length==0) {
 162                     return 0;
 163                 }
 164                 return ret/arr.length;
 165          }
 166
 167          function sum_bytes_sent_as_bw(arr) {
 168                 var ret = 0;
 169                 for (var i = 0; i < arr.length; i++) {
 170                         ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
 171                 }
 172                 return ret/60.0;
 173          }
 174
 175          function sum_bytes_sent_as_GB(arr) {
 176                 var ret = 0;
 177                 for (var i = 0; i < arr.length; i++) {
 178                         ret+=arr[i]/1024.0/1024.0/1024.0;
 179                 }
 180                 return ret;
 181          }
 182
 183          function fixDate2(unixDate) {
 184              // not completely sure why we have to do this, as the data was in
 185              // javascript Date() objects to start with. If we don't do it,
 186              // then the horizontal axis will be blank.
 187              return new Date(unixDate);
 188          }
 189
 190          var format0dp = new google.visualization.NumberFormat({fractionDigits:0});
 191          var format2dp = new google.visualization.NumberFormat({fractionDigits:2});
 192
 193          if (response.isError()) {
 194              $( "#chart-site-agg" ).html("<div class='loading'>Error while fetching data.</div>");
 195              return;
 196          }
 197
 198          if (response.getDataTable().getNumberOfRows() == 0) {
 199              $( "#chart-site-agg" ).html("<div class='loading'>No data for this slice.</div>");
 200              return;
 201          }
 202
 203          // Create a group for charts that will have a horizontal axis that is
 204          // time.
 205
 206          google.visualization.events.addListener(proxy, 'ready', function () {
 207              var dt = proxy.getDataTable();
 208              var groupedData1 = google.visualization.data.group(dt, [{
 209                  column: TIME_COL,
 210                  type: 'datetime',
 211                  modifier: fixDate2,
 212              }], [{
 213                  column: CPU_COL,
 214                  type: 'number',
 215                  label: "avg cpu",
 216                  aggregation: google.visualization.data.avg
 217              }, {
 218                  column: BANDWIDTH_COL,
 219                  type: 'number',
 220                  label: "Gbps",
 221                  aggregation: sum_bytes_sent_as_bw
 222              }]);
 223
 224              format0dp.format(groupedData1,1);
 225              format2dp.format(groupedData1,2);
 226
 227              showSiteTimeAgg(groupedData1);
 228          });
 229
 230          // Create a group for charts that will have a horizontal axis that is
 231          // city or site.
 232
 233          google.visualization.events.addListener(proxy, 'ready', function () {
 234              var dt = proxy.getDataTable();
 235              var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{
 236                  column: CPU_COL,
 237                  type: 'number',
 238                  label: 'avg cpu',
 239                  aggregation: google.visualization.data.avg
 240              }, {
 241                  column: BANDWIDTH_COL,
 242                  type: 'number',
 243                  label: "GB sent",
 244                  aggregation: sum_bytes_sent_as_GB
 245              }]);
 246
 247              format0dp.format(groupedData0,2);
 248              format2dp.format(groupedData0,3);
 249
 250              showSiteAgg(groupedData0);
 251          });
 252
 253          data = response.getDataTable();
 254          new google.visualization.Dashboard(document.getElementById('dashboard')).
 255          // Establish bindings, declaring the both the slider and the category
 256          // picker will drive both charts.
 257          bind([categoryPicker, timeSlider], [proxy]).
 258          // Draw the entire dashboard.
 259          draw(data);
 260
 261      }
 262
 263      function sendAndDraw(queryString) {
 264          query = new google.visualization.Query(queryString)
 265          query && query.abort();
 266          query.send(function (response) {
 267              handleResponse(response);
 268          });
 269      }
 270
 271     </script>
 272     <div id="dashboard" class="graph_container">
 273                 <div class="row">
 274                         <span><b>Slice Name:</b></span>
 275                         <span><select id="historical_slicename">
 276                         {% for slice in userSliceInfo %}
 277                            <option value="{{ slice.slicename }}">{{ slice.slicename }}</option>
 278                         {% endfor %}
 279                         </select></span>
 280                 </div>
 281                 <div class="row" dstyle="background-color:red">
 282                         <div class="col-md-12">
 283                                 <div class="col-md-4" id="control2"></div>
 284                                 <div class="col-md-4" id="control1"></div>
 285                                 <!--<div class="col-md-4" id="control3"></div>-->
 286                         </div>
 287                 </div>
 288                 <div class="row" dstyle="background-color:green">
 289                         <div class="col-md-12">
 290                                 <div class="col-md-fullgraph" id="chart-site-agg" dstyle="background-color:pink">
 291                                 </div>
 292                         </div>
 293                 </div>
 294                 <div class="row" dstyle="background-color:blue">
 295                         <div class="col-md-12">
 296                                 <div class="col-md-halfgraph" id="chart-site-time" dstyle="background-color:orange">
 297                                 </div>
 298                                 <div class="col-md-halfgraph" id="chart-geo" dstyle="background-color:yellow">
 299                                 </div>
 300                         </div>
 301                 </div>
 302     </div>
 303         <div id="chart7" style="display:none"></div>