Merge branch 'rangeMaps' of https://github.com/utkarshcmu/grafana into utkarshcmu-rangeMaps

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

@@ -204,35 +204,3 @@
 		</div>
 	</div>
 </div>
-
-<div class="editor-row">
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					<strong>Value to text mapping</strong>
-				</li>
-				<li class="tight-form-item"  ng-repeat-start="map in ctrl.panel.valueMaps">
-					<i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
-				</li>
-				<li>
-					<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-				</li>
-				<li class="tight-form-item">
-					<i class="fa fa-arrow-right"></i>
-				</li>
-				<li ng-repeat-end>
-					<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-				</li>
-
-				<li>
-					<a class="pointer tight-form-item last" ng-click="ctrl.addValueMap();">
-						<i class="fa fa-plus"></i>
-					</a>
-				</li>
-
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-	</div>
-</div>

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

@@ -0,0 +1,84 @@
+<div class="editor-row">
+        <div class="section tight-form-container" style="margin-bottom: 20px">
+                <div class="tight-form">
+                        <ul class="tight-form-list">
+                                <li class="tight-form-item">
+                                        Type
+                                </li>
+                                <li>
+                                        <select class="input-medium tight-form-input" ng-model="ctrl.panel.mappingType"
+					ng-options="f.value as f.name for f in ctrl.panel.mappingTypes" ng-change="ctrl.render()"></select>
+                                </li>
+                        </ul>
+                        <div class="clearfix"></div>
+                </div>
+	</div>
+</div>
+<div class="editor-row" ng-if="ctrl.panel.mappingType==1">
+	<div class="section" style="margin-bottom: 20px">
+		<div class="tight-form last">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<strong>Value to text mapping</strong>
+				</li>
+				<li class="tight-form-item"  ng-repeat-start="map in ctrl.panel.valueMaps">
+					<i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
+				</li>
+				<li>
+					<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="ctrl.render()">
+				</li>
+				<li class="tight-form-item">
+					<i class="fa fa-arrow-right"></i>
+				</li>
+				<li ng-repeat-end>
+					<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
+				</li>
+
+				<li>
+					<a class="pointer tight-form-item last" ng-click="ctrl.addValueMap();">
+						<i class="fa fa-plus"></i>
+					</a>
+				</li>
+
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+</div>
+<div class="editor-row" ng-if="ctrl.panel.mappingType==2">
+        <h5>Set range mappings</h5>
+        <div class="section gf-form-group">
+                <div class="tight-form-container">
+                        <div class="tight-form" ng-repeat="rangeMap in ctrl.panel.rangeMaps">
+                                <ul class="tight-form-list">
+                                        <li class="tight-form-item">
+                                                <i class="fa fa-remove pointer" ng-click="ctrl.removeRangeMap(rangeMap)"></i>
+                                        </li>
+                                        <li class="tight-form-item">
+                                                From
+                                        </li>
+                                        <li>
+                                                <input type="text" ng-model="rangeMap.from" class="input-mini tight-form-input" ng-blur="ctrl.render()">
+                                        </li>
+					<li class="tight-form-item">
+                                                To
+                                        </li>
+                                        <li>
+                                                <input type="text" ng-model="rangeMap.to" class="input-mini tight-form-input" ng-blur="ctrl.render()">
+                                        </li>
+					<li class="tight-form-item">
+                                                Text
+                                        </li>
+                                        <li>
+                                                <input type="text" ng-model="rangeMap.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
+                                        </li>
+                                </ul>
+                                <div class="clearfix"></div>
+                        </div>
+                </div>
+
+                <button class="btn btn-inverse" style="margin-top: 20px" ng-click="ctrl.addRangeMap()">
+                        Add a range mapping
+                </button>
+        </div>
+</div>

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

@@ -35,6 +35,14 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     valueMaps: [
       { value: 'null', op: '=', text: 'N/A' }
     ],
+    mappingTypes: [
+      {name: 'value to text', value: 1},
+      {name: 'range to text', value: 2},
+    ],
+    rangeMaps: [
+      { from: 'null', to: 'null', text: 'N/A' }
+    ],
+    mappingType: 1,
     nullPointMode: 'connected',
     valueName: 'avg',
     prefixFontSize: '50%',
