feat(timepicker2): more work on new timepicker

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

 <div class="row pull-right">
 <div class="row pull-right">
-	<div class="gf-timepicker-relative-section">
-		<h3>Quick ranges</h3>
-		<ul ng-repeat="group in timeOptions">
-			<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
-				<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
-			</li>
-		</ul>
-	</div>
-
 	<div class="gf-timepicker-absolute-section">
 	<div class="gf-timepicker-absolute-section">
 		<h3>Time range</h3>
 		<h3>Time range</h3>
 		<label class="small">From:</label>
 		<label class="small">From:</label>
@@ -31,8 +22,22 @@
 		</div>
 		</div>
 
 
 		<label class="small">Refreshing every:</label>
 		<label class="small">Refreshing every:</label>
-		<select ng-model="dashboard.refresh" class='input-large' ng-options="f for f in ['5m','10m']"></select>
+		<select ng-model="currentRefresh" class='input-large' ng-options="f for f in refreshOptions"></select>
+
+		<button class="btn btn-inverse pull-right" type="button" ng-click="applyCustomTimeRange()">
+			Apply
+		</button>
 	</div>
 	</div>
+
+	<div class="gf-timepicker-relative-section">
+		<h3>Quick ranges</h3>
+		<ul ng-repeat="group in timeOptions">
+			<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
+				<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
+			</li>
+		</ul>
+	</div>
+
 </div>
 </div>
 <div class="clearfix"></div>
 <div class="clearfix"></div>
 
 

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

@@ -7,17 +7,22 @@
 	</li>
 	</li>
 
 
 	<li>
 	<li>
-		<a class="timepicker-dropdown" bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.loadTimeOptions()">
+		<a class="timepicker-dropdown" bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
 			<i class="fa fa-clock-o"></i>
 			<i class="fa fa-clock-o"></i>
 			<span ng-bind="rangeString"></span>
 			<span ng-bind="rangeString"></span>
-			<i class="fa fa-caret-down"></i>
+
+			<span ng-show="dashboard.refresh" class="text-warning">
+				&nbsp;
+				&nbsp;
+				<i class="fa fa-refresh"></i>
+				refreshed every {{dashboard.refresh}}
+			</span>
 		</a>
 		</a>
 	</li>
 	</li>
 
 
-	<li class="grafana-menu-refresh">
+	<li class="grafana-menu-refresh" ng-show="!dashboard.refresh">
 		<a ng-click="timeSrv.refreshDashboard()">
 		<a ng-click="timeSrv.refreshDashboard()">
 			<i class="fa fa-refresh"></i>
 			<i class="fa fa-refresh"></i>
-			<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
 		</a>
 		</a>
 	</li>
 	</li>
 
 

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

@@ -54,18 +54,22 @@ export class TimePickerCtrl {
         this.$scope.dashboard.formatDate(time.to, format);
         this.$scope.dashboard.formatDate(time.to, format);
     }
     }
 
 
-    this.$scope.timeRaw = timeRaw;
     this.$scope.absolute =  {form: time.from.toDate(), to: time.to.toDate()};
     this.$scope.absolute =  {form: time.from.toDate(), to: time.to.toDate()};
+    this.$scope.timeRaw = timeRaw;
+    this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
+    this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
+
     this.$scope.onAppEvent('zoom-out', function() {
     this.$scope.onAppEvent('zoom-out', function() {
       this.$scope.zoom(2);
       this.$scope.zoom(2);
     });
     });
-
-    this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from.date) + ' <br>to<br>';
-    this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to.date);
   }
   }
 
 
