Transformations: Add includeByName to organize fields transformation (#77797)

* add includeByName inclusion list to transform, update ui to work with either filtering method

packages/grafana-data/src/transformations/transformers/organize.test.ts

@@ -70,6 +70,33 @@ describe('OrganizeFields Transformer', () => {
         ]);
       });
     });
+
+    it('should order and filter (inclusion) according to config', async () => {
+      const cfg: DataTransformerConfig<OrganizeFieldsTransformerOptions> = {
+        id: DataTransformerID.organize,
+        options: {
+          excludeByName: {},
+          indexByName: {},
+          includeByName: {
+            time: true,
+          },
+          renameByName: {},
+        },
+      };
+
+      await expect(transformDataFrame([cfg], [data])).toEmitValuesWith((received) => {
+        const data = received[0];
+        const organized = data[0];
+        expect(organized.fields).toEqual([
+          {
+            config: {},
+            name: 'time',
+            type: FieldType.time,
+            values: [3000, 4000, 5000, 6000],
+          },
+        ]);
+      });
+    });
   });
 
   describe('when inconsistent data is received', () => {

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

@@ -9,6 +9,7 @@ export interface OrganizeFieldsTransformerOptions
   extends OrderFieldsTransformerOptions,
     RenameFieldsTransformerOptions {
   excludeByName: Record<string, boolean>;
+  includeByName?: Record<string, boolean>;
 }
 
 export const organizeFieldsTransformer: DataTransformerInfo<OrganizeFieldsTransformerOptions> = {
@@ -19,6 +20,7 @@ export const organizeFieldsTransformer: DataTransformerInfo<OrganizeFieldsTransf
     excludeByName: {},
     indexByName: {},
     renameByName: {},
+    includeByName: {},
   },
   isApplicable: (data: DataFrame[]) => {
     return data.length > 1
@@ -33,6 +35,7 @@ export const organizeFieldsTransformer: DataTransformerInfo<OrganizeFieldsTransf
     source.pipe(
       filterFieldsByNameTransformer.operator(
         {
+          include: options.includeByName ? { names: mapToExcludeArray(options.includeByName) } : undefined,
           exclude: { names: mapToExcludeArray(options.excludeByName) },
         },
         ctx

public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx

@@ -20,10 +20,11 @@ import { useAllFieldNamesFromDataFrames } from '../utils';
 interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps<OrganizeFieldsTransformerOptions> {}
 
 const OrganizeFieldsTransformerEditor = ({ options, input, onChange }: OrganizeFieldsTransformerEditorProps) => {
-  const { indexByName, excludeByName, renameByName } = options;
+  const { indexByName, excludeByName, renameByName, includeByName } = options;
 
   const fieldNames = useAllFieldNamesFromDataFrames(input);
   const orderedFieldNames = useMemo(() => orderFieldNamesByIndex(fieldNames, indexByName), [fieldNames, indexByName]);
+  const filterType = includeByName && Object.keys(includeByName).length > 0 ? 'include' : 'exclude';
 
   const onToggleVisibility = useCallback(
     (field: string, shouldExclude: boolean) => {
@@ -38,6 +39,20 @@ const OrganizeFieldsTransformerEditor = ({ options, input, onChange }: OrganizeF
     [onChange, options, excludeByName]
   );
 
+  const onToggleVisibilityInclude = useCallback(
+    (field: string, shouldInclude: boolean) => {
+      const pendingState = {
+        ...options,
+        includeByName: {
+          ...includeByName,
+          [field]: !shouldInclude,
+        },
+      };
+      onChange(pendingState);
+    },
+    [onChange, options, includeByName]
+  );
+
   const onDragEnd = useCallback(
     (result: DropResult) => {
       if (!result || !result.destination) {
@@ -88,14 +103,18 @@ const OrganizeFieldsTransformerEditor = ({ options, input, onChange }: OrganizeF
         {(provided) => (
           <div ref={provided.innerRef} {...provided.droppableProps}>
             {orderedFieldNames.map((fieldName, index) => {
+              const isIncludeFilter = includeByName && fieldName in includeByName ? includeByName[fieldName] : false;
+              const isVisible = filterType === 'include' ? isIncludeFilter : !excludeByName[fieldName];
+              const onToggleFunction = filterType === 'include' ? onToggleVisibilityInclude : onToggleVisibility;
+
               return (
                 <DraggableFieldName
                   fieldName={fieldName}
                   renamedFieldName={renameByName[fieldName]}
                   index={index}
-                  onToggleVisibility={onToggleVisibility}
+                  onToggleVisibility={onToggleFunction}
                   onRenameField={onRenameField}
-                  visible={!excludeByName[fieldName]}
+                  visible={isVisible}
                   key={fieldName}
                 />
               );