TransformersUI: move transformer ui to grafana app (#24360)

package.json

@@ -98,6 +98,7 @@
     "@types/prismjs": "1.16.0",
     "@types/puppeteer-core": "2.0.0",
     "@types/react": "16.8.16",
+    "@types/react-beautiful-dnd": "12.1.2",
     "@types/react-dom": "16.8.4",
     "@types/react-grid-layout": "0.16.7",
     "@types/react-redux": "7.1.7",

packages/grafana-data/src/transformations/index.ts

@@ -3,18 +3,6 @@ export * from './transformers/ids';
 export * from './matchers';
 export { standardTransformers } from './transformers';
 export * from './fieldReducer';
-export { FilterFieldsByNameTransformerOptions } from './transformers/filterByName';
-export { FilterFramesByRefIdTransformerOptions } from './transformers/filterByRefId';
-export { SeriesToColumnsOptions } from './transformers/seriesToColumns';
-export { ReduceTransformerOptions } from './transformers/reduce';
-export { LabelsToFieldsOptions } from './transformers/labelsToFields';
-export {
-  CalculateFieldTransformerOptions,
-  CalculateFieldMode,
-  getResultFieldNameForCalculateFieldTransformerOptions,
-} from './transformers/calculateField';
-export { OrganizeFieldsTransformerOptions } from './transformers/organize';
-export { createOrderFieldsComparer } from './transformers/order';
 export { transformDataFrame } from './transformDataFrame';
 export {
   TransformerRegistyItem,

packages/grafana-data/src/transformations/transformers/calculateField.ts

@@ -16,13 +16,13 @@ export enum CalculateFieldMode {
   BinaryOperation = 'binary',
 }
 
-interface ReduceOptions {
+export interface ReduceOptions {
   include?: string; // Assume all fields
   reducer: ReducerID;
   nullValueMode?: NullValueMode;
 }
 
-interface BinaryOptions {
+export interface BinaryOptions {
   left: string;
   operator: BinaryOperationID;
   right: string;
@@ -99,7 +99,7 @@ export const calculateFieldTransformer: DataTransformerInfo<CalculateFieldTransf
       }
 
       const field = {
-        name: getResultFieldNameForCalculateFieldTransformerOptions(options),
+        name: getNameFromOptions(options),
         type: FieldType.number,
         config: {},
         values,
@@ -229,7 +229,7 @@ function findConsistentTimeFieldName(data: DataFrame[]): string | undefined {
   return name;
 }
 
-export function getResultFieldNameForCalculateFieldTransformerOptions(options: CalculateFieldTransformerOptions) {
+export function getNameFromOptions(options: CalculateFieldTransformerOptions) {
   if (options.alias?.length) {
     return options.alias;
   }

packages/grafana-ui/src/components/index.ts

@@ -29,6 +29,7 @@ export { TagsInput } from './TagsInput/TagsInput';
 export { Pagination } from './Pagination/Pagination';
 export { Tag } from './Tags/Tag';
 export { TagList } from './Tags/TagList';
+export { FilterPill } from './FilterPill/FilterPill';
 
 export { ConfirmModal } from './ConfirmModal/ConfirmModal';
 export { QueryField } from './QueryField/QueryField';

packages/grafana-ui/src/index.ts

@@ -11,5 +11,3 @@ export * from './slate-plugins';
 
 // Exposes standard editors for registries of optionsUi config and panel options UI
 export { getStandardFieldConfigs, getStandardOptionEditors } from './utils//standardEditors';
-// Exposes standard transformers for registry of Transformations
-export { getStandardTransformers } from './utils/standardTransformers';

public/app/app.ts

@@ -47,9 +47,10 @@ import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
-import { getStandardFieldConfigs, getStandardOptionEditors, getStandardTransformers } from '@grafana/ui';
+import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
 import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
 import { initDevFeatures } from './dev';
+import { getStandardTransformers } from 'app/core/utils/standardTransformers';
 
 // add move to lodash for backward compatabiltiy
 // @ts-ignore

public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent } from 'react';
+
 import {
-  CalculateFieldTransformerOptions,
   DataTransformerID,
   FieldType,
   KeyValue,
@@ -8,35 +8,22 @@ import {
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
-  NullValueMode,
   BinaryOperationID,
   SelectableValue,
   binaryOperators,
-  CalculateFieldMode,
-  getResultFieldNameForCalculateFieldTransformerOptions,
   getFieldTitle,
 } from '@grafana/data';
-import { StatsPicker } from '../StatsPicker/StatsPicker';
-import { Switch } from '../Forms/Legacy/Switch/Switch';
-import { Input } from '../Input/Input';
-import { FilterPill } from '../FilterPill/FilterPill';
-import { HorizontalGroup } from '../Layout/Layout';
-import { Select } from '../Select/Select';
+import { Select, StatsPicker, LegacyForms, Input, FilterPill, HorizontalGroup } from '@grafana/ui';
+import {
+  CalculateFieldTransformerOptions,
+  CalculateFieldMode,
+  getNameFromOptions,
+  ReduceOptions,
+  BinaryOptions,
+} from '@grafana/data/src/transformations/transformers/calculateField';
+
 import defaults from 'lodash/defaults';
 
-// Copied from @grafana/data ;(  not sure how to best support his
-interface ReduceOptions {
-  include?: string; // Assume all fields
-  reducer: ReducerID;
-  nullValueMode?: NullValueMode;
-}
-
-interface BinaryOptions {
-  left: string;
-  operator: BinaryOperationID;
-  right: string;
-}
-
 interface CalculateFieldTransformerEditorProps extends TransformerUIProps<CalculateFieldTransformerOptions> {}
 
 interface CalculateFieldTransformerEditorState {
@@ -342,14 +329,14 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
             <Input
               className="width-18"
               value={options.alias ?? ''}
-              placeholder={getResultFieldNameForCalculateFieldTransformerOptions(options)}
+              placeholder={getNameFromOptions(options)}
               onChange={this.onAliasChanged}
             />
           </div>
         </div>
         <div className="gf-form-inline">
           <div className="gf-form">
-            <Switch
+            <LegacyForms.Switch
               label="Replace all fields"
               labelClass="width-8"
               checked={!!options.replaceFields}

public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 import {
   DataTransformerID,
-  FilterFieldsByNameTransformerOptions,
   KeyValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
   getFieldTitle,
 } from '@grafana/data';
-import { HorizontalGroup } from '../Layout/Layout';
-import { Input } from '../Input/Input';
-import { FilterPill } from '../FilterPill/FilterPill';
-import { Field } from '../Forms/Field';
+import { Field, Input, FilterPill, HorizontalGroup } from '@grafana/ui';
 import { css } from 'emotion';
+import { FilterFieldsByNameTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByName';
 
 interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
 

public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {
   DataTransformerID,
-  FilterFramesByRefIdTransformerOptions,
   KeyValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
 } from '@grafana/data';
-import { HorizontalGroup } from '../Layout/Layout';
-import { FilterPill } from '../FilterPill/FilterPill';
+import { HorizontalGroup, FilterPill } from '@grafana/ui';
+
+import { FilterFramesByRefIdTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByRefId';
 
 interface FilterByRefIdTransformerEditorProps extends TransformerUIProps<FilterFramesByRefIdTransformerOptions> {}
 

public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import {
-  DataTransformerID,
-  standardTransformers,
-  TransformerRegistyItem,
-  TransformerUIProps,
-  LabelsToFieldsOptions,
-} from '@grafana/data';
+import { DataTransformerID, standardTransformers, TransformerRegistyItem, TransformerUIProps } from '@grafana/data';
+
+import { LabelsToFieldsOptions } from '@grafana/data/src/transformations/transformers/labelsToFields';
 
 export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<LabelsToFieldsOptions>> = ({
   input,

public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx

@@ -2,19 +2,18 @@ import React, { useCallback, useMemo } from 'react';
 import { css, cx } from 'emotion';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 import {
-  createOrderFieldsComparer,
   DataFrame,
   DataTransformerID,
   GrafanaTheme,
-  OrganizeFieldsTransformerOptions,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
   getFieldTitle,
 } from '@grafana/data';
-import { stylesFactory, useTheme } from '../../themes';
-import { Input } from '../Input/Input';
-import { IconButton } from '../IconButton/IconButton';
+import { stylesFactory, useTheme, Input, IconButton } from '@grafana/ui';
+
+import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
+import { createOrderFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
 
 interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps<OrganizeFieldsTransformerOptions> {}
 

public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { StatsPicker } from '../StatsPicker/StatsPicker';
+import { StatsPicker } from '@grafana/ui';
 import {
-  ReduceTransformerOptions,
   DataTransformerID,
   ReducerID,
   standardTransformers,
@@ -9,6 +8,8 @@ import {
   TransformerUIProps,
 } from '@grafana/data';
 
+import { ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
+
 // TODO:  Minimal implementation, needs some <3
 export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransformerOptions>> = ({
   options,

public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx

@@ -2,13 +2,14 @@ import React, { useCallback, useMemo } from 'react';
 import {
   DataTransformerID,
   SelectableValue,
-  SeriesToColumnsOptions,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
 } from '@grafana/data';
 import { getAllFieldNamesFromDataFrames } from './OrganizeFieldsTransformerEditor';
-import { Select } from '../Select/Select';
+import { Select } from '@grafana/ui';
+
+import { SeriesToColumnsOptions } from '@grafana/data/src/transformations/transformers/seriesToColumns';
 
 export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<SeriesToColumnsOptions>> = ({
   input,