Commit 97f7a7fb by Johannes Schill

react-panel: Add data source "options". Needs UX, WIP.

parent bc9f3a33
import React, { SFC } from 'react';
import Tooltip from 'app/core/components/Tooltip/Tooltip';
interface Props {
label: string;
placeholder?: string;
name?: string;
value?: string;
onChange?: (evt: any) => void;
tooltipInfo?: any;
}
export const DataSourceOptions: SFC<Props> = ({ label, placeholder, name, value, onChange, tooltipInfo }) => {
const dsOption = (
<div className="gf-form gf-form--flex-end">
<label className="gf-form-label">{label}</label>
<input
type="text"
className="gf-form-input width-6"
placeholder={placeholder}
name={name}
spellCheck={false}
onBlur={evt => onChange(evt.target.value)}
/>
</div>
);
return tooltipInfo ? <Tooltip content={tooltipInfo}>{dsOption}</Tooltip> : dsOption;
};
export default DataSourceOptions;
......@@ -14,7 +14,7 @@ export interface EditorToolBarView {
icon?: string;
disabled?: boolean;
onClick?: () => void;
render: (closeFunction: any) => JSX.Element;
render: (closeFunction: any) => JSX.Element | JSX.Element[];
}
interface State {
......@@ -42,7 +42,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
static getDerivedStateFromProps(props, state) {
if (state.openView) {
const activeToolbarItem = props.toolbarItems.find(item => item.title === state.openView.title);
const activeToolbarItem = props.toolbarItems.find(
item => item.title === state.openView.title && item.icon === state.openView.icon
);
if (activeToolbarItem) {
return {
...state,
......
import React, { PureComponent } from 'react';
import DataSourceOption from './DataSourceOption';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
import { EditorTabBody } from './EditorTabBody';
import { DataSourcePicker } from './DataSourcePicker';
......@@ -139,11 +139,71 @@ export class QueriesTab extends PureComponent<Props, State> {
}
};
renderOptions = close => {
const { currentDatasource } = this.state;
const { queryOptions } = currentDatasource.meta;
const { panel } = this.props;
const onChangeFn = (panelKey: string) => {
return (value: string | number) => {
panel[panelKey] = value;
panel.refresh();
};
};
const allOptions = {
cacheTimeout: {
label: 'Cache timeout',
placeholder: '60',
name: 'cacheTimeout',
value: panel.cacheTimeout,
tooltipInfo: (
<>
If your time series store has a query cache this option can override the default cache timeout. Specify a
numeric value in seconds.
</>
),
},
maxDataPoints: {
label: 'Max data points',
placeholder: 'auto',
name: 'maxDataPoints',
value: panel.maxDataPoints,
tooltipInfo: (
<>
The maximum data points the query should return. For graphs this is automatically set to one data point per
pixel.
</>
),
},
minInterval: {
label: 'Min time interval',
placeholder: '0',
name: 'minInterval',
value: panel.interval,
panelKey: 'interval',
tooltipInfo: (
<>
A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example{' '}
<code>1m</code> if your data is written every minute. Access auto interval via variable{' '}
<code>$__interval</code> for time range string and <code>$__interval_ms</code> for numeric variable that can
be used in math expressions.
</>
),
},
};
return Object.keys(queryOptions).map(key => {
const options = allOptions[key];
return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
});
};
render() {
const { currentDatasource } = this.state;
const { helpHtml } = this.state.help;
const { hasQueryHelp } = currentDatasource.meta;
const { hasQueryHelp, queryOptions } = currentDatasource.meta;
const hasQueryOptions = !!queryOptions;
const dsInformation = {
title: currentDatasource.name,
imgSrc: currentDatasource.meta.info.logos.small,
......@@ -171,8 +231,14 @@ export class QueriesTab extends PureComponent<Props, State> {
render: () => helpHtml,
};
const options = {
title: 'Options',
disabled: !hasQueryOptions,
render: this.renderOptions,
};
return (
<EditorTabBody main={dsInformation} toolbarItems={[queryInspector, dsHelp]}>
<EditorTabBody main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
<div ref={element => (this.element = element)} style={{ width: '100%' }} />
</EditorTabBody>
);
......
......@@ -94,6 +94,7 @@ export class PanelModel {
isEditing: boolean;
hasRefreshed: boolean;
events: Emitter;
cacheTimeout?: any;
constructor(model) {
this.events = new Emitter();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment