Upgrade Datasources-picker on Explore page #13425

This commit is contained in:
Johannes Schill 2018-10-08 11:53:11 +02:00
parent 52b329562d
commit be7ed3ebca
2 changed files with 20 additions and 6 deletions

View File

@ -12,7 +12,7 @@ export const PickerOption = (props: ExtendedOptionProps) => {
return (
<components.Option {...props}>
<div className={`description-picker-option__button btn btn-link width-19`}>
<img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />
{data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
{children}
</div>
</components.Option>

View File

@ -9,6 +9,10 @@ import store from 'app/core/store';
import TimeSeries from 'app/core/time_series2';
import { parse as parseDate } from 'app/core/utils/datemath';
import { DEFAULT_RANGE } from 'app/core/utils/explore';
import ResetStyles from 'app/core/components/Picker/ResetStyles';
import PickerOption from 'app/core/components/Picker/PickerOption';
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
import ElapsedTime from './ElapsedTime';
import QueryRows from './QueryRows';
@ -519,7 +523,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
const logsButtonActive = showingLogs ? 'active' : '';
const tableButtonActive = showingBoth || showingTable ? 'active' : '';
const exploreClass = split ? 'explore explore-split' : 'explore';
const selectedDatasource = datasource ? datasource.name : undefined;
return (
<div className={exploreClass} ref={this.getRef}>
@ -541,13 +544,24 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
{!datasourceMissing ? (
<div className="navbar-buttons">
<Select
clearable={false}
classNamePrefix={`gf-form-select2`}
isMulti={false}
isLoading={datasourceLoading}
isClearable={false}
className="gf-form-input gf-form-input--form-dropdown datasource-picker"
onChange={this.onChangeDatasource}
options={exploreDatasources}
isOpen={true}
placeholder="Loading datasources..."
value={selectedDatasource}
styles={ResetStyles}
placeholder="Select datasource"
loadingMessage={() => 'Loading datasources...'}
noOptionsMessage={() => 'No datasources found'}
getOptionValue={i => i.value}
getOptionLabel={i => i.label}
components={{
Option: PickerOption,
IndicatorsContainer,
NoOptionsMessage,
}}
/>
</div>
) : null}