Added form validation and css class for invalid timespans, #1494

src/app/directives/ngModelOnBlur.js

@@ -1,5 +1,8 @@
-define(['angular'],
+define([
-function (angular) {
+  'angular',
+  'kbn'
+],
+function (angular, kbn) {
   'use strict';
 
   angular
@@ -34,5 +37,18 @@ function (angular) {
           });
         }
       };
+    })
+    .directive('validTimeSpan', function() {
+      return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+          ctrl.$validators.integer = function(modelValue, viewValue) {
+            if (ctrl.$isEmpty(modelValue)) {
+              return true;
+            }
+            return kbn.isValidTimeSpan(viewValue);
+          };
+        }
+      };
     });
 });

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

@@ -12,8 +12,8 @@
 					Last
 				</li>
 				<li>
-					<input type="text" class="input-small tight-form-input" placeholder="1h"
+					<input type="text" class="input-small tight-form-input last" placeholder="1h"
-					  empty-to-null ng-model="panel.timeFrom"
+					  empty-to-null ng-model="panel.timeFrom" valid-time-span
 					  ng-change="get_data()" ng-model-onblur>
 				</li>
 			</ul>
@@ -31,8 +31,8 @@
 					Amount
 				</li>
 				<li>
-					<input type="text" class="input-small tight-form-input" placeholder="1h"
+					<input type="text" class="input-small tight-form-input last" placeholder="1h"
-					empty-to-null ng-model="panel.timeShift"
+					empty-to-null ng-model="panel.timeShift" valid-time-span
 					ng-change="get_data()" ng-model-onblur>
 				</li>
 			</ul>

src/app/panels/timepicker/editor.html

@@ -18,7 +18,10 @@
 					</li>
 					<li>
 						<input type="text" class="input-mini tight-form-input last"
-						  ng-model="panel.nowDelay" placeholder="0m" bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'" data-placement="right">
+						  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>

src/css/less/grafana.less

@@ -13,6 +13,7 @@
 @import "gfbox.less";
 @import "dashlist.less";
 @import "admin.less";
+@import "validation.less";
 
 .row-control-inner {
   padding:0px;

src/css/less/validation.less

@@ -0,0 +1,3 @@
+input[type=text].ng-invalid {
+  box-shadow: inset 0 0px 7px @red;
+}