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: Make portalling the menu opt-in, but opt-in *everywhere* (#37501)

Browse Source 
* Select: Don't portal by default

* Select: Portal all the Selects

* Fix indendentation in this comment

* Select: Remove @example docs until formatting is correct

* Docs: Add some documentation for the Select changes

* Update docs/sources/whatsnew/whats-new-in-v8-1.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/whatsnew/whats-new-in-v8-1.md

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Select/types.ts

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Docs: Variants instead of varients

* Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>
This commit is contained in:
Ashley Harrison
2021-08-04 15:47:53 +01:00
committed by GitHub
parent a0f94866b4
commit 8aa3845f70
153 changed files with 347 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
View File

@@ -21,6 +21,7 @@ export const Aggregation: FC<Props> = (props) => {
return (
<QueryEditorField labelWidth={18} label="Group by function" data-testid="cloud-monitoring-aggregation">
<Select
menuShouldPortal
width={16}
onChange={({ value }) => props.onChange(value!)}
value={selected}

1
public/app/plugins/datasource/cloud-monitoring/components/AlignmentFunction.tsx
View File

@@ -20,6 +20,7 @@ export const AlignmentFunction: FC<Props> = ({ query, templateVariableOptions, o
return (
<Select
menuShouldPortal
width={SELECT_WIDTH}
onChange={({ value }) => onChange({ ...query, perSeriesAligner: value! })}
value={[...alignOptions, ...templateVariableOptions].find((s) => s.value === perSeriesAligner)}

1
public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
View File

@@ -24,6 +24,7 @@ export const AlignmentPeriod: FC<Props> = ({ templateVariableOptions, onChange,
return (
<Select
menuShouldPortal
width={selectWidth}
onChange={({ value }) => onChange({ ...query, alignmentPeriod: value! })}
value={[...options, ...templateVariableOptions].find((s) => s.value === query.alignmentPeriod)}

1
public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
View File

@@ -71,6 +71,7 @@ export class ConfigEditor extends PureComponent<Props> {
<FieldSet>
<InlineField label="Authentication type" labelWidth={20}>
<Select
menuShouldPortal
width={40}
value={authTypes.find((x) => x.value === jsonData.authenticationType) || authTypes[0]}
options={authTypes}

1
public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
View File

@@ -22,6 +22,7 @@ export const VariableQueryField: FC<VariableQueryFieldProps> = ({
return (
<InlineField label={label} labelWidth={20}>
<Select
menuShouldPortal
width={25}
allowCustomValue={allowCustomValue}
value={value}

1
public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
View File

@@ -32,6 +32,7 @@ export const GroupBy: FunctionComponent<Props> = ({
tooltip="You can reduce the amount of data returned for a metric by combining different time series. To combine multiple time series, you can specify a grouping and a function. Grouping is done on the basis of labels. The grouping function is used to combine the time series in the group into a single time series."
>
<MultiSelect
menuShouldPortal
width={INPUT_WIDTH}
placeholder="Choose label"
options={options}

4
public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
View File

@@ -54,6 +54,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
const AddFilter = () => {
return (
<Select
menuShouldPortal
allowCustomValue
options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}
onChange={({ value: key = '' }) =>
@@ -77,6 +78,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
{filters.map(({ key, operator, value, condition }, index) => (
<HorizontalGroup key={index} spacing="xs" width="auto">
<Select
menuShouldPortal
width={SELECT_WIDTH}
allowCustomValue
formatCreateLabel={(v) => `Use label key: ${v}`}
@@ -91,6 +93,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
}}
/>
<Select
menuShouldPortal
value={operator}
options={operators.map(toOption)}
onChange={({ value: operator = '=' }) =>
@@ -100,6 +103,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
renderControl={OperatorButton}
/>
<Select
menuShouldPortal
width={SELECT_WIDTH}
formatCreateLabel={(v) => `Use label value: ${v}`}
allowCustomValue

2
public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
View File

@@ -123,6 +123,7 @@ export function Metrics(props: Props) {
<QueryEditorRow>
<QueryEditorField labelWidth={LABEL_WIDTH} label="Service">
<Select
menuShouldPortal
width={SELECT_WIDTH}
onChange={onServiceChange}
value={[...services, ...templateVariableOptions].find((s) => s.value === service)}
@@ -138,6 +139,7 @@ export function Metrics(props: Props) {
</QueryEditorField>
<QueryEditorField label="Metric name" labelWidth={INNER_LABEL_WIDTH}>
<Select
menuShouldPortal
width={SELECT_WIDTH}
onChange={onMetricTypeChange}
value={[...metrics, ...templateVariableOptions].find((s) => s.value === metricType)}

1
public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
View File

@@ -29,6 +29,7 @@ export function Project({ projectName, datasource, onChange, templateVariableOpt
return (
<QueryEditorRow label="Project">
<Select
menuShouldPortal
width={SELECT_WIDTH}
allowCustomValue
formatCreateLabel={(v) => `Use project: ${v}`}

1
public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
View File

@@ -76,6 +76,7 @@ export class QueryEditor extends PureComponent<Props> {
}
>
<Select
menuShouldPortal
width={SELECT_WIDTH}
value={queryType}
options={QUERY_TYPES}

1
public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
View File

@@ -36,6 +36,7 @@ export const SLO: React.FC<Props> = ({ query, templateVariableOptions, onChange,
return (
<QueryEditorRow label="SLO">
<Select
menuShouldPortal
width={SELECT_WIDTH}
allowCustomValue
value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}

1
public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
View File

@@ -17,6 +17,7 @@ export const Selector: React.FC<Props> = ({ query, templateVariableOptions, onCh
return (
<QueryEditorRow label="Selector">
<Select
menuShouldPortal
width={SELECT_WIDTH}
allowCustomValue
value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}

1
public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
View File

@@ -36,6 +36,7 @@ export const Service: React.FC<Props> = ({ query, templateVariableOptions, onCha
return (
<QueryEditorRow label="Service">
<Select
menuShouldPortal
width={SELECT_WIDTH}
allowCustomValue
value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}

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

@@ -317,6 +317,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
labelWidth={4}
inputEl={
<Select
menuShouldPortal
options={regions}
value={selectedRegion}
onChange={(v) => this.setSelectedRegion(v)}
@@ -333,6 +334,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
className="flex-grow-1"
inputEl={
<MultiSelect
menuShouldPortal
allowCustomValue={allowCustomValue}
options={unionBy(availableLogGroups, selectedLogGroups, 'value')}
value={selectedLogGroups}

1
public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
View File

@@ -173,6 +173,7 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
<div className="gf-form">
<div className="gf-form-label">Use results from panel</div>
<Select
menuShouldPortal
placeholder="Choose Panel"
isSearchable={true}
options={panels}

1
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
View File

@@ -52,6 +52,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
<>
<InlineField label="Interval" {...inlineFieldProps}>
<Select
menuShouldPortal
inputId={uniqueId('es-date_histogram-interval')}
isValidNewOption={isValidNewOption}
filterOption={optionStartsWithValue}

3
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
View File

@@ -22,6 +22,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<>
<InlineField label="Order" {...inlineFieldProps}>
<Select
menuShouldPortal
onChange={(e) => dispatch(changeBucketAggregationSetting(bucketAgg, 'order', e.value!))}
options={orderOptions}
value={bucketAgg.settings?.order || bucketAggregationConfig.terms.defaultSettings?.order}
@@ -30,6 +31,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Size" {...inlineFieldProps}>
<Select
menuShouldPortal
// TODO: isValidNewOption should only allow numbers & template variables
{...useCreatableSelectPersistedBehaviour({
options: sizeOptions,
@@ -52,6 +54,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Order By" {...inlineFieldProps}>
<Select
menuShouldPortal
onChange={(e) => dispatch(changeBucketAggregationSetting(bucketAgg, 'orderBy', e.value!))}
options={orderBy}
value={bucketAgg.settings?.orderBy || bucketAggregationConfig.terms.defaultSettings?.orderBy}

1
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
View File

@@ -20,6 +20,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
<>
<InlineField label="Model" labelWidth={16}>
<Select
menuShouldPortal
onChange={(value) => dispatch(changeMetricSetting(metric, 'model', value.value!))}
options={movingAvgModelOptions}
value={metric.settings?.model}

2
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx
View File

@@ -23,6 +23,7 @@ export const TopMetricsSettingsEditor: FunctionComponent<Props> = ({ metric }) =
<>
<InlineField label="Metrics" labelWidth={16}>
<AsyncMultiSelect
menuShouldPortal
onChange={(e) =>
dispatch(
changeMetricSetting(
@@ -40,6 +41,7 @@ export const TopMetricsSettingsEditor: FunctionComponent<Props> = ({ metric }) =
</InlineField>
<InlineField label="Order" labelWidth={16}>
<Select
menuShouldPortal
onChange={(e) => dispatch(changeMetricSetting(metric, 'order', e.value))}
options={orderOptions}
value={metric.settings?.order}

2
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
View File

@@ -125,6 +125,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
<>
<InlineField label="Unit" {...inlineFieldProps} data-testid="unit-select">
<Select
menuShouldPortal
id={`ES-query-${query.refId}_metric-${metric.id}-unit`}
onChange={(e) => dispatch(changeMetricSetting(metric, 'unit', e.value))}
options={rateAggUnitOptions}
@@ -134,6 +135,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
<InlineField label="Mode" {...inlineFieldProps} data-testid="mode-select">
<Select
menuShouldPortal
id={`ES-query-${query.refId}_metric-${metric.id}-mode`}
onChange={(e) => dispatch(changeMetricSetting(metric, 'mode', e.value))}
options={rateAggModeOptions}

3
public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
View File

@@ -9,6 +9,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
const MyComp = (_: { force?: boolean }) => (
<InlineField label="label">
<Select
menuShouldPortal
inputId="select"
{...useCreatableSelectPersistedBehaviour({
options: [{ label: 'Option 1', value: 'Option 1' }],
@@ -50,6 +51,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
const MyComp = () => (
<InlineField label="label">
<Select
menuShouldPortal
inputId="select"
{...useCreatableSelectPersistedBehaviour({
options: [{ label: 'Option 1', value: 'Option 1' }],
@@ -87,6 +89,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
const MyComp = (_: { force?: boolean }) => (
<InlineField label="label">
<Select
menuShouldPortal
inputId="select"
{...useCreatableSelectPersistedBehaviour({
options: [{ label: 'Option 1', value: 'Option 1' }],

2
public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
View File

@@ -53,6 +53,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
label="Pattern"
inputEl={
<Select
menuShouldPortal
options={indexPatternTypes}
onChange={intervalHandler(value, onChange)}
value={indexPatternTypes.find(
@@ -82,6 +83,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
label="Version"
inputEl={
<Select
menuShouldPortal
options={esVersions}
onChange={(option) => {
const maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault(

3
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx
View File

@@ -157,6 +157,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
Authentication
</InlineFormLabel>
<Select
menuShouldPortal
className="width-15"
value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
options={authTypeOptions}
@@ -175,6 +176,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
Azure Cloud
</InlineFormLabel>
<Select
menuShouldPortal
className="width-15"
value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
options={azureCloudOptions}
@@ -252,6 +254,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
<InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
<div className="width-25">
<Select
menuShouldPortal
value={
credentials.defaultSubscriptionId
? subscriptions.find((opt) => opt.value === credentials.defaultSubscriptionId)

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsAnalyticsEditor/index.tsx
View File

@@ -27,6 +27,7 @@ const InsightsAnalyticsEditor: React.FC<InsightsAnalyticsEditorProps> = ({ query
<Field label="Format as">
<Select
menuShouldPortal
inputId="azure-monitor-logs-workspaces-field"
value={query.insightsAnalytics?.resultFormat}
disabled={true}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx
View File

@@ -29,6 +29,7 @@ const FormatAsField: React.FC<AzureQueryEditorFieldProps> = ({ query, variableOp
return (
<Field label="Format as">
<Select
menuShouldPortal
inputId="azure-monitor-logs-workspaces-field"
value={query.azureLogAnalytics?.resultFormat}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/AggregationField.tsx
View File

@@ -38,6 +38,7 @@ const AggregationField: React.FC<AggregationFieldProps> = ({
return (
<Field label="Aggregation">
<Select
menuShouldPortal
inputId="azure-monitor-metrics-aggregation-field"
value={query.azureMonitor?.aggregation}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
View File

@@ -42,6 +42,7 @@ const DimensionFields: React.FC<DimensionFieldsProps> = ({ query, dimensionOptio
{dimensionFilters.map((filter, index) => (
<HorizontalGroup key={index} spacing="xs">
<Select
menuShouldPortal
placeholder="Field"
value={filter.dimension}
options={dimensionOptions}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx
View File

@@ -28,6 +28,7 @@ const MetricNameField: React.FC<MetricNameProps> = ({ metricNames, query, variab
return (
<Field label="Metric">
<Select
menuShouldPortal
inputId="azure-monitor-metrics-metric-field"
value={query.azureMonitor?.metricName ?? null}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNamespaceField.tsx
View File

@@ -33,6 +33,7 @@ const MetricNamespaceField: React.FC<MetricNamespaceFieldProps> = ({
return (
<Field label="Metric namespace">
<Select
menuShouldPortal
inputId="azure-monitor-metrics-metric-namespace-field"
value={query.azureMonitor?.metricNamespace}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceGroupsField.tsx
View File

@@ -30,6 +30,7 @@ const ResourceGroupsField: React.FC<ResourceGroupsFieldProps> = ({
return (
<Field label="Resource group">
<Select
menuShouldPortal
inputId="azure-monitor-metrics-resource-group-field"
value={query.azureMonitor?.resourceGroup}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceNameField.tsx
View File

@@ -30,6 +30,7 @@ const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
return (
<Field label="Resource name">
<Select
menuShouldPortal
inputId="azure-monitor-metrics-resource-name-field"
value={value}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/ResourceTypeField.tsx
View File

@@ -34,6 +34,7 @@ const NamespaceField: React.FC<NamespaceFieldProps> = ({
<Field label="Resource type">
{/* It's expected that the label reads Resource type but the property is metricDefinition */}
<Select
menuShouldPortal
inputId="azure-monitor-metrics-resource-type-field"
value={query.azureMonitor?.metricDefinition}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/TimeGrainField.tsx
View File

@@ -52,6 +52,7 @@ const TimeGrainField: React.FC<TimeGrainFieldProps> = ({
return (
<Field label="Time grain">
<Select
menuShouldPortal
inputId="azure-monitor-metrics-time-grain-field"
value={query.azureMonitor?.timeGrain}
onChange={handleChange}

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryTypeField.tsx
View File

@@ -43,6 +43,7 @@ const QueryTypeField: React.FC<QueryTypeFieldProps> = ({ query, onQueryChange })
return (
<Field label="Service">
<Select
menuShouldPortal
inputId="azure-monitor-query-type-field"
value={query.queryType}
options={queryTypes}

2
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/SubscriptionField.tsx
View File

@@ -67,6 +67,7 @@ const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
return multiSelect ? (
<Field label="Subscriptions">
<MultiSelect
menuShouldPortal
isClearable
value={findOptions(subscriptions, query.subscriptions)}
inputId="azure-monitor-subscriptions-field"
@@ -78,6 +79,7 @@ const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
) : (
<Field label="Subscription">
<Select
menuShouldPortal
value={query.subscription}
inputId="azure-monitor-subscriptions-field"
onChange={handleChange}

6
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AzureCredentialsForm.test.tsx.snap
View File

@@ -36,6 +36,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -181,6 +182,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={Array []}
@@ -249,6 +251,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -384,6 +387,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={Array []}
@@ -452,6 +456,7 @@ exports[`Render should render component 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -587,6 +592,7 @@ exports[`Render should render component 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={Array []}

2
public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx
View File

@@ -71,6 +71,7 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
<FieldSet className={styles.container}>
<Field label="Filter by">
<Select
menuShouldPortal
inputId="grafana-annotations__filter-by"
options={annotationTypes}
value={type}
@@ -79,6 +80,7 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
</Field>
<Field label="Max limit">
<Select
menuShouldPortal
inputId="grafana-annotations__limit"
width={16}
options={limitOptions}

3
public/app/plugins/datasource/grafana/components/QueryEditor.tsx
View File

@@ -192,6 +192,7 @@ export class QueryEditor extends PureComponent<Props, State> {
<div className="gf-form">
<InlineField label="Channel" grow={true} labelWidth={labelWidth}>
<Select
menuShouldPortal
options={channels}
value={currentChannel || ''}
onChange={this.onChannelChange}
@@ -208,6 +209,7 @@ export class QueryEditor extends PureComponent<Props, State> {
<div className="gf-form">
<InlineField label="Fields" grow={true} labelWidth={labelWidth}>
<Select
menuShouldPortal
options={fields}
value={filter?.fields || []}
onChange={this.onFieldNamesChange}
@@ -249,6 +251,7 @@ export class QueryEditor extends PureComponent<Props, State> {
<div className="gf-form">
<InlineField label="Query type" grow={true} labelWidth={labelWidth}>
<Select
menuShouldPortal
options={this.queryTypes}
value={this.queryTypes.find((v) => v.value === query.queryType) || this.queryTypes[0]}
onChange={this.onQueryTypeChange}

2
public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
View File

@@ -74,6 +74,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
Version
</InlineFormLabel>
<Select
menuShouldPortal
value={currentVersion}
options={graphiteVersions}
width={8}
@@ -85,6 +86,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
<div className="gf-form">
<InlineFormLabel tooltip={this.renderTypeHelp}>Type</InlineFormLabel>
<Select
menuShouldPortal
options={graphiteTypes}
value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
width={8}

2
public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
View File

@@ -215,6 +215,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
HTTP Method
</InlineFormLabel>
<Select
menuShouldPortal
className="width-10"
value={httpModes.find((httpMode) => httpMode.value === options.jsonData.httpMode)}
options={httpModes}
@@ -257,6 +258,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
<div className="gf-form-inline">
<div className="gf-form">
<Select
menuShouldPortal
className="width-30"
value={options.jsonData.version === InfluxVersion.Flux ? versions[1] : versions[0]}
options={versions}

1
public/app/plugins/datasource/influxdb/components/RawInfluxQLEditor.tsx
View File

@@ -45,6 +45,7 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
<HorizontalGroup>
<InlineFormLabel htmlFor={selectElementId}>Format as</InlineFormLabel>
<Select
menuShouldPortal
inputId={selectElementId}
onChange={(v) => {
onChange({ ...query, resultFormat: v.value });

2
public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
View File

@@ -76,6 +76,7 @@ const SelReload = ({ loadOptions, allowCustomValue, onChange, onClose }: SelRelo
return (
<div className={selectClass}>
<AsyncSelect
menuShouldPortal
formatCreateLabel={formatCreateLabel}
defaultOptions
autoFocus
@@ -106,6 +107,7 @@ const SelSingleLoad = ({ loadOptions, allowCustomValue, onChange, onClose }: Sel
return (
<div className={selectClass}>
<Select
menuShouldPortal
isLoading={loadState.loading}
formatCreateLabel={formatCreateLabel}
autoFocus

8
public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
View File

@@ -43,6 +43,7 @@ exports[`Render should disable basic auth password input 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -227,6 +228,7 @@ exports[`Render should disable basic auth password input 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -340,6 +342,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -524,6 +527,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -637,6 +641,7 @@ exports[`Render should hide white listed cookies input when browser access chose
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -821,6 +826,7 @@ exports[`Render should hide white listed cookies input when browser access chose
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -934,6 +940,7 @@ exports[`Render should render component 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -1118,6 +1125,7 @@ exports[`Render should render component 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={

2
public/app/plugins/datasource/jaeger/components/SearchForm.tsx
View File

@@ -53,6 +53,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Service" labelWidth={21} grow>
<Select
menuShouldPortal
options={serviceOptions}
value={serviceOptions?.find((v) => v.value === query.service) || null}
onChange={(v) => {
@@ -69,6 +70,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Operation" labelWidth={21} grow disabled={!query.service}>
<Select
menuShouldPortal
options={operationOptions}
value={operationOptions?.find((v) => v.value === query.operation) || null}
onChange={(v) =>

2
public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx
View File

@@ -29,6 +29,7 @@ export const OpenTsdbDetails = (props: Props) => {
<div className="gf-form">
<InlineFormLabel width={7}>Version</InlineFormLabel>
<Select
menuShouldPortal
options={tsdbVersions}
value={tsdbVersions.find((version) => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
onChange={onSelectChangeHandler('tsdbVersion', value, onChange)}
@@ -37,6 +38,7 @@ export const OpenTsdbDetails = (props: Props) => {
<div className="gf-form">
<InlineFormLabel width={7}>Resolution</InlineFormLabel>
<Select
menuShouldPortal
options={tsdbResolutions}
value={
tsdbResolutions.find((resolution) => resolution.value === value.jsonData.tsdbResolution) ??

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

@@ -178,6 +178,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
Step
</InlineFormLabel>
<Select
menuShouldPortal
className={'select-container'}
width={16}
isSearchable={false}
@@ -197,6 +198,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
<div className="gf-form">
<div className="gf-form-label">Resolution</div>
<Select
menuShouldPortal
isSearchable={false}
options={INTERVAL_FACTOR_OPTIONS}
onChange={this.onIntervalFactorChange}
@@ -206,6 +208,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
<div className="gf-form">
<div className="gf-form-label width-7">Format</div>
<Select
menuShouldPortal
className={'select-container'}
width={16}
isSearchable={false}

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

@@ -49,6 +49,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
<Select
className="select-container"
isSearchable={false}
menuShouldPortal={true}
onChange={[Function]}
options={
Array [
@@ -93,6 +94,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
</div>
<Select
isSearchable={false}
menuShouldPortal={true}
onChange={[Function]}
options={
Array [
@@ -141,6 +143,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
<Select
className="select-container"
isSearchable={false}
menuShouldPortal={true}
onChange={[Function]}
options={
Array [

3
public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx
View File

@@ -155,6 +155,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
Authentication
</InlineFormLabel>
<Select
menuShouldPortal
className="width-15"
value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
options={authTypeOptions}
@@ -172,6 +173,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
Azure Cloud
</InlineFormLabel>
<Select
menuShouldPortal
className="width-15"
value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
options={azureCloudOptions}
@@ -244,6 +246,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
<InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
<div className="width-25">
<Select
menuShouldPortal
value={
credentials.defaultSubscriptionId
? subscriptions.find((opt) => opt.value === credentials.defaultSubscriptionId)

1
public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
View File

@@ -75,6 +75,7 @@ export const PromSettings = (props: Props) => {
HTTP Method
</InlineFormLabel>
<Select
menuShouldPortal
options={httpOptions}
value={httpOptions.find((o) => o.value === options.jsonData.httpMethod)}
onChange={onChangeHandler('httpMethod', options, onOptionsChange)}

6
public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap
View File

@@ -36,6 +36,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -181,6 +182,7 @@ exports[`Render should disable azure monitor secret input 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={Array []}
@@ -249,6 +251,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -384,6 +387,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={Array []}
@@ -452,6 +456,7 @@ exports[`Render should render component 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={
@@ -587,6 +592,7 @@ exports[`Render should render component 1`] = `
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
menuShouldPortal={true}
onChange={[Function]}
openMenuOnFocus={false}
options={Array []}

2
public/app/plugins/datasource/testdata/QueryEditor.tsx vendored
View File

@@ -170,6 +170,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
<InlineFieldRow aria-label={selectors.scenarioSelectContainer}>
<InlineField labelWidth={14} label="Scenario">
<Select
menuShouldPortal
options={options}
value={options.find((item) => item.value === query.scenarioId)}
onChange={onScenarioChange}
@@ -256,6 +257,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
{scenarioId === 'grafana_api' && (
<InlineField labelWidth={14} label="Endpoint">
<Select
menuShouldPortal
options={endpoints}
onChange={onEndPointChange}
width={32}

1
public/app/plugins/datasource/testdata/components/CSVFileEditor.tsx vendored
View File

@@ -21,6 +21,7 @@ export const CSVFileEditor = ({ onChange, query }: EditorProps) => {
<InlineFieldRow>
<InlineField label="File" labelWidth={14}>
<Select
menuShouldPortal
width={32}
onChange={onChangeFileName}
placeholder="Select csv file"

1
public/app/plugins/datasource/testdata/components/GrafanaLiveEditor.tsx vendored
View File

@@ -30,6 +30,7 @@ export const GrafanaLiveEditor = ({ onChange, query }: EditorProps) => {
<InlineFieldRow>
<InlineField label="Channel" labelWidth={14}>
<Select
menuShouldPortal
width={32}
onChange={onChannelChange}
placeholder="Select channel"

2
public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx vendored
View File

@@ -31,7 +31,7 @@ export const StreamingClientEditor = ({ onChange, query }: EditorProps) => {
return (
<InlineFieldRow>
<InlineField label="Type" labelWidth={14}>
<Select width={32} onChange={onSelectChange} defaultValue={types[0]} options={types} />
<Select menuShouldPortal width={32} onChange={onSelectChange} defaultValue={types[0]} options={types} />
</InlineField>
{query?.stream?.type === 'signal' &&
streamingClientFields.map(({ label, id, min, step, placeholder }) => {

3
public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx vendored
View File

@@ -14,6 +14,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
<InlineFieldRow>
<InlineField labelWidth={14} label="Mode">
<Select
menuShouldPortal
options={usaQueryModes}
onChange={(v) => {
onChange({ ...query, mode: v.value });
@@ -35,6 +36,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
<InlineFieldRow>
<InlineField labelWidth={14} label="Fields">
<Select
menuShouldPortal
options={fieldNames}
onChange={(vals: SelectableValue[]) => {
onChange({ ...query, fields: vals.map((v) => v.value) });
@@ -47,6 +49,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
</InlineField>
<InlineField label="States" grow>
<Select
menuShouldPortal
options={stateNames}
onChange={(vals: SelectableValue[]) => {
onChange({ ...query, states: vals.map((v) => v.value) });

1
public/app/plugins/panel/geomap/dims/editors/ColorDimensionEditor.tsx
View File

@@ -57,6 +57,7 @@ export const ColorDimensionEditor: FC<StandardEditorProps<ColorDimensionConfig,
<>
<div className={styles.container}>
<Select
menuShouldPortal
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}

1
public/app/plugins/panel/geomap/dims/editors/ScaleDimensionEditor.tsx
View File

@@ -99,6 +99,7 @@ export const ScaleDimensionEditor: FC<StandardEditorProps<ScaleDimensionConfig,
<>
<div>
<Select
menuShouldPortal
value={selectedOption}
options={selectOptions}
onChange={onSelectChange}

1
public/app/plugins/panel/geomap/editor/GazetteerPathEditor.tsx
View File

@@ -45,6 +45,7 @@ export const GazetteerPathEditor: FC<StandardEditorProps<string, any, any>> = ({
return (
<>
<Select
menuShouldPortal
value={current}
options={options}
onChange={(v) => onChange(v.value)}

1
public/app/plugins/panel/geomap/editor/LayerEditor.tsx
View File

@@ -164,6 +164,7 @@ export const LayerEditor: FC<LayerEditorProps> = ({ options, onChange, data, fil
return (
<div>
<Select
menuShouldPortal
options={layerTypes.options}
value={layerTypes.current}
onChange={(v) => {

2
public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
View File

@@ -62,7 +62,7 @@ export const MapViewEditor: FC<StandardEditorProps<MapViewConfig, any, GeomapPan
<>
<InlineFieldRow>
<InlineField label="View" labelWidth={labelWidth} grow={true}>
<Select options={views.options} value={views.current} onChange={onSelectView} />
<Select menuShouldPortal options={views.options} value={views.current} onChange={onSelectView} />
</InlineField>
</InlineFieldRow>
{value?.id === MapCenterID.Coordinates && (

9
public/app/plugins/panel/live/LiveChannelEditor.tsx
View File

@@ -107,13 +107,19 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
<div>
<div className={style.dropWrap}>
<Label>Scope</Label>
<Select options={scopes} value={scopes.find((s) => s.value === scope)} onChange={this.onScopeChanged} />
<Select
menuShouldPortal
options={scopes}
value={scopes.find((s) => s.value === scope)}
onChange={this.onScopeChanged}
/>
</div>
{scope && (
<div className={style.dropWrap}>
<Label>Namespace</Label>
<Select
menuShouldPortal
options={namespaces}
value={
namespaces.find((s) => s.value === namespace) ??
@@ -130,6 +136,7 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
<div className={style.dropWrap}>
<Label>Path</Label>
<Select
menuShouldPortal
options={paths}
value={findPathOption(paths, path)}
onChange={this.onPathChanged}

7
public/app/plugins/panel/table/TablePanel.tsx
View File

@@ -126,7 +126,12 @@ export class TablePanel extends Component<Props> {
<div className={tableStyles.wrapper}>
{this.renderTable(data.series[currentIndex], width, height - inputHeight - padding)}
<div className={tableStyles.selectWrapper}>
<Select options={names} value={names[currentIndex]} onChange={this.onChangeTableSelection} />
<Select
menuShouldPortal
options={names}
value={names[currentIndex]}
onChange={this.onChangeTableSelection}
/>
</div>
</div>
);

1
public/app/plugins/panel/timeseries/FillBelowToEditor.tsx
View File

@@ -37,6 +37,7 @@ export const FillBellowToEditor: React.FC<FieldOverrideEditorProps<string, any>>
return (
<Select
menuShouldPortal
options={names}
value={current}
onChange={(v) => {

1
public/app/plugins/panel/timeseries/LineStyleEditor.tsx
View File

@@ -89,6 +89,7 @@ export const LineStyleEditor: React.FC<FieldOverrideEditorProps<LineStyle, any>>
{value?.fill && value?.fill !== 'solid' && (
<>
<Select
menuShouldPortal
allowCustomValue={true}
options={options}
value={current}

2
public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx
View File

@@ -13,5 +13,5 @@ export const ThresholdsStyleEditor: React.FC<
},
[onChange]
);
return <Select value={value.mode} options={item.settings.options} onChange={onChangeCb} />;
return <Select menuShouldPortal value={value.mode} options={item.settings.options} onChange={onChangeCb} />;
};

2
public/app/plugins/panel/xychart/XYDimsEditor.tsx
View File

@@ -90,6 +90,7 @@ export const XYDimsEditor: FC<StandardEditorProps<XYDimensionConfig, any, Option
return (
<div>
<Select
menuShouldPortal
options={frameNames}
value={frameNames.find((v) => v.value === value?.frame) ?? frameNames[0]}
onChange={(v) => {
@@ -102,6 +103,7 @@ export const XYDimsEditor: FC<StandardEditorProps<XYDimensionConfig, any, Option
<br />
<Label>X Field</Label>
<Select
menuShouldPortal
options={info.numberFields}
value={info.xAxis}
onChange={(v) => {