From 5c9ef9d9dab10ed04e45a597c1b0b4ba3b7b56eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 18 Feb 2015 09:20:39 +0100
Subject: [PATCH] Added form validation and css class for invalid timespans,
 #1494

---
 src/app/directives/ngModelOnBlur.js           | 20 +++++++++++++++++--
 .../features/panel/partials/panelTime.html    |  8 ++++----
 src/app/panels/timepicker/editor.html         |  5 ++++-
 src/css/less/grafana.less                     |  1 +
 src/css/less/validation.less                  |  3 +++
 5 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 src/css/less/validation.less

diff --git a/src/app/directives/ngModelOnBlur.js b/src/app/directives/ngModelOnBlur.js
index 1aea09f9dc8..8057c071bdb 100644
--- a/src/app/directives/ngModelOnBlur.js
+++ b/src/app/directives/ngModelOnBlur.js
@@ -1,5 +1,8 @@
-define(['angular'],
-function (angular) {
+define([
+  '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);
+          };
+        }
+      };
     });
 });
diff --git a/src/app/features/panel/partials/panelTime.html b/src/app/features/panel/partials/panelTime.html
index 7b8b507a2ae..0c407cf2ff1 100644
--- a/src/app/features/panel/partials/panelTime.html
+++ b/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"
-					  empty-to-null ng-model="panel.timeFrom"
+					<input type="text" class="input-small tight-form-input last" placeholder="1h"
+					  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"
-					empty-to-null ng-model="panel.timeShift"
+					<input type="text" class="input-small tight-form-input last" placeholder="1h"
+					empty-to-null ng-model="panel.timeShift" valid-time-span
 					ng-change="get_data()" ng-model-onblur>
 				</li>
 			</ul>
diff --git a/src/app/panels/timepicker/editor.html b/src/app/panels/timepicker/editor.html
index 33a5fbfaf00..34712ad582d 100644
--- a/src/app/panels/timepicker/editor.html
+++ b/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>
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index 7b32d09e854..55e8def8f33 100644
--- a/src/css/less/grafana.less
+++ b/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;
diff --git a/src/css/less/validation.less b/src/css/less/validation.less
new file mode 100644
index 00000000000..a0568bfc96a
--- /dev/null
+++ b/src/css/less/validation.less
@@ -0,0 +1,3 @@
+input[type=text].ng-invalid {
+  box-shadow: inset 0 0px 7px @red;
+}