Transformers: Support inner vs outer join (#53913)

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

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+
+import {
+  DataTransformerID,
+  SelectableValue,
+  standardTransformers,
+  TransformerRegistryItem,
+  TransformerUIProps,
+} from '@grafana/data';
+import { JoinByFieldOptions, JoinMode } from '@grafana/data/src/transformations/transformers/joinByField';
+import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
+
+import { useAllFieldNamesFromDataFrames } from '../utils';
+
+const modes = [
+  { value: JoinMode.outer, label: 'OUTER', description: 'Keep all rows from any table with a value' },
+  { value: JoinMode.inner, label: 'INNER', description: 'Drop rows that do not match a value in all tables' },
+];
+
+export function SeriesToFieldsTransformerEditor({ input, options, onChange }: TransformerUIProps<JoinByFieldOptions>) {
+  const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
+
+  const onSelectField = useCallback(
+    (value: SelectableValue<string>) => {
+      onChange({
+        ...options,
+        byField: value?.value,
+      });
+    },
+    [onChange, options]
+  );
+
+  const onSetMode = useCallback(
+    (value: SelectableValue<JoinMode>) => {
+      onChange({
+        ...options,
+        mode: value?.value,
+      });
+    },
+    [onChange, options]
+  );
+
+  return (
+    <>
+      <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
+          />
+        </InlineField>
+      </InlineFieldRow>
+    </>
+  );
+}
+
+export const joinByFieldTransformerRegistryItem: TransformerRegistryItem<JoinByFieldOptions> = {
+  id: DataTransformerID.joinByField,
+  aliasIds: [DataTransformerID.seriesToColumns],
+  editor: SeriesToFieldsTransformerEditor,
+  transformation: standardTransformers.joinByFieldTransformer,
+  name: standardTransformers.joinByFieldTransformer.name,
+  description: standardTransformers.joinByFieldTransformer.description,
+};

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

@@ -1,49 +0,0 @@
-import React, { useCallback } from 'react';
-
-import {
-  DataTransformerID,
-  SelectableValue,
-  standardTransformers,
-  TransformerRegistryItem,
-  TransformerUIProps,
-} from '@grafana/data';
-import { SeriesToColumnsOptions } from '@grafana/data/src/transformations/transformers/seriesToColumns';
-import { Select } from '@grafana/ui';
-
-import { useAllFieldNamesFromDataFrames } from '../utils';
-
-export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<SeriesToColumnsOptions>> = ({
-  input,
-  options,
-  onChange,
-}) => {
-  const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
-
-  const onSelectField = useCallback(
-    (value: SelectableValue<string>) => {
-      onChange({
-        ...options,
-        byField: value?.value,
-      });
-    },
-    [onChange, options]
-  );
-
-  return (
-    <div className="gf-form-inline">
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label width-8">Field name</div>
-        <Select options={fieldNames} value={options.byField} onChange={onSelectField} isClearable />
-      </div>
-    </div>
-  );
-};
-
-export const seriesToFieldsTransformerRegistryItem: TransformerRegistryItem<SeriesToColumnsOptions> = {
-  id: DataTransformerID.seriesToColumns,
-  editor: SeriesToFieldsTransformerEditor,
-  transformation: standardTransformers.seriesToColumnsTransformer,
-  name: 'Outer join',
-  description:
-    'Joins many time series/tables by a field. This can be used to outer join multiple time series on the _time_ field to show many time series in one table.',
-};

public/app/features/transformers/standardTransformers.ts

@@ -11,13 +11,13 @@ import { filterFramesByRefIdTransformRegistryItem } from './editors/FilterByRefI
 import { groupByTransformRegistryItem } from './editors/GroupByTransformerEditor';
 import { groupingToMatrixTransformRegistryItem } from './editors/GroupingToMatrixTransformerEditor';
 import { histogramTransformRegistryItem } from './editors/HistogramTransformerEditor';
+import { joinByFieldTransformerRegistryItem } from './editors/JoinByFieldTransformerEditor';
 import { labelsToFieldsTransformerRegistryItem } from './editors/LabelsToFieldsTransformerEditor';
 import { limitTransformRegistryItem } from './editors/LimitTransformerEditor';
 import { mergeTransformerRegistryItem } from './editors/MergeTransformerEditor';
 import { organizeFieldsTransformRegistryItem } from './editors/OrganizeFieldsTransformerEditor';
 import { reduceTransformRegistryItem } from './editors/ReduceTransformerEditor';
 import { renameByRegexTransformRegistryItem } from './editors/RenameByRegexTransformer';
-import { seriesToFieldsTransformerRegistryItem } from './editors/SeriesToFieldsTransformerEditor';
 import { seriesToRowsTransformerRegistryItem } from './editors/SeriesToRowsTransformerEditor';
 import { sortByTransformRegistryItem } from './editors/SortByTransformerEditor';
 import { extractFieldsTransformRegistryItem } from './extractFields/ExtractFieldsTransformerEditor';
@@ -35,7 +35,7 @@ export const getStandardTransformers = (): Array<TransformerRegistryItem<any>> =
     filterFramesByRefIdTransformRegistryItem,
     filterByValueTransformRegistryItem,
     organizeFieldsTransformRegistryItem,
-    seriesToFieldsTransformerRegistryItem,
+    joinByFieldTransformerRegistryItem,
     seriesToRowsTransformerRegistryItem,
     concatenateTransformRegistryItem,
     calculateFieldTransformRegistryItem,