Transformations: Add naming mode to partition by value. (#75650)

* Add naming mode to partition by value

* Apply suggestions from code review

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

* Fix spelling

* Fix prettier issue

---------

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

docs/sources/panels-visualizations/query-transform-data/transform-data/index.md

@@ -764,6 +764,11 @@ With the _Partition by values_ transformer, you can now issue a single query and
 | 2022-10-20 12:00:00 | EU     | 2936  |
 | 2022-10-20 01:00:00 | EU     | 912   |
 
+There are two naming modes:
+
+- **As labels** - The value that results are partitioned by is set as a label.
+- **As frame name** - The value is used to set the frame name. This is useful if the data will be visualized in a table.
+
 ### Reduce
 
 The _Reduce_ transformation applies a calculation to each field in the frame and return a single value. Time fields are removed when applying this transformation.

public/app/features/transformers/partitionByValues/PartitionByValuesEditor.tsx

@@ -8,7 +8,15 @@ import {
   SelectableValue,
   TransformerCategory,
 } from '@grafana/data';
-import { InlineField, InlineFieldRow, ValuePicker, Button, HorizontalGroup, FieldValidationMessage } from '@grafana/ui';
+import {
+  InlineField,
+  InlineFieldRow,
+  ValuePicker,
+  Button,
+  HorizontalGroup,
+  FieldValidationMessage,
+  RadioButtonGroup,
+} from '@grafana/ui';
 import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/src/components/MatchersUI/utils';
 
 import { partitionByValuesTransformer, PartitionByValuesTransformerOptions } from './partitionByValues';
@@ -47,6 +55,16 @@ export function PartitionByValuesEditor({
     [onChange, options]
   );
 
+  enum namingModes {
+    asLabels,
+    frameName,
+  }
+
+  const namingModesOptions = [
+    { label: 'As label', value: namingModes.asLabels },
+    { label: 'As frame name', value: namingModes.frameName },
+  ];
+
   const removeField = useCallback(
     (v: string) => {
       if (!v) {
@@ -94,6 +112,27 @@ export function PartitionByValuesEditor({
           </HorizontalGroup>
         </InlineField>
       </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField
+          tooltip={
+            'Sets how the names of the selected fields are displayed. As frame name is usually better for tabular data'
+          }
+          label={'Naming'}
+          labelWidth={10}
+        >
+          <RadioButtonGroup
+            options={namingModesOptions}
+            value={
+              options.naming?.asLabels === undefined || options.naming.asLabels
+                ? namingModes.asLabels
+                : namingModes.frameName
+            }
+            onChange={(v) =>
+              onChange({ ...options, naming: { ...options.naming, asLabels: v === namingModes.asLabels } })
+            }
+          />
+        </InlineField>
+      </InlineFieldRow>
     </div>
   );
 }