-  loadTimeOptions() {
+  openDropdown() {
     this.$scope.timeOptions = rangeUtil.getRelativeTimesList(this.$scope.panel, this.$scope.rangeString);
     this.$scope.timeOptions = rangeUtil.getRelativeTimesList(this.$scope.panel, this.$scope.rangeString);
+    this.$scope.currentRefresh = this.$scope.dashboard.refresh || 'off';
+    this.$scope.refreshOptions = this.$scope.panel.refresh_intervals;
+    this.$scope.refreshOptions.unshift('off');
+
     this.$scope.appEvent('show-dash-editor', {
     this.$scope.appEvent('show-dash-editor', {
       src: 'app/features/dashboard/timepicker/dropdown.html',
       src: 'app/features/dashboard/timepicker/dropdown.html',
       scope: this.$scope,
       scope: this.$scope,

public/app/partials/dashboard.html

@@ -5,6 +5,7 @@
 
 
 	<div dash-editor-view></div>
 	<div dash-editor-view></div>
 	<div dash-search-view></div>
 	<div dash-search-view></div>
+	<div class="clearfix"></div>
 
 
 	<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
 	<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
   </div>
   </div>

public/app/plugins/PLUGIN_CHANGES.md

+# Plugin API
+
+## Changelog
+
+2.5 changed the `range` parameter in the `datasource.query` function's options parameter. This
+parameter now holds a parsed range with `moment` dates `form` and `to`. To get
+millisecond epoc from a `moment` you the function `valueOf`. The raw date range as represented
+internally in grafana (which may be relative expressions like `now-5h`) is included in the
+new property `rangeRaw` (on the options object).

public/less/tabs.less

@@ -30,10 +30,11 @@
 		background-color: #060606;
 		background-color: #060606;
 		border-color: transparent;
 		border-color: transparent;
 	}
 	}
-}
 
 
-.tab-content {
+  .tab-content {
     padding: 10px;
     padding: 10px;
     background-color: @grafanaPanelBackground;
     background-color: @grafanaPanelBackground;
+  }
 }
 }
 
 
+

public/less/timepicker.less

@@ -38,21 +38,21 @@ div.timepicker-now {
 }
 }
 
 
 .gf-timepicker-dropdown {
 .gf-timepicker-dropdown {
-  margin: 15px;
+  margin: 0px;
   padding: 10px 20px;
   padding: 10px 20px;
   float: right;
   float: right;
   background-color: @grafanaPanelBackground;
   background-color: @grafanaPanelBackground;
-  border: 1px solid @grafanaTargetFuncBackground;
+  .box-shadow(@navbarDropdownShadow);
 }
 }
 
 
 .gf-timepicker-absolute-section {
 .gf-timepicker-absolute-section {
   width: 300px;
   width: 300px;
   float: left;
   float: left;
+  border-right: @grafanaTriggerBorder;
   padding: 0 20px 0 20px;
   padding: 0 20px 0 20px;
 }
 }
 
 
 .gf-timepicker-relative-section {
 .gf-timepicker-relative-section {
-  border-right: @grafanaTriggerBorder;
   padding: 0 20px 0 20px;
   padding: 0 20px 0 20px;
   min-height: 258px;
   min-height: 258px;
   float: left;
   float: left;
@@ -60,8 +60,8 @@ div.timepicker-now {
     float: left;
     float: left;
     margin: 0 20px 10px 25px;
     margin: 0 20px 10px 25px;
     li.active {
     li.active {
-      border-left: 1px solid @blue;
-      padding: 2px 0;
+      border-bottom: 1px solid @blue;
+      margin: 3px 0;
     }
     }
   }
   }
 }
 }

public/less/variables.dark.less

@@ -48,7 +48,6 @@
 @bodyBackground:        rgb(22,22,22);
 @bodyBackground:        rgb(22,22,22);
 @textColor:             @grayLighter;
 @textColor:             @grayLighter;
 
 
-
 // Links
 // Links
 // -------------------------
 // -------------------------
 @linkColor:             darken(@white,11%);
 @linkColor:             darken(@white,11%);
@@ -225,27 +224,8 @@
 @navbarLinkColorActive:           @navbarLinkColorHover;
 @navbarLinkColorActive:           @navbarLinkColorHover;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      @navbarBackground;
 @navbarLinkBackgroundActive:      @navbarBackground;
-
 @navbarBrandColor:                @linkColor;
 @navbarBrandColor:                @linkColor;
-
-// Inverted navbar
-@navbarInverseBackground:                #252A30;
-@navbarInverseBackgroundHighlight:       #252A30;
-@navbarInverseBorder:                    transparent;
-
-@navbarInverseText:                      @grayLight;
-@navbarInverseLinkColor:                 @grayLight;
-@navbarInverseLinkColorHover:            @white;
-@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
-@navbarInverseLinkBackgroundHover:       #242A31;
-@navbarInverseLinkBackgroundActive:      @navbarInverseLinkBackgroundHover;
-
-@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus:     @white;
-@navbarInverseSearchBorder:              @navbarInverseBackground;
-@navbarInverseSearchPlaceholderColor:    @white;
-
-@navbarInverseBrandColor:                @navbarInverseLinkColor;
+@navbarDropdownShadow:            inset 0px 4px 10px -4px @bodyBackground;
 
 
 
 
 // Pagination
 // Pagination

public/less/variables.light.less

@@ -238,28 +238,10 @@
 @navbarLinkColorActive:           #555;
 @navbarLinkColorActive:           #555;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 6.5%);
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 6.5%);
+@navbarDropdownShadow:            inset 0px 4px 10px -4px darken(@bodyBackground, 20%);
 
 
 @navbarBrandColor:                @navbarLinkColor;
 @navbarBrandColor:                @navbarLinkColor;
 
 
-// Inverted navbar
-@navbarInverseBackground:                @blue;
-@navbarInverseBackgroundHighlight:       @navbarInverseBackground;
-@navbarInverseBorder:                    transparent;
-
-@navbarInverseText:                      @white;
-@navbarInverseLinkColor:                 @white;
-@navbarInverseLinkColorHover:            @white;
-@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
-@navbarInverseLinkBackgroundHover:       rgba(0, 0, 0, 0.05);
-@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
-
-@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus:     @white;
-@navbarInverseSearchBorder:              @navbarInverseBackground;
-@navbarInverseSearchPlaceholderColor:    @grayDark;
-
-@navbarInverseBrandColor:                @navbarInverseLinkColor;
-
 
 
 // Pagination
 // Pagination
 // -------------------------
 // -------------------------