fixed typings and remove

2025-02-25 18:55:37 -06:00 · 2018-12-10 16:57:34 +01:00 · 2018-12-10 16:57:34 +01:00 · 76f296e299
commit 76f296e299
parent 4a57d594e5
5 changed files with 95 additions and 40 deletions
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/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>
    );
  }
--- a/public/app/plugins/panel/gauge/ValueMappings.tsx
+++ b/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: '' },
+      ],
+    }));
+
+  onRemoveMapping = index =>
+    this.setState(prevState => ({
+      mappings: prevState.mappings.filter((m, i) => i !== index),
    }));

  updateGauge = mapping => {
-    this.setState(prevState => ({
-      combinedMappings: prevState.combinedMappings.map(m => {
-        if (m === mapping) {
-          return { ...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}>
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/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;
 }

--- a/public/app/types/index.ts
+++ b/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 {
--- a/public/app/types/panel.ts
+++ b/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 {