RoutingNG: Fix infinite loop caused by history state not being cleaned up (#31952)

* Fix infinite loop caused by history state not being cleaned up

* Ude forceRouteReload counter instead of bool flag

* Review fix
This commit is contained in:
Dominik Prokop
2021-03-16 09:27:32 +01:00
committed by GitHub
parent 7552711660
commit 0d92425bb8
6 changed files with 23 additions and 62 deletions

View File

@@ -15,12 +15,20 @@ const restoreDashboard = async (version: number, dashboard: DashboardModel) => {
export const useDashboardRestore = (version: number) => {
const dashboard = useSelector((state: StoreState) => state.dashboard.getModel());
const [state, onRestoreDashboard] = useAsyncFn(async () => await restoreDashboard(version, dashboard!), []);
useEffect(() => {
if (state.value) {
const location = locationService.getLocation();
const newUrl = locationUtil.stripBaseFromUrl(state.value.url);
locationService.replace(newUrl, true);
const prevState = (location.state as any)?.routeReloadCounter;
locationService.replace({
...location,
pathname: newUrl,
state: { routeReloadCounter: prevState ? prevState + 1 : 1 },
});
appEvents.emit(AppEvents.alertSuccess, ['Dashboard restored', 'Restored from version ' + version]);
}
}, [state]);
return { state, onRestoreDashboard };
};

View File

@@ -25,7 +25,6 @@ import { findTemplateVarChanges } from '../../variables/utils';
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { getTimeSrv } from '../services/TimeSrv';
import { shouldReloadPage } from 'app/core/navigation/utils';
import { getKioskMode } from 'app/core/navigation/kiosk';
import { UrlQueryValue } from '@grafana/data';
@@ -68,6 +67,7 @@ export interface State {
}
export class DashboardPage extends PureComponent<Props, State> {
private forceRouteReloadCounter = 0;
state: State = this.getCleanState();
getCleanState(): State {
@@ -82,6 +82,7 @@ export class DashboardPage extends PureComponent<Props, State> {
componentDidMount() {
this.initDashboard();
this.forceRouteReloadCounter = (this.props.history.location.state as any)?.routeReloadCounter || 0;
}
componentWillUnmount() {
@@ -116,6 +117,8 @@ export class DashboardPage extends PureComponent<Props, State> {
const { dashboard, match, queryParams, templateVarsChangedInUrl } = this.props;
const { editPanel, viewPanel } = this.state;
const routeReloadCounter = (this.props.history.location.state as any)?.routeReloadCounter;
if (!dashboard) {
return;
}
@@ -125,8 +128,12 @@ export class DashboardPage extends PureComponent<Props, State> {
document.title = dashboard.title + ' - ' + Branding.AppTitle;
}
if (prevProps.match.params.uid !== match.params.uid || shouldReloadPage(this.props.location)) {
if (
prevProps.match.params.uid !== match.params.uid ||
(routeReloadCounter !== undefined && this.forceRouteReloadCounter !== routeReloadCounter)
) {
this.initDashboard();
this.forceRouteReloadCounter = routeReloadCounter;
return;
}