refactor: finished timepicker to typescript and directive refactor

pkg/api/api.go

@@ -17,7 +17,7 @@ func Register(r *macaron.Macaron) {
 	bind := binding.Bind
 
 	// not logged in views
-	r.Get("/", reqSignedIn, Index)
+	r.Get("/", reqSignedIn, Index)		
 	r.Get("/logout", Logout)
 	r.Post("/login", bind(dtos.LoginCommand{}), wrap(LoginPost))
 	r.Get("/login/:name", OAuthLogin)

public/app/directives/all.js

 define([
   './dashUpload',
-  './grafanaSimplePanel',
   './dashEditLink',
   './ngModelOnBlur',
   './misc',

public/app/features/dashboard/dashboardSrv.js

@@ -31,8 +31,8 @@ function (angular, $, kbn, _, moment) {
       this.hideControls = data.hideControls || false;
       this.sharedCrosshair = data.sharedCrosshair || false;
       this.rows = data.rows || [];
-      this.timepicker = data.timepicker || {};
       this.time = data.time || { from: 'now-6h', to: 'now' };
+      this.timepicker = data.timepicker || {};
       this.templating = this._ensureListExist(data.templating);
       this.annotations = this._ensureListExist(data.annotations);
       this.refresh = data.refresh;

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

+<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="ctrl.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="ctrl.setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
+				</div>
+			</div>
+
+			<br>
+			<button ng-click="ctrl.setAbsoluteTimeFilter(ctrl.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/features/dashboard/timepicker/timepicker.html

@@ -19,7 +19,7 @@
 
 		<li class="dropdown">
 
-			<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="loadTimeOptions();">
+			<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="ctrl.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>
@@ -29,7 +29,7 @@
 			<!-- 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>
+					<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.text"></a>
 				</li>
 
 				<!-- Auto refresh submenu -->
@@ -44,7 +44,7 @@
 						</li>
 					</ul>
 				</li>
-				<li><a ng-click="customTime()">Custom</a></li>
+				<li><a ng-click="ctrl.customTime()">Custom</a></li>
 			</ul>
 
 		</li>

public/test/specs/dashboardSrv-specs.js

@@ -31,7 +31,6 @@ define([
       it('should have default properties', function() {
         expect(model.rows.length).to.be(0);
       });
-
     });
 
     describe('when getting next panel id', function() {