fix(gauge): validate min / max range, fixes #4820

public/app/plugins/panel/singlestat/editor.html

@@ -179,13 +179,18 @@
 					Min
 					Min
 				</li>
 				</li>
 				<li>
 				<li>
-					<input type="text" class="input-small tight-form-input" ng-model="ctrl.panel.gauge.minValue" ng-blur="ctrl.render()" placeholder="0"></input>
+					<input type="number" class="input-small tight-form-input" ng-model="ctrl.panel.gauge.minValue" ng-blur="ctrl.render()" placeholder="0"></input>
 				</li>
 				</li>
 				<li class="tight-form-item last">
 				<li class="tight-form-item last">
 					Max
 					Max
 				</li>
 				</li>
 				<li>
 				<li>
-					<input type="text" class="input-small tight-form-input last" ng-model="ctrl.panel.gauge.maxValue" ng-blur="ctrl.render()" placeholder="100"></input>
+					<input type="number" class="input-small tight-form-input last" ng-model="ctrl.panel.gauge.maxValue" ng-blur="ctrl.render()" placeholder="100"></input>
+					<span class="alert-state-critical" ng-show="ctrl.invalidGaugeRange">
+						&nbsp;
+						<i class="fa fa-warning"></i>
+						Min value is bigger than max.
+					</span>
 				</li>
 				</li>
 			</ul>
 			</ul>
 			<div class="clearfix"></div>
 			<div class="clearfix"></div>

public/app/plugins/panel/singlestat/module.ts

@@ -18,6 +18,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   data: any;
   data: any;
   fontSizes: any[];
   fontSizes: any[];
   unitFormats: any[];
   unitFormats: any[];
+  invalidGaugeRange: boolean;
 
 
   // Set and populate defaults
   // Set and populate defaults
   panelDefaults = {
   panelDefaults = {
@@ -287,6 +288,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
     }
 
 
     function addGauge() {
     function addGauge() {
+      ctrl.invalidGaugeRange = false;
+      if (panel.gauge.minValue > panel.gauge.maxValue) {
+        ctrl.invalidGaugeRange = true;
+        return;
+      }
+
       var plotCanvas = $('<div></div>');
       var plotCanvas = $('<div></div>');
       var plotCss = {
       var plotCss = {
         top: '10px',
         top: '10px',