apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explore using data source picker

Browse Source
pull/14500/head
Torkel Ödegaard 7 years ago
parent 24825dc899
commit ae76ddcc3b
7 changed files with 77 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      public/app/core/components/PermissionList/PermissionListItem.tsx
  2. 22
      public/app/core/components/Select/DataSourcePicker.tsx
  3. 60
      public/app/core/components/Select/Select.tsx
  4. 12
      public/app/features/dashboard/dashgrid/QueriesTab.tsx
  5. 34
      public/app/features/explore/Explore.tsx
  6. 8
      public/app/types/explore.ts
  7. 4
      public/sass/components/_form_select_box.scss

1
public/app/core/components/PermissionList/PermissionListItem.tsx
Unescape View File

@ -75,6 +75,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
<td>
<div className="gf-form">
<Select
isSearchable={false}
options={dashboardPermissionLevels}
onChange={this.onPermissionChanged}
isDisabled={item.inherited}

22
public/app/features/dashboard/dashgrid/DataSourcePicker.tsx → public/app/core/components/Select/DataSourcePicker.tsx
Unescape View File

@ -3,16 +3,13 @@ import React, { PureComponent } from 'react';
import _ from 'lodash';
// Components
import ResetStyles from 'app/core/components/Select/ResetStyles';
import { Option, SingleValue } from 'app/core/components/Select/PickerOption';
import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
import Select from 'react-select';
import Select from './Select';
// Types
import { DataSourceSelectItem } from 'app/types';
export interface Props {
onChangeDataSource: (ds: DataSourceSelectItem) => void;
onChange: (ds: DataSourceSelectItem) => void;
datasources: DataSourceSelectItem[];
current: DataSourceSelectItem;
onBlur?: () => void;
@ -32,7 +29,7 @@ export class DataSourcePicker extends PureComponent<Props> {
onChange = item => {
const ds = this.props.datasources.find(ds => ds.name === item.value);
this.props.onChangeDataSource(ds);
this.props.onChange(ds);
};
render() {
@ -53,27 +50,18 @@ export class DataSourcePicker extends PureComponent<Props> {
return (
<div className="gf-form-inline">
<Select
classNamePrefix={`gf-form-select-box`}
isMulti={false}
menuShouldScrollIntoView={false}
backspaceRemovesValue={false}
isClearable={false}
className="gf-form-input gf-form-input--form-dropdown ds-picker"
onChange={item => this.onChange(item)}
onChange={this.onChange}
options={options}
styles={ResetStyles}
autoFocus={autoFocus}
onBlur={onBlur}
openMenuOnFocus={true}
maxMenuHeight={500}
placeholder="Select datasource"
loadingMessage={() => 'Loading datasources...'}
noOptionsMessage={() => 'No datasources found'}
value={value}
components={{
Option,
SingleValue,
IndicatorsContainer,
}}
/>
</div>
);

60
public/app/core/components/Select/Select.tsx
Unescape View File

@ -29,7 +29,16 @@ interface CommonProps {
className?: string;
components: object;
isDisabled?: boolean;
isSearchable: boolean;
isSearchable?: boolean;
isClearable?: boolean;
autoFocus?: boolean;
openMenuOnFocus?: boolean;
onBlur?: () => void;
maxMenuHeight?: number;
isLoading: boolean;
noOptionsMessage?: () => string;
isMulti?: boolean;
backspaceRemovesValue: boolean;
}
interface SelectProps {
@ -39,9 +48,7 @@ interface SelectProps {
interface AsyncProps {
defaultOptions: boolean;
loadOptions: (query: string) => Promise<SelectOptionItem[]>;
isLoading: boolean;
loadingMessage?: () => string;
noOptionsMessage?: () => string;
}
export class Select extends PureComponent<CommonProps & SelectProps> {
@ -51,6 +58,13 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
components: {},
isDisabled: false,
isSearchable: true,
isClearable: false,
isMulti: false,
openMenuOnFocus: false,
autoFocus: false,
isLoading: false,
backspaceRemovesValue: true,
maxMenuHeight: 300,
};
render() {
@ -65,7 +79,16 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
value,
className,
isDisabled,
isSearchable
isLoading,
isSearchable,
isClearable,
backspaceRemovesValue,
isMulti,
autoFocus,
openMenuOnFocus,
onBlur,
maxMenuHeight,
noOptionsMessage,
} = this.props;
let widthClass = '';
@ -95,6 +118,15 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
placeholder={placeholder || 'Choose'}
styles={ResetStyles}
isDisabled={isDisabled}
isLoading={isLoading}
isClearable={isClearable}
autoFocus={autoFocus}
onBlur={onBlur}
openMenuOnFocus={openMenuOnFocus}
maxMenuHeight={maxMenuHeight}
noOptionsMessage={noOptionsMessage}
isMulti={isMulti}
backspaceRemovesValue={backspaceRemovesValue}
/>
);
}
@ -107,7 +139,13 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
components: {},
loadingMessage: () => 'Loading...',
isDisabled: false,
isClearable: false,
isMulti: false,
isSearchable: true,
backspaceRemovesValue: true,
autoFocus: false,
openMenuOnFocus: false,
maxMenuHeight: 300,
};
render() {
@ -127,6 +165,13 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
noOptionsMessage,
isDisabled,
isSearchable,
isClearable,
backspaceRemovesValue,
autoFocus,
onBlur,
openMenuOnFocus,
maxMenuHeight,
isMulti,
} = this.props;
let widthClass = '';
@ -161,6 +206,13 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
noOptionsMessage={noOptionsMessage}
isDisabled={isDisabled}
isSearchable={isSearchable}
isClearable={isClearable}
autoFocus={autoFocus}
onBlur={onBlur}
openMenuOnFocus={openMenuOnFocus}
maxMenuHeight={maxMenuHeight}
isMulti={isMulti}
backspaceRemovesValue={backspaceRemovesValue}
/>
);
}

12
public/app/features/dashboard/dashgrid/QueriesTab.tsx
Unescape View File

@ -6,7 +6,7 @@ import _ from 'lodash';
// Components
import './../../panel/metrics_tab';
import { EditorTabBody } from './EditorTabBody';
import { DataSourcePicker } from './DataSourcePicker';
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
import { QueryInspector } from './QueryInspector';
import { QueryOptions } from './QueryOptions';
import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
@ -205,20 +205,14 @@ export class QueriesTab extends PureComponent<Props, State> {
renderToolbar = () => {
const { currentDS } = this.state;
return (
<DataSourcePicker
datasources={this.datasources}
onChangeDataSource={this.onChangeDataSource}
current={currentDS}
/>
);
return <DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />;
};
renderMixedPicker = () => {
return (
<DataSourcePicker
datasources={this.datasources}
onChangeDataSource={this.onAddMixedQuery}
onChange={this.onAddMixedQuery}
current={null}
autoFocus={true}
onBlur={this.onMixedPickerBlur}

34
public/app/features/explore/Explore.tsx
Unescape View File

@ -1,6 +1,5 @@
import React from 'react';
import { hot } from 'react-hot-loader';
import Select from 'react-select';
import _ from 'lodash';
import { DataSource } from 'app/types/datasources';
@ -25,10 +24,7 @@ import {
makeTimeSeriesList,
updateHistory,
} from 'app/core/utils/explore';
import ResetStyles from 'app/core/components/Select/ResetStyles';
import PickerOption from 'app/core/components/Select/PickerOption';
import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
import TableModel from 'app/core/table_model';
import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
import { Emitter } from 'app/core/utils/emitter';
@ -158,10 +154,12 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
if (!datasourceSrv) {
throw new Error('No datasource service passed as props.');
}
const datasources = datasourceSrv.getExternal();
const exploreDatasources = datasources.map(ds => ({
value: ds.name,
label: ds.name,
name: ds.name,
meta: ds.meta,
}));
if (datasources.length > 0) {
@ -885,7 +883,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
} = this.state;
const graphHeight = showingGraph && showingTable ? '200px' : '400px';
const exploreClass = split ? 'explore explore-split' : 'explore';
const selectedDatasource = datasource ? exploreDatasources.find(d => d.label === datasource.name) : undefined;
const selectedDatasource = datasource ? exploreDatasources.find(d => d.name === datasource.name) : undefined;
const graphLoading = queryTransactions.some(qt => qt.resultType === 'Graph' && !qt.done);
const tableLoading = queryTransactions.some(qt => qt.resultType === 'Table' && !qt.done);
const logsLoading = queryTransactions.some(qt => qt.resultType === 'Logs' && !qt.done);
@ -910,26 +908,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
)}
{!datasourceMissing ? (
<div className="navbar-buttons">
<Select
classNamePrefix={`gf-form-select-box`}
isMulti={false}
menuShouldScrollIntoView={false}
isLoading={datasourceLoading}
isClearable={false}
className="gf-form-input gf-form-input--form-dropdown datasource-picker"
<DataSourcePicker
onChange={this.onChangeDatasource}
options={exploreDatasources}
styles={ResetStyles}
maxMenuHeight={500}
placeholder="Select datasource"
loadingMessage={() => 'Loading datasources...'}
noOptionsMessage={() => 'No datasources found'}
value={selectedDatasource}
components={{
Option: PickerOption,
IndicatorsContainer,
NoOptionsMessage,
}}
datasources={exploreDatasources}
current={selectedDatasource}
/>
</div>
) : null}

8
public/app/types/explore.ts
Unescape View File

@ -3,6 +3,7 @@ import { Value } from 'slate';
import { DataQuery, RawTimeRange } from './series';
import TableModel from 'app/core/table_model';
import { LogsModel } from 'app/core/logs_model';
import { DataSourceSelectItem } from 'app/types/datasources';
export interface CompletionItem {
/**
@ -74,11 +75,6 @@ export interface CompletionItemGroup {
skipSort?: boolean;
}
interface ExploreDatasource {
value: string;
label: string;
}
export interface HistoryItem {
ts: number;
query: DataQuery;
@ -159,7 +155,7 @@ export interface ExploreState {
datasourceLoading: boolean | null;
datasourceMissing: boolean;
datasourceName?: string;
exploreDatasources: ExploreDatasource[];
exploreDatasources: DataSourceSelectItem[];
graphInterval: number; // in ms
graphResult?: any[];
history: HistoryItem[];

4
public/sass/components/_form_select_box.scss
Unescape View File

@ -116,7 +116,7 @@ $select-input-bg-disabled: $input-bg-disabled;
.gf-form-select-box__select-arrow {
border-color: $input-color-select-arrow transparent transparent;
border-style: solid;
border-width: 5px 5px 2.5px;
border-width: 4px 4px 2.5px;
display: inline-block;
height: 0;
width: 0;
@ -125,7 +125,7 @@ $select-input-bg-disabled: $input-bg-disabled;
&.gf-form-select-box__select-arrow--reversed {
border-color: transparent transparent $input-color-select-arrow;
top: -2px;
border-width: 0 5px 5px;
border-width: 0 4px 4px;
}
}

Write Preview
Loading…
Cancel
Save