mirror of https://github.com/grafana/grafana
Frontend: Reload the browser when backend configuration/assets change (#79057)
* Detect frontend asset changes * Update * merge main * Frontend: Detect new assets / versions / config changes (#79258) * avoid first check * Updates and add tests * Update * Update * Updated code * refine * use context --------- Co-authored-by: Ryan McKinley <ryantxu@gmail.com>pull/80010/head
Torkel Ödegaard
2 years ago
committed by
GitHub
parent
7210e378b8
commit
e924627659
@ -0,0 +1,49 @@ |
|||||||
|
import { locationService, setBackendSrv, BackendSrv } from '@grafana/runtime'; |
||||||
|
|
||||||
|
import { NewFrontendAssetsChecker } from './NewFrontendAssetsChecker'; |
||||||
|
|
||||||
|
describe('NewFrontendAssetsChecker', () => { |
||||||
|
const backendApiGet = jest.fn().mockReturnValue(Promise.resolve({})); |
||||||
|
const locationReload = jest.fn(); |
||||||
|
|
||||||
|
const originalLocation = window.location; |
||||||
|
|
||||||
|
beforeAll(() => { |
||||||
|
Object.defineProperty(window, 'location', { |
||||||
|
configurable: true, |
||||||
|
value: { reload: locationReload }, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
afterAll(() => { |
||||||
|
Object.defineProperty(window, 'location', { configurable: true, value: originalLocation }); |
||||||
|
}); |
||||||
|
|
||||||
|
setBackendSrv({ |
||||||
|
get: backendApiGet, |
||||||
|
} as unknown as BackendSrv); |
||||||
|
|
||||||
|
it('Should skip update checks if below interval', () => { |
||||||
|
const checker = new NewFrontendAssetsChecker(); |
||||||
|
checker.start(); |
||||||
|
|
||||||
|
locationService.push('/d/123'); |
||||||
|
|
||||||
|
expect(backendApiGet).toHaveBeenCalledTimes(0); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Should do update check when changing dashboard or going home', async () => { |
||||||
|
const checker = new NewFrontendAssetsChecker(0); |
||||||
|
checker.start(); |
||||||
|
|
||||||
|
locationService.push('/d/asd'); |
||||||
|
locationService.push('/d/other'); |
||||||
|
locationService.push('/d/other?viewPanel=2'); |
||||||
|
locationService.push('/ignored'); |
||||||
|
locationService.push('/ignored?asd'); |
||||||
|
locationService.push('/ignored/sub'); |
||||||
|
locationService.push('/home'); |
||||||
|
|
||||||
|
expect(backendApiGet).toHaveBeenCalledTimes(2); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
import { Location } from 'history'; |
||||||
|
import { isEqual } from 'lodash'; |
||||||
|
|
||||||
|
import { getBackendSrv, getGrafanaLiveSrv, locationService, reportInteraction } from '@grafana/runtime'; |
||||||
|
|
||||||
|
export class NewFrontendAssetsChecker { |
||||||
|
private hasUpdates = false; |
||||||
|
private previous?: FrontendAssetsAPIDTO; |
||||||
|
private interval: number; |
||||||
|
private checked = Date.now(); |
||||||
|
private prevLocationPath = ''; |
||||||
|
|
||||||
|
public constructor(interval?: number) { |
||||||
|
// Default to never check for updates if last check was 5 minutes ago
|
||||||
|
this.interval = interval ?? 1000 * 60 * 5; |
||||||
|
} |
||||||
|
|
||||||
|
public start() { |
||||||
|
// Subscribe to live connection state changes and check for new assets when re-connected
|
||||||
|
const live = getGrafanaLiveSrv(); |
||||||
|
|
||||||
|
if (live) { |
||||||
|
live.getConnectionState().subscribe((connected) => { |
||||||
|
if (connected) { |
||||||
|
this._checkForUpdates(); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// Subscribe to location changes
|
||||||
|
locationService.getHistory().listen(this.locationUpdated.bind(this)); |
||||||
|
this.prevLocationPath = locationService.getLocation().pathname; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Tries to detect some navigation events where it's safe to trigger a reload |
||||||
|
*/ |
||||||
|
private locationUpdated(location: Location) { |
||||||
|
if (this.prevLocationPath === location.pathname) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const newLocationSegments = location.pathname.split('/'); |
||||||
|
|
||||||
|
// We are going to home
|
||||||
|
if (newLocationSegments[1] === '/' && this.prevLocationPath !== '/') { |
||||||
|
this.reloadIfUpdateDetected(); |
||||||
|
} |
||||||
|
// Moving to dashboard (or changing dashboards)
|
||||||
|
else if (newLocationSegments[1] === 'd') { |
||||||
|
this.reloadIfUpdateDetected(); |
||||||
|
} |
||||||
|
// Track potential page change
|
||||||
|
else if (this.hasUpdates) { |
||||||
|
reportInteraction('new_frontend_assets_reload_ignored', { |
||||||
|
newLocation: location.pathname, |
||||||
|
prevLocation: this.prevLocationPath, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.prevLocationPath = location.pathname; |
||||||
|
} |
||||||
|
|
||||||
|
private async _checkForUpdates() { |
||||||
|
if (this.hasUpdates) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Don't check too often
|
||||||
|
if (Date.now() - this.checked < this.interval) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.checked = Date.now(); |
||||||
|
|
||||||
|
const previous = this.previous; |
||||||
|
const result: FrontendAssetsAPIDTO = await getBackendSrv().get('/api/frontend/assets'); |
||||||
|
|
||||||
|
if (previous && !isEqual(previous, result)) { |
||||||
|
this.hasUpdates = true; |
||||||
|
|
||||||
|
// Report that we detected new assets
|
||||||
|
reportInteraction('new_frontend_assets_detected', { |
||||||
|
assets: previous.assets !== result.assets, |
||||||
|
plugins: previous.plugins !== result.plugins, |
||||||
|
version: previous.version !== result.version, |
||||||
|
flags: previous.flags !== result.flags, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.previous = result; |
||||||
|
} |
||||||
|
|
||||||
|
/** This is called on page navigation events */ |
||||||
|
public reloadIfUpdateDetected() { |
||||||
|
if (this.hasUpdates) { |
||||||
|
// Report that we detected new assets
|
||||||
|
reportInteraction('new_frontend_assets_reload', {}); |
||||||
|
window.location.reload(); |
||||||
|
} |
||||||
|
|
||||||
|
// Async check if the assets have changed
|
||||||
|
this._checkForUpdates(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
interface FrontendAssetsAPIDTO { |
||||||
|
assets: string; |
||||||
|
flags: string; |
||||||
|
plugins: string; |
||||||
|
version: string; |
||||||
|
} |
||||||
Loading…
Reference in new issue