rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove custom VueRouter.resolve 

replace and push both work  as intended. You can
specify a a full url  if you don't want to have the baseUrl
prepended. Better yet, if you're navigating within
the app it's better to specify a location.

The custom resolve was actually breakinging a huge
amount of links in the app which was caused 404s if a
user attempted to open a link in a new tab. Most things appeared to work presumably because vue-router
was handling the page switches instead of the browser.

rancher/dashboard#643
This commit is contained in:
Cody Jackson 2020-05-13 17:44:20 -07:00
parent 16a51b9045
commit ed1ea6373f
9 changed files with 72 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/formatter/IngressTarget.vue
View File

@ -84,7 +84,7 @@ export default {
const id = `${ this.namespace }/${ serviceName }`; const id = `${ this.namespace }/${ serviceName }`;
return isTargetsWorkload return isTargetsWorkload
? this.findWorkload(id)?.detailUrl || '' ? this.findWorkload(id)?.detailLocation || ''
: { : {
resource: SERVICE, resource: SERVICE,
id: serviceName, id: serviceName,

6
components/formatter/LinkDetail.vue
View File

@ -27,7 +27,7 @@ export default {
return get(this.row, this.opts.reference); return get(this.row, this.opts.reference);
} }
return this.row?.detailUrl; return this.row?.detailLocation;
}, },
} }
}; };
@ -35,8 +35,8 @@ export default {
<template> <template>
<span> <span>
<nuxt-link :to="to"> <n-link :to="to">
{{ value }} {{ value }}
</nuxt-link> </n-link>
</span> </span>
</template> </template>

2
components/formatter/LinkDetailImage.vue
View File

@ -20,7 +20,7 @@ export default {
<template> <template>
<span> <span>
<nuxt-link :to="row.detailUrl"> <nuxt-link :to="row.detailLocation">
{{ value }} {{ value }}
</nuxt-link> </nuxt-link>
<br /> <br />

2
components/formatter/SecretType.vue
View File

@ -21,7 +21,7 @@ export default {
const serviceAccount = await this.$store.dispatch('cluster/find', { type: SERVICE_ACCOUNT, id: this.value.serviceAccountID }); const serviceAccount = await this.$store.dispatch('cluster/find', { type: SERVICE_ACCOUNT, id: this.value.serviceAccountID });
if (serviceAccount) { if (serviceAccount) {
this.serviceAccountLink = serviceAccount.detailUrl; this.serviceAccountLink = serviceAccount.detailLocation;
} }
} }
} }

13
models/app.js
View File

@ -1,16 +1,21 @@
import { addParams } from '@/utils/url';
import { MODE, _EDIT } from '@/config/query-params'; import { MODE, _EDIT } from '@/config/query-params';
export default { export default {
appEditUrl() { appEditUrl() {
return this.detailUrl(); return this.detailLocation;
}, },
goToEdit() { goToEdit() {
return (moreQuery = {}) => { return (moreQuery = {}) => {
const url = addParams(this.appEditUrl, { [MODE]: _EDIT, ...moreQuery }); const location = this.appEditUrl;
this.currentRouter().push({ path: url }); location.query = {
...location.query,
[MODE]: _EDIT,
...moreQuery
};
this.currentRouter().push(location);
}; };
}, },
}; };

22
models/apps/rancher-gatekeeper-operator.js
View File

@ -1,5 +1,4 @@
import { MODE, _CREATE } from '@/config/query-params'; import { MODE, _CREATE } from '@/config/query-params';
import { addParams } from '@/utils/url';
import { GATEKEEPER_CONSTRAINT_TEMPLATE } from '@/config/types'; import { GATEKEEPER_CONSTRAINT_TEMPLATE } from '@/config/types';
import { downloadFile } from '@/utils/download'; import { downloadFile } from '@/utils/download';
@ -45,25 +44,30 @@ export default {
goToAddConstraint() { goToAddConstraint() {
return (moreQuery = {}) => { return (moreQuery = {}) => {
const constraintUrl = this.currentRouter().resolve({ name: 'c-cluster-gatekeeper-constraints-create' }).href; const location = {
const url = addParams(constraintUrl, { name: 'c-cluster-gatekeeper-constraints-create',
query: {
[MODE]: _CREATE, [MODE]: _CREATE,
...moreQuery ...moreQuery
}); }
};
this.currentRouter().push({ path: url }); this.currentRouter().push(location);
}; };
}, },
goToAddTemplate() { goToAddTemplate() {
return (moreQuery = {}) => { return (moreQuery = {}) => {
const constraintUrl = this.currentRouter().resolve({ name: 'c-cluster-resource-create', params: { resource: GATEKEEPER_CONSTRAINT_TEMPLATE } }).href; const location = {
const url = addParams(constraintUrl, { name: 'c-cluster-resource-create',
params: { resource: GATEKEEPER_CONSTRAINT_TEMPLATE },
query: {
[MODE]: _CREATE, [MODE]: _CREATE,
...moreQuery ...moreQuery
}); }
};
this.currentRouter().push({ path: url }); this.currentRouter().push(location);
}; };
}, },

12
models/rio.cattle.io.service.js
View File

@ -5,7 +5,6 @@ import {
} from '@/config/query-params'; } from '@/config/query-params';
import { escapeHtml } from '@/utils/string'; import { escapeHtml } from '@/utils/string';
import { DATE_FORMAT, TIME_FORMAT } from '@/store/prefs'; import { DATE_FORMAT, TIME_FORMAT } from '@/store/prefs';
import { addParams } from '@/utils/url';
import { PRIVATE } from '@/plugins/steve/resource-proxy'; import { PRIVATE } from '@/plugins/steve/resource-proxy';
import { RIO } from '@/config/types'; import { RIO } from '@/config/types';
import { formatSi } from '@/utils/units'; import { formatSi } from '@/utils/units';
@ -411,15 +410,16 @@ export default {
}, },
goToStage() { goToStage() {
const router = this.currentRouter();
return (moreQuery = {}) => { return (moreQuery = {}) => {
const url = addParams(this.detailUrl, { const location = this.detailLocation;
location.query = {
...location.query,
[MODE]: _STAGE, [MODE]: _STAGE,
...moreQuery ...moreQuery
}); };
router.push({ path: url }); this.currentRouter().push(location);
}; };
}, },

