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