Commit 874ff4a7 by Torkel Ödegaard

Merge branch 'panel-edit-in-react' of github.com:grafana/grafana into panel-edit-in-react

parents 9baa54e9 97f7a7fb
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 { ...@@ -14,7 +14,7 @@ export interface EditorToolBarView {
icon?: string; icon?: string;
disabled?: boolean; disabled?: boolean;
onClick?: () => void; onClick?: () => void;
render: (closeFunction: any) => JSX.Element; render: (closeFunction: any) => JSX.Element | JSX.Element[];
} }
interface State { interface State {
...@@ -42,7 +42,9 @@ export class EditorTabBody extends PureComponent<Props, State> { ...@@ -42,7 +42,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
static getDerivedStateFromProps(props, state) { static getDerivedStateFromProps(props, state) {
if (state.openView) { 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) { if (activeToolbarItem) {
return { return {
...state, ...state,
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import DataSourceOption from './DataSourceOption';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
import { EditorTabBody } from './EditorTabBody'; import { EditorTabBody } from './EditorTabBody';
import { DataSourcePicker } from './DataSourcePicker'; import { DataSourcePicker } from './DataSourcePicker';
...@@ -139,11 +139,71 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -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() { render() {
const { currentDatasource } = this.state; const { currentDatasource } = this.state;
const { helpHtml } = this.state.help; const { helpHtml } = this.state.help;
const { hasQueryHelp } = currentDatasource.meta; const { hasQueryHelp, queryOptions } = currentDatasource.meta;
const hasQueryOptions = !!queryOptions;
const dsInformation = { const dsInformation = {
title: currentDatasource.name, title: currentDatasource.name,
imgSrc: currentDatasource.meta.info.logos.small, imgSrc: currentDatasource.meta.info.logos.small,
...@@ -171,8 +231,14 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -171,8 +231,14 @@ export class QueriesTab extends PureComponent<Props, State> {
render: () => helpHtml, render: () => helpHtml,
}; };
const options = {
title: 'Options',
disabled: !hasQueryOptions,
render: this.renderOptions,
};
return ( return (
<EditorTabBody main={dsInformation} toolbarItems={[queryInspector, dsHelp]}> <EditorTabBody main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
<div ref={element => (this.element = element)} style={{ width: '100%' }} /> <div ref={element => (this.element = element)} style={{ width: '100%' }} />
</EditorTabBody> </EditorTabBody>
); );
......
...@@ -94,6 +94,7 @@ export class PanelModel { ...@@ -94,6 +94,7 @@ export class PanelModel {
isEditing: boolean; isEditing: boolean;
hasRefreshed: boolean; hasRefreshed: boolean;
events: Emitter; events: Emitter;
cacheTimeout?: any;
constructor(model) { constructor(model) {
this.events = new Emitter(); 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