feat(timepicker2): temporarily removed the the option to define custom quick range, will have to be part of future issue, closes #2761

public/app/core/utils/rangeutil.ts

@@ -56,13 +56,19 @@ _.each(rangeOptions, function (frame) {
 });
 
   function getRelativeTimesList(timepickerSettings, currentDisplay) {
-    return _.groupBy(rangeOptions, (option: any) => {
+    var groups = _.groupBy(rangeOptions, (option: any) => {
       option.active = option.display === currentDisplay;
       return option.section;
     });
-    // return _.map(timepickerSettings.time_options, function(duration: string) {
-    //   return describeTextRange(duration);
+
+    // _.each(timepickerSettings.time_options, (duration: string) => {
+    //   let info = describeTextRange(duration);
+    //   if (info.section) {
+    //     groups[info.section].push(info);
+    //   }
     // });
+
+    return groups;
   }
 
   function formatDate(date) {
@@ -94,6 +100,7 @@ _.each(rangeOptions, function (frame) {
       let span = spans[unit];
       if (span) {
         opt.display = 'Last ' + amount + ' ' + span.display;
+        opt.section = span.section;
         if (amount > 1) {
           opt.display += 's';
         }

public/app/features/dashboard/partials/settings.html

@@ -109,7 +109,7 @@
 	</div>
 
 	<div ng-if="editor.index == 3">
-		<gf-time-picker-settings></gf-time-picker-settings>
+		<gf-time-picker-settings dashboard="dashboard"></gf-time-picker-settings>
 	</div>
 
 </div>

public/app/features/dashboard/timepicker/settings.html

@@ -1,24 +1,24 @@
 <div class="editor-row">
 	<div class="section">
 		<div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 118px">
-						Relative times
-					</li>
-					<li>
-						<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="panel.time_options" array-join>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			<!-- <div class="tight&#45;form"> -->
+			<!-- 	<ul class="tight&#45;form&#45;list"> -->
+			<!-- 		<li class="tight&#45;form&#45;item" style="width: 118px"> -->
+			<!-- 			Relative times -->
+			<!-- 		</li> -->
+			<!-- 		<li> -->
+			<!-- 			<input type="text" class="input&#45;xlarge tight&#45;form&#45;input last" style="width: 450px" ng&#45;model="ctrl.panel.time_options" array&#45;join> -->
+			<!-- 		</li> -->
+			<!-- 	</ul> -->
+			<!-- 	<div class="clearfix"></div> -->
+			<!-- </div> -->
 			<div class="tight-form">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 118px">
 						Auto-refresh
 					</li>
 					<li>
-						<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="panel.refresh_intervals" array-join>
+						<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="ctrl.panel.refresh_intervals" array-join>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -34,7 +34,7 @@
 					</li>
 					<li>
 						<input type="text" class="input-mini tight-form-input last"
-						ng-model="panel.nowDelay" placeholder="0m"
+						ng-model="ctrl.panel.nowDelay" placeholder="0m"
 						valid-time-span
 						bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
 						data-placement="right">
@@ -43,13 +43,6 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-
 		</div>
-
-		<p>
-			<br>
-			<i class="fa fa-info-circle"></i>
-			For these changes to fully take effect save and reload the dashboard.
-		</i>
 	</div>
 </div>

public/app/features/dashboard/timepicker/timepicker.ts

@@ -111,7 +111,6 @@ export class TimePickerCtrl {
       this.timeSrv.setAutoRefresh(this.refresh.value);
     }
 
-    debugger;
     this.timeSrv.setTime(this.timeRaw);
     this.$rootScope.appEvent('hide-dash-editor');
   }
@@ -133,7 +132,7 @@ export class TimePickerCtrl {
 
     var range = {from: timespan.from, to: timespan.to};
 
-    if (this.panel.nowDelay) {
+    if (this.panel.nowDelay && range.to === 'now') {
       range.to = 'now-' + this.panel.nowDelay;
     }
 
@@ -149,7 +148,11 @@ export function settingsDirective() {
     restrict: 'E',
     templateUrl: 'app/features/dashboard/timepicker/settings.html',
     controller: TimePickerCtrl,
-    scope: true,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      dashboard: "="
+    }
   };
 }
 

public/test/specs/core/utils/rangeutil_specs.ts

@@ -6,6 +6,22 @@ import moment  = require('moment')
 
 describe("rangeUtil", () => {
 
+  describe("Can get range grouped list of ranges", () => {
+    it('when custom settings should return default range list', () => {
+      var groups = rangeUtil.getRelativeTimesList({time_options: []}, 'Last 5 minutes');
+      expect(_.keys(groups).length).to.be(4)
+      expect(groups[3][0].active).to.be(true)
+    });
+
+    // it('should add custom options to right section', () => {
+    //   var groups = rangeUtil.getRelativeTimesList({
+    //     time_options: ['12m', '15d']
+    //   }, '');
+    //   var value = _.findWhere(groups["3"], {display: 'Last 12 minutes'});
+    //   expect(value).to.not.be(undefined)
+    // });
+  });
+
   describe("Can get range text described", () => {
     it('should handle simple old expression with only amount and unit', () => {
       var info = rangeUtil.describeTextRange('5m');