From 5fc07663410722713c54a457fa0ae1a9c7c871e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Thu, 10 Jan 2019 09:37:32 +0100 Subject: [PATCH 1/7] Moved Thresholds and styles to grafana/ui/components --- packages/grafana-ui/package.json | 3 ++- .../src/components/Thresholds}/Threshold.test.tsx | 8 ++++---- .../grafana-ui/src/components/Thresholds}/Thresholds.tsx | 8 ++++---- .../grafana-ui/src/components/Thresholds/_Thresholds.scss | 0 packages/grafana-ui/src/components/index.scss | 1 + packages/grafana-ui/src/components/index.ts | 1 + packages/grafana-ui/src/types/panel.ts | 6 ++++++ public/app/plugins/panel/gauge/GaugePanelOptions.tsx | 3 +-- public/app/types/index.ts | 3 ++- public/app/types/panel.ts | 6 ------ public/sass/_grafana.scss | 1 - 11 files changed, 21 insertions(+), 19 deletions(-) rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Threshold.test.tsx (91%) rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Thresholds.tsx (96%) rename public/sass/components/_thresholds.scss => packages/grafana-ui/src/components/Thresholds/_Thresholds.scss (100%) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 6548f75e91f..724c3334643 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -23,7 +23,8 @@ "react-highlight-words": "0.11.0", "react-popper": "^1.3.0", "react-transition-group": "^2.2.1", - "react-virtualized": "^9.21.0" + "react-virtualized": "^9.21.0", + "tinycolor2": "^1.4.1" }, "devDependencies": { "@types/classnames": "^2.2.6", diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx similarity index 91% rename from public/app/plugins/panel/gauge/Threshold.test.tsx rename to packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx index 852b9f4c104..eac82e1b0f4 100644 --- a/public/app/plugins/panel/gauge/Threshold.test.tsx +++ b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Thresholds from './Thresholds'; -import { defaultProps } from './GaugePanelOptions'; -import { BasicGaugeColor } from 'app/types'; import { PanelOptionsProps } from '@grafana/ui'; -import { Options } from './types'; +import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; +import { Options } from 'app/plugins/panel/gauge/types'; +import { BasicGaugeColor } from 'app/types'; +import { Thresholds } from './Thresholds'; const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx similarity index 96% rename from public/app/plugins/panel/gauge/Thresholds.tsx rename to packages/grafana-ui/src/components/Thresholds/Thresholds.tsx index b4d4930e11d..802891998e9 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx @@ -1,16 +1,16 @@ import React, { PureComponent } from 'react'; import tinycolor from 'tinycolor2'; import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker'; -import { BasicGaugeColor, Threshold } from 'app/types'; -import { PanelOptionsProps } from '@grafana/ui'; -import { Options } from './types'; +import { BasicGaugeColor } from 'app/types'; +import { PanelOptionsProps, Threshold } from '@grafana/ui'; +import { Options } from 'app/plugins/panel/gauge/types'; interface State { thresholds: Threshold[]; baseColor: string; } -export default class Thresholds extends PureComponent, State> { +export class Thresholds extends PureComponent, State> { constructor(props) { super(props); diff --git a/public/sass/components/_thresholds.scss b/packages/grafana-ui/src/components/Thresholds/_Thresholds.scss similarity index 100% rename from public/sass/components/_thresholds.scss rename to packages/grafana-ui/src/components/Thresholds/_Thresholds.scss diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index e1d1474bb16..d0a81675490 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1,3 +1,4 @@ @import 'CustomScrollbar/CustomScrollbar'; @import 'DeleteButton/DeleteButton'; +@import 'Thresholds/Thresholds'; @import 'Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index abb1cf1b34c..5293cb7bc66 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -2,3 +2,4 @@ export { DeleteButton } from './DeleteButton/DeleteButton'; export { Tooltip } from './Tooltip/Tooltip'; export { Portal } from './Portal/Portal'; export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar'; +export { Thresholds } from './Thresholds/Thresholds'; diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 44336555a81..46fe84a211c 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -29,3 +29,9 @@ export interface PanelMenuItem { shortcut?: string; subMenu?: PanelMenuItem[]; } + +export interface Threshold { + index: number; + value: number; + color?: string; +} diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 2b16ef5a1fe..7b627a09592 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -1,8 +1,7 @@ import React, { PureComponent } from 'react'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; -import Thresholds from 'app/plugins/panel/gauge/Thresholds'; import { BasicGaugeColor } from 'app/types'; -import { PanelOptionsProps } from '@grafana/ui'; +import { PanelOptionsProps, Thresholds } from '@grafana/ui'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import { Options } from './types'; import GaugeOptions from './GaugeOptions'; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index ab52b03ab17..52b2b996542 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -9,7 +9,7 @@ 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, Threshold, ValueMap } from './panel'; +import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel'; import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins'; import { Organization, OrganizationState } from './organization'; import { @@ -20,6 +20,7 @@ import { } from './appNotifications'; import { DashboardSearchHit } from './search'; import { ValidationEvents, ValidationRule } from './form'; +import { Threshold } from '@grafana/ui'; export { Team, TeamsState, diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts index 31674d20304..1f5a2307733 100644 --- a/public/app/types/panel.ts +++ b/public/app/types/panel.ts @@ -1,9 +1,3 @@ -export interface Threshold { - index: number; - value: number; - color?: string; -} - export enum MappingType { ValueToText = 1, RangeToText = 2, diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 10cc7335bdf..a3dd204eb63 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -102,7 +102,6 @@ @import 'components/toolbar'; @import 'components/add_data_source.scss'; @import 'components/page_loader'; -@import 'components/thresholds'; @import 'components/toggle_button_group'; @import 'components/value-mappings'; @import 'components/popover-box'; From 1581662a6cd55bc9002c6ae0618ecb57e0056b04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Thu, 10 Jan 2019 09:37:32 +0100 Subject: [PATCH 2/7] Moved Thresholds and styles to grafana/ui/components --- .../src/components/Thresholds}/Threshold.test.tsx | 8 ++++---- .../grafana-ui/src/components/Thresholds}/Thresholds.tsx | 8 ++++---- .../grafana-ui/src/components/Thresholds/_Thresholds.scss | 0 packages/grafana-ui/src/components/index.scss | 1 + packages/grafana-ui/src/components/index.ts | 1 + packages/grafana-ui/src/types/panel.ts | 6 ++++++ public/app/plugins/panel/gauge/GaugePanelOptions.tsx | 3 +-- public/app/types/index.ts | 3 ++- public/app/types/panel.ts | 6 ------ public/sass/_grafana.scss | 1 - 10 files changed, 19 insertions(+), 18 deletions(-) rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Threshold.test.tsx (91%) rename {public/app/plugins/panel/gauge => packages/grafana-ui/src/components/Thresholds}/Thresholds.tsx (96%) rename public/sass/components/_thresholds.scss => packages/grafana-ui/src/components/Thresholds/_Thresholds.scss (100%) diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx similarity index 91% rename from public/app/plugins/panel/gauge/Threshold.test.tsx rename to packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx index 852b9f4c104..eac82e1b0f4 100644 --- a/public/app/plugins/panel/gauge/Threshold.test.tsx +++ b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Thresholds from './Thresholds'; -import { defaultProps } from './GaugePanelOptions'; -import { BasicGaugeColor } from 'app/types'; import { PanelOptionsProps } from '@grafana/ui'; -import { Options } from './types'; +import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; +import { Options } from 'app/plugins/panel/gauge/types'; +import { BasicGaugeColor } from 'app/types'; +import { Thresholds } from './Thresholds'; const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx similarity index 96% rename from public/app/plugins/panel/gauge/Thresholds.tsx rename to packages/grafana-ui/src/components/Thresholds/Thresholds.tsx index 7699a499146..b5885e4efe8 100644 --- a/public/app/plugins/panel/gauge/Thresholds.tsx +++ b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx @@ -1,16 +1,16 @@ import React, { PureComponent } from 'react'; import tinycolor from 'tinycolor2'; import { ColorPicker } from '@grafana/ui'; -import { BasicGaugeColor, Threshold } from 'app/types'; -import { PanelOptionsProps } from '@grafana/ui'; -import { Options } from './types'; +import { BasicGaugeColor } from 'app/types'; +import { PanelOptionsProps, Threshold } from '@grafana/ui'; +import { Options } from 'app/plugins/panel/gauge/types'; interface State { thresholds: Threshold[]; baseColor: string; } -export default class Thresholds extends PureComponent, State> { +export class Thresholds extends PureComponent, State> { constructor(props) { super(props); diff --git a/public/sass/components/_thresholds.scss b/packages/grafana-ui/src/components/Thresholds/_Thresholds.scss similarity index 100% rename from public/sass/components/_thresholds.scss rename to packages/grafana-ui/src/components/Thresholds/_Thresholds.scss diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index e1d1474bb16..d0a81675490 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1,3 +1,4 @@ @import 'CustomScrollbar/CustomScrollbar'; @import 'DeleteButton/DeleteButton'; +@import 'Thresholds/Thresholds'; @import 'Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index b2b607415b8..fef3f6604c9 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -5,3 +5,4 @@ export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar'; export { ColorPicker } from './ColorPicker/ColorPicker'; export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover'; export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker'; +export { Thresholds } from './Thresholds/Thresholds'; diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 44336555a81..46fe84a211c 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -29,3 +29,9 @@ export interface PanelMenuItem { shortcut?: string; subMenu?: PanelMenuItem[]; } + +export interface Threshold { + index: number; + value: number; + color?: string; +} diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 2b16ef5a1fe..7b627a09592 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -1,8 +1,7 @@ import React, { PureComponent } from 'react'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; -import Thresholds from 'app/plugins/panel/gauge/Thresholds'; import { BasicGaugeColor } from 'app/types'; -import { PanelOptionsProps } from '@grafana/ui'; +import { PanelOptionsProps, Thresholds } from '@grafana/ui'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import { Options } from './types'; import GaugeOptions from './GaugeOptions'; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index ab52b03ab17..52b2b996542 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -9,7 +9,7 @@ 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, Threshold, ValueMap } from './panel'; +import { BasicGaugeColor, MappingType, RangeMap, ValueMap } from './panel'; import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins'; import { Organization, OrganizationState } from './organization'; import { @@ -20,6 +20,7 @@ import { } from './appNotifications'; import { DashboardSearchHit } from './search'; import { ValidationEvents, ValidationRule } from './form'; +import { Threshold } from '@grafana/ui'; export { Team, TeamsState, diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts index 31674d20304..1f5a2307733 100644 --- a/public/app/types/panel.ts +++ b/public/app/types/panel.ts @@ -1,9 +1,3 @@ -export interface Threshold { - index: number; - value: number; - color?: string; -} - export enum MappingType { ValueToText = 1, RangeToText = 2, diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 10cc7335bdf..a3dd204eb63 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -102,7 +102,6 @@ @import 'components/toolbar'; @import 'components/add_data_source.scss'; @import 'components/page_loader'; -@import 'components/thresholds'; @import 'components/toggle_button_group'; @import 'components/value-mappings'; @import 'components/popover-box'; From 0b6e21e9acb529bd12ae0141977782d18e785d22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Thu, 10 Jan 2019 10:43:18 +0100 Subject: [PATCH 3/7] Renamed Thresholds to ThresholdsEditor --- .../grafana-ui/src/components/Thresholds/Threshold.test.tsx | 4 ++-- packages/grafana-ui/src/components/Thresholds/Thresholds.tsx | 2 +- packages/grafana-ui/src/components/index.ts | 2 +- public/app/plugins/panel/gauge/GaugePanelOptions.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx index eac82e1b0f4..90ce6687985 100644 --- a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx +++ b/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx @@ -4,7 +4,7 @@ import { 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 { Thresholds } from './Thresholds'; +import { ThresholdsEditor } from './Thresholds'; const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { @@ -17,7 +17,7 @@ const setup = (propOverrides?: object) => { Object.assign(props, propOverrides); - return shallow().instance() as Thresholds; + return shallow().instance() as ThresholdsEditor; }; describe('Add threshold', () => { diff --git a/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx index b5885e4efe8..d5af07e4a49 100644 --- a/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx +++ b/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx @@ -10,7 +10,7 @@ interface State { baseColor: string; } -export class Thresholds extends PureComponent, State> { +export class ThresholdsEditor extends PureComponent, State> { constructor(props) { super(props); diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index fef3f6604c9..79764ac8fa4 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -5,4 +5,4 @@ export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar'; export { ColorPicker } from './ColorPicker/ColorPicker'; export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover'; export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker'; -export { Thresholds } from './Thresholds/Thresholds'; +export { ThresholdsEditor } from './Thresholds/Thresholds'; diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 7b627a09592..2030b3c4cde 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; import { BasicGaugeColor } from 'app/types'; -import { PanelOptionsProps, Thresholds } from '@grafana/ui'; +import { PanelOptionsProps, ThresholdsEditor } from '@grafana/ui'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import { Options } from './types'; import GaugeOptions from './GaugeOptions'; @@ -33,7 +33,7 @@ export default class GaugePanelOptions extends PureComponent - +
From c05b92c2e0c9043a2e3933dd70cf700adf0e8970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Thu, 10 Jan 2019 10:47:49 +0100 Subject: [PATCH 4/7] Renamed Threshold files --- .../ThresholdsEditor.test.tsx} | 2 +- .../Thresholds.tsx => ThresholdsEditor/ThresholdsEditor.tsx} | 0 .../_ThresholdsEditor.scss} | 0 packages/grafana-ui/src/components/index.scss | 2 +- packages/grafana-ui/src/components/index.ts | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename packages/grafana-ui/src/components/{Thresholds/Threshold.test.tsx => ThresholdsEditor/ThresholdsEditor.test.tsx} (97%) rename packages/grafana-ui/src/components/{Thresholds/Thresholds.tsx => ThresholdsEditor/ThresholdsEditor.tsx} (100%) rename packages/grafana-ui/src/components/{Thresholds/_Thresholds.scss => ThresholdsEditor/_ThresholdsEditor.scss} (100%) diff --git a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx similarity index 97% rename from packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx rename to packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx index 90ce6687985..6d6449aaa60 100644 --- a/packages/grafana-ui/src/components/Thresholds/Threshold.test.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx @@ -4,7 +4,7 @@ import { 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 './Thresholds'; +import { ThresholdsEditor } from './ThresholdsEditor'; const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { diff --git a/packages/grafana-ui/src/components/Thresholds/Thresholds.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx similarity index 100% rename from packages/grafana-ui/src/components/Thresholds/Thresholds.tsx rename to packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx diff --git a/packages/grafana-ui/src/components/Thresholds/_Thresholds.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss similarity index 100% rename from packages/grafana-ui/src/components/Thresholds/_Thresholds.scss rename to packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index d0a81675490..cc5979c8444 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1,4 +1,4 @@ @import 'CustomScrollbar/CustomScrollbar'; @import 'DeleteButton/DeleteButton'; -@import 'Thresholds/Thresholds'; +@import 'ThresholdsEditor/ThresholdsEditor'; @import 'Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 79764ac8fa4..4b60557be7e 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -5,4 +5,4 @@ export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar'; export { ColorPicker } from './ColorPicker/ColorPicker'; export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover'; export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker'; -export { ThresholdsEditor } from './Thresholds/Thresholds'; +export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor'; From c54ec5f52f3bdac684a396ad9699306af29bcd94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 11 Jan 2019 08:30:30 +0100 Subject: [PATCH 5/7] Moved the rest of Threshold dependencies to ui/components --- .../ThresholdsEditor.test.tsx | 7 +-- .../ThresholdsEditor/ThresholdsEditor.tsx | 60 ++++++------------- .../grafana-ui/src/types/gauge.ts | 4 +- packages/grafana-ui/src/types/index.ts | 1 + packages/grafana-ui/src/types/panel.ts | 26 ++++++++ ...augeOptions.tsx => GaugeOptionsEditor.tsx} | 6 +- public/app/plugins/panel/gauge/GaugePanel.tsx | 6 +- .../plugins/panel/gauge/GaugePanelOptions.tsx | 11 ++-- public/app/plugins/panel/gauge/MappingRow.tsx | 3 +- .../panel/gauge/ValueMappings.test.tsx | 7 +-- .../app/plugins/panel/gauge/ValueMappings.tsx | 7 +-- .../app/plugins/panel/gauge/ValueOptions.tsx | 6 +- public/app/types/index.ts | 7 --- public/app/types/panel.ts | 25 -------- public/app/viz/Gauge.test.tsx | 4 +- public/app/viz/Gauge.tsx | 4 +- 16 files changed, 76 insertions(+), 108 deletions(-) rename public/app/plugins/panel/gauge/types.ts => packages/grafana-ui/src/types/gauge.ts (75%) rename public/app/plugins/panel/gauge/{GaugeOptions.tsx => GaugeOptionsEditor.tsx} (91%) delete mode 100644 public/app/types/panel.ts diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx index 6d6449aaa60..8c0c131e1f8 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx @@ -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 = { + const props: PanelOptionsProps = { onChange: jest.fn(), options: { ...defaultProps.options, diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index d5af07e4a49..df999de6c25 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -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, State> { - constructor(props) { +export class ThresholdsEditor extends PureComponent, State> { + constructor(props: PanelOptionsProps) { 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, 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, 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, ); }; - 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, 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, return thresholds.map((t, i) => { return (
-
this.onAddThreshold(t.index + 1)} - style={{ - height: '50%', - backgroundColor: t.color, - }} - /> -
this.onAddThreshold(t.index)} - style={{ - height: '50%', - backgroundColor: t.color, - }} - /> +
this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} /> +
this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
); }); diff --git a/public/app/plugins/panel/gauge/types.ts b/packages/grafana-ui/src/types/gauge.ts similarity index 75% rename from public/app/plugins/panel/gauge/types.ts rename to packages/grafana-ui/src/types/gauge.ts index 60c4fd1581d..de9c7f07328 100644 --- a/public/app/plugins/panel/gauge/types.ts +++ b/packages/grafana-ui/src/types/gauge.ts @@ -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; diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts index f618ce6db34..814ab0478db 100644 --- a/packages/grafana-ui/src/types/index.ts +++ b/packages/grafana-ui/src/types/index.ts @@ -1,3 +1,4 @@ export * from './series'; export * from './time'; export * from './panel'; +export * from './gauge'; diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 46fe84a211c..0b995f932f0 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -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; +} diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx similarity index 91% rename from public/app/plugins/panel/gauge/GaugeOptions.tsx rename to public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx index 7607374b1b7..cb436180b49 100644 --- a/public/app/plugins/panel/gauge/GaugeOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx @@ -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> { +export default class GaugeOptionsEditor extends PureComponent> { onToggleThresholdLabels = () => this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels }); diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index 5f1a438863f..79220daf37a 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -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 {} +interface Props extends PanelProps {} export class GaugePanel extends PureComponent { render() { diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 2030b3c4cde..951a310d29a 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -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> { +export default class GaugePanelOptions extends PureComponent> { static defaultProps = defaultProps; render() { @@ -32,7 +31,7 @@ export default class GaugePanelOptions extends PureComponent
- +
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx index 35d0b2e638c..5bf3b4ab907 100644 --- a/public/app/plugins/panel/gauge/MappingRow.tsx +++ b/public/app/plugins/panel/gauge/MappingRow.tsx @@ -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; diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx index 3e59cc76742..503e3e53617 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx +++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx @@ -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 = { + const props: PanelOptionsProps = { onChange: jest.fn(), options: { ...defaultProps.options, diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx index be800cf2412..4ce0d37b53c 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.tsx +++ b/public/app/plugins/panel/gauge/ValueMappings.tsx @@ -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; nextIdToAdd: number; } -export default class ValueMappings extends PureComponent, State> { +export default class ValueMappings extends PureComponent, State> { constructor(props) { super(props); diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx index 4aafc0b0457..0d8771ec326 100644 --- a/public/app/plugins/panel/gauge/ValueOptions.tsx +++ b/public/app/plugins/panel/gauge/ValueOptions.tsx @@ -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> { +export default class ValueOptions extends PureComponent> { onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value }); onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value }); diff --git a/public/app/types/index.ts b/public/app/types/index.ts index 52b2b996542..72da1c76ea8 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -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 { diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts deleted file mode 100644 index 1f5a2307733..00000000000 --- a/public/app/types/panel.ts +++ /dev/null @@ -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; -} diff --git a/public/app/viz/Gauge.test.tsx b/public/app/viz/Gauge.test.tsx index 91107a563e5..f0c4a874649 100644 --- a/public/app/viz/Gauge.test.tsx +++ b/public/app/viz/Gauge.test.tsx @@ -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(), diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index defeaf8cc8f..5112ff9aa1b 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -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'; From 5ceedc4ac4aca6f33d86d93fd3ac84b6381350ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 11 Jan 2019 09:16:53 +0100 Subject: [PATCH 6/7] Moved defaultProps to ui/components --- .../ThresholdsEditor.test.tsx | 2 +- .../ThresholdsEditor/ThresholdsEditor.tsx | 4 +++- packages/grafana-ui/src/types/gauge.ts | 19 ++++++++++++++++- .../plugins/panel/gauge/GaugePanelOptions.tsx | 21 ++----------------- .../panel/gauge/ValueMappings.test.tsx | 6 +++--- public/app/plugins/panel/gauge/module.tsx | 6 ++++-- 6 files changed, 31 insertions(+), 27 deletions(-) diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx index 074d3bc267b..40e6bb47f1f 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { BasicGaugeColor, GaugeOptions, PanelOptionsProps } from '@grafana/ui'; import { ThresholdsEditor } from './ThresholdsEditor'; +import { BasicGaugeColor, PanelOptionsProps, GaugeOptions } from '../../types'; const defaultProps = { options: { diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index df999de6c25..ed6778f7c43 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -1,6 +1,8 @@ import React, { PureComponent } from 'react'; import tinycolor, { ColorInput } from 'tinycolor2'; -import { BasicGaugeColor, ColorPicker, GaugeOptions, PanelOptionsProps, Threshold } from '@grafana/ui'; + +import { Threshold, PanelOptionsProps, GaugeOptions, BasicGaugeColor } from '../../types'; +import { ColorPicker } from '../ColorPicker/ColorPicker'; interface State { thresholds: Threshold[]; diff --git a/packages/grafana-ui/src/types/gauge.ts b/packages/grafana-ui/src/types/gauge.ts index de9c7f07328..fe422386d92 100644 --- a/packages/grafana-ui/src/types/gauge.ts +++ b/packages/grafana-ui/src/types/gauge.ts @@ -1,4 +1,4 @@ -import { RangeMap, Threshold, ValueMap } from '@grafana/ui'; +import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from './panel'; export interface GaugeOptions { baseColor: string; @@ -14,3 +14,20 @@ export interface GaugeOptions { thresholds: Threshold[]; unit: string; } + +export const GaugePanelOptionsDefaultProps = { + options: { + baseColor: BasicGaugeColor.Green, + minValue: 0, + maxValue: 100, + prefix: '', + showThresholdMarkers: true, + showThresholdLabels: false, + suffix: '', + decimals: 0, + stat: 'avg', + unit: 'none', + mappings: [], + thresholds: [], + }, +}; diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 951a310d29a..99bff41a0d3 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -1,29 +1,12 @@ import React, { PureComponent } from 'react'; -import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui'; +import { GaugeOptions, GaugePanelOptionsDefaultProps, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import GaugeOptionsEditor from './GaugeOptionsEditor'; -export const defaultProps = { - options: { - baseColor: BasicGaugeColor.Green, - minValue: 0, - maxValue: 100, - prefix: '', - showThresholdMarkers: true, - showThresholdLabels: false, - suffix: '', - decimals: 0, - stat: 'avg', - unit: 'none', - mappings: [], - thresholds: [], - }, -}; - export default class GaugePanelOptions extends PureComponent> { - static defaultProps = defaultProps; + static defaultProps = GaugePanelOptionsDefaultProps; render() { const { onChange, options } = this.props; diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx index 503e3e53617..0cf08d6d3b7 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx +++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx @@ -1,15 +1,15 @@ import React from 'react'; import { shallow } from 'enzyme'; import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui'; +import { GaugePanelOptionsDefaultProps } from '@grafana/ui/src/types/gauge'; import ValueMappings from './ValueMappings'; -import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { onChange: jest.fn(), options: { - ...defaultProps.options, + ...GaugePanelOptionsDefaultProps.options, mappings: [ { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' }, { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' }, @@ -67,7 +67,7 @@ describe('Next id to add', () => { }); it('should default to 1', () => { - const { instance } = setup({ options: { ...defaultProps.options } }); + const { instance } = setup({ options: { ...GaugePanelOptionsDefaultProps.options } }); expect(instance.state.nextIdToAdd).toEqual(1); }); diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 783e4825657..72230eb4ba3 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -1,4 +1,6 @@ -import GaugePanelOptions, { defaultProps } from './GaugePanelOptions'; +import { GaugePanelOptionsDefaultProps } from '@grafana/ui'; + +import GaugePanelOptions from './GaugePanelOptions'; import { GaugePanel } from './GaugePanel'; -export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults }; +export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, GaugePanelOptionsDefaultProps as PanelDefaults }; From d2b71cff3716f19456ea0e0d261f6924f5f9f245 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Fri, 11 Jan 2019 11:25:49 +0100 Subject: [PATCH 7/7] Reverted move of defaults for GaugePanelOptions --- .../ThresholdsEditor.test.tsx | 33 +++------------- .../ThresholdsEditor/ThresholdsEditor.tsx | 38 +++++++++++++------ packages/grafana-ui/src/types/gauge.ts | 19 +--------- .../plugins/panel/gauge/GaugePanelOptions.tsx | 25 ++++++++++-- .../panel/gauge/ValueMappings.test.tsx | 6 +-- public/app/plugins/panel/gauge/module.tsx | 6 +-- 6 files changed, 60 insertions(+), 67 deletions(-) diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx index 40e6bb47f1f..14f84e00f80 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx @@ -1,33 +1,13 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { ThresholdsEditor } from './ThresholdsEditor'; -import { BasicGaugeColor, PanelOptionsProps, GaugeOptions } from '../../types'; - -const defaultProps = { - options: { - baseColor: BasicGaugeColor.Green, - minValue: 0, - maxValue: 100, - prefix: '', - showThresholdMarkers: true, - showThresholdLabels: false, - suffix: '', - decimals: 0, - stat: 'avg', - unit: 'none', - mappings: [], - thresholds: [], - }, -}; +import { ThresholdsEditor, Props } from './ThresholdsEditor'; +import { BasicGaugeColor } from '../../types'; const setup = (propOverrides?: object) => { - const props: PanelOptionsProps = { + const props: Props = { onChange: jest.fn(), - options: { - ...defaultProps.options, - thresholds: [], - }, + thresholds: [], }; Object.assign(props, propOverrides); @@ -46,10 +26,7 @@ describe('Add threshold', () => { it('should add another threshold above a first', () => { const instance = setup({ - options: { - ...defaultProps.options, - thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }], - }, + thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }], }); instance.onAddThreshold(1); diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index ed6778f7c43..54165dfadb5 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -1,28 +1,37 @@ import React, { PureComponent } from 'react'; import tinycolor, { ColorInput } from 'tinycolor2'; -import { Threshold, PanelOptionsProps, GaugeOptions, BasicGaugeColor } from '../../types'; +import { Threshold, BasicGaugeColor } from '../../types'; import { ColorPicker } from '../ColorPicker/ColorPicker'; +export interface Props { + thresholds: Threshold[]; + onChange: (thresholds: Threshold[]) => void; +} + interface State { thresholds: Threshold[]; baseColor: string; } -export class ThresholdsEditor extends PureComponent, State> { - constructor(props: PanelOptionsProps) { +export class ThresholdsEditor extends PureComponent { + constructor(props: Props) { super(props); - this.state = { thresholds: props.options.thresholds, baseColor: props.options.baseColor }; + this.state = { thresholds: props.thresholds, baseColor: BasicGaugeColor.Green }; } onAddThreshold = (index: number) => { - const { maxValue, minValue } = this.props.options; + const maxValue = 100; // hardcoded for now before we add the base threshold + const minValue = 0; // hardcoded for now before we add the base threshold const { thresholds } = this.state; const newThresholds = thresholds.map(threshold => { if (threshold.index >= index) { - threshold = { ...threshold, index: threshold.index + 1 }; + threshold = { + ...threshold, + index: threshold.index + 1, + }; } return threshold; @@ -49,7 +58,14 @@ export class ThresholdsEditor extends PureComponent this.updateGauge() ); @@ -95,7 +111,7 @@ export class ThresholdsEditor extends PureComponent this.props.onChange({ ...this.props.options, baseColor: color }); + onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds); onBlur = () => { this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) })); @@ -103,7 +119,7 @@ export class ThresholdsEditor extends PureComponent { - this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds }); + this.props.onChange(this.state.thresholds); }; sortThresholds = (thresholds: Threshold[]) => { @@ -163,14 +179,14 @@ export class ThresholdsEditor extends PureComponent
this.onAddThreshold(0)} - style={{ height: '100%', backgroundColor: this.props.options.baseColor }} + style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }} />
); } renderBase() { - const { baseColor } = this.props.options; + const baseColor = BasicGaugeColor.Green; return (
diff --git a/packages/grafana-ui/src/types/gauge.ts b/packages/grafana-ui/src/types/gauge.ts index fe422386d92..e05849448f7 100644 --- a/packages/grafana-ui/src/types/gauge.ts +++ b/packages/grafana-ui/src/types/gauge.ts @@ -1,4 +1,4 @@ -import { BasicGaugeColor, RangeMap, Threshold, ValueMap } from './panel'; +import { RangeMap, Threshold, ValueMap } from './panel'; export interface GaugeOptions { baseColor: string; @@ -14,20 +14,3 @@ export interface GaugeOptions { thresholds: Threshold[]; unit: string; } - -export const GaugePanelOptionsDefaultProps = { - options: { - baseColor: BasicGaugeColor.Green, - minValue: 0, - maxValue: 100, - prefix: '', - showThresholdMarkers: true, - showThresholdLabels: false, - suffix: '', - decimals: 0, - stat: 'avg', - unit: 'none', - mappings: [], - thresholds: [], - }, -}; diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx index 99bff41a0d3..e43abad61a3 100644 --- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx +++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx @@ -1,12 +1,31 @@ import React, { PureComponent } from 'react'; -import { GaugeOptions, GaugePanelOptionsDefaultProps, PanelOptionsProps, ThresholdsEditor } from '@grafana/ui'; +import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import GaugeOptionsEditor from './GaugeOptionsEditor'; +export const defaultProps = { + options: { + baseColor: BasicGaugeColor.Green, + minValue: 0, + maxValue: 100, + prefix: '', + showThresholdMarkers: true, + showThresholdLabels: false, + suffix: '', + decimals: 0, + stat: 'avg', + unit: 'none', + mappings: [], + thresholds: [], + }, +}; + export default class GaugePanelOptions extends PureComponent> { - static defaultProps = GaugePanelOptionsDefaultProps; + static defaultProps = defaultProps; + + onThresholdsChanged = (thresholds: Threshold[]) => this.props.onChange({ ...this.props.options, thresholds }); render() { const { onChange, options } = this.props; @@ -15,7 +34,7 @@ export default class GaugePanelOptions extends PureComponent - +
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx index 0cf08d6d3b7..07db4028c68 100644 --- a/public/app/plugins/panel/gauge/ValueMappings.test.tsx +++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { GaugeOptions, MappingType, PanelOptionsProps } from '@grafana/ui'; -import { GaugePanelOptionsDefaultProps } from '@grafana/ui/src/types/gauge'; +import { defaultProps } from 'app/plugins/panel/gauge/GaugePanelOptions'; import ValueMappings from './ValueMappings'; @@ -9,7 +9,7 @@ const setup = (propOverrides?: object) => { const props: PanelOptionsProps = { onChange: jest.fn(), options: { - ...GaugePanelOptionsDefaultProps.options, + ...defaultProps.options, mappings: [ { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' }, { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' }, @@ -67,7 +67,7 @@ describe('Next id to add', () => { }); it('should default to 1', () => { - const { instance } = setup({ options: { ...GaugePanelOptionsDefaultProps.options } }); + const { instance } = setup({ options: { ...defaultProps.options } }); expect(instance.state.nextIdToAdd).toEqual(1); }); diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 72230eb4ba3..783e4825657 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -1,6 +1,4 @@ -import { GaugePanelOptionsDefaultProps } from '@grafana/ui'; - -import GaugePanelOptions from './GaugePanelOptions'; +import GaugePanelOptions, { defaultProps } from './GaugePanelOptions'; import { GaugePanel } from './GaugePanel'; -export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, GaugePanelOptionsDefaultProps as PanelDefaults }; +export { GaugePanel as Panel, GaugePanelOptions as PanelOptions, defaultProps as PanelDefaults };