14
plugins/extend-router.js
View File

@ -1,20 +1,6 @@
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
const _resolve = VueRouter.prototype.resolve;
// Resolve returns URLs that include the base URL, which then gets added again
// by router.replace or router.push. So don't do that.
VueRouter.prototype.resolve = function() {
const out = _resolve.apply(this, arguments);
if ( this.options.base ) {
out.href = out.href.substr(this.options.base.length).replace(/^\/*/, '/');
}
return out;
};
VueRouter.prototype.applyQuery = function(qp, defaults = {}) { VueRouter.prototype.applyQuery = function(qp, defaults = {}) {
const query = queryParamsFor(this.currentRoute.query, qp, defaults); const query = queryParamsFor(this.currentRoute.query, qp, defaults);

66
plugins/steve/resource-instance.js
View File

@ -9,7 +9,6 @@ import {
} from '@/config/query-params'; } from '@/config/query-params';
import { findBy } from '@/utils/array'; import { findBy } from '@/utils/array';
import { DEV } from '@/store/prefs'; import { DEV } from '@/store/prefs';
import { addParams } from '@/utils/url';
import { DESCRIPTION } from '@/config/labels-annotations'; import { DESCRIPTION } from '@/config/labels-annotations';
const REMAP_STATE = { disabled: 'inactive' }; const REMAP_STATE = { disabled: 'inactive' };
@ -657,76 +656,73 @@ export default {
}; };
}, },
detailUrl() { detailLocation() {
const router = this.currentRouter();
const schema = this.$getters['schemaFor'](this.type); const schema = this.$getters['schemaFor'](this.type);
const route = `c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`; return {
name: `c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
const params = { params: {
resource: this.type, resource: this.type,
namespace: this.metadata && this.metadata.namespace, namespace: this.metadata && this.metadata.namespace,
id: this.metadata.name id: this.metadata.name
}; }
const url = router.resolve({
name: route,
params,
}).href;
return url;
},
goToClone() {
return (moreQuery = {}) => {
const url = addParams(this.detailUrl, {
[MODE]: _CLONE,
...moreQuery
});
this.currentRouter().push({ path: url });
}; };
}, },
goToEdit() { goToEdit() {
return (moreQuery = {}) => { return (moreQuery = {}) => {
const url = addParams(this.detailUrl, { [MODE]: _EDIT, ...moreQuery }); const location = this.detailLocation;
this.currentRouter().push({ path: url }); location.query = {
...location.query,
[MODE]: _EDIT,
...moreQuery
};
this.currentRouter().push(location);
}; };
}, },
goToEditYaml() { goToEditYaml() {
return () => { return () => {
const url = addParams(this.detailUrl, { const location = this.detailLocation;
location.query = {
...location.query,
[MODE]: _EDIT, [MODE]: _EDIT,
[AS_YAML]: _FLAGGED [AS_YAML]: _FLAGGED
}); };
this.currentRouter().push({ path: url }); this.currentRouter().push(location);
}; };
}, },
goToViewYaml() { goToViewYaml() {
return () => { return () => {
const url = addParams(this.detailUrl, { const location = this.detailLocation;
location.query = {
...location.query,
[MODE]: _VIEW, [MODE]: _VIEW,
[AS_YAML]: _FLAGGED [AS_YAML]: _FLAGGED
}); };
this.currentRouter().push({ path: url }); this.currentRouter().push(location);
}; };
}, },
cloneYaml() { cloneYaml() {
return (moreQuery = {}) => { return (moreQuery = {}) => {
const url = addParams(this.detailUrl, { const location = this.detailLocation;
location.query = {
...location.query,
[MODE]: _CLONE, [MODE]: _CLONE,
[AS_YAML]: _FLAGGED, [AS_YAML]: _FLAGGED,
...moreQuery ...moreQuery
}); };
this.currentRouter().push({ path: url }); this.currentRouter().push(location);
}; };
}, },