Transformers: changes reduce transformer (#23611)

* Transformers: changes reduce transformer

* Refactor: fixes lenght of frame

* Minor tweaks and polish

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -102,6 +102,7 @@ export function SelectBase<T>({
   renderControl,
   size = 'auto',
   tabSelectsValue = true,
+  className,
   value,
   width,
 }: SelectBaseProps<T>) {
@@ -277,7 +278,7 @@ export function SelectBase<T>({
             width: inputSizesPixels(size),
           }),
         }}
-        className={cx('select-container', widthClass)}
+        className={cx('select-container', widthClass, className)}
         {...commonSelectProps}
         {...creatableProps}
         {...asyncSelectProps}

packages/grafana-ui/src/components/SingleStatShared/FieldDisplayEditor.tsx

@@ -1,97 +0,0 @@
-// Libraries
-import React, { PureComponent, ChangeEvent } from 'react';
-
-// Components
-import { FormLabel } from '../FormLabel/FormLabel';
-import { FormField } from '../FormField/FormField';
-import { StatsPicker } from '../StatsPicker/StatsPicker';
-
-// Types
-import Select from '../Forms/Legacy/Select/Select';
-import {
-  ReduceDataOptions,
-  DEFAULT_FIELD_DISPLAY_VALUES_LIMIT,
-  ReducerID,
-  toNumberString,
-  toIntegerOrUndefined,
-  SelectableValue,
-} from '@grafana/data';
-
-const showOptions: Array<SelectableValue<boolean>> = [
-  {
-    value: true,
-    label: 'All Values',
-    description: 'Each row in the response data',
-  },
-  {
-    value: false,
-    label: 'Calculation',
-    description: 'Calculate a value based on the response',
-  },
-];
-
-export interface Props {
-  labelWidth?: number;
-  value: ReduceDataOptions;
-  onChange: (value: ReduceDataOptions, event?: React.SyntheticEvent<HTMLElement>) => void;
-}
-
-export class FieldDisplayEditor extends PureComponent<Props> {
-  onShowValuesChange = (item: SelectableValue<boolean>) => {
-    const val = item.value === true;
-    this.props.onChange({ ...this.props.value, values: val });
-  };
-
-  onCalcsChange = (calcs: string[]) => {
-    this.props.onChange({ ...this.props.value, calcs });
-  };
-
-  onLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
-    this.props.onChange({
-      ...this.props.value,
-      limit: toIntegerOrUndefined(event.target.value),
-    });
-  };
-
-  render() {
-    const { value } = this.props;
-    const { calcs, values, limit } = value;
-
-    const labelWidth = this.props.labelWidth || 5;
-
-    return (
-      <>
-        <div className="gf-form">
-          <FormLabel width={labelWidth}>Show</FormLabel>
-          <Select
-            options={showOptions}
-            value={values ? showOptions[0] : showOptions[1]}
-            onChange={this.onShowValuesChange}
-          />
-        </div>
-        {values ? (
-          <FormField
-            label="Limit"
-            labelWidth={labelWidth}
-            placeholder={`${DEFAULT_FIELD_DISPLAY_VALUES_LIMIT}`}
-            onChange={this.onLimitChange}
-            value={toNumberString(limit)}
-            type="number"
-          />
-        ) : (
-          <div className="gf-form">
-            <FormLabel width={labelWidth}>Calc</FormLabel>
-            <StatsPicker
-              width={12}
-              placeholder="Choose Stat"
-              defaultStat={ReducerID.mean}
-              allowMultiple={false}
-              stats={calcs}
-              onChange={this.onCalcsChange}
-            />
-          </div>
-        )}
-      </>
-    );
-  }
-}

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

@@ -1,8 +1,6 @@
-export { FieldDisplayEditor } from './FieldDisplayEditor';
-
 export {
   SingleStatBaseOptions,
-  sharedSingleStatPanelChangedHandler,
   sharedSingleStatMigrationHandler,
   convertOldAngularValueMapping,
+  sharedSingleStatPanelChangedHandler,
 } from './SingleStatBaseOptions';

packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx

@@ -13,11 +13,11 @@ interface Props {
   stats: string[];
   allowMultiple?: boolean;
   defaultStat?: string;
+  className?: string;
 }
 
 export class StatsPicker extends PureComponent<Props> {
-  static defaultProps = {
-    width: 12,
+  static defaultProps: Partial<Props> = {
     allowMultiple: false,
   };
 
@@ -62,12 +62,13 @@ export class StatsPicker extends PureComponent<Props> {
   };
 
   render() {
-    const { stats, allowMultiple, defaultStat, placeholder } = this.props;
+    const { stats, allowMultiple, defaultStat, placeholder, className } = this.props;
 
     const select = fieldReducers.selectOptions(stats);
     return (
       <Select
         value={select.current}
+        className={className}
         isClearable={!defaultStat}
         isMulti={allowMultiple}
         isSearchable={true}

packages/grafana-ui/src/components/Table/utils.ts

@@ -64,7 +64,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
     columns.push({
       Cell,
       id: field.name,
-      Header: field.name,
+      Header: field.config.title ?? field.name,
       accessor: field.name,
       width: fieldTableOptions.width,
     });

packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx

@@ -15,18 +15,23 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
   onChange,
 }) => {
   return (
-    <StatsPicker
-      width={25}
-      placeholder="Choose Stat"
-      allowMultiple
-      stats={options.reducers || []}
-      onChange={stats => {
-        onChange({
-          ...options,
-          reducers: stats as ReducerID[],
-        });
-      }}
-    />
+    <div className="gf-form-inline">
+      <div className="gf-form gf-form--grow">
+        <div className="gf-form-label width-8">Calculations</div>
+        <StatsPicker
+          className="flex-grow-1"
+          placeholder="Choose Stat"
+          allowMultiple
+          stats={options.reducers || []}
+          onChange={stats => {
+            onChange({
+              ...options,
+              reducers: stats as ReducerID[],
+            });
+          }}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -34,6 +39,6 @@ export const reduceTransformRegistryItem: TransformerRegistyItem<ReduceTransform
   id: DataTransformerID.reduce,
   editor: ReduceTransformerEditor,
   transformation: standardTransformers.reduceTransformer,
-  name: 'Reduce',
-  description: 'Return a DataFrame with the reduction results',
+  name: standardTransformers.reduceTransformer.name,
+  description: standardTransformers.reduceTransformer.description,
 };