refactor: moved timepicker from a simple panel to component, removed simple panel directive

public/app/controllers/signupCtrl.ts

@@ -1,8 +1,7 @@
 ///<reference path="../headers/common.d.ts" />
-///<amd-dependency path="config" name="config" />
 
 import angular = require('angular');
-declare var config : any;
+import config = require('config');
 
 var module = angular.module('grafana.controllers');
 

public/app/core/directives/array_join.ts

@@ -3,7 +3,7 @@
 import angular = require('angular');
 import _ = require('lodash');
 
-export function ArrayJoin() {
+export function arrayJoin() {
   'use strict';
 
   return {
@@ -29,5 +29,5 @@ export function ArrayJoin() {
   };
 }
 
-angular.module('grafana.directives').directive('arrayJoin', ArrayJoin);
+angular.module('grafana.directives').directive('arrayJoin', arrayJoin);
 

public/app/directives/grafanaSimplePanel.js

@@ -1,66 +0,0 @@
-define([
-  'angular',
-],
-function (angular) {
-  'use strict';
-
-  angular
-    .module('grafana.directives')
-    .directive('grafanaSimplePanel', function($compile) {
-      var panelLoading = '<span ng-show="panelMeta.loading == true">' +
-        '<span style="font-size:72px;font-weight:200">'+
-          '<i class="icon-spinner icon-spin"></i> loading ...' +
-        '</span>'+
-      '</span>';
-
-      return {
-        restrict: 'E',
-        link: function($scope, elem, attr) {
-
-          // once we have the template, scan it for controllers and
-          // load the module.js if we have any
-
-          // compile the module and uncloack. We're done
-          function loadModule($module) {
-            $module.appendTo(elem);
-            /* jshint indent:false */
-            $compile(elem.contents())($scope);
-            elem.removeClass("ng-cloak");
-          }
-
-          function loadController(name) {
-            elem.addClass("ng-cloak");
-            // load the panels module file, then render it in the dom.
-            var nameAsPath = name.replace(".", "/");
-            $scope.require([
-              'jquery',
-              'text!panels/'+nameAsPath+'/module.html'
-            ], function ($, moduleTemplate) {
-              var $module = $(moduleTemplate);
-              // top level controllers
-              var $controllers = $module.filter('ngcontroller, [ng-controller], .ng-controller');
-              // add child controllers
-              $controllers = $controllers.add($module.find('ngcontroller, [ng-controller], .ng-controller'));
-
-              if ($controllers.length) {
-                $controllers.first().prepend(panelLoading);
-                $scope.require([
-                  'panels/'+nameAsPath+'/module'
-                ], function() {
-                  loadModule($module);
-                });
-              } else {
-                loadModule($module);
-              }
-            });
-          }
-
-          $scope.$watch(attr.type, function (name) {
-            loadController(name);
-          });
-
-        }
-      };
-    });
-
-});

public/app/features/dashboard/all.js

@@ -16,6 +16,7 @@ define([
   './timeSrv',
   './unsavedChangesSrv',
   './directives/dashSearchView',
+  './timepicker/timepicker',
   './graphiteImportCtrl',
   './dynamicDashboardSrv',
   './importCtrl',

public/app/features/dashboard/dashboardSrv.js

@@ -31,7 +31,7 @@ function (angular, $, kbn, _, moment) {
       this.hideControls = data.hideControls || false;
       this.sharedCrosshair = data.sharedCrosshair || false;
       this.rows = data.rows || [];
-      this.nav = data.nav || [];
+      this.timepicker = data.timepicker || {};
       this.time = data.time || { from: 'now-6h', to: 'now' };
       this.templating = this._ensureListExist(data.templating);
       this.annotations = this._ensureListExist(data.annotations);
@@ -40,11 +40,6 @@ function (angular, $, kbn, _, moment) {
       this.schemaVersion = data.schemaVersion || 0;
       this.version = data.version || 0;
       this.links = data.links || [];
-
-      if (this.nav.length === 0) {
-        this.nav.push({ type: 'timepicker' });
-      }
-
       this._updateSchema(data);
       this._initMeta(meta);
     }
@@ -232,9 +227,9 @@ function (angular, $, kbn, _, moment) {
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var panelUpgrades = [];
-      this.schemaVersion = 6;
+      this.schemaVersion = 7;
 
-      if (oldVersion === 6) {
+      if (oldVersion === 7) {
         return;
       }
 
@@ -329,6 +324,11 @@ function (angular, $, kbn, _, moment) {
         }
       }
 
+      if (oldVersion < 7 && old.nav && old.nav.length) {
+        this.timepicker = old.nav[0];
+        delete this.nav;
+      }
+
       if (panelUpgrades.length === 0) {
         return;
       }

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

@@ -61,9 +61,8 @@
 						Back to dashboard
 					</a>
 				</li>
-				<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
-					<grafana-simple-panel type="pulldown.type" ng-cloak>
-					</grafana-simple-panel>
+				<li ng-if="dashboard">
+					<gf-time-picker></gf-time-picker>
 				</li>
 			</ul>
 		</div>

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

@@ -5,9 +5,7 @@
 	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['General', 'Rows', 'Links']" data-title="{{tab}}">
-		</div>
-		<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
+		<div ng-repeat="tab in ['General', 'Rows', 'Links', 'Time picker']" data-title="{{tab}}">
 		</div>
 	</div>
 
@@ -40,7 +38,7 @@
 					</ul>
 					<div class="clearfix"></div>
 				</div>
-				<div class="tight-form">
+				<div class="tight-form last">
 					<ul class="tight-form-list">
 						<li class="tight-form-item" style="width: 90px">
 							Timezone
@@ -110,9 +108,8 @@
 		<dash-links-editor></dash-links-editor>
 	</div>
 
-	<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
-		<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
-		<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
+	<div ng-if="editor.index == 3">
+		<gf-time-picker-settings></gf-time-picker-settings>
 	</div>
 
 </div>

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

@@ -0,0 +1,55 @@
+<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-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>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+
+			<div class="tight-form last">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 118px">
+						Now delay
+					</li>
+					<li class="tight-form-item">
+						now-
+					</li>
+					<li>
+						<input type="text" class="input-mini tight-form-input last"
+						ng-model="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">
+					</li>
+
+				</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.html

@@ -0,0 +1,56 @@
+<style>
+	.timepicker-timestring {
+		font-weight: normal;
+	}
+
+	.timepicker-dropdown {
+		margin: 0px !important;
+		border: 0px !important;
+	}
+</style>
+<form name="input" style="margin:0">
+	<ul class="nav timepicker-dropdown">
+
+		<li class="grafana-menu-zoom-out">
+			<a class='small' ng-click='zoom(2)'>
+				Zoom Out
+			</a>
+		</li>
+
+		<li class="dropdown">
+
+			<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="loadTimeOptions();">
+				<i class="fa fa-clock-o"></i>
+				<span ng-bind="time.rangeString"></span>
+				<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
+				<i class="fa fa-caret-down"></i>
+			</a>
+
+			<!-- lacy load this -->
+			<ul class="dropdown-menu" ng-if="time_options" >
+				<li bindonce ng-repeat='option in time_options'>
+					<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a>
+				</li>
+
+				<!-- Auto refresh submenu -->
+				<li class="dropdown-submenu">
+					<a href="#">Auto-Refresh</a>
+					<ul class="dropdown-menu" ng-class="{'dropdown-submenu-left': refreshMenuLeftSide}">
+						<li>
+							<a ng-click="timeSrv.set_interval(false)">Off</a>
+						</li>
+						<li bindonce ng-repeat="interval in panel.refresh_intervals track by $index">
+							<a ng-click="timeSrv.set_interval(interval)" bo-text="'Every ' + interval"></a>
+						</li>
+					</ul>
+				</li>
+				<li><a ng-click="customTime()">Custom</a></li>
+			</ul>
+
+		</li>
+		<li ng-show="!dashboard.refresh" class="grafana-menu-refresh">
+			<a ng-click="timeSrv.refreshDashboard()"><i class="fa fa-refresh"></i></a>
+		</li>
+	</ul>
+</form>
+</div>

public/app/panels/timepicker/module.js → public/app/features/dashboard/timepicker/timepicker.ts

@@ -1,32 +1,13 @@
-/*
-
-  ## Timepicker2
-
-  ### Parameters
-  * mode :: The default mode of the panel. Options: 'relative', 'absolute' 'since' Default: 'relative'
-  * time_options :: An array of possible time options. Default: ['5m','15m','1h','6h','12h','24h','2d','7d','30d']
-  * timespan :: The default options selected for the relative view. Default: '15m'
-  * timefield :: The field in which time is stored in the document.
-  * refresh: Object containing refresh parameters
-    * enable :: true/false, enable auto refresh by default. Default: false
-    * interval :: Seconds between auto refresh. Default: 30
-    * min :: The lowest interval a user may set
-*/
-define([
-  'angular',
-  'app',
-  'lodash',
-  'moment',
-  'kbn'
-],
-function (angular, app, _, moment, kbn) {
-  'use strict';
+///<reference path="../../../headers/common.d.ts" />
 
-  var module = angular.module('grafana.panels.timepicker', []);
-  app.useModule(module);
+import angular = require('angular');
+import _ = require('lodash');
+import moment = require('moment');
+import kbn = require('kbn');
 
-  module.controller('timepicker', function($scope, $rootScope, timeSrv) {
+export class TimePickerCtrl {
 
+  constructor($scope : any, $rootScope, timeSrv) {
     $scope.panelMeta = {
       status  : "Stable",
       description : ""
@@ -39,8 +20,6 @@ function (angular, app, _, moment, kbn) {
       refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
     };
 
-    _.defaults($scope.panel,_d);
-
     // ng-pattern regexs
     $scope.patterns = {
       date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
@@ -57,6 +36,10 @@ function (angular, app, _, moment, kbn) {
     });
 
     $scope.init = function() {
+      $scope.panel = $scope.dashboard.timepicker;
+
+      _.defaults($scope.panel, _d);
+
       var time = timeSrv.timeRange(true);
       $scope.panel.now = false;
 
@@ -86,11 +69,11 @@ function (angular, app, _, moment, kbn) {
       $scope.temptime = cloneTime($scope.time);
       $scope.temptime.now = $scope.panel.now;
 
-      $scope.temptime.from.date.setHours(0,0,0,0);
-      $scope.temptime.to.date.setHours(0,0,0,0);
+      $scope.temptime.from.date.setHours(0, 0, 0, 0);
+      $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) {
+      if (new Date().getTimezoneOffset() < 0) {
         $scope.temptime.from.date = moment($scope.temptime.from.date).add(1, 'days').toDate();
         $scope.temptime.to.date = moment($scope.temptime.to.date).add(1, 'days').toDate();
       }
@@ -100,7 +83,7 @@ function (angular, app, _, moment, kbn) {
 
     // Constantly validate the input of the fields. This function does not change any date variables
     // outside of its own scope
-    $scope.validate = function(time) {
+    $scope.validate = function(time) : any {
       // Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
       $scope.input.$setValidity("dummy", true);
 
@@ -108,13 +91,13 @@ function (angular, app, _, moment, kbn) {
         _to = datepickerToLocal(time.to.date),
         _t = time;
 
-      if($scope.input.$valid) {
+      if ($scope.input.$valid) {
 
-        _from.setHours(_t.from.hour,_t.from.minute,_t.from.second,_t.from.millisecond);
-        _to.setHours(_t.to.hour,_t.to.minute,_t.to.second,_t.to.millisecond);
+        _from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond);
+        _to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond);
 
         // Check that the objects are valid and to is after from
-        if(isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
+        if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
           $scope.input.$setValidity("dummy", false);
           return false;
         }
@@ -122,29 +105,23 @@ function (angular, app, _, moment, kbn) {
         return false;
       }
 
-      return { from: _from, to:_to, now: time.now};
+      return { from: _from, to: _to, now: time.now };
     };
 
     $scope.setNow = function() {
       $scope.time.to = getTimeObj(new Date());
     };
 
-    /*
-      time : {
-        from: Date
-        to: Date
-      }
-    */
     $scope.setAbsoluteTimeFilter = function (time) {
       // Create filter object
       var _filter = _.clone(time);
 
-      if(time.now) {
+      if (time.now) {
         _filter.to = "now";
       }
 
       // Update our representation
-      $scope.time = getScopeTimeObj(time.from,time.to);
+      $scope.time = getScopeTimeObj(time.from, time.to);
 
       timeSrv.setTime(_filter);
     };
@@ -160,10 +137,10 @@ function (angular, app, _, moment, kbn) {
 
       timeSrv.setTime(range);
 
-      $scope.time = getScopeTimeObj(kbn.parseDate(range.from),new Date());
+      $scope.time = getScopeTimeObj(kbn.parseDate(range.from), new Date());
     };
 
-    var pad = function(n, width, z) {
+    var pad : any = function(n, width, z) {
       z = z || '0';
       n = n.toString();
       return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -180,8 +157,8 @@ function (angular, app, _, moment, kbn) {
       return _n;
     };
 
-    var getScopeTimeObj = function(from,to) {
-      var model = {from: getTimeObj(from), to: getTimeObj(to)};
+    var getScopeTimeObj = function(from, to) {
+      var model : any = {from: getTimeObj(from), to: getTimeObj(to)};
 
       if (model.from.date) {
         model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
@@ -212,10 +189,10 @@ function (angular, app, _, moment, kbn) {
     var getTimeObj = function(date) {
       return {
         date: new Date(date),
-        hour: pad(date.getHours(),2),
-        minute: pad(date.getMinutes(),2),
-        second: pad(date.getSeconds(),2),
-        millisecond: pad(date.getMilliseconds(),3)
+        hour: pad(date.getHours(), 2),
+        minute: pad(date.getMinutes(), 2),
+        second: pad(date.getSeconds(), 2),
+        millisecond: pad(date.getMilliseconds(), 3)
       };
     };
 
@@ -234,7 +211,7 @@ function (angular, app, _, moment, kbn) {
       var to = (center + (timespan*factor)/2);
       var from = (center - (timespan*factor)/2);
 
-      if(to > Date.now() && range.to <= Date.now()) {
+      if (to > Date.now() && range.to <= Date.now()) {
         var offset = to - Date.now();
         from = from - offset;
         to = Date.now();
@@ -246,5 +223,32 @@ function (angular, app, _, moment, kbn) {
       });
     };
 
-  });
-});
+    $scope.init();
+  }
+}
+
+export function settingsDirective() {
+  'use strict';
+  return {
+    restrict: 'E',
+    templateUrl: 'app/features/dashboard/timepicker/settings.html',
+    controller: TimePickerCtrl,
+    scope: true,
+    link: function() {
+    }
+  };
+}
+
+export function timePickerDirective() {
+  'use strict';
+  return {
+    restrict: 'E',
+    templateUrl: 'app/features/dashboard/timepicker/timepicker.html',
+    controller: TimePickerCtrl,
+    scope: true
+  };
+}
+
+
+angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective);
+angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective);

public/app/features/dashlinks/editor.html

@@ -67,7 +67,7 @@
 			</ul>
 			<div class="clearfix"></div>
 		</div>
-		<div class="tight-form">
+		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 20px">
 					<i class="fa fa-fw fa-unlink invisible"></i>

public/app/headers/angularjs/angularjs.d.ts

@@ -6,7 +6,6 @@
 
 /// <reference path="../jquery/jquery.d.ts" />
 
-declare var angular: angular.IAngularStatic;
 
 // Support for painless dependency injection
 interface Function {
@@ -17,6 +16,7 @@ interface Function {
 import ng = angular;
 // Support AMD require
 declare module 'angular' {
+    var angular: angular.IAngularStatic;
     export = angular;
 }
 

public/app/headers/common.d.ts

@@ -2,3 +2,16 @@
 ///<reference path="angularjs/angularjs.d.ts" />
 ///<reference path="lodash/lodash.d.ts" />
 ///<reference path="moment/moment.d.ts" />
+
+// dummy modules
+declare module 'config' {
+  var config : any;
+  export = config;
+}
+
+declare module 'kbn' {
+  var kbn : any;
+  export = kbn;
+}
+
+

public/app/headers/moment/moment.d.ts

@@ -5,4 +5,3 @@
 
 /// <reference path="moment-node.d.ts" />
 
-declare var moment: moment.MomentStatic;

public/app/panels/timepicker/custom.html

@@ -1,81 +0,0 @@
-<div class="gf-box-header">
-	<div class="gf-box-title">
-		<i class="fa fa-clock-o"></i>
-		Custom time range
-	</div>
-	<button class="gf-box-header-close-btn" ng-click="dismiss();">
-		<i class="fa fa-remove"></i>
-	</button>
-</div>
-
-<div class="gf-box-body">
-	<style>
-		.timepicker-to-column {
-			margin-top: 10px;
-		}
-
-		.timepicker-input input {
-			outline: 0 !important;
-			border: 0px !important;
-			-webkit-box-shadow: 0;
-			-moz-box-shadow: 0;
-			box-shadow: 0;
-			position: relative;
-		}
-
-		.timepicker-input input::-webkit-outer-spin-button,
-		.timepicker-input input::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-
-		input.timepicker-date {
-			width: 90px;
-		}
-		input.timepicker-hms {
-			width: 20px;
-		}
-		input.timepicker-ms {
-			width: 25px;
-		}
-		div.timepicker-now {
-			float: right;
-		}
-	</style>
-
-	<div class="timepicker form-horizontal">
-		<form name="timeForm" style="margin-bottom: 0">
-
-			<div class="timepicker-from-column">
-				<label class="small">From</label>
-				<div class="fake-input timepicker-input">
-					<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
-					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
-					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
-					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
-					<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond"  onClick="this.select();"/>
-				</div>
-			</div>
-
-			<div class="timepicker-to-column">
-
-				<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="setNow();temptime.now=true">set now</a>)</label>
-
-				<div class="fake-input timepicker-input">
-					<div ng-hide="temptime.now">
-						<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
-						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
-						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
-						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
-						<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
-					</div>
-					<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">&nbsp <i class="pointer fa fa-remove" ng-click="setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
-				</div>
-			</div>
-
-			<br>
-			<button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();" ng-disabled="!timeForm.$valid" class="btn btn-success">Apply</button>
-			<span class="" ng-hide="input.$valid">Invalid date or range</span>
-		</form>
-	</div>
-</div>

public/app/panels/timepicker/editor.html

@@ -1,55 +0,0 @@
-  <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-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>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 118px">
-							Now delay
-						</li>
-						<li class="tight-form-item">
-							now-
-						</li>
-						<li>
-							<input type="text" class="input-mini tight-form-input last"
-							ng-model="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">
-						</li>
-
-					</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/panels/timepicker/module.html

@@ -1,57 +0,0 @@
-<div ng-controller='timepicker' ng-init="init()">
-  <style>
-    .timepicker-timestring {
-      font-weight: normal;
-    }
-
-    .timepicker-dropdown {
-      margin: 0px !important;
-      border: 0px !important;
-    }
-  </style>
-  <form name="input" style="margin:0">
-		<ul class="nav timepicker-dropdown">
-
-			<li class="grafana-menu-zoom-out">
-				<a class='small' ng-click='zoom(2)'>
-					Zoom Out
-				</a>
-			</li>
-
-			<li class="dropdown">
-
-				<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="loadTimeOptions();">
-					<i class="fa fa-clock-o"></i>
-					<span ng-bind="time.rangeString"></span>
-					<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
-					<i class="fa fa-caret-down"></i>
-				</a>
-
-				<!-- lacy load this -->
-				<ul class="dropdown-menu" ng-if="time_options" >
-					<li bindonce ng-repeat='option in time_options'>
-						<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a>
-          </li>
-
-          <!-- Auto refresh submenu -->
-					<li class="dropdown-submenu">
-            <a href="#">Auto-Refresh</a>
-            <ul class="dropdown-menu" ng-class="{'dropdown-submenu-left': refreshMenuLeftSide}">
-              <li>
-                <a ng-click="timeSrv.set_interval(false)">Off</a>
-              </li>
-              <li bindonce ng-repeat="interval in panel.refresh_intervals track by $index">
-                <a ng-click="timeSrv.set_interval(interval)" bo-text="'Every ' + interval"></a>
-              </li>
-            </ul>
-          </li>
-          <li><a ng-click="customTime()">Custom</a></li>
-        </ul>
-
-      </li>
-      <li ng-show="!dashboard.refresh" class="grafana-menu-refresh">
-        <a ng-click="timeSrv.refreshDashboard()"><i class="fa fa-refresh"></i></a>
-      </li>
-    </ul>
-  </form>
-</div>

public/test/specs/dashboardSrv-specs.js

@@ -30,7 +30,6 @@ define([
 
       it('should have default properties', function() {
         expect(model.rows.length).to.be(0);
-        expect(model.nav.length).to.be(1);
       });
 
     });
@@ -199,7 +198,7 @@ define([
       });
 
       it('dashboard schema version should be set to latest', function() {
-        expect(model.schemaVersion).to.be(6);
+        expect(model.schemaVersion).to.be(7);
       });
 
     });

tasks/build_task.js

@@ -6,6 +6,7 @@ module.exports = function(grunt) {
     'jshint:source',
     'jshint:tests',
     'jscs',
+    'tslint',
     'clean:release',
     'copy:public_to_gen',
     'typescript:build',

tasks/options/tslint.js

@@ -15,7 +15,7 @@ module.exports = function(config) {
           "interface-name": true,
           "semicolon": true,
           "use-strict": [true, "check-module", "check-function" ],
-          "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
+          "whitespace": [true, "check-branch", "check-decl", "check-type"],
         }
       }
     }

tasks/options/watch.js

@@ -18,7 +18,7 @@ module.exports = function(config) {
 
     typescript: {
       files: ['<%= srcDir %>/app/**/*.ts'],
-      tasks: ['typescript:build'],
+      tasks: ['tslint', 'typescript:build'],
       options: {
         spawn: false
       }