mirror of
https://github.com/grafana/grafana.git
synced 2025-02-12 16:45:43 -06:00
02cb7ff436
Explore now uses the timezone of the user to decide if local browser time or UTC should be used. - Now uses TimeRange instead of RawTimeRange in explore item state tree and only parsing actual time in a few action handlers. - Time picker should now properly handle moving back/forward and apply time range when both utc and non utc time zone. - URL range representation is changed from YYYY-MM-DD HH:mm:ss to epoch ms. - Now uses AbsoluteTimeRange in graph component instead of moment. - Makes a copy of the time range passed to timeSrv to make sure immutability of explore time range when for example elasticsearch test datasources uses timeSrv and sets a time range of last 1 min. - Various refactorings and cleanup. Closes #12812
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
// Libraries
|
|
import React, { PureComponent } from 'react';
|
|
import moment from 'moment';
|
|
|
|
// Services
|
|
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
|
|
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
|
|
|
|
// Types
|
|
import { Emitter } from 'app/core/utils/emitter';
|
|
import { DataQuery, TimeRange } from '@grafana/ui';
|
|
import 'app/features/plugins/plugin_loader';
|
|
|
|
interface QueryEditorProps {
|
|
datasource: any;
|
|
error?: string | JSX.Element;
|
|
onExecuteQuery?: () => void;
|
|
onQueryChange?: (value: DataQuery) => void;
|
|
initialQuery: DataQuery;
|
|
exploreEvents: Emitter;
|
|
range: TimeRange;
|
|
}
|
|
|
|
export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
|
|
element: any;
|
|
component: AngularComponent;
|
|
|
|
async componentDidMount() {
|
|
if (!this.element) {
|
|
return;
|
|
}
|
|
|
|
const { datasource, initialQuery, exploreEvents, range } = this.props;
|
|
this.initTimeSrv(range);
|
|
|
|
const loader = getAngularLoader();
|
|
const template = '<plugin-component type="query-ctrl"> </plugin-component>';
|
|
const target = { datasource: datasource.name, ...initialQuery };
|
|
const scopeProps = {
|
|
ctrl: {
|
|
datasource,
|
|
target,
|
|
refresh: () => {
|
|
this.props.onQueryChange(target);
|
|
this.props.onExecuteQuery();
|
|
},
|
|
onQueryChange: () => {
|
|
this.props.onQueryChange(target);
|
|
},
|
|
events: exploreEvents,
|
|
panel: { datasource, targets: [target] },
|
|
dashboard: {},
|
|
},
|
|
};
|
|
|
|
this.component = loader.load(this.element, scopeProps, template);
|
|
this.props.onQueryChange(target);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.component) {
|
|
this.component.destroy();
|
|
}
|
|
}
|
|
|
|
initTimeSrv(range: TimeRange) {
|
|
const timeSrv = getTimeSrv();
|
|
timeSrv.init({
|
|
time: {
|
|
from: moment(range.from),
|
|
to: moment(range.to),
|
|
},
|
|
refresh: false,
|
|
getTimezone: () => 'utc',
|
|
timeRangeUpdated: () => console.log('refreshDashboard!'),
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return <div className="gf-form-query" ref={element => (this.element = element)} style={{ width: '100%' }} />;
|
|
}
|
|
}
|