give historical page 24 hours of data in 10 minute intervals
authorScott Baker <smbaker@gmail.com>
Thu, 24 Apr 2014 03:07:08 +0000 (20:07 -0700)
committerScott Baker <smbaker@gmail.com>
Thu, 24 Apr 2014 03:07:08 +0000 (20:07 -0700)
planetstack/hpc_wizard/planetstack_analytics.py
planetstack/templates/admin/dashboard/hpc_historical.html

index 2afacb3..840d247 100644 (file)
@@ -38,9 +38,9 @@ class PlanetStackAnalytics(BigQueryAnalytics):
 
         return [slice.name for slice in slices]
 
-    def compose_query(self, slice=None, site=None, node=None, service=None, timeBucket="60", avg=[], sum=[], count=[], computed=[], val=[], groupBy=["Time"], orderBy=["Time"], tableName="demoevents", latest=False, max_age=60*60):
-        max_age = max_age * 1000
-        tablePart = "[%s.%s@-%d--1]" % ("vicci", tableName, max_age)
+    def compose_query(self, slice=None, site=None, node=None, service=None, timeBucket="60", avg=[], sum=[], count=[], computed=[], val=[], groupBy=["Time"], orderBy=["Time"], tableName="demoevents", latest=False, maxAge=60*60):
+        maxAge = maxAge * 1000
+        tablePart = "[%s.%s@-%d--1]" % ("vicci", tableName, maxAge)
 
         fields = []
         fieldNames = []
@@ -286,7 +286,7 @@ class PlanetStackAnalytics(BigQueryAnalytics):
 
         format = req.GET.get("format", "json_dicts")
 
-        timeField = req.GET.get("timeBucket", "60")
+        timeBucket = int(req.GET.get("timeBucket", 60))
         avg = self.get_list_from_req(req, "avg")
         sum = self.get_list_from_req(req, "sum")
         count = self.get_list_from_req(req, "count")
@@ -297,9 +297,11 @@ class PlanetStackAnalytics(BigQueryAnalytics):
         maxRows = req.GET.get("maxRows", None)
         mergeDataModelSites = req.GET.get("mergeDataModelSites", None)
 
+        maxAge = int(req.GET.get("maxAge", 60*60))
+
         cached = req.GET.get("cached", None)
 
-        q = self.compose_query(slice, site, node, service, timeField, avg, sum, count, computed, [], groupBy, orderBy)
+        q = self.compose_query(slice, site, node, service, timeBucket, avg, sum, count, computed, [], groupBy, orderBy, maxAge=maxAge)
 
         print q
 
