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          $.ajax({
  26              url: queryString,
  27              dataType: 'json',
  28              type: 'GET',
  29              success: function (newData) {
  30                  sendAndDraw(newData["dataSourceUrl"])
  31              }
  32          });
  33      }
  34
  35      TIME_COL = 0;
  36      BANDWIDTH_COL = 2;
  37      CPU_COL = 1;
  38      CITY_COL = 3;
  39      NODE_COL = 4;
  40      SITE_COL = 5;
  41
  42      google.setOnLoadCallback(function () {
  43          $('#historical_slicename').change(function()
  44          {
  45              updateDataSourceUrl();
  46          });
  47
  48          updateDataSourceUrl();
  49      });
  50
  51      function showSiteTimeAgg(dt) {
  52          var lineChart = new google.visualization.ChartWrapper({
  53              'chartType': 'LineChart',
  54              'containerId': 'chart-site-time',
  55              'options': {
  56                  'width': 320,
  57                  'height': 300,
  58                  'title': 'Network-wide usage',
  59                  'pages': true,
  60                  'numRows': 9
  61              },
  62              'view': {
  63                  'columns': [0, 1, 2]
  64              }
  65          });
  66          lineChart.setDataTable(dt);
  67          lineChart.draw();
  68      }
  69
  70      function showSiteAgg(dt) {
  71          var barChart = new google.visualization.ChartWrapper({
  72              'chartType': 'ColumnChart',
  73              'containerId': 'chart-site-agg',
  74              'options': {
  75                  'width': 670,
  76                  'height': 300,
  77                  'title': 'Site-wise usage',
  78                  'pages': true,
  79                  'numRows': 9
  80              },
  81              'view': {
  82                  'columns': [1, 2, 3]
  83              }
  84          });
  85          barChart.setDataTable(dt);
  86          barChart.draw();
  87          var geoChart = new google.visualization.ChartWrapper({
  88              'chartType': 'GeoChart',
  89              'containerId': 'chart-geo',
  90              'options': {
  91                  'width': 320,
  92                  'height': 300,
  93                  'displayMode': 'markers',
  94                  'region': '021',
  95                  'title': 'Usage map',
  96                  colorAxis: {
  97                      colors: ['green', 'purple', 'red']
  98                  }
  99              },
 100              'view': {
 101                  'columns': [0, 2, 3]
 102              }
 103          });
 104          geoChart.setDataTable(dt);
 105          geoChart.draw();
 106
 107 /*         var histogram = new google.visualization.ChartWrapper({
 108              'chartType': 'Histogram',
 109              'containerId': 'chart-histo',
 110              'options': {
 111                  'width': 300,
 112                  'height': 300,
 113              },
 114              'title': 'Sites by load',
 115              'view': {
 116                  'columns': [1, 2]
 117              }
 118          });
 119          histogram.setDataTable(dt);
 120          histogram.draw();  */
 121
 122      }
 123
 124      function handleResponse(response) {
 125          var timeSlider = new google.visualization.ControlWrapper({
 126              'controlType': 'DateRangeFilter',
 127              'containerId': 'control1',
 128              'options': {
 129                  'filterColumnLabel': 'Time',
 130                  ui: {
 131                      ticks: 10,
 132                      step: "minute"
 133                  }
 134              }
 135          });
 136
 137          var categoryPicker = new google.visualization.ControlWrapper({
 138              'controlType': 'CategoryFilter',
 139              'allowMultiple': true,
 140              'containerId': 'control2',
 141              'options': {
 142                  'filterColumnLabel': 'site',
 143                  'ui': {
 144                      'labelStacking': 'vertical',
 145                      'allowTyping': false
 146                  }
 147              }
 148          });
 149
 150          var proxy = new google.visualization.ChartWrapper({
 151              'chartType': 'Table',
 152              'containerId': 'chart7',
 153              'options': {
 154                  'width': 800,
 155                  'height': 300,
 156                  pageSize: 5,
 157                  page: 'enable',
 158                  'legend': 'none',
 159                  'title': 'Nodes'
 160              },
 161              'view': {
 162                  'columns': [0, 1, 2, 3, 4, 5]
 163              }
 164          });
 165
 166          function avg_bandwidth(arr) {
 167                 var ret = 0;
 168                 for (var i = 0; i < arr.length; i++) {
 169                         ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
 170                 }
 171                 if (arr.length==0) {
 172                     return 0;
 173                 }
 174                 return ret/arr.length;
 175          }
 176
 177          function sum_bytes_sent_as_bw(arr) {
 178                 var ret = 0;
 179                 for (var i = 0; i < arr.length; i++) {
 180                         ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
 181                 }
 182                 return ret/60.0;
 183          }
 184
 185          function sum_bytes_sent_as_GB(arr) {
 186                 var ret = 0;
 187                 for (var i = 0; i < arr.length; i++) {
 188                         ret+=arr[i]/1024.0/1024.0/1024.0;
 189                 }
 190                 return ret;
 191          }
 192
 193          function fixDate2(unixDate) {
 194              // not completely sure why we have to do this, as the data was in
 195              // javascript Date() objects to start with. If we don't do it,
 196              // then the horizontal axis will be blank.
 197              return new Date(unixDate);
 198          }
 199
 200          var format0dp = new google.visualization.NumberFormat({fractionDigits:0});
 201          var format2dp = new google.visualization.NumberFormat({fractionDigits:2});
 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>