Transforms: Add join by fields (#61322)

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import {
   DataTransformerID,
@@ -6,11 +6,10 @@ import {
   standardTransformers,
   TransformerRegistryItem,
   TransformerUIProps,
+  DataFrame,
 } from '@grafana/data';
 import { JoinByFieldOptions, JoinMode } from '@grafana/data/src/transformations/transformers/joinByField';
-import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
-
-import { useAllFieldNamesFromDataFrames } from '../utils';
+import { Select, InlineFieldRow, InlineField, Checkbox, HorizontalGroup } from '@grafana/ui';
 
 const modes = [
   { value: JoinMode.outer, label: 'OUTER', description: 'Keep all rows from any table with a value' },
@@ -18,14 +17,44 @@ const modes = [
 ];
 
 export function SeriesToFieldsTransformerEditor({ input, options, onChange }: TransformerUIProps<JoinByFieldOptions>) {
-  const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
+  useEffect(() => {
+    if (options.fields && !Object.keys(options.fields).length && input.length && input[0].refId) {
+      options.fields[input[0].refId] = input[0].fields[0].name;
+      onChange({ ...options });
+    }
+  }, [onChange, options, input]);
+
+  const onToggleDataFrame = useCallback(
+    (dataFrame: DataFrame) => {
+      if (!dataFrame.refId) {
+        return;
+      }
+
+      if (options.fields) {
+        if (dataFrame.refId in options.fields) {
+          if (Object.keys(options.fields).length === 1) {
+            return;
+          }
+
+          delete options.fields[dataFrame.refId];
+        } else {
+          options.fields[dataFrame.refId] = dataFrame.fields[0].name;
+        }
+      }
+
+      onChange({ ...options });
+    },
+    [onChange, options]
+  );
 
   const onSelectField = useCallback(
-    (value: SelectableValue<string>) => {
-      onChange({
-        ...options,
-        byField: value?.value,
-      });
+    (queryRefId: string | undefined, fieldName: SelectableValue<string>) => {
+      if (queryRefId && fieldName.value) {
+        onChange({
+          ...options,
+          fields: { ...options.fields, [queryRefId]: fieldName.value },
+        });
+      }
     },
     [onChange, options]
   );
@@ -34,7 +63,7 @@ export function SeriesToFieldsTransformerEditor({ input, options, onChange }: Tr
     (value: SelectableValue<JoinMode>) => {
       onChange({
         ...options,
-        mode: value?.value,
+        mode: value?.value || JoinMode.outer,
       });
     },
     [onChange, options]
@@ -44,20 +73,31 @@ export function SeriesToFieldsTransformerEditor({ input, options, onChange }: Tr
     <>
       <InlineFieldRow>
         <InlineField label="Mode" labelWidth={8} grow>
-          <Select options={modes} value={options.mode ?? JoinMode.outer} onChange={onSetMode} />
-        </InlineField>
-      </InlineFieldRow>
-      <InlineFieldRow>
-        <InlineField label="Field" labelWidth={8} grow>
-          <Select
-            options={fieldNames}
-            value={options.byField}
-            onChange={onSelectField}
-            placeholder="time"
-            isClearable
-          />
+          <Select options={modes} value={options.mode} onChange={onSetMode} />
         </InlineField>
       </InlineFieldRow>
+      {input.map((dataFrame) => (
+        <div className="gf-form-inline" key={dataFrame.refId}>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label width-8">
+              {dataFrame.refId} ({dataFrame.name})
+            </div>
+
+            <HorizontalGroup>
+              <Checkbox
+                value={!!dataFrame.refId && options.fields && dataFrame.refId in options.fields}
+                onChange={() => onToggleDataFrame(dataFrame)}
+              />
+
+              <Select
+                options={dataFrame.fields.map((field) => ({ label: field.name, value: field.name }))}
+                value={dataFrame.refId ? (options.fields || {})[dataFrame.refId] : dataFrame.fields[0].name}
+                onChange={(fieldName) => onSelectField(dataFrame.refId, fieldName)}
+              />
+            </HorizontalGroup>
+          </div>
+        </div>
+      ))}
     </>
   );
 }