Add UI warning for time drift >30 seconds (#3276)

* Add UI warning for time drift >30 seconds

* Yellow time drift warning & better warning message

* Set warning threshold to 30 sec

* Include changed assets

web/ui/static/js/graph.js

@@ -182,6 +182,7 @@ Prometheus.Graph.prototype.initialize = function() {
     return false;
   });
 
+  self.checkTimeDrift();
   self.populateInsertableMetrics();
 
   if (self.expr.val()) {
@@ -189,6 +190,35 @@ Prometheus.Graph.prototype.initialize = function() {
   }
 };
 
+Prometheus.Graph.prototype.checkTimeDrift = function() {
+    var self = this;
+    var browserTime = new Date().getTime() / 1000;
+    $.ajax({
+        method: "GET",
+        url: PATH_PREFIX + "/api/v1/query?query=time()",
+        dataType: "json",
+            success: function(json, textStatus) {
+            if (json.status !== "success") {
+                self.showError("Error querying time.");
+                return;
+            }
+            var serverTime = json.data.result[0];
+            var diff = Math.abs(browserTime - serverTime);
+
+            if (diff >= 30) {
+              $("#graph_wrapper0").prepend(
+                  "<div class=\"alert alert-warning\"><strong>Warning!</strong> Detected " +
+                  diff.toFixed(2) +
+                  " seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.</div>"
+              );
+            }
+        },
+        error: function() {
+            self.showError("Error loading time.");
+        }
+    });
+};
+
 Prometheus.Graph.prototype.populateInsertableMetrics = function() {
   var self = this;
   $.ajax({