IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Select: Changes default menu placement for Select from auto to bottom (#29837)

Browse Source 
* Select: Changes default menuPlacement from auto to bottom

* Tests: Fixes snapshot
This commit is contained in:
Hugo Häggmark 2020-12-15 12:46:31 +01:00 committed by GitHub
parent b1a57c6f77
commit 5f4b528122
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 26 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Select/SelectBase.tsx
View File

@ -116,7 +116,7 @@ export function SelectBase<T>({
maxMenuHeight = 300,
minMenuHeight,
maxVisibleValues,
menuPlacement = 'auto',
menuPlacement = 'bottom',
menuPosition,
noOptionsMessage = 'No options found',
onBlur,

3
public/app/core/components/Select/DataSourcePicker.tsx
View File

@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
// Components
import { HorizontalGroup, Select } from '@grafana/ui';
import { SelectableValue, DataSourceInstanceSettings } from '@grafana/data';
import { DataSourceInstanceSettings, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { isUnsignedPluginSignature, PluginSignatureBadge } from '../../../features/plugins/PluginSignatureBadge';
import { getDataSourceSrv } from '@grafana/runtime';
@ -130,7 +130,6 @@ export class DataSourcePicker extends PureComponent<Props, State> {
onBlur={onBlur}
openMenuOnFocus={openMenuOnFocus}
maxMenuHeight={500}
menuPlacement="bottom"
placeholder={placeholder}
noOptionsMessage="No datasources found"
value={value}

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

@ -226,7 +226,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
stats={[options.reducer]}
onChange={this.onStatsChange}
defaultStat={ReducerID.sum}
menuPlacement="bottom"
/>
</div>
</div>
@ -305,14 +304,12 @@ 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={true}
@ -321,7 +318,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
options={rightNames}
value={options?.right}
onChange={this.onBinaryRightChanged}
menuPlacement="bottom"
/>
</div>
</div>
@ -347,7 +343,6 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
options={calculationModes}
value={calculationModes.find(v => v.value === mode)}
onChange={this.onModeChanged}
menuPlacement="bottom"
/>
</div>
</div>

3
public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx
View File

@ -8,8 +8,8 @@ import {
} from '@grafana/data';
import { Input, Select } from '@grafana/ui';
import {
ConcatenateTransformerOptions,
ConcatenateFrameNameMode,
ConcatenateTransformerOptions,
} from '@grafana/data/src/transformations/transformers/concat';
interface ConcatenateTransformerEditorProps extends TransformerUIProps<ConcatenateTransformerOptions> {}
@ -61,7 +61,6 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
options={nameModes}
value={nameModes.find(v => v.value === frameNameMode)}
onChange={this.onModeChanged}
menuPlacement="bottom"
/>
</div>
</div>

2
public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueFilterEditor.tsx
View File

@ -87,7 +87,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = props => {
options={fieldsAsOptions}
value={filter.fieldName}
onChange={onChangeField}
menuPlacement="bottom"
/>
</div>
<div className="gf-form gf-form-spacing">
@ -98,7 +97,6 @@ export const FilterByValueFilterEditor: React.FC<Props> = props => {
options={matcherOptions}
value={matcherId}
onChange={onChangeMatcher}
menuPlacement="bottom"
/>
</div>
<div className="gf-form gf-form--grow gf-form-spacing">

12
public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
View File

@ -1,20 +1,20 @@
import React, { useMemo, useCallback } from 'react';
import React, { useCallback, useMemo } from 'react';
import { css, cx } from 'emotion';
import {
DataTransformerID,
ReducerID,
SelectableValue,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
ReducerID,
SelectableValue,
} from '@grafana/data';
import { getAllFieldNamesFromDataFrames } from './OrganizeFieldsTransformerEditor';
import { Select, StatsPicker, stylesFactory } from '@grafana/ui';
import {
GroupByTransformerOptions,
GroupByOperationID,
GroupByFieldOptions,
GroupByOperationID,
GroupByTransformerOptions,
} from '@grafana/data/src/transformations/transformers/groupBy';
interface FieldProps {
@ -90,7 +90,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
placeholder="Ignored"
onChange={onChange}
isClearable
menuPlacement="bottom"
/>
</div>
</div>
@ -105,7 +104,6 @@ export const GroupByFieldConfiguration: React.FC<FieldProps> = ({ fieldName, con
onChange={stats => {
onConfigChange({ ...config, aggregations: stats as ReducerID[] });
}}
menuPlacement="bottom"
/>
</div>
)}

3
public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import {
DataTransformerID,
SelectableValue,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
SelectableValue,
} from '@grafana/data';
import { Select } from '@grafana/ui';
@ -49,7 +49,6 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
className="min-width-18 gf-form-spacing"
value={options?.valueLabel}
onChange={onValueLabelChange}
menuPlacement="bottom"
/>
</div>
</div>

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

@ -1,15 +1,15 @@
import React, { useCallback } from 'react';
import { StatsPicker, Select, LegacyForms } from '@grafana/ui';
import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
import {
DataTransformerID,
ReducerID,
SelectableValue,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
SelectableValue,
} from '@grafana/data';
import { ReduceTransformerOptions, ReduceTransformerMode } from '@grafana/data/src/transformations/transformers/reduce';
import { ReduceTransformerMode, ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
import { selectors } from '@grafana/e2e-selectors';
// TODO: Minimal implementation, needs some <3
@ -60,7 +60,6 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
options={modes}
value={modes.find(v => v.value === options.mode) || modes[0]}
onChange={onSelectMode}
menuPlacement="bottom"
className="flex-grow-1"
/>
</div>
@ -81,7 +80,6 @@ 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,13 +33,7 @@ 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
menuPlacement="bottom"
/>
<Select options={fieldNameOptions} value={options.byField} onChange={onSelectField} isClearable />
</div>
</div>
);

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

@ -159,7 +159,6 @@ export class TransformationsEditor extends React.PureComponent<TransformationsEd
options={availableTransformers}
onChange={this.onTransformationAdd}
isFullWidth={false}
menuPlacement="bottom"
/>
</div>
);

18
public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
View File

@ -5,24 +5,24 @@ import debounce from 'lodash/debounce';
import unionBy from 'lodash/unionBy';
import {
QueryField,
SlatePrism,
BracesPlugin,
LegacyForms,
MultiSelect,
QueryField,
Select,
SlatePrism,
TypeaheadInput,
TypeaheadOutput,
BracesPlugin,
Select,
MultiSelect,
} from '@grafana/ui';
// Utils & Services
// dom also includes Element polyfills
import { Plugin, Node, Editor } from 'slate';
import { Editor, Node, Plugin } from 'slate';
import syntax from '../syntax';
// Types
import { ExploreQueryFieldProps, AbsoluteTimeRange, SelectableValue, AppEvents } from '@grafana/data';
import { CloudWatchQuery, CloudWatchLogsQuery } from '../types';
import { AbsoluteTimeRange, AppEvents, ExploreQueryFieldProps, SelectableValue } from '@grafana/data';
import { CloudWatchLogsQuery, CloudWatchQuery } from '../types';
import { CloudWatchDatasource } from '../datasource';
import { LanguageMap, languages as prismLanguages } from 'prismjs';
import { CloudWatchLanguageProvider } from '../language_provider';
@ -321,7 +321,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
onChange={v => this.setSelectedRegion(v)}
width={18}
placeholder="Choose Region"
menuPlacement="bottom"
maxMenuHeight={500}
/>
}
@ -349,7 +348,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
isOptionDisabled={() => selectedLogGroups.length >= MAX_LOG_GROUPS}
placeholder="Choose Log Groups"
maxVisibleValues={4}
menuPlacement="bottom"
noOptionsMessage="No log groups available"
isLoading={loadingLogGroups}
onOpenMenu={this.onOpenLogGroupMenu}

11
public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
View File

@ -3,15 +3,15 @@ import React, { PureComponent } from 'react';
// Types
import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
import { SelectableValue, QueryEditorProps } from '@grafana/data';
const { Switch } = LegacyForms;
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { PrometheusDatasource } from '../datasource';
import { PromQuery, PromOptions } from '../types';
import { PromOptions, PromQuery } from '../types';
import PromQueryField from './PromQueryField';
import PromLink from './PromLink';
const { Switch } = LegacyForms;
export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
@ -157,7 +157,6 @@ export class PromQueryEditor extends PureComponent<Props, State> {
<div className="gf-form-label">Resolution</div>
<Select
isSearchable={false}
menuPlacement="bottom"
options={INTERVAL_FACTOR_OPTIONS}
onChange={this.onIntervalFactorChange}
value={intervalFactorOption}

1
public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
View File

@ -82,7 +82,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
</div>
<Select
isSearchable={false}
menuPlacement="bottom"
onChange={[Function]}
options={
Array [