IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Transformations: Make transform dropdowns not cropped (#24615)

Browse Source
This commit is contained in:
Dominik Prokop 2020-05-13 13:01:10 +02:00 committed by GitHub
parent ab12c908d8
commit 9e24c0944f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx
View File

@ -14,6 +14,7 @@ interface Props {
allowMultiple?: boolean;
defaultStat?: string;
className?: string;
menuPlacement?: 'auto' | 'bottom' | 'top';
}
export class StatsPicker extends PureComponent<Props> {
@ -62,7 +63,7 @@ export class StatsPicker extends PureComponent<Props> {
};
render() {
const { stats, allowMultiple, defaultStat, placeholder, className } = this.props;
const { stats, allowMultiple, defaultStat, placeholder, className, menuPlacement } = this.props;
const select = fieldReducers.selectOptions(stats);
return (
@ -75,6 +76,7 @@ export class StatsPicker extends PureComponent<Props> {
options={select.options}
placeholder={placeholder}
onChange={this.onSelectionChange}
menuPlacement={menuPlacement}
/>
);
}

3
packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
View File

@ -17,6 +17,7 @@ interface ValuePickerProps<T> {
variant?: ButtonVariant;
size?: ComponentSize;
isFullWidth?: boolean;
menuPlacement?: 'auto' | 'bottom' | 'top';
}
export function ValuePicker<T>({
@ -27,6 +28,7 @@ export function ValuePicker<T>({
variant,
size = 'sm',
isFullWidth = true,
menuPlacement,
}: ValuePickerProps<T>) {
const [isPicking, setIsPicking] = useState(false);
@ -50,6 +52,7 @@ export function ValuePicker<T>({
setIsPicking(false);
onChange(value);
}}
menuPlacement={menuPlacement}
/>
)}
</>

5
public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
View File

@ -201,6 +201,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
stats={[options.reducer]}
onChange={this.onStatsChange}
defaultStat={ReducerID.sum}
menuPlacement="bottom"
/>
</div>
</div>
@ -279,12 +280,14 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
className="min-width-18 gf-form-spacing"
value={options?.left}
onChange={this.onBinaryLeftChanged}
menuPlacement="bottom"
/>
<Select
className="width-8 gf-form-spacing"
options={ops}
value={options.operator ?? ops[0].value}
onChange={this.onBinaryOperationChanged}
menuPlacement="bottom"
/>
<Select
allowCustomValue
@ -293,6 +296,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
options={rightNames}
value={options?.right}
onChange={this.onBinaryRightChanged}
menuPlacement="bottom"
/>
</div>
</div>
@ -318,6 +322,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
options={calculationModes}
value={calculationModes.find(v => v.value === mode)}
onChange={this.onModeChanged}
menuPlacement="bottom"
/>
</div>
</div>

1
public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
View File

@ -30,6 +30,7 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
reducers: stats as ReducerID[],
});
}}
menuPlacement="bottom"
/>
</div>
</div>

8
public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
View File

@ -33,7 +33,13 @@ export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<Series
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8">Field name</div>
<Select options={fieldNameOptions} value={options.byField} onChange={onSelectField} isClearable />
<Select
options={fieldNameOptions}
value={options.byField}
onChange={onSelectField}
isClearable
menuPlacement="bottom"
/>
</div>
</div>
);

23
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
View File

@ -65,14 +65,21 @@ export class TransformationsEditor extends React.PureComponent<Props> {
});
return (
<ValuePicker
size="md"
variant="secondary"
label="Add transformation"
options={availableTransformers}
onChange={this.onTransformationAdd}
isFullWidth={false}
/>
<div
className={css`
max-width: 66%;
`}
>
<ValuePicker
size="md"
variant="secondary"
label="Add transformation"
options={availableTransformers}
onChange={this.onTransformationAdd}
isFullWidth={false}
menuPlacement="bottom"
/>
</div>
);
};