render a value mapping row

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

+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,
+}
+
+interface Props {
+  mapping: ValueMap | RangeMap;
+  updateMapping: (mapping) => void;
+}
+
+interface State {
+  mapping: ValueMap | RangeMap;
+  mappingType: MappingType;
+}
+
+export default class MappingRow extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      mappingType: MappingType.ValueToText,
+      mapping: props.mapping,
+    };
+  }
+
+  onMappingValueChange = event => {
+    const { mapping } = this.state;
+
+    const updatedMapping = { ...mapping, value: event.target.value };
+
+    this.setState({ mapping: updatedMapping });
+  };
+
+  onMappingFromChange = event => {
+    const { mapping } = this.state;
+
+    const updatedMapping = { ...mapping, from: event.target.value };
+
+    this.setState({ mapping: updatedMapping });
+  };
+
+  onMappingToChange = event => {
+    const { mapping } = this.state;
+
+    const updatedMapping = { ...mapping, to: event.target.value };
+
+    this.setState({ mapping: updatedMapping });
+  };
+
+  onMappingTextChange = event => {
+    const { mapping } = this.state;
+
+    const updatedMapping = { ...mapping, text: event.target.value };
+    this.setState({ mapping: updatedMapping });
+  };
+
+  onMappingTypeChange = mappingType => this.setState({ mappingType });
+
+  renderRow() {
+    const { mapping, mappingType } = this.state;
+
+    if (mappingType === MappingType.RangeToText) {
+      const rangeMap = mapping as RangeMap;
+
+      return (
+        <div className="gf-form-inline">
+          <div className="gf-form-group">
+            <Label>From</Label>
+            <input value={rangeMap.from} onChange={this.onMappingFromChange} />
+          </div>
+          <div className="gf-form-group">
+            <Label>To</Label>
+            <input value={rangeMap.to} onChange={this.onMappingToChange} />
+          </div>
+          <div className="gf-form-group">
+            <Label>Text</Label>
+            <input value={rangeMap.text} onChange={this.onMappingTextChange} />
+          </div>
+        </div>
+      );
+    }
+
+    const valueMap = mapping as ValueMap;
+
+    return (
+      <div className="gf-form-inline">
+        <div className="gf-form-inline">
+          <Label width={4}>Value</Label>
+          <input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} />
+        </div>
+        <div className="gf-form-inline">
+          <Label width={4}>Text</Label>
+          <input className="gf-form-input" value={valueMap.text} onChange={this.onMappingTextChange} />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { mappingType } = this.state;
+
+    return (
+      <div>
+        <div className="gf-form-inline">
+          <ToggleButtonGroup
+            label="Mapping type"
+            onChange={mappingType => this.onMappingTypeChange(mappingType)}
+            render={({ selectedValue, onChange }) => {
+              return [
+                <ToggleButton
+                  className="btn-small"
+                  key="value"
+                  onChange={onChange}
+                  selected={selectedValue === mappingType}
+                  value="Value"
+                >
+                  Value
+                </ToggleButton>,
+                <ToggleButton
+                  className="btn-small"
+                  key="range"
+                  onChange={onChange}
+                  selected={selectedValue === mappingType}
+                  value="Range"
+                >
+                  Range
+                </ToggleButton>,
+              ];
+            }}
+          />
+          <div>{this.renderRow()}</div>
+        </div>
+      </div>
+    );
+  }
+}

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

 import React, { PureComponent } from 'react';
-import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import MappingRow from './MappingRow';
 import { OptionModuleProps } from './module';
 import { RangeMap, ValueMap } from 'app/types';
 
 interface State {
+  combinedMappings: any[];
   valueMaps: ValueMap[];
   rangeMaps: RangeMap[];
 }
 
-enum MappingType {
-  ValueToText = 1,
-  RangeToText = 2,
-}
-
-const mappingOptions = [
-  { name: 'Value to text', value: MappingType.ValueToText },
-  { name: 'Range to text', value: MappingType.RangeToText },
-];
-
 export default class ValueMappings extends PureComponent<OptionModuleProps, State> {
   constructor(props) {
     super(props);
 
     this.state = {
-      valueMaps: props.options.valueMaps,
+      combinedMappings: props.options.valueMaps.concat(props.options.rangeMaps),
       rangeMaps: props.options.rangeMaps,
+      valueMaps: props.options.valueMaps,
     };
   }
-  onMappingTypeChange = option => this.props.onChange({ ...this.props.options, mappingType: option.value });
 
-  addValueMap = () =>
+  addMapping = () =>
     this.setState(prevState => ({
-      valueMaps: [...prevState.valueMaps, { op: '', value: '', text: '' }],
+      combinedMappings: [...prevState.combinedMappings, { op: '', value: '', text: '' }],
     }));
 
-  addRangeMap = () => {
-    this.setState = () =>
-      this.setState(prevState => ({
-        valueMaps: [...prevState.valueMaps, { op: '', value: '', text: '', from: '', to: '' }],
-      }));
-  };
-
-  updateGauge = () => {};
-
-  renderValueMapList() {
-    const { mappingType, rangeMaps, valueMaps } = this.props.options;
-
-    if (mappingType === MappingType.RangeToText) {
-      return (
-        <div>
-          {rangeMaps.length > 0
-            ? rangeMaps.map((range, index) => {
-                return <div>{`${range.from}-${range.to}`}</div>;
-              })
-            : 'aint no ranges, add one?'}
-        </div>
-      );
-    }
+  updateGauge = mapping => {
+    this.setState(prevState => ({
+      combinedMappings: prevState.combinedMappings.map(m => {
+        if (m === mapping) {
+          return { ...mapping };
+        }
 
-    return (
-      <div>
-        {valueMaps.length > 0
-          ? valueMaps.map((value, index) => {
-              return <div>{`${value}`}</div>;
-            })
-          : 'aint no values, add one?'}
-      </div>
-    );
-  }
+        return m;
+      }),
+    }));
+  };
 
   render() {
-    const { mappingType } = this.props.options;
+    const { combinedMappings } = this.state;
 
     return (
-      <div className="gf-form-group">
+      <div className="section gf-form-group">
         <div className="gf-form">
-          <Label width={5}>Type</Label>
-          <SimplePicker
-            options={mappingOptions}
-            defaultValue={MappingType.ValueToText}
-            getOptionLabel={i => i.name}
-            onSelected={option => this.onMappingTypeChange(option)}
-            width={5}
-            value={mappingType}
-          />
-        </div>
-        <div className="section gf-form-group">
-          <h5 className="page-heading">Set value mappings</h5>
-          <div className="gf-form">{this.renderValueMapList()}</div>
+          <div className="mappings">
+            {combinedMappings.length > 0 &&
+              combinedMappings.map((mapping, index) => {
+                return <MappingRow key={index} mapping={mapping} updateMapping={this.updateGauge} />;
+              })}
+          </div>
+          <div onClick={this.addMapping}>Add mapping</div>
         </div>
       </div>
     );

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

@@ -34,6 +34,8 @@ export const defaultProps = {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
+    valueMaps: [],
+    rangeMaps: [],
   },
 };