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': 'chart-site-time',\r
  55              'options': {\r
  56                  'width': 320,\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': 'chart-site-agg',\r
  74              'options': {\r
  75                  'width': 670,\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': 'chart-geo',\r
  90              'options': {\r
  91                  'width': 320,\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': 'chart-histo',\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          var categoryPicker = new google.visualization.ControlWrapper({\r
 138              'controlType': 'CategoryFilter',\r
 139              'allowMultiple': true,\r
 140              'containerId': 'control2',\r
 141              'options': {\r
 142                  'filterColumnLabel': 'site',\r
 143                  'ui': {\r
 144                      'labelStacking': 'vertical',\r
 145                      'allowTyping': false\r
 146                  }\r
 147              }\r
 148          });\r
 149 \r
 150          var proxy = new google.visualization.ChartWrapper({\r
 151              'chartType': 'Table',\r
 152              'containerId': 'chart7',\r
 153              'options': {\r
 154                  'width': 800,\r
 155                  'height': 300,\r
 156                  pageSize: 5,\r
 157                  page: 'enable',\r
 158                  'legend': 'none',\r
 159                  'title': 'Nodes'\r
 160              },\r
 161              'view': {\r
 162                  'columns': [0, 1, 2, 3, 4, 5]\r
 163              }\r
 164          });\r
 165 \r
 166          function avg_bandwidth(arr) {\r
 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          }\r
 176 \r
 177          function sum_bytes_sent_as_bw(arr) {\r
 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          }\r
 184 \r
 185          function sum_bytes_sent_as_GB(arr) {\r
 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          }\r
 192 \r
 193          function fixDate2(unixDate) {\r
 194              // not completely sure why we have to do this, as the data was in\r
 195              // javascript Date() objects to start with. If we don't do it,\r
 196              // then the horizontal axis will be blank.\r
 197              return new Date(unixDate);
 198          }\r
 199 \r
 200          var format0dp = new google.visualization.NumberFormat({fractionDigits:0});\r
 201          var format2dp = new google.visualization.NumberFormat({fractionDigits:2});\r
 202 \r
 203          // Create a group for charts that will have a horizontal axis that is\r
 204          // time.\r
 205 \r
 206          google.visualization.events.addListener(proxy, 'ready', function () {\r
 207              var dt = proxy.getDataTable();\r
 208              var groupedData1 = google.visualization.data.group(dt, [{\r
 209                  column: TIME_COL,
 210                  type: 'datetime',
 211                  modifier: fixDate2,
 212              }], [{\r
 213                  column: CPU_COL,\r
 214                  type: 'number',\r
 215                  label: "avg cpu",\r
 216                  aggregation: google.visualization.data.avg\r
 217              }, {\r
 218                  column: BANDWIDTH_COL,\r
 219                  type: 'number',\r
 220                  label: "Gbps",\r
 221                  aggregation: sum_bytes_sent_as_bw\r
 222              }]);\r
 223 \r
 224              format0dp.format(groupedData1,1);\r
 225              format2dp.format(groupedData1,2);\r
 226 \r
 227              showSiteTimeAgg(groupedData1);\r
 228          });\r
 229 \r
 230          // Create a group for charts that will have a horizontal axis that is\r
 231          // city or site.\r
 232 \r
 233          google.visualization.events.addListener(proxy, 'ready', function () {\r
 234              var dt = proxy.getDataTable();\r
 235              var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{\r
 236                  column: CPU_COL,\r
 237                  type: 'number',\r
 238                  label: 'avg cpu',\r
 239                  aggregation: google.visualization.data.avg\r
 240              }, {\r
 241                  column: BANDWIDTH_COL,\r
 242                  type: 'number',\r
 243                  label: "GB sent",\r
 244                  aggregation: sum_bytes_sent_as_GB\r
 245              }]);\r
 246 \r
 247              format0dp.format(groupedData0,2);\r
 248              format2dp.format(groupedData0,3);\r
 249 \r
 250              showSiteAgg(groupedData0);\r
 251          });\r
 252 \r
 253          data = response.getDataTable();\r
 254          new google.visualization.Dashboard(document.getElementById('dashboard')).\r
 255          // Establish bindings, declaring the both the slider and the category\r
 256          // picker will drive both charts.\r
 257          bind([categoryPicker, timeSlider], [proxy]).\r
 258          // Draw the entire dashboard.\r
 259          draw(data);\r
 260 \r
 261      }\r
 262 \r
 263      function sendAndDraw(queryString) {\r
 264          query = new google.visualization.Query(queryString)\r
 265          query && query.abort();\r
 266          query.send(function (response) {\r
 267              handleResponse(response);\r
 268          });\r
 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>