Commit c54ec5f5 by Hugo Häggmark

Moved the rest of Threshold dependencies to ui/components

parent c05b92c2
import React from 'react';
import { shallow } from 'enzyme';
import { PanelOptionsProps } from '@grafana/ui';
import { BasicGaugeColor, GaugeOptions, PanelOptionsProps } from '@grafana/ui';
import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
import { Options } from 'app/plugins/panel/gauge/types';
import { BasicGaugeColor } from 'app/types';
import { ThresholdsEditor } from './ThresholdsEditor';
const setup = (propOverrides?: object) => {
const props: PanelOptionsProps<Options> = {
const props: PanelOptionsProps<GaugeOptions> = {
onChange: jest.fn(),
options: {
...defaultProps.options,
......
import React, { PureComponent } from 'react';
import tinycolor from 'tinycolor2';
import { ColorPicker } from '@grafana/ui';
import { BasicGaugeColor } from 'app/types';
import { PanelOptionsProps, Threshold } from '@grafana/ui';
import { Options } from 'app/plugins/panel/gauge/types';
import tinycolor, { ColorInput } from 'tinycolor2';
import { BasicGaugeColor, ColorPicker, GaugeOptions, PanelOptionsProps, Threshold } from '@grafana/ui';
interface State {
thresholds: Threshold[];
baseColor: string;
}
export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>, State> {
constructor(props) {
export class ThresholdsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
constructor(props: PanelOptionsProps<GaugeOptions>) {
super(props);
this.state = {
thresholds: props.options.thresholds,
baseColor: props.options.baseColor,
};
this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor };
}
onAddThreshold = index => {
onAddThreshold = (index: number) => {
const { maxValue, minValue } = this.props.options;
const { thresholds } = this.state;
......@@ -48,27 +42,25 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
if (index === 0 && thresholds.length === 0) {
color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
} else {
color = tinycolor.mix(thresholds[index - 1].color, BasicGaugeColor.Red, 50).toRgbString();
color = tinycolor.mix(thresholds[index - 1].color as ColorInput, BasicGaugeColor.Red, 50).toRgbString();
}
this.setState(
{
thresholds: this.sortThresholds([...newThresholds, { index: index, value: value, color: color }]),
thresholds: this.sortThresholds([...newThresholds, { index, value: value as number, color }]),
},
() => this.updateGauge()
);
};
onRemoveThreshold = threshold => {
onRemoveThreshold = (threshold: Threshold) => {
this.setState(
prevState => ({
thresholds: prevState.thresholds.filter(t => t !== threshold),
}),
prevState => ({ thresholds: prevState.thresholds.filter(t => t !== threshold) }),
() => this.updateGauge()
);
};
onChangeThresholdValue = (event, threshold) => {
onChangeThresholdValue = (event: any, threshold: Threshold) => {
const { thresholds } = this.state;
const newThresholds = thresholds.map(t => {
......@@ -79,12 +71,10 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
return t;
});
this.setState({
thresholds: newThresholds,
});
this.setState({ thresholds: newThresholds });
};
onChangeThresholdColor = (threshold, color) => {
onChangeThresholdColor = (threshold: Threshold, color: string) => {
const { thresholds } = this.state;
const newThresholds = thresholds.map(t => {
......@@ -103,11 +93,9 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
);
};
onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
onChangeBaseColor = (color: string) => this.props.onChange({ ...this.props.options, baseColor: color });
onBlur = () => {
this.setState(prevState => ({
thresholds: this.sortThresholds(prevState.thresholds),
}));
this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
this.updateGauge();
};
......@@ -116,7 +104,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
};
sortThresholds = thresholds => {
sortThresholds = (thresholds: Threshold[]) => {
return thresholds.sort((t1, t2) => {
return t2.value - t1.value;
});
......@@ -161,20 +149,8 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
return thresholds.map((t, i) => {
return (
<div key={`${t.value}-${i}`} className="indicator-section">
<div
onClick={() => this.onAddThreshold(t.index + 1)}
style={{
height: '50%',
backgroundColor: t.color,
}}
/>
<div
onClick={() => this.onAddThreshold(t.index)}
style={{
height: '50%',
backgroundColor: t.color,
}}
/>
<div onClick={() => this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} />
<div onClick={() => this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
</div>
);
});
......
import { RangeMap, ValueMap, Threshold } from 'app/types';
import { RangeMap, Threshold, ValueMap } from '@grafana/ui';
export interface Options {
export interface GaugeOptions {
baseColor: string;
decimals: number;
mappings: Array<RangeMap | ValueMap>;
......
export * from './series';
export * from './time';
export * from './panel';
export * from './gauge';
......@@ -35,3 +35,29 @@ export interface Threshold {
value: number;
color?: string;
}
export enum BasicGaugeColor {
Green = '#299c46',
Red = '#d44a3a',
}
export enum MappingType {
ValueToText = 1,
RangeToText = 2,
}
interface BaseMap {
id: number;
operator: string;
text: string;
type: MappingType;
}
export interface ValueMap extends BaseMap {
value: string;
}
export interface RangeMap extends BaseMap {
from: string;
to: string;
}
import React, { PureComponent } from 'react';
import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
import { Switch } from 'app/core/components/Switch/Switch';
import { Label } from '../../../core/components/Label/Label';
import { PanelOptionsProps } from '@grafana/ui';
import { Options } from './types';
export default class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
onToggleThresholdLabels = () =>
this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
......
import React, { PureComponent } from 'react';
import { PanelProps, NullValueMode } from '@grafana/ui';
import { GaugeOptions, PanelProps, NullValueMode } from '@grafana/ui';
import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
import Gauge from 'app/viz/Gauge';
import { Options } from './types';
interface Props extends PanelProps<Options> {}
interface Props extends PanelProps<GaugeOptions> {}
export class GaugePanel extends PureComponent<Props> {
render() {
......
import React, { PureComponent } from 'react';
import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
import { BasicGaugeColor } from 'app/types';
import { PanelOptionsProps, ThresholdsEditor } from '@grafana/ui';
import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
import { Options } from './types';
import GaugeOptions from './GaugeOptions';
import GaugeOptionsEditor from './GaugeOptionsEditor';
export const defaultProps = {
options: {
......@@ -23,7 +22,7 @@ export const defaultProps = {
},
};
export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<Options>> {
export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
static defaultProps = defaultProps;
render() {
......@@ -32,7 +31,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<O
<>
<div className="form-section">
<ValueOptions onChange={onChange} options={options} />
<GaugeOptions onChange={onChange} options={options} />
<GaugeOptionsEditor onChange={onChange} options={options} />
<ThresholdsEditor onChange={onChange} options={options} />
</div>
......
import React, { PureComponent } from 'react';
import { MappingType, RangeMap, ValueMap } from '@grafana/ui';
import { Label } from 'app/core/components/Label/Label';
import { Select } from 'app/core/components/Select/Select';
import { MappingType, RangeMap, ValueMap } from 'app/types';
interface Props {
mapping: ValueMap | RangeMap;
......
import React from 'react';
import { shallow } from 'enzyme';
import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui';
import ValueMappings from './ValueMappings';
import { MappingType } from 'app/types';
import { PanelOptionsProps } from '@grafana/ui';
import { Options } from './types';
import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions';
const setup = (propOverrides?: object) => {
const props: PanelOptionsProps<Options> = {
const props: PanelOptionsProps<GaugeOptions> = {
onChange: jest.fn(),
options: {
...defaultProps.options,
......
import React, { PureComponent } from 'react';
import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui';
import MappingRow from './MappingRow';
import { MappingType, RangeMap, ValueMap } from 'app/types';
import { PanelOptionsProps } from '@grafana/ui';
import { Options } from './types';
interface State {
mappings: Array<ValueMap | RangeMap>;
nextIdToAdd: number;
}
export default class ValueMappings extends PureComponent<PanelOptionsProps<Options>, State> {
export default class ValueMappings extends PureComponent<PanelOptionsProps<GaugeOptions>, State> {
constructor(props) {
super(props);
......
import React, { PureComponent } from 'react';
import { GaugeOptions, PanelOptionsProps } from '@grafana/ui';
import { Label } from 'app/core/components/Label/Label';
import Select from 'app/core/components/Select/Select';
import UnitPicker from 'app/core/components/Select/UnitPicker';
import { PanelOptionsProps } from '@grafana/ui';
import { Options } from './types';
const statOptions = [
{ value: 'min', label: 'Min' },
......@@ -21,7 +21,7 @@ const statOptions = [
const labelWidth = 6;
export default class ValueOptions extends PureComponent<PanelOptionsProps<Options>> {
export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
......
......@@ -9,7 +9,6 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
import { Invitee, OrgUser, User, UsersState, UserState } from './user';
import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources';
import { DataQuery, DataQueryResponse, DataQueryOptions } from './series';
import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel';
import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
import { Organization, OrganizationState } from './organization';
import {
......@@ -20,7 +19,6 @@ import {
} from './appNotifications';
import { DashboardSearchHit } from './search';
import { ValidationEvents, ValidationRule } from './form';
import { Threshold } from '@grafana/ui';
export {
Team,
TeamsState,
......@@ -70,13 +68,8 @@ export {
AppNotificationTimeout,
DashboardSearchHit,
UserState,
Threshold,
ValidationEvents,
ValidationRule,
ValueMap,
RangeMap,
MappingType,
BasicGaugeColor,
};
export interface StoreState {
......
export enum MappingType {
ValueToText = 1,
RangeToText = 2,
}
export enum BasicGaugeColor {
Green = '#299c46',
Red = '#d44a3a',
}
interface BaseMap {
id: number;
operator: string;
text: string;
type: MappingType;
}
export interface ValueMap extends BaseMap {
value: string;
}
export interface RangeMap extends BaseMap {
from: string;
to: string;
}
import React from 'react';
import { shallow } from 'enzyme';
import { BasicGaugeColor, TimeSeriesVMs } from '@grafana/ui';
import { Gauge, Props } from './Gauge';
import { BasicGaugeColor } from '../types';
import { TimeSeriesVMs } from '@grafana/ui';
jest.mock('jquery', () => ({
plot: jest.fn(),
......
import React, { PureComponent } from 'react';
import $ from 'jquery';
import { BasicGaugeColor, MappingType, RangeMap, Threshold, ValueMap } from 'app/types';
import { TimeSeriesVMs } from '@grafana/ui';
import { BasicGaugeColor, Threshold, TimeSeriesVMs, RangeMap, ValueMap, MappingType } from '@grafana/ui';
import config from '../core/config';
import kbn from '../core/utils/kbn';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment