mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Moved the rest of Threshold dependencies to ui/components
This commit is contained in:
parent
c05b92c2e0
commit
c54ec5f52f
@ -1,13 +1,12 @@
|
||||
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,
|
||||
|
@ -1,26 +1,20 @@
|
||||
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>
|
||||
);
|
||||
});
|
||||
|
@ -1,6 +1,6 @@
|
||||
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>;
|
@ -1,3 +1,4 @@
|
||||
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;
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
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 });
|
||||
|
@ -1,10 +1,10 @@
|
||||
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() {
|
||||
|
@ -1,10 +1,9 @@
|
||||
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>
|
||||
|
||||
|
@ -1,7 +1,8 @@
|
||||
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;
|
||||
|
@ -1,13 +1,12 @@
|
||||
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,
|
||||
|
@ -1,15 +1,14 @@
|
||||
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);
|
||||
|
||||
|
@ -1,9 +1,9 @@
|
||||
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 {
|
||||
|
@ -1,25 +0,0 @@
|
||||
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;
|
||||
}
|
@ -1,8 +1,8 @@
|
||||
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(),
|
||||
|
@ -1,7 +1,7 @@
|
||||
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';
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user