mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'panel-edit-in-react' of github.com:grafana/grafana into panel-edit-in-react
This commit is contained in:
Torkel Ödegaard
commit
222f26ea80
@ -8,11 +8,7 @@ import { DashboardModel } from '../dashboard_model';
|
||||
import './../../panel/metrics_tab';
|
||||
import config from 'app/core/config';
|
||||
import { QueryInspector } from './QueryInspector';
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
import { Input } from 'app/core/components/Form';
|
||||
import { InputStatus, EventsWithValidation } from 'app/core/components/Form/Input';
|
||||
import { isValidTimeSpan } from 'app/core/utils/rangeutil';
|
||||
import { ValidationEvents } from 'app/types';
|
||||
import { TimeRangeOptions } from './TimeRangeOptions';
|
||||
|
||||
// Services
|
||||
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
|
||||
@ -43,20 +39,6 @@ interface LoadingPlaceholderProps {
|
||||
|
||||
const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
|
||||
|
||||
const timeRangeValidationEvents: ValidationEvents = {
|
||||
[EventsWithValidation.onBlur]: [
|
||||
{
|
||||
rule: value => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return isValidTimeSpan(value);
|
||||
},
|
||||
errorMessage: 'Not a valid timespan',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export class QueriesTab extends PureComponent<Props, State> {
|
||||
element: any;
|
||||
component: AngularComponent;
|
||||
@ -220,10 +202,19 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
},
|
||||
};
|
||||
|
||||
return Object.keys(queryOptions).map(key => {
|
||||
const options = allOptions[key];
|
||||
return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
|
||||
});
|
||||
const dsOptions = queryOptions
|
||||
? Object.keys(queryOptions).map(key => {
|
||||
const options = allOptions[key];
|
||||
return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
|
||||
})
|
||||
: null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<TimeRangeOptions panel={this.props.panel} />
|
||||
{dsOptions}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
renderQueryInspector = () => {
|
||||
@ -236,42 +227,9 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
return isLoading ? <LoadingPlaceholder text="Loading help..." /> : helpHtml;
|
||||
};
|
||||
|
||||
emptyToNull = (value: string) => {
|
||||
return value === '' ? null : value;
|
||||
};
|
||||
|
||||
onOverrideTime = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = this.emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
|
||||
panel.timeFrom = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onTimeShift = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = this.emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
|
||||
panel.timeShift = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onToggleTimeOverride = () => {
|
||||
const { panel } = this.props;
|
||||
panel.hideTimeOverride = !panel.hideTimeOverride;
|
||||
panel.refresh();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { currentDatasource } = this.state;
|
||||
const hideTimeOverride = this.props.panel.hideTimeOverride;
|
||||
console.log('hideTimeOverride', hideTimeOverride);
|
||||
const { hasQueryHelp, queryOptions } = currentDatasource.meta;
|
||||
const hasQueryOptions = !!queryOptions;
|
||||
const { hasQueryHelp } = currentDatasource.meta;
|
||||
const dsInformation = {
|
||||
title: currentDatasource.name,
|
||||
imgSrc: currentDatasource.meta.info.logos.small,
|
||||
@ -302,7 +260,7 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
const options = {
|
||||
title: '',
|
||||
icon: 'fa fa-cog',
|
||||
disabled: !hasQueryOptions,
|
||||
disabled: false,
|
||||
render: this.renderOptions,
|
||||
};
|
||||
|
||||
@ -310,52 +268,6 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
<EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[options, queryInspector, dsHelp]}>
|
||||
<>
|
||||
<div ref={element => (this.element = element)} style={{ width: '100%' }} />
|
||||
|
||||
<h5 className="section-heading">Time Range</h5>
|
||||
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">
|
||||
<i className="fa fa-clock-o" />
|
||||
</span>
|
||||
|
||||
<span className="gf-form-label width-12">Override relative time</span>
|
||||
<span className="gf-form-label width-6">Last</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="gf-form-input max-width-8"
|
||||
placeholder="1h"
|
||||
onBlur={this.onOverrideTime}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">
|
||||
<i className="fa fa-clock-o" />
|
||||
</span>
|
||||
<span className="gf-form-label width-12">Add time shift</span>
|
||||
<span className="gf-form-label width-6">Amount</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="gf-form-input max-width-8"
|
||||
placeholder="1h"
|
||||
onBlur={this.onTimeShift}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">
|
||||
<i className="fa fa-clock-o" />
|
||||
</span>
|
||||
</div>
|
||||
<Switch label="Hide time override info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</EditorTabBody>
|
||||
);
|
||||
|
||||
111
public/app/features/dashboard/dashgrid/TimeRangeOptions.tsx
Normal file
111
public/app/features/dashboard/dashgrid/TimeRangeOptions.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
import { Input } from 'app/core/components/Form';
|
||||
import { isValidTimeSpan } from 'app/core/utils/rangeutil';
|
||||
import { ValidationEvents } from 'app/types';
|
||||
import { EventsWithValidation } from 'app/core/components/Form/Input';
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { InputStatus } from 'app/core/components/Form/Input';
|
||||
|
||||
const timeRangeValidationEvents: ValidationEvents = {
|
||||
[EventsWithValidation.onBlur]: [
|
||||
{
|
||||
rule: value => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return isValidTimeSpan(value);
|
||||
},
|
||||
errorMessage: 'Not a valid timespan',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const emptyToNull = (value: string) => {
|
||||
return value === '' ? null : value;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
}
|
||||
|
||||
export class TimeRangeOptions extends PureComponent<Props> {
|
||||
onOverrideTime = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
|
||||
panel.timeFrom = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onTimeShift = (evt, status: InputStatus) => {
|
||||
const { value } = evt.target;
|
||||
const { panel } = this.props;
|
||||
const emptyToNullValue = emptyToNull(value);
|
||||
if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
|
||||
panel.timeShift = emptyToNullValue;
|
||||
panel.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
onToggleTimeOverride = () => {
|
||||
const { panel } = this.props;
|
||||
panel.hideTimeOverride = !panel.hideTimeOverride;
|
||||
panel.refresh();
|
||||
};
|
||||
|
||||
render = () => {
|
||||
const hideTimeOverride = this.props.panel.hideTimeOverride;
|
||||
return (
|
||||
<>
|
||||
<h5 className="section-heading">Time Range</h5>
|
||||
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">
|
||||
<i className="fa fa-clock-o" />
|
||||
</span>
|
||||
|
||||
<span className="gf-form-label width-12">Override relative time</span>
|
||||
<span className="gf-form-label width-6">Last</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="gf-form-input max-width-8"
|
||||
placeholder="1h"
|
||||
onBlur={this.onOverrideTime}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">
|
||||
<i className="fa fa-clock-o" />
|
||||
</span>
|
||||
<span className="gf-form-label width-12">Add time shift</span>
|
||||
<span className="gf-form-label width-6">Amount</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="gf-form-input max-width-8"
|
||||
placeholder="1h"
|
||||
onBlur={this.onTimeShift}
|
||||
validationEvents={timeRangeValidationEvents}
|
||||
hideErrorMessage={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<span className="gf-form-label">
|
||||
<i className="fa fa-clock-o" />
|
||||
</span>
|
||||
</div>
|
||||
<Switch label="Hide time override info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user