mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
fixed typings and remove
This commit is contained in:
parent
4a57d594e5
commit
76f296e299
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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}>
|
||||
|
@ -16,8 +16,7 @@ export interface OptionsProps {
|
||||
suffix: string;
|
||||
unit: string;
|
||||
thresholds: Threshold[];
|
||||
valueMaps: ValueMap[];
|
||||
rangeMaps: RangeMap[];
|
||||
mappings: Array<ValueMap | RangeMap>;
|
||||
mappingType: number;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user