Began work on time overrides for panels, to enable different time periods on the…

Began work on time overrides for panels, to enable different time periods on the same dashboard, #171

src/app/features/dashboard/partials/panelTime.html

+<div class="editor-row">
+	<div class="section" style="margin-bottom: 20px">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item tight-form-item-icon">
+					<i class="fa fa-clock-o"></i>
+				</li>
+				<li class="tight-form-item" style="width: 148px">
+					<strong>Override relative time</strong>
+				</li>
+				<li class="tight-form-item" style="width: 50px">
+					Last
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input" placeholder="1h"
+					  empty-to-null ng-model="panel.timeFrom"
+					  ng-change="get_data()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item tight-form-item-icon">
+					<i class="fa fa-clock-o"></i>
+				</li>
+				<li class="tight-form-item" style="width: 148px">
+					<strong>Add time shift</strong>
+				</li>
+				<li class="tight-form-item" style="width: 50px">
+					Amount
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input" placeholder="1h"
+					empty-to-null ng-model="panel.timeShift"
+					ng-change="get_data()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+</div>
+

src/app/features/dashboard/timeSrv.js

@@ -19,12 +19,23 @@ define([
       this.time = dashboard.time;
 
       this._initTimeFromUrl();
+      this._parseTime();
 
       if(this.dashboard.refresh) {
         this.set_interval(this.dashboard.refresh);
       }
     };
 
+    this._parseTime = function() {
+      // when absolute time is saved in json it is turned to a string
+      if (_.isString(this.time.from) && this.time.from.indexOf('Z') >= 0) {
+        this.time.from = new Date(this.time.from);
+      }
+      if (_.isString(this.time.to) && this.time.to.indexOf('Z') >= 0) {
+        this.time.to = new Date(this.time.to);
+      }
+    };
+
     this._parseUrlParam = function(value) {
       if (value.indexOf('now') !== -1) {
         return value;
@@ -109,9 +120,6 @@ define([
 
     this.timeRange = function(parse) {
       var _t = this.time;
-      if(_.isUndefined(_t) || _.isUndefined(_t.from)) {
-        return false;
-      }
 
       if(parse === false) {
         return {

src/app/panels/graph/module.html

@@ -3,6 +3,10 @@
 	<div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
 		<div class="graph-canvas-wrapper">
 
+			<span class="graph-time-info" ng-if="panelMeta.timeInfo">
+				<i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}
+		  </span>
+
 			<div ng-if="datapointsWarning" class="datapoints-warning">
 				<span class="small" ng-show="!datapointsCount">
 					No datapoints <tip>No datapoints returned from metric query</tip>

src/app/panels/graph/module.js

@@ -26,6 +26,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
 
     $scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html');
     $scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html');
+    $scope.panelMeta.addEditorTab('Time range', 'app/features/dashboard/partials/panelTime.html');
 
     $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()');
     $scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()');
@@ -88,6 +89,9 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
         value_type: 'cumulative',
         shared: false,
       },
+      // time overrides
+      timeFrom: null,
+      timeShift: null,
       // metric queries
       targets: [{}],
       // series color overrides
@@ -114,6 +118,25 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
     $scope.updateTimeRange = function () {
       $scope.range = timeSrv.timeRange();
       $scope.rangeUnparsed = timeSrv.timeRange(false);
+
+      $scope.panelMeta.timeInfo = "";
+
+      // check panel time overrrides
+      if ($scope.panel.timeFrom) {
+        if (_.isString($scope.rangeUnparsed.from)) {
+          $scope.panelMeta.timeInfo = "Last " + $scope.panel.timeFrom;
+          $scope.rangeUnparsed.from = 'now-' + $scope.panel.timeFrom;
+          $scope.range.from = kbn.parseDate($scope.rangeUnparsed.from);
+        }
+      }
+      // if ($scope.panel.timeShift) {
+      //   // from: now-1h
+      //   // to: now
+      //   // timeshift: 1d
+      //   // from: now-1d-1h
+      //   // to: now-1d
+      // }
+
       if ($scope.panel.maxDataPoints) {
         $scope.resolution = $scope.panel.maxDataPoints;
       }

src/css/less/graph.less

@@ -141,7 +141,7 @@
     vertical-align: top;
     position: relative;
     left: 4px;
-    top: -20px;
+    top: -25px;
   }
 
   .graph-legend {
@@ -260,7 +260,6 @@
   transform-origin: right top;
 }
 
-
 .axisLabel {
   color: @textColor;
   font-size: @fontSizeSmall;
@@ -269,3 +268,13 @@
   font-size: 12px;
 }
 
+.graph-time-info {
+  font-weight: bold;
+  float: right;
+  margin-right: 15px;
+  color: @blue;
+  font-size: 85%;
+  position: relative;
+  top: -20px;
+}
+

src/css/less/panel.less

@@ -49,8 +49,8 @@
 
 .panel-loading {
   position:absolute;
-  top: 0px;
-  right: 4px;
+  top: -3px;
+  right: 0px;
   z-index: 800;
 }