diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.story.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.story.tsx deleted file mode 100644 index 8bbefbaba66..00000000000 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.story.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { ThresholdsEditor } from './ThresholdsEditor'; -import { ThresholdsMode, ThresholdsConfig } from '@grafana/data'; - -const thresholds: ThresholdsConfig = { - mode: ThresholdsMode.Absolute, - steps: [ - { value: -Infinity, color: 'green' }, - { value: 50, color: 'red' }, - { value: 60, color: 'blue' }, - ], -}; - -export default { - title: 'Pickers and Editors/ThresholdsEditorNew', - component: ThresholdsEditor, - decorators: [withCenteredStory], - parameters: { - docs: {}, - }, -}; - -export const Default = () => { - return ; -}; - -export const WithThreshold = () => { - return ; -}; diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/packages/grafana-ui/src/utils/standardEditors.tsx index 2f3f34fad79..8ddbb3cf528 100644 --- a/packages/grafana-ui/src/utils/standardEditors.tsx +++ b/packages/grafana-ui/src/utils/standardEditors.tsx @@ -10,10 +10,6 @@ import { StandardEditorsRegistryItem, StringFieldConfigSettings, stringOverrideProcessor, - ThresholdsConfig, - ThresholdsFieldConfigSettings, - thresholdsOverrideProcessor, - ThresholdsMode, identityOverrideProcessor, TimeZone, FieldColor, @@ -34,7 +30,6 @@ import { MultiSelectValueEditor, TimeZonePicker, } from '../components'; -import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds'; import { UnitValueEditor } from '../components/OptionsUI/units'; import { DataLinksValueEditor } from '../components/OptionsUI/links'; import { ColorValueEditor } from '../components/OptionsUI/color'; @@ -136,26 +131,6 @@ export const getStandardFieldConfigs = () => { category, }; - const thresholds: FieldConfigPropertyItem = { - id: 'thresholds', - path: 'thresholds', - name: 'Thresholds', - editor: standardEditorsRegistry.get('thresholds').editor as any, - override: standardEditorsRegistry.get('thresholds').editor as any, - process: thresholdsOverrideProcessor, - settings: {}, - defaultValue: { - mode: ThresholdsMode.Absolute, - steps: [ - { value: -Infinity, color: 'green' }, - { value: 80, color: 'red' }, - ], - }, - shouldApply: () => true, - category: ['Thresholds'], - getItemsCount: (value) => (value ? value.steps.length : 0), - }; - const noValue: FieldConfigPropertyItem = { id: 'noValue', path: 'noValue', @@ -204,7 +179,7 @@ export const getStandardFieldConfigs = () => { category, }; - return [unit, min, max, decimals, displayName, color, noValue, thresholds, links]; + return [unit, min, max, decimals, displayName, color, noValue, links]; }; /** @@ -280,13 +255,6 @@ export const getStandardOptionEditors = () => { editor: UnitValueEditor as any, }; - const thresholds: StandardEditorsRegistryItem = { - id: 'thresholds', - name: 'Thresholds', - description: 'Allows defining thresholds', - editor: ThresholdsValueEditor as any, - }; - const color: StandardEditorsRegistryItem = { id: 'color', name: 'Color', @@ -339,7 +307,6 @@ export const getStandardOptionEditors = () => { radio, select, unit, - thresholds, links, statsPicker, strings, diff --git a/public/app/core/components/editors/registry.tsx b/public/app/core/components/editors/registry.tsx index 0917f2fae27..7573387f02f 100644 --- a/public/app/core/components/editors/registry.tsx +++ b/public/app/core/components/editors/registry.tsx @@ -5,11 +5,16 @@ import { FieldType, standardEditorsRegistry, StandardEditorsRegistryItem, + ThresholdsConfig, + ThresholdsFieldConfigSettings, + ThresholdsMode, + thresholdsOverrideProcessor, ValueMapping, ValueMappingFieldConfigSettings, valueMappingsOverrideProcessor, } from '@grafana/data'; import { ValueMappingsValueEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/mappings'; +import { ThresholdsValueEditor } from 'app/features/dimensions/editors/ThresholdsEditor/thresholds'; /** * Returns collection of standard option editors definitions @@ -29,7 +34,14 @@ export const getAllOptionEditors = () => { editor: ValueMappingsValueEditor as any, }; - return [...getStandardOptionEditors(), dashboardPicker, mappings]; + const thresholds: StandardEditorsRegistryItem = { + id: 'thresholds', + name: 'Thresholds', + description: 'Allows defining thresholds', + editor: ThresholdsValueEditor as any, + }; + + return [...getStandardOptionEditors(), dashboardPicker, mappings, thresholds]; }; /** @@ -52,5 +64,25 @@ export const getAllStandardFieldConfigs = () => { getItemsCount: (value?) => (value ? value.length : 0), }; - return [...getStandardFieldConfigs(), mappings]; + const thresholds: FieldConfigPropertyItem = { + id: 'thresholds', + path: 'thresholds', + name: 'Thresholds', + editor: standardEditorsRegistry.get('thresholds').editor as any, + override: standardEditorsRegistry.get('thresholds').editor as any, + process: thresholdsOverrideProcessor, + settings: {}, + defaultValue: { + mode: ThresholdsMode.Absolute, + steps: [ + { value: -Infinity, color: 'green' }, + { value: 80, color: 'red' }, + ], + }, + shouldApply: () => true, + category: ['Thresholds'], + getItemsCount: (value) => (value ? value.steps.length : 0), + }; + + return [...getStandardFieldConfigs(), mappings, thresholds]; }; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx index c95fc83db16..f7f3e910936 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx @@ -16,11 +16,11 @@ import { DashboardModel, PanelModel } from '../../state'; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks'; -import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui'; import { dataOverrideTooltipDescription, overrideRuleTooltipDescription } from './state/getOptionOverrides'; +import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry'; -standardEditorsRegistry.setInit(getStandardOptionEditors); -standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs); +standardEditorsRegistry.setInit(getAllOptionEditors); +standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs); const mockStore = configureMockStore(); const OptionsPaneSelector = selectors.components.PanelEditor.OptionsPane; @@ -126,6 +126,7 @@ describe('OptionsPaneOptions', () => { expect(screen.getByRole('heading', { name: /Panel options/ })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /Standard options/ })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: /Value mappings/ })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /Thresholds/ })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /TestPanel/ })).toBeInTheDocument(); }); diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx similarity index 98% rename from packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx rename to public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx index 9029692587c..165a135f00a 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx +++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx @@ -2,8 +2,7 @@ import React, { ChangeEvent } from 'react'; import { mount } from 'enzyme'; import { createTheme, ThresholdsMode } from '@grafana/data'; import { ThresholdsEditor, Props, thresholdsWithoutKey } from './ThresholdsEditor'; -import { colors } from '../../utils'; -import { mockThemeContext } from '../../themes/ThemeContext'; +import { mockThemeContext, colors } from '@grafana/ui'; const setup = (propOverrides?: Partial) => { const props: Props = { diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx similarity index 95% rename from packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx rename to public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx index cbb515a5f3d..62cb68ca784 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx +++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx @@ -8,16 +8,18 @@ import { SelectableValue, GrafanaTheme, } from '@grafana/data'; -import { colors } from '../../utils'; -import { ThemeContext } from '../../themes/ThemeContext'; -import { Input } from '../Input/Input'; -import { ColorPicker } from '../ColorPicker/ColorPicker'; -import { stylesFactory } from '../../themes'; -import { Icon } from '../Icon/Icon'; -import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup'; -import { Button } from '../Button'; -import { Label } from '../Forms/Label'; import { isNumber } from 'lodash'; +import { + Input, + colors, + ColorPicker, + Icon, + ThemeContext, + Button, + Label, + RadioButtonGroup, + stylesFactory, +} from '@grafana/ui'; const modes: Array> = [ { value: ThresholdsMode.Absolute, label: 'Absolute', description: 'Pick thresholds based on the absolute values' }, diff --git a/packages/grafana-ui/src/components/OptionsUI/thresholds.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx similarity index 91% rename from packages/grafana-ui/src/components/OptionsUI/thresholds.tsx rename to public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx index 9b89fb8ff42..9900698a6f9 100644 --- a/packages/grafana-ui/src/components/OptionsUI/thresholds.tsx +++ b/public/app/features/dimensions/editors/ThresholdsEditor/thresholds.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { FieldConfigEditorProps, ThresholdsConfig, ThresholdsMode, ThresholdsFieldConfigSettings } from '@grafana/data'; -import { ThresholdsEditor } from '../ThresholdsEditorNew/ThresholdsEditor'; +import { ThresholdsEditor } from './ThresholdsEditor'; export class ThresholdsValueEditor extends React.PureComponent< FieldConfigEditorProps