feat(timepicker): more work on getting new time formats to work in all data sources

a30f73fe · Torkel Ödegaard · 1a9c52e1 · a30f73fe · a30f73fe · a30f73fe
Commit a30f73fe authored Sep 17, 2015 by Torkel Ödegaard
16 changed files
--- a/public/app/components/kbn.js
+++ b/public/app/components/kbn.js
 define([
  'jquery',
  'lodash',
-  'moment'
 ],
-function($, _, moment) {
+function($, _) {
  'use strict';
  var kbn = {};

--- a/public/app/core/directives/ng_model_on_blur.js
+++ b/public/app/core/directives/ng_model_on_blur.js
@@ -2,9 +2,8 @@ define([
  'kbn',
  'app/core/core_module',
  'app/core/utils/rangeutil',
-  'moment',
 ],
-function (kbn, coreModule, rangeUtil, moment) {
+function (kbn, coreModule, rangeUtil) {
  'use strict';
  coreModule.directive('ngModelOnblur', function() {

--- a/public/app/core/utils/rangeutil.ts
+++ b/public/app/core/utils/rangeutil.ts
@@ -65,21 +65,21 @@ _.each(rangeOptions, function (frame) {
  // now/d
  // if no to <expr> then to now is assumed
  function describeTextRange(expr: string) {
-    let rangeExpr = 'now-' + expr + ' to now';
+    if (expr.indexOf('now') === -1) {
-    if (expr.indexOf('now') === 0) {
+      expr = 'now-' + expr;
-      rangeExpr = expr + ' to now';
    }
-    let opt = rangeIndex[rangeExpr];
+    let opt = rangeIndex[expr + ' to now'];
    if (opt) {
      return opt;
    }
-    opt = {from: 'now-' + expr, to: 'now'};
+    opt = {from: expr, to: 'now'};
-    if (/^\d+\w$/.test(expr)) {
+    let parts = /^now-(\d+)(\w)/.exec(expr);
-      let unit = expr[expr.length - 1];
+    if (parts) {
-      let amount = parseInt(expr.substring(0, expr.length - 1));
+      let unit = parts[2];
+      let amount = parseInt(parts[1]);
      let span = spans[unit];
      if (span) {
        opt.display = 'Last ' + amount + ' ' + span.display;
@@ -100,6 +100,10 @@ _.each(rangeOptions, function (frame) {
    if (option) {
      return option.display;
    }
+    if (range.to === 'now') {
+      return describeTextRange(range.from).display;
+    }
    return "NA";
  }

--- a/public/app/features/dashboard/timeSrv.js
+++ b/public/app/features/dashboard/timeSrv.js
@@ -123,13 +123,10 @@ define([
      var _t = this.time;
      if(parse === false) {
-        return {
+        return { from: _t.from, to: _t.to };
-          from: _t.from,
-          to: _t.to
-        };
      } else {
        var _from = _t.from;
-        var _to = _t.to || new Date();
+        var _to = _t.to || moment();
        return {
          from: dateMath.parse(_from, false),

--- a/public/app/features/dashboard/timepicker/timepicker.ts
+++ b/public/app/features/dashboard/timepicker/timepicker.ts
@@ -35,14 +35,14 @@ export class TimePickerCtrl {
  init() {
    this.$scope.panel = this.$scope.dashboard.timepicker;
+    this.$scope.panel.now = false;
    _.defaults(this.$scope.panel, TimePickerCtrl.defaults);
-    var time = this.timeSrv.timeRange(true);
+    var time = this.timeSrv.timeRange();
-    this.$scope.panel.now = false;
+    var timeRaw = this.timeSrv.timeRange(false);
-    var unparsed = this.timeSrv.timeRange(false);
+    if (_.isString(timeRaw.to) && timeRaw.to.indexOf('now') === 0) {
-    if (_.isString(unparsed.to) && unparsed.to.indexOf('now') === 0) {
      this.$scope.panel.now = true;
    }
@@ -97,23 +97,14 @@ export class TimePickerCtrl {
    this.$scope.refreshMenuLeftSide = this.$scope.time.rangeString.length < 10;
  }
-  cloneTime(time) {
-    var _n = { from: _.clone(time.from), to: _.clone(time.to) };
-    // Create new dates as _.clone is shallow.
-    _n.from.date = new Date(_n.from.date);
-    _n.to.date = new Date(_n.to.date);
-    return _n;
-  }
  customTime() {
    // Assume the form is valid since we're setting it to something valid
    this.$scope.input.$setValidity("dummy", true);
-    this.$scope.temptime = this.cloneTime(this.$scope.time);
+    this.$scope.temptime = angular.copy(this.$scope.time);
    this.$scope.temptime.now = this.$scope.panel.now;
-    this.$scope.temptime.from.date.setHours(0, 0, 0, 0);
+    // this.$scope.temptime.from.date.setHours(0, 0, 0, 0);
-    this.$scope.temptime.to.date.setHours(0, 0, 0, 0);
+    // this.$scope.temptime.to.date.setHours(0, 0, 0, 0);
    // Date picker needs the date to be at the start of the day
    if (new Date().getTimezoneOffset() < 0) {

--- a/public/app/features/panel/panelHelper.js
+++ b/public/app/features/panel/panelHelper.js
@@ -48,7 +48,8 @@ function (angular, dateMath, rangeUtil, _, kbn, $) {
    this.updateTimeRange = function(scope) {
      scope.range = timeSrv.timeRange();
-      scope.rangeUnparsed = timeSrv.timeRange(false);
+      scope.rangeRaw = timeSrv.timeRange(false);
      this.applyPanelTimeOverrides(scope);
      if (scope.panel.maxDataPoints) {
@@ -57,6 +58,7 @@ function (angular, dateMath, rangeUtil, _, kbn, $) {
      else {
        scope.resolution = Math.ceil($(window).width() * (scope.panel.span / 12));
      }
      scope.interval = kbn.calculateInterval(scope.range, scope.resolution, scope.panel.interval);
    };
@@ -71,11 +73,11 @@ function (angular, dateMath, rangeUtil, _, kbn, $) {
          return;
        }
-        if (_.isString(scope.rangeUnparsed.from)) {
+        if (_.isString(scope.rangeRaw.from)) {
          var timeFromDate = dateMath.parse(timeFromInfo.from);
          scope.panelMeta.timeInfo = timeFromInfo.display;
-          scope.rangeUnparsed.from = timeFromInfo.from;
+          scope.rangeRaw.from = timeFromInfo.from;
-          scope.rangeUnparsed.to = timeFromInfo.to;
+          scope.rangeRaw.to = timeFromInfo.to;
          scope.range.from = timeFromDate;
        }
      }
@@ -92,7 +94,7 @@ function (angular, dateMath, rangeUtil, _, kbn, $) {
        scope.range.from = dateMath.parseDateMath(timeShift, scope.range.from, false);
        scope.range.to = dateMath.parseDateMath(timeShift, scope.range.to, true);
-        scope.rangeUnparsed = scope.range;
+        scope.rangeRaw = scope.range;
      }
      if (scope.panel.hideTimeOverride) {
@@ -102,9 +104,8 @@ function (angular, dateMath, rangeUtil, _, kbn, $) {
    this.issueMetricQuery = function(scope, datasource) {
      var metricsQuery = {
-        range: scope.rangeUnparsed,
+        range: scope.range,
-        timeFrom: scope.range.valueOf(),
+        rangeRaw: scope.rangeRaw,
-        timeTo: scope.range.valueOf(),
        interval: scope.interval,
        targets: scope.panel.targets,
        format: scope.panel.renderer === 'png' ? 'png' : 'json',

--- a/public/app/panels/graph/module.js
+++ b/public/app/panels/graph/module.js
@@ -129,7 +129,7 @@ function (angular, $, _, kbn, moment, TimeSeries, PanelMeta) {
    $scope.refreshData = function(datasource) {
      panelHelper.updateTimeRange($scope);
-      $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeUnparsed, $scope.dashboard);
+      $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.rangeRaw, $scope.dashboard);
      return panelHelper.issueMetricQuery($scope, datasource)
        .then($scope.dataHandler, function(err) {

--- a/public/app/plugins/datasource/elasticsearch/datasource.js
+++ b/public/app/plugins/datasource/elasticsearch/datasource.js
@@ -152,13 +152,13 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes
      var target;
      var sentTargets = [];
-      var header = this.getQueryHeader(options.timeFrom, options.timeTo);
+      var header = this.getQueryHeader(options.range.from, options.range.to);
      for (var i = 0; i < options.targets.length; i++) {
        target = options.targets[i];
        if (target.hide) {return;}
-        var esQuery = this.queryBuilder.build(target, options.timeFrom, options.timeTo);
+        var esQuery = this.queryBuilder.build(target);
        payload += header + '\n';
        payload += angular.toJson(esQuery) + '\n';
@@ -166,8 +166,8 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes
      }
      payload = payload.replace(/\$interval/g, options.interval);
-      payload = payload.replace(/\$timeFrom/g, options.timeFrom);
+      payload = payload.replace(/\$timeFrom/g, options.range.from.valueOf());
-      payload = payload.replace(/\$timeTo/g, options.timeTo);
+      payload = payload.replace(/\$timeTo/g, options.range.to.valueOf());
      payload = payload.replace(/\$maxDataPoints/g, options.maxDataPoints);
      payload = templateSrv.replace(payload, options.scopedVars);

--- a/public/app/plugins/datasource/graphite/datasource.js
+++ b/public/app/plugins/datasource/graphite/datasource.js
@@ -29,8 +29,8 @@ function (angular, _, $, config, dateMath, moment) {
    GraphiteDatasource.prototype.query = function(options) {
      try {
        var graphOptions = {
-          from: this.translateTime(options.range.from, false),
+          from: this.translateTime(options.rangeRaw.from, false),
-          until: this.translateTime(options.range.to, true),
+          until: this.translateTime(options.rangeRaw.to, true),
          targets: options.targets,
          format: options.format,
          cacheTimeout: options.cacheTimeout || this.cacheTimeout,
@@ -135,7 +135,8 @@ function (angular, _, $, config, dateMath, moment) {
        return this.doGraphiteRequest({
          method: 'GET',
-          url: '/events/get_data?from=' + this.translateTime(options.range.from, false) + '&until=' + this.translateTime(options.range.to, true) + tags,
+          url: '/events/get_data?from=' + this.translateTime(options.range.from, false) +
+            '&until=' + this.translateTime(options.range.to, true) + tags,
        });
      }
      catch(err) {
@@ -159,16 +160,16 @@ function (angular, _, $, config, dateMath, moment) {
      date = moment.utc(date);
+      // graphite' s from filter is exclusive
+      // here we step back one minute in order
+      // to guarantee that we get all the data that
+      // exists for the specified range
      if (roundUp) {
        if (date.get('s')) {
          date.add(1, 'm');
        }
      }
      else if (roundUp === false) {
-        // graphite' s from filter is exclusive
-        // here we step back one minute in order
-        // to guarantee that we get all the data that
-        // exists for the specified range
        if (date.get('s')) {
          date.subtract(1, 'm');
        }
@@ -187,14 +188,14 @@ function (angular, _, $, config, dateMath, moment) {
      }
      return this.doGraphiteRequest({method: 'GET', url: '/metrics/find/?query=' + interpolated })
-        .then(function(results) {
+      .then(function(results) {
-          return _.map(results.data, function(metric) {
+        return _.map(results.data, function(metric) {
-            return {
+          return {
-              text: metric.text,
+            text: metric.text,
-              expandable: metric.expandable ? true : false
+            expandable: metric.expandable ? true : false
-            };
+          };
-          });
        });
+      });
    };
    GraphiteDatasource.prototype.testDatasource = function() {
@@ -205,9 +206,9 @@ function (angular, _, $, config, dateMath, moment) {
    GraphiteDatasource.prototype.listDashboards = function(query) {
      return this.doGraphiteRequest({ method: 'GET',  url: '/dashboard/find/', params: {query: query || ''} })
-        .then(function(results) {
+      .then(function(results) {
-          return results.data.dashboards;
+        return results.data.dashboards;
-        });
+      });
    };
    GraphiteDatasource.prototype.loadDashboard = function(dashName) {

--- a/public/app/plugins/datasource/influxdb/datasource.js
+++ b/public/app/plugins/datasource/influxdb/datasource.js
 define([
  'angular',
  'lodash',
-  'kbn',
+  'app/core/utils/datemath',
  './influxSeries',
  './queryBuilder',
  './directives',
  './queryCtrl',
 ],
-function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
+function (angular, _, dateMath, InfluxSeries, InfluxQueryBuilder) {
  'use strict';
  var module = angular.module('grafana.services');
@@ -176,8 +176,8 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
    };
    function getTimeFilter(options) {
-      var from = getInfluxTime(options.range.from);
+      var from = getInfluxTime(options.rangeRaw.from);
-      var until = getInfluxTime(options.range.to);
+      var until = getInfluxTime(options.rangeRaw.to);
      var fromIsAbsolute = from[from.length-1] === 's';
      if (until === 'now()' && !fromIsAbsolute) {
@@ -189,17 +189,15 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
    function getInfluxTime(date) {
      if (_.isString(date)) {
-        if (date.indexOf('now') >= 0) {
+        if (date === 'now') {
+          return 'now()';
+        }
+        if (date.indexOf('now-') >= 0) {
          return date.replace('now', 'now()').replace('-', ' - ');
        }
-        date = kbn.parseDate(date);
+        date = dateMath.parse(date);
      }
+      return (date.valueOf() / 1000).toFixed(0) + 's';
-      return to_utc_epoch_seconds(date);
-    }
-    function to_utc_epoch_seconds(date) {
-      return (date.getTime() / 1000).toFixed(0) + 's';
    }
    return InfluxDatasource;

--- a/public/app/plugins/datasource/influxdb_08/datasource.js
+++ b/public/app/plugins/datasource/influxdb_08/datasource.js
 define([
  'angular',
  'lodash',
-  'kbn',
+  'app/core/utils/datemath',
  './influxSeries',
  './queryBuilder',
  './directives',
  './queryCtrl',
  './funcEditor',
 ],
-function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
+function (angular, _, dateMath, InfluxSeries, InfluxQueryBuilder) {
  'use strict';
  var module = angular.module('grafana.services');
@@ -58,7 +58,7 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
    };
    InfluxDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) {
-      var timeFilter = getTimeFilter({ range: rangeUnparsed });
+      var timeFilter = getTimeFilter({ rangeRaw: rangeUnparsed });
      var query = annotation.query.replace('$timeFilter', timeFilter);
      query = templateSrv.replace(query);
@@ -187,13 +187,9 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
      return deferred.promise;
    };
-    InfluxDatasource.prototype._getDashboardInternal = function(id, isTemp) {
+    InfluxDatasource.prototype._getDashboardInternal = function(id) {
      var queryString = 'select dashboard from "grafana.dashboard_' + btoa(id) + '"';
-      if (isTemp) {
-        queryString = 'select dashboard from "grafana.temp_dashboard_' + btoa(id) + '"';
-      }
      return this._seriesQuery(queryString).then(function(results) {
        if (!results || !results.length) {
          return null;
@@ -208,55 +204,19 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
      });
    };
-    InfluxDatasource.prototype.getDashboard = function(id, isTemp) {
+    InfluxDatasource.prototype.getDashboard = function(id) {
-      var self = this;
+      return this._getDashboardInternal(id).then(function(dashboard) {
-      return this._getDashboardInternal(id, isTemp).then(function(dashboard) {
        if (dashboard !== null)  {
          return dashboard;
        }
-        // backward compatible load for unslugified ids
-        var slug = kbn.slugifyForUrl(id);
-        if (slug !== id) {
-          return self.getDashboard(slug, isTemp);
-        }
        throw "Dashboard not found";
      }, function(err) {
        throw  "Could not load dashboard, " + err.data;
      });
    };
-    InfluxDatasource.prototype.deleteDashboard = function(id) {
+    InfluxDatasource.prototype.searchDashboards = function() {
-      return this._seriesQuery('drop series "grafana.dashboard_' + btoa(id) + '"').then(function(results) {
+      var influxQuery = 'select * from /grafana.dashboard_.*/ ';
-        if (!results) {
-          throw "Could not delete dashboard";
-        }
-        return id;
-      }, function(err) {
-        throw "Could not delete dashboard, " + err.data;
-      });
-    };
-    InfluxDatasource.prototype.searchDashboards = function(queryString) {
-      var influxQuery = 'select * from /grafana.dashboard_.*/ where ';
-      var tagsOnly = queryString.indexOf('tags!:') === 0;
-      if (tagsOnly) {
-        var tagsQuery = queryString.substring(6, queryString.length);
-        influxQuery = influxQuery + 'tags =~ /.*' + tagsQuery + '.*/i';
-      }
-      else {
-        var titleOnly = queryString.indexOf('title:') === 0;
-        if (titleOnly) {
-          var titleQuery = queryString.substring(6, queryString.length);
-          influxQuery = influxQuery + ' title =~ /.*' + titleQuery + '.*/i';
-        }
-        else {
-          influxQuery = influxQuery + '(tags =~ /.*' + queryString + '.*/i or title =~ /.*' + queryString + '.*/i)';
-        }
-      }
      return this._seriesQuery(influxQuery).then(function(results) {
        var hits = { dashboards: [], tags: [], tagsOnly: false };
@@ -266,20 +226,17 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
        for (var i = 0; i < results.length; i++) {
          var dashCol = _.indexOf(results[i].columns, 'title');
-          var tagsCol = _.indexOf(results[i].columns, 'tags');
          var idCol = _.indexOf(results[i].columns, 'id');
          var hit =  {
            id: results[i].points[0][dashCol],
            title: results[i].points[0][dashCol],
-            tags: results[i].points[0][tagsCol].split(",")
          };
          if (idCol !== -1) {
            hit.id = results[i].points[0][idCol];
          }
-          hit.tags = hit.tags[0] ? hit.tags : [];
          hits.dashboards.push(hit);
        }
        return hits;
@@ -297,8 +254,8 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
    }
    function getTimeFilter(options) {
-      var from = getInfluxTime(options.range.from);
+      var from = getInfluxTime(options.rangeRaw.from);
-      var until = getInfluxTime(options.range.to);
+      var until = getInfluxTime(options.rangeRaw.to);
      var fromIsAbsolute = from[from.length-1] === 's';
      if (until === 'now()' && !fromIsAbsolute) {
@@ -310,18 +267,17 @@ function (angular, _, kbn, InfluxSeries, InfluxQueryBuilder) {
    function getInfluxTime(date) {
      if (_.isString(date)) {
-        return date.replace('now', 'now()');
+        if (date === 'now') {
+          return 'now()';
+        }
+        if (date.indexOf('now-') >= 0) {
+          return date.replace('now', 'now()');
+        }
+        date = dateMath.parse(date);
      }
+      return (date.valueOf() / 1000).toFixed(0) + 's';
-      return to_utc_epoch_seconds(date);
-    }
-    function to_utc_epoch_seconds(date) {
-      return (date.getTime() / 1000).toFixed(0) + 's';
    }
    return InfluxDatasource;
  });
 });
--- a/public/test/specs/core/utils/datemath_specs.ts
+++ b/public/test/specs/core/utils/datemath_specs.ts
@@ -116,6 +116,7 @@ describe("DateMath", () => {
      expect(date).to.equal(undefined);
    });
  });
 });
 export = {};

--- a/public/test/specs/core/utils/rangeutil_specs.ts
+++ b/public/test/specs/core/utils/rangeutil_specs.ts
@@ -6,8 +6,7 @@ import moment  = require('moment')
 describe("rangeUtil", () => {
-  describe("Can get range explained", () => {
+  describe("Can get range text described", () => {
    it('should handle simple old expression with only amount and unit', () => {
      var info = rangeUtil.describeTextRange('5m');
      expect(info.display).to.be('Last 5 minutes')
@@ -18,6 +17,12 @@ describe("rangeUtil", () => {
      expect(info.display).to.be('Last 1 hour')
    });
+    it('should handle non default amount', () => {
+      var info = rangeUtil.describeTextRange('13h');
+      expect(info.display).to.be('Last 13 hours')
+      expect(info.from).to.be('now-13h')
+    });
    it('should handle now/d', () => {
      var info = rangeUtil.describeTextRange('now/d');
      expect(info.display).to.be('The day so far');
@@ -27,7 +32,19 @@ describe("rangeUtil", () => {
      var info = rangeUtil.describeTextRange('now/w');
      expect(info.display).to.be('Week to date');
    });
+  });
+  describe("Can get date range described", () => {
+    it('Date range with simple ranges', () => {
+      var text = rangeUtil.describeTimeRange({from: 'now-1h', to: 'now'});
+      expect(text).to.be('Last 1 hour')
+    });
+    it('Date range with non matching default ranges', () => {
+      var text = rangeUtil.describeTimeRange({from: 'now-13h', to: 'now'});
+      expect(text).to.be('Last 13 hours')
+    });
  });

--- a/public/test/specs/elasticsearch-specs.js
+++ b/public/test/specs/elasticsearch-specs.js
@@ -57,8 +57,10 @@ define([
        };
        ctx.ds.query({
-          timeFrom: moment(new Date(2015, 4, 30, 10)),
+          range: {
-          timeTo: moment(new Date(2015, 5, 1, 10)),
+            from: moment([2015, 4, 30, 10]),
+            to: moment([2015, 5, 1, 10])
+          },
          targets: [{ bucketAggs: [], metrics: [] }]
        });

--- a/public/test/specs/graphiteDatasource-specs.js
+++ b/public/test/specs/graphiteDatasource-specs.js
@@ -17,7 +17,7 @@ define([
    describe('When querying influxdb with one target using query editor target spec', function() {
      var query = {
-        range: { from: 'now-1h', to: 'now' },
+        rangeRaw: { from: 'now-1h', to: 'now' },
        targets: [{ target: 'prod1.count' }, {target: 'prod2.count'}],
        maxDataPoints: 500,
      };

--- a/public/test/specs/influxdb-datasource-specs.js
+++ b/public/test/specs/influxdb-datasource-specs.js
@@ -21,7 +21,7 @@ define([
      var urlExpected = "/series?p=mupp&q=select+mean(value)+from+%22test%22"+
                        "+where+time+%3E+now()-1h+group+by+time(1s)+order+asc";
      var query = {
-        range: { from: 'now-1h', to: 'now' },
+        rangeRaw: { from: 'now-1h', to: 'now' },
        targets: [{ series: 'test', column: 'value', function: 'mean' }],
        interval: '1s'
      };
@@ -54,7 +54,7 @@ define([
      var urlExpected = "/series?p=mupp&q=select+value+from+series"+
                        "+where+time+%3E+now()-1h";
      var query = {
-        range: { from: 'now-1h', to: 'now' },
+        rangeRaw: { from: 'now-1h', to: 'now' },
        targets: [{ query: "select value from series where $timeFilter", rawQuery: true }]
      };
@@ -97,6 +97,5 @@ define([
    });
  });
 });