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