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

PanelEdit: Add data source label to data source picker dropdown (#34605)

Browse Source 
* PanelEdit: Add data source label to data source picker dropdown

* Updated based on ux feedback
This commit is contained in:
Torkel Ödegaard 2021-05-26 08:59:49 +02:00 committed by GitHub
parent 80c05becc5
commit ec33bae8d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-runtime/src/components/DataSourcePicker.tsx
View File

@ -2,10 +2,11 @@
import React, { PureComponent } from 'react';
// Components
import { HorizontalGroup, PluginSignatureBadge, Select } from '@grafana/ui';
import { HorizontalGroup, PluginSignatureBadge, Select, stylesFactory } from '@grafana/ui';
import { DataSourceInstanceSettings, isUnsignedPluginSignature, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { getDataSourceSrv } from '../services/dataSourceSrv';
import { css, cx } from '@emotion/css';
/**
* Component props description for the {@link DataSourcePicker}
@ -138,11 +139,12 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
const { error } = this.state;
const options = this.getDataSourceOptions();
const value = this.getCurrentValue();
const styles = getStyles();
return (
<div aria-label={selectors.components.DataSourcePicker.container}>
<Select
className="ds-picker select-container"
className={styles.select}
isMulti={false}
isClearable={false}
backspaceRemovesValue={false}
@ -172,3 +174,13 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
);
}
}
const getStyles = stylesFactory(() => ({
select: cx(
css({
minWidth: 200,
}),
'ds-picker',
'select-container'
),
}));

2
public/app/features/query/components/QueryGroup.tsx
View File

@ -6,6 +6,7 @@ import {
CustomScrollbar,
HorizontalGroup,
Icon,
InlineFormLabel,
Modal,
ScrollbarPosition,
stylesFactory,
@ -201,6 +202,7 @@ export class QueryGroup extends PureComponent<Props, State> {
return (
<div>
<div className={styles.dataSourceRow}>
<InlineFormLabel width={'auto'}>Data source</InlineFormLabel>
<div className={styles.dataSourceRowItem}>
<DataSourcePicker
onChange={this.onChangeDataSource}