index b6763b4..8f0702f 100644 (file)
     <script type="text/javascript">
 
      var options = {
-\r         width: 600,\r
-         height: 400,\r
-         showRowNumber: false,\r
-         pages: true,\r
-         numRows: 9,\r
-         backgroundColor: "black"\r
-     };\r
-\r
-     // ask django for a data source URL to use for the graphs\r
-\r
-     function updateDataSourceUrl() {\r
-         var sliceName = $("#historical_slicename :selected").text();\r
-         var queryString = "/analytics/bigquery/?sum=@bytes_sent&avg=@cpu&groupBy=Time,city,@hostname,@site&slice=" + sliceName;\r
-\r
-         $.ajax({\r
-             url: queryString,\r
-             dataType: 'json',\r
-             type: 'GET',\r
-             success: function (newData) {\r
-                 sendAndDraw(newData["dataSourceUrl"])\r
-             }\r
-         });\r
-     }\r
-\r
-     TIME_COL = 0;\r
-     BANDWIDTH_COL = 2;\r
-     CPU_COL = 1;\r
-     CITY_COL = 3;\r
-     NODE_COL = 4;\r
-     SITE_COL = 5;\r
-\r
-     google.setOnLoadCallback(function () {\r
-         $('#historical_slicename').change(function()\r
-         {\r
-             updateDataSourceUrl();\r
-         });\r
-\r
-         updateDataSourceUrl();\r
-     });\r
-\r
-     function showSiteTimeAgg(dt) {\r
-         var lineChart = new google.visualization.ChartWrapper({\r
-             'chartType': 'LineChart',\r
-             'containerId': 'chart-site-time',\r
-             'options': {\r
-                 'width': 320,\r
-                 'height': 300,\r
-                 'title': 'Network-wide usage',\r
-                 'pages': true,\r
-                 'numRows': 9\r
-             },\r
-             'view': {\r
-                 'columns': [0, 1, 2]\r
-             }\r
-         });\r
-         lineChart.setDataTable(dt);\r
-         lineChart.draw();\r
-     }\r
-\r
-     function showSiteAgg(dt) {\r
-         var barChart = new google.visualization.ChartWrapper({\r
-             'chartType': 'ColumnChart',\r
-             'containerId': 'chart-site-agg',\r
-             'options': {\r
-                 'width': 670,\r
-                 'height': 300,\r
-                 'title': 'Site-wise usage',\r
-                 'pages': true,\r
-                 'numRows': 9\r
-             },\r
-             'view': {\r
-                 'columns': [1, 2, 3]\r
-             }\r
-         });\r
-         barChart.setDataTable(dt);\r
-         barChart.draw();\r
-         var geoChart = new google.visualization.ChartWrapper({\r
-             'chartType': 'GeoChart',\r
-             'containerId': 'chart-geo',\r
-             'options': {\r
-                 'width': 320,\r
-                 'height': 300,\r
-                 'displayMode': 'markers',\r
-                 'region': '021',\r
-                 'title': 'Usage map',\r
-                 colorAxis: {\r
-                     colors: ['green', 'purple', 'red']\r
-                 }\r
-             },\r
-             'view': {\r
-                 'columns': [0, 2, 3]\r
-             }\r
-         });\r
-         geoChart.setDataTable(dt);\r
-         geoChart.draw();\r
-\r
-/*         var histogram = new google.visualization.ChartWrapper({\r
-             'chartType': 'Histogram',\r
-             'containerId': 'chart-histo',\r
-             'options': {\r
-                 'width': 300,\r
-                 'height': 300,\r
-             },\r
-             'title': 'Sites by load',\r
-             'view': {\r
-                 'columns': [1, 2]\r
-             }\r
-         });\r
-         histogram.setDataTable(dt);\r
-         histogram.draw();  */\r
-\r
-     }\r
-\r
-     function handleResponse(response) {\r
-         var timeSlider = new google.visualization.ControlWrapper({\r
-             'controlType': 'DateRangeFilter',\r
-             'containerId': 'control1',\r
-             'options': {\r
-                 'filterColumnLabel': 'Time',\r
-                 ui: {\r
-                     ticks: 10,\r
-                     step: "minute"\r
-                 }\r
-             }\r
-         });\r
-\r
-         var categoryPicker = new google.visualization.ControlWrapper({\r
-             'controlType': 'CategoryFilter',\r
-             'allowMultiple': true,\r
-             'containerId': 'control2',\r
-             'options': {\r
-                 'filterColumnLabel': 'site',\r
-                 'ui': {\r
-                     'labelStacking': 'vertical',\r
-                     'allowTyping': false\r
-                 }\r
-             }\r
-         });\r
-\r
-         var proxy = new google.visualization.ChartWrapper({\r
-             'chartType': 'Table',\r
-             'containerId': 'chart7',\r
-             'options': {\r
-                 'width': 800,\r
-                 'height': 300,\r
-                 pageSize: 5,\r
-                 page: 'enable',\r
-                 'legend': 'none',\r
-                 'title': 'Nodes'\r
-             },\r
-             'view': {\r
-                 'columns': [0, 1, 2, 3, 4, 5]\r
-             }\r
-         });\r
-\r
-         function avg_bandwidth(arr) {\r
+\r         width: 600,
+         height: 400,
+         showRowNumber: false,
+         pages: true,
+         numRows: 9,
+         backgroundColor: "black"
+     };
+
+     // ask django for a data source URL to use for the graphs
+
+     function updateDataSourceUrl() {
+         var sliceName = $("#historical_slicename :selected").text();
+         var queryString = "/analytics/bigquery/?timeBucket=600&maxAge=86400&sum=@bytes_sent&avg=@cpu&groupBy=Time,city,@hostname,@site&slice=" + sliceName;
+
+         $.ajax({
+             url: queryString,
+             dataType: 'json',
+             type: 'GET',
+             success: function (newData) {
+                 sendAndDraw(newData["dataSourceUrl"])
+             }
+         });
+     }
+
+     TIME_COL = 0;
+     BANDWIDTH_COL = 2;
+     CPU_COL = 1;
+     CITY_COL = 3;
+     NODE_COL = 4;
+     SITE_COL = 5;
+
+     google.setOnLoadCallback(function () {
+         $('#historical_slicename').change(function()
+         {
+             updateDataSourceUrl();
+         });
+
+         updateDataSourceUrl();
+     });
+
+     function showSiteTimeAgg(dt) {
+         var lineChart = new google.visualization.ChartWrapper({
+             'chartType': 'LineChart',
+             'containerId': 'chart-site-time',
+             'options': {
+                 'width': 320,
+                 'height': 300,
+                 'title': 'Network-wide usage',
+                 'pages': true,
+                 'numRows': 9
+             },
+             'view': {
+                 'columns': [0, 1, 2]
+             }
+         });
+         lineChart.setDataTable(dt);
+         lineChart.draw();
+     }
+
+     function showSiteAgg(dt) {
+         var barChart = new google.visualization.ChartWrapper({
+             'chartType': 'ColumnChart',
+             'containerId': 'chart-site-agg',
+             'options': {
+                 'width': 670,
+                 'height': 300,
+                 'title': 'Site-wise usage',
+                 'pages': true,
+                 'numRows': 9
+             },
+             'view': {
+                 'columns': [1, 2, 3]
+             }
+         });
+         barChart.setDataTable(dt);
+         barChart.draw();
+         var geoChart = new google.visualization.ChartWrapper({
+             'chartType': 'GeoChart',
+             'containerId': 'chart-geo',
+             'options': {
+                 'width': 320,
+                 'height': 300,
+                 'displayMode': 'markers',
+                 'region': '021',
+                 'title': 'Usage map',
+                 colorAxis: {
+                     colors: ['green', 'purple', 'red']
+                 }
+             },
+             'view': {
+                 'columns': [0, 2, 3]
+             }
+         });
+         geoChart.setDataTable(dt);
+         geoChart.draw();
+
+/*         var histogram = new google.visualization.ChartWrapper({
+             'chartType': 'Histogram',
+             'containerId': 'chart-histo',
+             'options': {
+                 'width': 300,
+                 'height': 300,
+             },
+             'title': 'Sites by load',
+             'view': {
+                 'columns': [1, 2]
+             }
+         });
+         histogram.setDataTable(dt);
+         histogram.draw();  */
+
+     }
+
+     function handleResponse(response) {
+         var timeSlider = new google.visualization.ControlWrapper({
+             'controlType': 'DateRangeFilter',
+             'containerId': 'control1',
+             'options': {
+                 'filterColumnLabel': 'Time',
+                 ui: {
+                     ticks: 10,
+                     step: "minute"
+                 }
+             }
+         });
+
+         var categoryPicker = new google.visualization.ControlWrapper({
+             'controlType': 'CategoryFilter',
+             'allowMultiple': true,
+             'containerId': 'control2',
+             'options': {
+                 'filterColumnLabel': 'site',
+                 'ui': {
+                     'labelStacking': 'vertical',
+                     'allowTyping': false
+                 }
+             }
+         });
+
+         var proxy = new google.visualization.ChartWrapper({
+             'chartType': 'Table',
+             'containerId': 'chart7',
+             'options': {
+                 'width': 800,
+                 'height': 300,
+                 pageSize: 5,
+                 page: 'enable',
+                 'legend': 'none',
+                 'title': 'Nodes'
+             },
+             'view': {
+                 'columns': [0, 1, 2, 3, 4, 5]
+             }
+         });
+
+         function avg_bandwidth(arr) {
                 var ret = 0;
                 for (var i = 0; i < arr.length; i++) {
                         ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
                     return 0;
                 }
                 return ret/arr.length;
-         }\r
-\r
-         function sum_bytes_sent_as_bw(arr) {\r
+         }
+
+         function sum_bytes_sent_as_bw(arr) {
                 var ret = 0;
                 for (var i = 0; i < arr.length; i++) {
                         ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
                 }
                 return ret/60.0;
-         }\r
-\r
-         function sum_bytes_sent_as_GB(arr) {\r
+         }
+
+         function sum_bytes_sent_as_GB(arr) {
                 var ret = 0;
                 for (var i = 0; i < arr.length; i++) {
                         ret+=arr[i]/1024.0/1024.0/1024.0;
                 }
                 return ret;
-         }\r
-\r
-         function fixDate2(unixDate) {\r
-             // not completely sure why we have to do this, as the data was in\r
-             // javascript Date() objects to start with. If we don't do it,\r
-             // then the horizontal axis will be blank.\r
+         }
+
+         function fixDate2(unixDate) {
+             // not completely sure why we have to do this, as the data was in
+             // javascript Date() objects to start with. If we don't do it,
+             // then the horizontal axis will be blank.
              return new Date(unixDate);
-         }\r
-\r
-         var format0dp = new google.visualization.NumberFormat({fractionDigits:0});\r
-         var format2dp = new google.visualization.NumberFormat({fractionDigits:2});\r
-\r
-         // Create a group for charts that will have a horizontal axis that is\r
-         // time.\r
-\r
-         google.visualization.events.addListener(proxy, 'ready', function () {\r
-             var dt = proxy.getDataTable();\r
-             var groupedData1 = google.visualization.data.group(dt, [{\r
+         }
+
+         var format0dp = new google.visualization.NumberFormat({fractionDigits:0});
+         var format2dp = new google.visualization.NumberFormat({fractionDigits:2});
+
+         // Create a group for charts that will have a horizontal axis that is
+         // time.
+
+         google.visualization.events.addListener(proxy, 'ready', function () {
+             var dt = proxy.getDataTable();
+             var groupedData1 = google.visualization.data.group(dt, [{
                  column: TIME_COL,
                  type: 'datetime',
                  modifier: fixDate2,
-             }], [{\r
-                 column: CPU_COL,\r
-                 type: 'number',\r
-                 label: "avg cpu",\r
-                 aggregation: google.visualization.data.avg\r
-             }, {\r
-                 column: BANDWIDTH_COL,\r
-                 type: 'number',\r
-                 label: "Gbps",\r
-                 aggregation: sum_bytes_sent_as_bw\r
-             }]);\r
-\r
-             format0dp.format(groupedData1,1);\r
-             format2dp.format(groupedData1,2);\r
-\r
-             showSiteTimeAgg(groupedData1);\r
-         });\r
-\r
-         // Create a group for charts that will have a horizontal axis that is\r
-         // city or site.\r
-\r
-         google.visualization.events.addListener(proxy, 'ready', function () {\r
-             var dt = proxy.getDataTable();\r
-             var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{\r
-                 column: CPU_COL,\r
-                 type: 'number',\r
-                 label: 'avg cpu',\r
-                 aggregation: google.visualization.data.avg\r
-             }, {\r
-                 column: BANDWIDTH_COL,\r
-                 type: 'number',\r
-                 label: "GB sent",\r
-                 aggregation: sum_bytes_sent_as_GB\r
-             }]);\r
-\r
-             format0dp.format(groupedData0,2);\r
-             format2dp.format(groupedData0,3);\r
-\r
-             showSiteAgg(groupedData0);\r
-         });\r
-\r
-         data = response.getDataTable();\r
-         new google.visualization.Dashboard(document.getElementById('dashboard')).\r
-         // Establish bindings, declaring the both the slider and the category\r
-         // picker will drive both charts.\r
-         bind([categoryPicker, timeSlider], [proxy]).\r
-         // Draw the entire dashboard.\r
-         draw(data);\r
-\r
-     }\r
-\r
-     function sendAndDraw(queryString) {\r
-         query = new google.visualization.Query(queryString)\r
-         query && query.abort();\r
-         query.send(function (response) {\r
-             handleResponse(response);\r
-         });\r
+             }], [{
+                 column: CPU_COL,
+                 type: 'number',
+                 label: "avg cpu",
+                 aggregation: google.visualization.data.avg
+             }, {
+                 column: BANDWIDTH_COL,
+                 type: 'number',
+                 label: "Gbps",
+                 aggregation: sum_bytes_sent_as_bw
+             }]);
+
+             format0dp.format(groupedData1,1);
+             format2dp.format(groupedData1,2);
+
+             showSiteTimeAgg(groupedData1);
+         });
+
+         // Create a group for charts that will have a horizontal axis that is
+         // city or site.
+
+         google.visualization.events.addListener(proxy, 'ready', function () {
+             var dt = proxy.getDataTable();
+             var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{
+                 column: CPU_COL,
+                 type: 'number',
+                 label: 'avg cpu',
+                 aggregation: google.visualization.data.avg
+             }, {
+                 column: BANDWIDTH_COL,
+                 type: 'number',
+                 label: "GB sent",
+                 aggregation: sum_bytes_sent_as_GB
+             }]);
+
+             format0dp.format(groupedData0,2);
+             format2dp.format(groupedData0,3);
+
+             showSiteAgg(groupedData0);
+         });
+
+         data = response.getDataTable();
+         new google.visualization.Dashboard(document.getElementById('dashboard')).
+         // Establish bindings, declaring the both the slider and the category
+         // picker will drive both charts.
+         bind([categoryPicker, timeSlider], [proxy]).
+         // Draw the entire dashboard.
+         draw(data);
+
+     }
+
+     function sendAndDraw(queryString) {
+         query = new google.visualization.Query(queryString)
+         query && query.abort();
+         query.send(function (response) {
+             handleResponse(response);
+         });
      }
 
     </script>