Fix a timezone issue

When a user changes a time zone in Preferences, Live statistics shows wrong data.

4 files changed, 44 insertions, 14 deletions

diff --git a/omaha_server/omaha/api.py b/omaha_server/omaha/api.py
index e0f36c4..58712fe 100644
--- a/omaha_server/omaha/api.py
+++ b/omaha_server/omaha/api.py
@@ -30,6 +30,7 @@ from rest_framework import pagination
 from rest_framework.views import APIView
 from rest_framework.response import Response
 
+import pytz
 
 from omaha.statistics import (
     get_users_statistics_months,
@@ -60,6 +61,7 @@ from omaha.models import (
 )
 from omaha.utils import get_month_range_from_dict
 
+
 class BaseView(mixins.ListModelMixin, mixins.CreateModelMixin,
                mixins.DestroyModelMixin, mixins.RetrieveModelMixin,
                viewsets.GenericViewSet):
diff --git a/omaha_server/omaha/serializers.py b/omaha_server/omaha/serializers.py
index 560dbe9..6d3da03 100644
--- a/omaha_server/omaha/serializers.py
+++ b/omaha_server/omaha/serializers.py
@@ -17,7 +17,11 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 """
+from django.utils import timezone
+
 from rest_framework import serializers
+from dateutil import parser
+import pytz
 
 from omaha.models import Application, Platform, Channel, Version, Action, Data
 
@@ -25,6 +29,16 @@ from omaha.models import Application, Platform, Channel, Version, Action, Data
 __all__ = ['AppSerializer', 'PlatformSerializer', 'ChannelSerializer', 'VersionSerializer']
 
 
+class TimeZoneAwareDateTimeField(serializers.DateTimeField):
+    def to_internal_value(self, value):
+        local_dt = parser.parse(value)
+        if not local_dt.tzinfo:
+            tz = timezone.get_current_timezone()
+            local_dt = tz.localize(local_dt)
+        utc_dt = local_dt.astimezone(pytz.utc)
+        return utc_dt
+
+
 class DataSerializer(serializers.HyperlinkedModelSerializer):
     app = serializers.PrimaryKeyRelatedField(queryset=Application.objects.all())
 
@@ -97,8 +111,8 @@ class MonthInputSerializer(serializers.Serializer):
 
 
 class LiveStatisticsRangeSerializer(serializers.Serializer):
-    start = serializers.DateTimeField(required=False)
-    end = serializers.DateTimeField(required=False)
+    start = TimeZoneAwareDateTimeField(required=False)
+    end = TimeZoneAwareDateTimeField(required=False)
 
 
 class ServerVersionSerializer(serializers.Serializer):
diff --git a/omaha_server/omaha/static/statistics/js/live_charts.js b/omaha_server/omaha/static/statistics/js/live_charts.js
index 18f6da5..42da3c7 100644
--- a/omaha_server/omaha/static/statistics/js/live_charts.js
+++ b/omaha_server/omaha/static/statistics/js/live_charts.js
@@ -4,8 +4,8 @@ function applyRange() {
     var app_name = document.getElementById('app_name').dataset.name;
     var $start = $("#range-start input");
     var $end = $("#range-end input");
-    var start = moment($start.val(), 'YYYY-MM-DD HH:mm:ss', true).utc();
-    var end = moment($end.val(), 'YYYY-MM-DD HH:mm:ss', true).utc();
+    var start = moment($start.val(), 'YYYY-MM-DD HH:mm:ss', true);
+    var end = moment($end.val(), 'YYYY-MM-DD HH:mm:ss', true);
 
     if (start > end){
         var tmp = start;
@@ -16,8 +16,8 @@ function applyRange() {
     }
     updateGraph({
         app_name: app_name,
-        start: start.isValid() ? start.format(): '',
-        end: end.isValid() ? end.format(): ''
+        start: start.isValid() ? start.format('YYYY-MM-DDTHH:mm:ss'): '',
+        end: end.isValid() ? end.format('YYYY-MM-DDTHH:mm:ss'): ''
     })
 }
 
@@ -34,7 +34,6 @@ function getData(data){
             values: data[d]
         }
     });
-
     if (result.length) {
         result.map(function(x){
             x.values.pop();
@@ -88,7 +87,7 @@ function makePlatformGraph(chartName, chartDataName, data, platform){
                 return !(i % tickSize);
             }))
             .tickFormat(function (d) {
-                return d3.time.format('%b %d %I:%M %p')(new Date(d));
+                return d3.utcFormat('%b %d %I:%M %p')(new Date(d));
             });
 
         chart.duration(1000);
@@ -103,12 +102,29 @@ function makePlatformGraph(chartName, chartDataName, data, platform){
     });
 }
 
+function fillForm(data) {
+    console.log(data);
+    if (Object.keys(data.win).length != 0) {
+        data = data.win;
+        console.log(data);
+    } else if ((Object.keys(data.mac).length != 0)) {
+        data = data.mac;
+    } else {
+        return
+    }
+    var start = data[Object.keys(data)[0]][0][0];
+    var end = data[Object.keys(data)[0]].slice(-1)[0][0];
+    console.log(start);
+    $("#range-end input").val(moment(end).utc().format('YYYY-MM-DD HH:mm:00'));
+    $("#range-start input").val(moment(start).utc().format('YYYY-MM-DD HH:mm:00'));
+}
 
 function makeGraph(options){
     $.ajax({
         url: getLiveStatisticsAPIurl(options),
         success: function (result) {
             var data = result.data;
+            fillForm(data);
             makePlatformGraph('winChart', 'winChartData', data.win, 'win');
             makePlatformGraph('macChart', 'macChartData', data.mac, 'mac');
         }
@@ -154,9 +170,6 @@ function updateGraph(options){
 
 
 $(document).ready(function() {
-    var now = moment()
-    $("#range-end input").val(now.format('YYYY-MM-DD HH:mm:00'));
-    $("#range-start input").val(now.subtract(1, 'days').format('YYYY-MM-DD HH:mm:00'));
     $('#btn-apply').click(applyRange);
     var app = document.getElementById('app_name');
     var app_name = app.dataset.name;
diff --git a/omaha_server/omaha/templates/admin/omaha/live_statistics.html b/omaha_server/omaha/templates/admin/omaha/live_statistics.html
index 75985e8..d57b74f 100644
--- a/omaha_server/omaha/templates/admin/omaha/live_statistics.html
+++ b/omaha_server/omaha/templates/admin/omaha/live_statistics.html
@@ -41,6 +41,7 @@
             charset="utf-8"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js" type="text/javascript"
             charset="utf-8"></script>
+    <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
     <script type="text/javascript"
             src="https://cdn.rawgit.com/tarruda/bootstrap-datetimepicker/c26217db8840e5aa8f56e343ce307581960543c9/build/js/bootstrap-datetimepicker.min.js">
     </script>
@@ -58,9 +59,9 @@
         });
     </script>
     <script>
-    $(document).ready(function(){
-        $('[data-toggle="popover"]').popover();
-    });
+        $(document).ready(function(){
+            $('[data-toggle="popover"]').popover();
+        });
     </script>
 
 {% endblock %}