fixed typings and remove

public/app/plugins/panel/gauge/MappingRow.tsx

@@ -1,21 +1,16 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
 import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
-import { RangeMap, ValueMap } from 'app/types';
-
-enum MappingType {
-  ValueToText = 1,
-  RangeToText = 2,
-}
+import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface Props {
   mapping: ValueMap | RangeMap;
   updateMapping: (mapping) => void;
+  removeMapping: () => void;
 }
 
 interface State {
   mapping: ValueMap | RangeMap;
-  mappingType: MappingType;
 }
 
 export default class MappingRow extends PureComponent<Props, State> {
@@ -23,7 +18,6 @@ export default class MappingRow extends PureComponent<Props, State> {
     super(props);
 
     this.state = {
-      mappingType: MappingType.ValueToText,
       mapping: props.mapping,
     };
   }
@@ -59,12 +53,23 @@ export default class MappingRow extends PureComponent<Props, State> {
     this.setState({ mapping: updatedMapping });
   };
 
-  onMappingTypeChange = mappingType => this.setState({ mappingType });
+  updateMapping = () => {
+    const { mapping } = this.state;
+
+    this.props.updateMapping(mapping);
+  };
+
+  onMappingTypeChange = mappingType => {
+    const { mapping } = this.state;
+
+    const updatedMapping = { ...mapping, type: mappingType };
+    this.setState({ mapping: updatedMapping });
+  };
 
   renderRow() {
-    const { mapping, mappingType } = this.state;
+    const { mapping } = this.state;
 
-    if (mappingType === MappingType.RangeToText) {
+    if (mapping.type === MappingType.RangeToText) {
       const rangeMap = mapping as RangeMap;
 
       return (
@@ -72,19 +77,34 @@ export default class MappingRow extends PureComponent<Props, State> {
           <div className="gf-form-inline">
             <Label width={4}>From</Label>
             <div>
-              <input className="gf-form-input" value={rangeMap.from} onChange={this.onMappingFromChange} />
+              <input
+                className="gf-form-input"
+                value={rangeMap.from}
+                onBlur={this.updateMapping}
+                onChange={this.onMappingFromChange}
+              />
             </div>
           </div>
           <div className="gf-form-inline">
             <Label width={4}>To</Label>
             <div>
-              <input className="gf-form-input" value={rangeMap.to} onChange={this.onMappingToChange} />
+              <input
+                className="gf-form-input"
+                value={rangeMap.to}
+                onBlur={this.updateMapping}
+                onChange={this.onMappingToChange}
+              />
             </div>
           </div>
           <div className="gf-form-inline">
             <Label width={4}>Text</Label>
             <div>
-              <input className="gf-form-input" value={rangeMap.text} onChange={this.onMappingTextChange} />
+              <input
+                className="gf-form-input"
+                value={rangeMap.text}
+                onBlur={this.updateMapping}
+                onChange={this.onMappingTextChange}
+              />
             </div>
           </div>
         </div>
@@ -98,13 +118,23 @@ export default class MappingRow extends PureComponent<Props, State> {
         <div className="gf-form-inline">
           <Label width={4}>Value</Label>
           <div>
-            <input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} />
+            <input
+              className="gf-form-input"
+              onBlur={this.updateMapping}
+              onChange={this.onMappingValueChange}
+              value={valueMap.value}
+            />
           </div>
         </div>
         <div className="gf-form-inline">
           <Label width={4}>Text</Label>
           <div>
-            <input className="gf-form-input" value={valueMap.text} onChange={this.onMappingTextChange} />
+            <input
+              className="gf-form-input"
+              onBlur={this.updateMapping}
+              value={valueMap.text}
+              onChange={this.onMappingTextChange}
+            />
           </div>
         </div>
       </div>
@@ -112,14 +142,14 @@ export default class MappingRow extends PureComponent<Props, State> {
   }
 
   render() {
-    const { mappingType } = this.state;
+    const { mapping } = this.state;
 
     return (
       <div className="mapping-row">
         <div className="mapping-row-type">
           <ToggleButtonGroup
             onChange={mappingType => this.onMappingTypeChange(mappingType)}
-            value={mappingType}
+            value={mapping.type}
             stackedButtons={true}
             render={({ selectedValue, onChange }) => {
               return [
@@ -146,6 +176,9 @@ export default class MappingRow extends PureComponent<Props, State> {
           />
         </div>
         <div>{this.renderRow()}</div>
+        <div onClick={this.props.removeMapping} className="threshold-row-remove">
+          <i className="fa fa-times" />
+        </div>
       </div>
     );
   }

public/app/plugins/panel/gauge/ValueMappings.tsx

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react';
 import MappingRow from './MappingRow';
 import { OptionModuleProps } from './module';
-import { RangeMap, ValueMap } from 'app/types';
+import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface State {
-  combinedMappings: any[];
-  valueMaps: ValueMap[];
-  rangeMaps: RangeMap[];
+  mappings: Array<ValueMap | RangeMap>;
 }
 
 export default class ValueMappings extends PureComponent<OptionModuleProps, State> {
@@ -14,39 +12,57 @@ export default class ValueMappings extends PureComponent<OptionModuleProps, Stat
     super(props);
 
     this.state = {
-      combinedMappings: props.options.valueMaps.concat(props.options.rangeMaps),
-      rangeMaps: props.options.rangeMaps,
-      valueMaps: props.options.valueMaps,
+      mappings: props.mappings || [],
     };
   }
 
   addMapping = () =>
     this.setState(prevState => ({
-      combinedMappings: [...prevState.combinedMappings, { op: '', value: '', text: '' }],
+      mappings: [
+        ...prevState.mappings,
+        { op: '', value: '', text: '', type: MappingType.ValueToText, from: '', to: '' },
+      ],
     }));
 
-  updateGauge = mapping => {
+  onRemoveMapping = index =>
     this.setState(prevState => ({
-      combinedMappings: prevState.combinedMappings.map(m => {
-        if (m === mapping) {
-          return { ...mapping };
-        }
+      mappings: prevState.mappings.filter((m, i) => i !== index),
+    }));
+
+  updateGauge = mapping => {
+    this.setState(
+      prevState => ({
+        mappings: prevState.mappings.map(m => {
+          if (m === mapping) {
+            return { ...mapping };
+          }
 
-        return m;
+          return m;
+        }),
       }),
-    }));
+      () => {
+        this.props.onChange({ ...this.props.options, mappings: this.state.mappings });
+      }
+    );
   };
 
   render() {
-    const { combinedMappings } = this.state;
+    const { mappings } = this.state;
 
     return (
       <div className="section gf-form-group">
         <h5 className="page-heading">Value mappings</h5>
         <div>
-          {combinedMappings.length > 0 &&
-            combinedMappings.map((mapping, index) => {
-              return <MappingRow key={index} mapping={mapping} updateMapping={this.updateGauge} />;
+          {mappings.length > 0 &&
+            mappings.map((mapping, index) => {
+              return (
+                <MappingRow
+                  key={index}
+                  mapping={mapping}
+                  updateMapping={this.updateGauge}
+                  removeMapping={() => this.onRemoveMapping(index)}
+                />
+              );
             })}
         </div>
         <div className="add-mapping-row" onClick={this.addMapping}>

public/app/plugins/panel/gauge/module.tsx

@@ -16,8 +16,7 @@ export interface OptionsProps {
   suffix: string;
   unit: string;
   thresholds: Threshold[];
-  valueMaps: ValueMap[];
-  rangeMaps: RangeMap[];
+  mappings: Array<ValueMap | RangeMap>;
   mappingType: number;
 }
 

public/app/types/index.ts

@@ -21,7 +21,7 @@ import {
   DataQueryOptions,
   IntervalValues,
 } from './series';
-import { PanelProps, PanelOptionsProps, RangeMap, Threshold, ValueMap } from './panel';
+import { MappingType, PanelProps, PanelOptionsProps, RangeMap, Threshold, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -96,6 +96,7 @@ export {
   ValueMap,
   RangeMap,
   IntervalValues,
+  MappingType,
 };
 
 export interface StoreState {

public/app/types/panel.ts

@@ -37,9 +37,15 @@ export interface Threshold {
   canRemove: boolean;
 }
 
+export enum MappingType {
+  ValueToText = 1,
+  RangeToText = 2,
+}
+
 interface BaseMap {
   op: string;
   text: string;
+  type: MappingType;
 }
 
 export interface ValueMap extends BaseMap {