GP: update URL when running a test (closes #646)

src/assets/js/app-globalping.js

@@ -31,6 +31,12 @@ app.router.addRoute('/globalping/slack', cGlobalpingSlack);
 app.router.addRoute('/globalping/network-tools/:params?', cGlobalpingNetworkTools);
 app.router.addRoute('/globalping/integrations', cGlobalpingIntegrations);
 
+app.router.replaceQueryParam = function (name, newValue) {
+	history.replaceState(history.state, null, location.href.replace(new RegExp(`${name}=[^&]+|$`), `${name}=${encodeURIComponent(newValue)}`));
+	this.route.view.set(name, newValue);
+	return this;
+};
+
 _.onDocumentReady(() => {
 	let state = {};
 	let ractive = new Ractive();

src/views/components/gp-top-navigation.html

@@ -3,7 +3,7 @@
 		<div class="c-gp-top-navigation_scrollable_inner">
 			{{#each links}}
 				<a href="{{this.href}}"
-					class="c-gp-top-navigation_scrollable_inner_item {{#if currentName === this.name}}active{{/if}}">
+					class="c-gp-top-navigation_scrollable_inner_item {{#if currentName === this.name}}active{{/if}}" on-click="this.main && @this.fire('main-logo-click')">
 					{{this.text}}
 					{{#if currentName === this.name}}
 						<div class="c-gp-top-navigation_scrollable_inner_item_active-line"></div>
@@ -23,6 +23,7 @@
 						href: '/globalping',
 						name: 'globalping',
 						text: 'Globalping',
+						main: true,
 					},
 					{
 						href: '/globalping/cli',

src/views/pages/globalping.html

@@ -1429,10 +1429,14 @@
 		},
 		oninit () {
 			if (!Ractive.isServer) {
+				this.on('c-header.main-logo-click c-gp-top-navigation.main-logo-click', () => {
+					this.set('measurement', '');
+					return false;
+				});
+
 				// check if ids are present in query string
 				// if so - it is a share-results-flow
-				let qsStringsArr = this.get('@shared.app.router.uri.qs').replace('?', '').split('&');
-				let { measurement = '' } = Object.fromEntries(qsStringsArr.map(s => s.split('=')));
+				let measurement = this.get('measurement');
 				let qsMeasurementIdsArr = [];
 				let isInfiniteMeas = false;
 
@@ -1895,6 +1899,9 @@
 				// set measurement ID for re-use probes case
 				this.set('prevProbesMeasId', res.response.id);
 
+				// Update the URL.
+				this.set('measurement', res.response.id);
+
 				// set response headers for gp-credits/gp-credits-message
 				this.set('rateCreditsData', { ...res.responseHeaders });
 
@@ -1923,6 +1930,9 @@
 						this.set('rateCreditsData', combinedHeaders);
 						this.getTestMeasurementById({ measurementId: res.response.id });
 						this.getTestMeasurementById({ measurementId: res1.response.id, resNumber: 1 });
+
+						// Update the URL without creating a new history entry.
+						app.router.replaceQueryParam('measurement', `${this.get('measurement')},${res1.response.id}`);
 					}).catch((err) => {
 						this.handlePostGPMeasError(err);
 					});
@@ -2323,7 +2333,7 @@
 								this.set('mainOptions.limit', testRes.limit || DEFAULT_LIMIT);
 
 								// ipVersion (target ip-type-switch) came with the measurementOptions but should be treated as the mainOptions
-								if (testRes.measurementOptions.ipVersion) {
+								if (testRes.measurementOptions?.ipVersion) {
 									this.set('mainOptions.ipVersion', testRes.measurementOptions.ipVersion);
 
 									delete testRes.measurementOptions.ipVersion;
@@ -2747,6 +2757,13 @@
 				// set measurement ID for re-use probes case
 				this.set('prevProbesMeasId', res.response.id);
 
+				// Update the URL.
+				if (resNumber === 0) {
+					this.set('measurement', res.response.id);
+				} else {
+					app.router.replaceQueryParam('measurement', `${this.get('measurement').split('.').slice(-9).join('.')}.${res.response.id}`);
+				}
+
 				let updReqParams = {
 					...reqParams,
 					locations: res.response.id,