New Editor: refresh when time values change (#22049)

This commit is contained in:
Ryan McKinley 2020-02-09 18:48:14 +01:00 committed by GitHub
parent 58639ee53e
commit 34b52cb835
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 3 deletions

View File

@ -11,12 +11,12 @@ export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldC
value,
onChange,
}) => {
return <UnitPicker value={value} onChange={onChange} />;
return <UnitPicker value={value} onChange={onChange} useNewForms />;
};
export const UnitOverrideEditor: React.FC<FieldOverrideEditorProps<string, UnitFieldConfigSettings>> = ({
value,
onChange,
}) => {
return <UnitPicker value={value} onChange={onChange} />;
return <UnitPicker value={value} onChange={onChange} useNewForms />;
};

View File

@ -7,6 +7,7 @@ import {
DefaultTimeRange,
PanelEvents,
SelectableValue,
TimeRange,
} from '@grafana/data';
import {
stylesFactory,
@ -33,6 +34,8 @@ import { Unsubscribable } from 'rxjs';
import { PanelTitle } from './PanelTitle';
import { DisplayMode, displayModes } from './types';
import { PanelEditorTabs } from './PanelEditorTabs';
import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
import { LocationState, CoreEvents } from 'app/types';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const handleColor = selectThemeVariant(
@ -111,6 +114,7 @@ interface Props {
dashboard: DashboardModel;
sourcePanel: PanelModel;
updateLocation: typeof updateLocation;
location: LocationState;
}
interface State {
@ -147,11 +151,16 @@ export class PanelEditor extends PureComponent<Props, State> {
const { sourcePanel } = this.props;
const { panel } = this.state;
panel.events.on(PanelEvents.panelInitialized, () => {
const { panel } = this.state;
if (panel.angularPanel) {
console.log('Refresh angular panel in new editor');
}
this.setState(state => ({
pluginLoadedCounter: state.pluginLoadedCounter + 1,
}));
});
// Get data from any pending
// Get data from any pending queries
sourcePanel
.getQueryRunner()
.getData()
@ -167,6 +176,9 @@ export class PanelEditor extends PureComponent<Props, State> {
this.querySubscription = queryRunner.getData().subscribe({
next: (data: PanelData) => this.setState({ data }),
});
// Listen to timepicker changes
this.props.dashboard.on(CoreEvents.timeRangeUpdated, this.onTimeRangeUpdated);
}
componentWillUnmount() {
@ -174,8 +186,18 @@ export class PanelEditor extends PureComponent<Props, State> {
this.querySubscription.unsubscribe();
}
//this.cleanUpAngularOptions();
// Remove the time listener
this.props.dashboard.off(CoreEvents.timeRangeUpdated, this.onTimeRangeUpdated);
}
onTimeRangeUpdated = (timeRange: TimeRange) => {
const { panel } = this.state;
if (panel) {
panel.refresh();
}
};
onPanelUpdate = () => {
const { panel } = this.state;
const { dashboard } = this.props;
@ -320,6 +342,7 @@ export class PanelEditor extends PureComponent<Props, State> {
}
render() {
const { dashboard, location } = this.props;
const { panel, mode, showPanelOptions } = this.state;
const styles = getStyles(config.theme);
@ -346,6 +369,10 @@ export class PanelEditor extends PureComponent<Props, State> {
<Forms.Button variant="destructive" onClick={this.onDiscard}>
Discard
</Forms.Button>
<div>
<DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
</div>
</div>
</div>
<div className={styles.panes}>