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