mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
wip metrics tab changes
This commit is contained in:
parent
3452ee5a9c
commit
87e6f86f87
@ -15,9 +15,15 @@ export interface Props {
|
|||||||
onChangeDataSource: (ds: DataSourceSelectItem) => void;
|
onChangeDataSource: (ds: DataSourceSelectItem) => void;
|
||||||
datasources: DataSourceSelectItem[];
|
datasources: DataSourceSelectItem[];
|
||||||
current: DataSourceSelectItem;
|
current: DataSourceSelectItem;
|
||||||
|
onBlur?: () => void;
|
||||||
|
autoFocus?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class DataSourcePicker extends PureComponent<Props> {
|
export class DataSourcePicker extends PureComponent<Props> {
|
||||||
|
static defaultProps = {
|
||||||
|
autoFocus: false,
|
||||||
|
};
|
||||||
|
|
||||||
searchInput: HTMLElement;
|
searchInput: HTMLElement;
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -30,7 +36,7 @@ export class DataSourcePicker extends PureComponent<Props> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { datasources, current, onChangeDatasource } = this.props;
|
const { datasources, current, autoFocus, onBlur } = this.props;
|
||||||
|
|
||||||
const options = datasources.map(ds => ({
|
const options = datasources.map(ds => ({
|
||||||
value: ds.name,
|
value: ds.name,
|
||||||
@ -38,7 +44,7 @@ export class DataSourcePicker extends PureComponent<Props> {
|
|||||||
imgUrl: ds.meta.info.logos.small,
|
imgUrl: ds.meta.info.logos.small,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const value = {
|
const value = current && {
|
||||||
label: current.name,
|
label: current.name,
|
||||||
value: current.name,
|
value: current.name,
|
||||||
imgUrl: current.meta.info.logos.small,
|
imgUrl: current.meta.info.logos.small,
|
||||||
@ -55,6 +61,9 @@ export class DataSourcePicker extends PureComponent<Props> {
|
|||||||
onChange={item => this.onChange(item)}
|
onChange={item => this.onChange(item)}
|
||||||
options={options}
|
options={options}
|
||||||
styles={ResetStyles}
|
styles={ResetStyles}
|
||||||
|
autoFocus={autoFocus}
|
||||||
|
onBlur={onBlur}
|
||||||
|
openMenuOnFocus={true}
|
||||||
maxMenuHeight={500}
|
maxMenuHeight={500}
|
||||||
placeholder="Select datasource"
|
placeholder="Select datasource"
|
||||||
loadingMessage={() => 'Loading datasources...'}
|
loadingMessage={() => 'Loading datasources...'}
|
||||||
|
@ -15,7 +15,7 @@ export interface EditorToolBarView {
|
|||||||
icon?: string;
|
icon?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
render: (closeFunction: any) => JSX.Element | JSX.Element[];
|
render: (closeFunction?: any) => JSX.Element | JSX.Element[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
|
@ -30,9 +30,10 @@ interface Props {
|
|||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
currentDS: DataSourceSelectItem;
|
currentDS: DataSourceSelectItem;
|
||||||
helpContent: JSX.Element | string;
|
helpContent: JSX.Element;
|
||||||
isLoadingHelp: boolean;
|
isLoadingHelp: boolean;
|
||||||
isPickerOpen: boolean;
|
isPickerOpen: boolean;
|
||||||
|
isAddingMixed: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LoadingPlaceholderProps {
|
interface LoadingPlaceholderProps {
|
||||||
@ -56,6 +57,7 @@ export class QueriesTab extends PureComponent<Props, State> {
|
|||||||
isLoadingHelp: false,
|
isLoadingHelp: false,
|
||||||
helpContent: null,
|
helpContent: null,
|
||||||
isPickerOpen: false,
|
isPickerOpen: false,
|
||||||
|
isAddingMixed: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -132,7 +134,7 @@ export class QueriesTab extends PureComponent<Props, State> {
|
|||||||
|
|
||||||
if (hasHelp) {
|
if (hasHelp) {
|
||||||
this.setState({
|
this.setState({
|
||||||
helpContent: <h2>Loading help...</h2>,
|
helpContent: <h3>Loading help...</h3>,
|
||||||
isLoadingHelp: true,
|
isLoadingHelp: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -148,7 +150,7 @@ export class QueriesTab extends PureComponent<Props, State> {
|
|||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
helpContent: 'Error occured when loading help',
|
helpContent: <h3>'Error occured when loading help'</h3>,
|
||||||
isLoadingHelp: false,
|
isLoadingHelp: false,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -240,6 +242,11 @@ export class QueriesTab extends PureComponent<Props, State> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onAddQueryClick = () => {
|
onAddQueryClick = () => {
|
||||||
|
if (this.state.currentDS.meta.mixed) {
|
||||||
|
this.setState({ isAddingMixed: true })
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.props.panel.addQuery();
|
this.props.panel.addQuery();
|
||||||
this.component.digest();
|
this.component.digest();
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
@ -276,9 +283,32 @@ export class QueriesTab extends PureComponent<Props, State> {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
renderMixedPicker = () => {
|
||||||
|
const { currentDS } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DataSourcePicker
|
||||||
|
datasources={this.datasources}
|
||||||
|
onChangeDataSource={this.onAddMixedQuery}
|
||||||
|
current={null}
|
||||||
|
autoFocus={true}
|
||||||
|
onBlur={this.onMixedPickerBlur}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
onAddMixedQuery = datasource => {
|
||||||
|
this.onAddQuery({ datasource: datasource.name });
|
||||||
|
this.setState({ isAddingMixed: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
onMixedPickerBlur = () => {
|
||||||
|
this.setState({ isAddingMixed: false });
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { panel } = this.props;
|
const { panel } = this.props;
|
||||||
const { currentDS } = this.state;
|
const { currentDS, isAddingMixed } = this.state;
|
||||||
const { hasQueryHelp } = currentDS.meta;
|
const { hasQueryHelp } = currentDS.meta;
|
||||||
|
|
||||||
const queryInspector = {
|
const queryInspector = {
|
||||||
@ -318,9 +348,8 @@ export class QueriesTab extends PureComponent<Props, State> {
|
|||||||
</span>
|
</span>
|
||||||
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
|
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
|
||||||
</label>
|
</label>
|
||||||
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
|
{!isAddingMixed && <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>Add Query</button>}
|
||||||
Add Query
|
{isAddingMixed && this.renderMixedPicker()}
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -169,6 +169,6 @@ $select-input-bg-disabled: $input-bg-disabled;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gf-form-select-box__desc-option__img {
|
.gf-form-select-box__desc-option__img {
|
||||||
width: 20px;
|
width: 16px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user