diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx deleted file mode 100644 index 3a2e78b9389..00000000000 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useState } from 'react'; -import { ValueMappingsEditor } from './ValueMappingsEditor'; -import { MappingType, ValueMapping } from '@grafana/data'; - -export default { - title: 'Pickers and Editors/ValueMappingsEditor', - component: ValueMappingsEditor, -}; - -export function Example() { - const [mappings, setMappings] = useState([ - { - type: MappingType.ValueToText, - options: { - LowLow: { color: 'red' }, - Low: { text: 'not good', color: 'orange' }, - Ok: { text: 'all good', color: 'green' }, - NoColor: { text: 'Unknown' }, - }, - }, - { - type: MappingType.RangeToText, - options: { - from: 10, - to: 15, - result: { - index: 5, - text: 'bad', - color: 'red', - }, - }, - }, - { - type: MappingType.RegexToText, - options: { - pattern: '(.*).example.com', - result: { - index: 5, - text: '$1', - color: 'green', - }, - }, - }, - ]); - - return ; -} diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/packages/grafana-ui/src/utils/standardEditors.tsx index b5570c4a587..2f3f34fad79 100644 --- a/packages/grafana-ui/src/utils/standardEditors.tsx +++ b/packages/grafana-ui/src/utils/standardEditors.tsx @@ -13,9 +13,6 @@ import { ThresholdsConfig, ThresholdsFieldConfigSettings, thresholdsOverrideProcessor, - ValueMapping, - ValueMappingFieldConfigSettings, - valueMappingsOverrideProcessor, ThresholdsMode, identityOverrideProcessor, TimeZone, @@ -37,7 +34,6 @@ import { MultiSelectValueEditor, TimeZonePicker, } from '../components'; -import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings'; import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds'; import { UnitValueEditor } from '../components/OptionsUI/units'; import { DataLinksValueEditor } from '../components/OptionsUI/links'; @@ -160,22 +156,6 @@ export const getStandardFieldConfigs = () => { getItemsCount: (value) => (value ? value.steps.length : 0), }; - const mappings: FieldConfigPropertyItem = { - id: 'mappings', - path: 'mappings', - name: 'Value mappings', - description: 'Modify the display text based on input value', - - editor: standardEditorsRegistry.get('mappings').editor as any, - override: standardEditorsRegistry.get('mappings').editor as any, - process: valueMappingsOverrideProcessor, - settings: {}, - defaultValue: [], - shouldApply: (x) => x.type !== FieldType.time, - category: ['Value mappings'], - getItemsCount: (value?) => (value ? value.length : 0), - }; - const noValue: FieldConfigPropertyItem = { id: 'noValue', path: 'noValue', @@ -224,7 +204,7 @@ export const getStandardFieldConfigs = () => { category, }; - return [unit, min, max, decimals, displayName, color, noValue, thresholds, mappings, links]; + return [unit, min, max, decimals, displayName, color, noValue, thresholds, links]; }; /** @@ -307,13 +287,6 @@ export const getStandardOptionEditors = () => { editor: ThresholdsValueEditor as any, }; - const mappings: StandardEditorsRegistryItem = { - id: 'mappings', - name: 'Mappings', - description: 'Allows defining value mappings', - editor: ValueMappingsValueEditor as any, - }; - const color: StandardEditorsRegistryItem = { id: 'color', name: 'Color', @@ -366,7 +339,6 @@ export const getStandardOptionEditors = () => { radio, select, unit, - mappings, thresholds, links, statsPicker, diff --git a/public/app/app.ts b/public/app/app.ts index e0a6d20d356..7f5bcb17836 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -38,7 +38,7 @@ import { Echo } from './core/services/echo/Echo'; import { reportPerformance } from './core/services/echo/EchoSrv'; import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend'; import 'app/features/all'; -import { getScrollbarWidth, getStandardFieldConfigs } from '@grafana/ui'; +import { getScrollbarWidth } from '@grafana/ui'; import { variableAdapters } from './features/variables/adapters'; import { initDevFeatures } from './dev'; import { getStandardTransformers } from 'app/core/utils/standardTransformers'; @@ -56,7 +56,7 @@ import { contextSrv } from './core/services/context_srv'; import { GAEchoBackend } from './core/services/echo/backends/analytics/GABackend'; import { ApplicationInsightsBackend } from './core/services/echo/backends/analytics/ApplicationInsightsBackend'; import { RudderstackBackend } from './core/services/echo/backends/analytics/RudderstackBackend'; -import { getAllOptionEditors } from './core/components/editors/registry'; +import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/editors/registry'; import { backendSrv } from './core/services/backend_srv'; import { setPanelRenderer } from '@grafana/runtime/src/components/PanelRenderer'; import { PanelDataErrorView } from './features/panel/components/PanelDataErrorView'; @@ -112,7 +112,7 @@ export class GrafanaApp { initExtensions(); standardEditorsRegistry.setInit(getAllOptionEditors); - standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs); + standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs); standardTransformersRegistry.setInit(getStandardTransformers); variableAdapters.setInit(() => [ createQueryVariableAdapter(), diff --git a/public/app/core/components/editors/registry.tsx b/public/app/core/components/editors/registry.tsx index 8c51fb4438c..0917f2fae27 100644 --- a/public/app/core/components/editors/registry.tsx +++ b/public/app/core/components/editors/registry.tsx @@ -1,6 +1,15 @@ import { DashboardPicker, DashboardPickerOptions } from './DashboardPicker'; -import { getStandardOptionEditors } from '@grafana/ui'; -import { StandardEditorsRegistryItem } from '@grafana/data'; +import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui'; +import { + FieldConfigPropertyItem, + FieldType, + standardEditorsRegistry, + StandardEditorsRegistryItem, + ValueMapping, + ValueMappingFieldConfigSettings, + valueMappingsOverrideProcessor, +} from '@grafana/data'; +import { ValueMappingsValueEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/mappings'; /** * Returns collection of standard option editors definitions @@ -12,5 +21,36 @@ export const getAllOptionEditors = () => { description: 'Select dashboard', editor: DashboardPicker as any, }; - return [...getStandardOptionEditors(), dashboardPicker]; + + const mappings: StandardEditorsRegistryItem = { + id: 'mappings', + name: 'Mappings', + description: 'Allows defining value mappings', + editor: ValueMappingsValueEditor as any, + }; + + return [...getStandardOptionEditors(), dashboardPicker, mappings]; +}; + +/** + * Returns collection of common field config properties definitions + */ +export const getAllStandardFieldConfigs = () => { + const mappings: FieldConfigPropertyItem = { + id: 'mappings', + path: 'mappings', + name: 'Value mappings', + description: 'Modify the display text based on input value', + + editor: standardEditorsRegistry.get('mappings').editor as any, + override: standardEditorsRegistry.get('mappings').editor as any, + process: valueMappingsOverrideProcessor, + settings: {}, + defaultValue: [], + shouldApply: (x) => x.type !== FieldType.time, + category: ['Value mappings'], + getItemsCount: (value?) => (value ? value.length : 0), + }; + + return [...getStandardFieldConfigs(), mappings]; }; diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts index 5eda424eb07..86380edcf57 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.ts +++ b/public/app/features/dashboard/state/DashboardMigrator.ts @@ -44,7 +44,7 @@ import { VariableHide } from '../../variables/types'; import { config } from 'app/core/config'; import { plugin as statPanelPlugin } from 'app/plugins/panel/stat/module'; import { plugin as gaugePanelPlugin } from 'app/plugins/panel/gauge/module'; -import { AxisPlacement, getStandardFieldConfigs, getStandardOptionEditors, GraphFieldConfig } from '@grafana/ui'; +import { AxisPlacement, GraphFieldConfig } from '@grafana/ui'; import { getDataSourceSrv } from '@grafana/runtime'; import { labelsToFieldsTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/labelsToFields'; import { mergeTransformer } from '../../../../../packages/grafana-data/src/transformations/transformers/merge'; @@ -54,9 +54,10 @@ import { migrateMultipleStatsMetricsQuery, } from 'app/plugins/datasource/cloudwatch/migrations'; import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from 'app/plugins/datasource/cloudwatch/types'; +import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/editors/registry'; -standardEditorsRegistry.setInit(getStandardOptionEditors); -standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs); +standardEditorsRegistry.setInit(getAllOptionEditors); +standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs); type PanelSchemeUpgradeHandler = (panel: PanelModel) => PanelModel; export class DashboardMigrator { diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx similarity index 92% rename from packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx rename to public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx index 836df23696a..a95bf845972 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx +++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx @@ -1,15 +1,8 @@ import React, { useCallback, useEffect, useRef } from 'react'; -import { Input } from '../Input/Input'; import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data'; import { Draggable } from 'react-beautiful-dnd'; -import { Icon } from '../Icon/Icon'; -import { ColorPicker } from '../ColorPicker/ColorPicker'; -import { LinkButton } from '../Button'; -import { HorizontalGroup } from '../Layout/Layout'; -import { IconButton } from '../IconButton/IconButton'; -import { useStyles2 } from '../../themes/ThemeContext'; import { css } from '@emotion/css'; -import { Select } from '../Select/Select'; +import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, LinkButton, Input } from '@grafana/ui'; export interface ValueMappingEditRowModel { type: MappingType; @@ -30,7 +23,7 @@ interface Props { onDuplicate: (index: number) => void; } -export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDuplicate: onDupliate }: Props) { +export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDuplicate: onDuplicate }: Props) { const { key, result } = mapping; const styles = useStyles2(getStyles); const inputRef = useRef(null); @@ -192,7 +185,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl - onDupliate(index)} data-testid="duplicate-value-mapping" /> + onDuplicate(index)} data-testid="duplicate-value-mapping" /> onRemove(index)} data-testid="remove-value-mapping" /> diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.test.tsx similarity index 100% rename from packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx rename to public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.test.tsx diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx similarity index 91% rename from packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx rename to public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx index b5dd3ff27d2..e8b6dacbc44 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx +++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx @@ -1,13 +1,8 @@ import React, { useCallback, useMemo, useState } from 'react'; import { GrafanaTheme2, MappingType, ValueMapping } from '@grafana/data'; -import { Button } from '../Button/Button'; -import { Modal } from '../Modal/Modal'; -import { useStyles2 } from '../../themes'; import { css } from '@emotion/css'; import { buildEditRowModels, editModelToSaveModel, ValueMappingsEditorModal } from './ValueMappingsEditorModal'; -import { Icon } from '../Icon/Icon'; -import { VerticalGroup } from '../Layout/Layout'; -import { ColorPicker } from '../ColorPicker/ColorPicker'; +import { useStyles2, VerticalGroup, Icon, ColorPicker, Button, Modal } from '@grafana/ui'; export interface Props { value: ValueMapping[]; diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx similarity index 98% rename from packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx rename to public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx index 9c961ded1ad..e5185c4da07 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx +++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx @@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react'; import { ValueMappingsEditorModal, Props } from './ValueMappingsEditorModal'; import { MappingType } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { selectOptionInTest } from '../Select/test-utils'; +import { selectOptionInTest } from '@grafana/ui'; const setup = (spy?: any, propOverrides?: object) => { const props: Props = { diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditorModal.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx similarity index 97% rename from packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditorModal.tsx rename to public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx index 1951015bb67..3fbd75a5db4 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditorModal.tsx +++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx @@ -1,12 +1,9 @@ import React, { useEffect, useState } from 'react'; import { GrafanaTheme2, MappingType, SelectableValue, SpecialValueMatch, ValueMapping } from '@grafana/data'; -import { Button } from '../Button/Button'; -import { Modal } from '../Modal/Modal'; -import { useStyles2 } from '../../themes'; import { ValueMappingEditRow, ValueMappingEditRowModel } from './ValueMappingEditRow'; import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd'; import { css } from '@emotion/css'; -import { ValuePicker } from '../ValuePicker/ValuePicker'; +import { useStyles2, Modal, ValuePicker, Button } from '@grafana/ui'; export interface Props { value: ValueMapping[]; diff --git a/packages/grafana-ui/src/components/OptionsUI/mappings.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/mappings.tsx similarity index 100% rename from packages/grafana-ui/src/components/OptionsUI/mappings.tsx rename to public/app/features/dimensions/editors/ValueMappingsEditor/mappings.tsx