@@ -73,6 +81,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   onInitEditMode() {
     this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
     this.addEditorTab('Options', 'public/app/plugins/panel/singlestat/editor.html', 2);
+    this.addEditorTab('Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
     this.unitFormats = kbn.getUnitFormats();
   }
 
@@ -197,23 +206,45 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       }
     }
 
-    // check value to text mappings
-    for (var i = 0; i < this.panel.valueMaps.length; i++) {
-      var map = this.panel.valueMaps[i];
-      // special null case
-      if (map.value === 'null') {
-        if (data.value === null || data.value === void 0) {
+    // check value to text mappings if its enabled
+    if (this.panel.mappingType === 1) {
+      for (var i = 0; i < this.panel.valueMaps.length; i++) {
+        var map = this.panel.valueMaps[i];
+        // special null case
+        if (map.value === 'null') {
+          if (data.value === null || data.value === void 0) {
+            data.valueFormated = map.text;
+            return;
+          }
+          continue;
+        }
+
+        // value/number to text mapping
+        var value = parseFloat(map.value);
+        if (value === data.valueRounded) {
           data.valueFormated = map.text;
           return;
         }
-        continue;
       }
+    } else if (this.panel.mappingType === 2) {
+      for (var i = 0; i < this.panel.rangeMaps.length; i++) {
+        var map = this.panel.rangeMaps[i];
+        // special null case
+        if (map.from === 'null' && map.to === 'null') {
+          if (data.value === null || data.value === void 0) {
+            data.valueFormated = map.text;
+            return;
+          }
+          continue;
+        }
 
-      // value/number to text mapping
-      var value = parseFloat(map.value);
-      if (value === data.valueRounded) {
-        data.valueFormated = map.text;
-        return;
+        // value/number to range mapping
+        var from = parseFloat(map.from);
+        var to = parseFloat(map.to);
+        if (to >= data.valueRounded && from <= data.valueRounded) {
+          data.valueFormated = map.text;
+          return;
+        }
       }
     }
 
@@ -232,6 +263,16 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.panel.valueMaps.push({value: '', op: '=', text: '' });
   }
 
+  removeRangeMap(rangeMap) {
+    var index = _.indexOf(this.panel.rangeMaps, rangeMap);
+    this.panel.rangeMaps.splice(index, 1);
+    this.render();
+  };
+
+  addRangeMap() {
+    this.panel.rangeMaps.push({from: '', to: '', text: ''});
+  }
+
   link(scope, elem, attrs, ctrl) {
     var $location = this.$location;
     var linkSrv = this.linkSrv;

public/app/plugins/panel/singlestat/specs/singlestat-specs.ts

@@ -84,4 +84,29 @@ describe('SingleStatCtrl', function() {
       expect(ctx.data.valueFormated).to.be('OK');
     });
   });
+
+  singleStatScenario('When range to text mapping is specifiedfor first range', function(ctx) {
+    ctx.setup(function() {
+      ctx.datapoints = [[41,50]];
+      ctx.ctrl.panel.mappingType = 2;
+      ctx.ctrl.panel.rangeMaps = [{from: '10', to: '50', text: 'OK'},{from: '51', to: '100', text: 'NOT OK'}];
+    });
+
+    it('Should replace value with text OK', function() {
+      expect(ctx.data.valueFormated).to.be('OK');
+    });
+  });
+
+  singleStatScenario('When range to text mapping is specified for other ranges', function(ctx) {
+    ctx.setup(function() {
+      ctx.datapoints = [[65,75]];
+      ctx.ctrl.panel.mappingType = 2;
+      ctx.ctrl.panel.rangeMaps = [{from: '10', to: '50', text: 'OK'},{from: '51', to: '100', text: 'NOT OK'}];
+    });
+
+    it('Should replace value with text NOT OK', function() {
+      expect(ctx.data.valueFormated).to.be('NOT OK');
+    });
+  });
+
 });