100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
import Vue from 'vue';
|
|
import VueApollo from 'vue-apollo';
|
|
import VueRouter from 'vue-router';
|
|
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
|
|
import EnvironmentsDetailHeader from './components/environments_detail_header.vue';
|
|
import { apolloProvider } from './graphql/client';
|
|
import environmentsMixin from './mixins/environments_mixin';
|
|
|
|
export const initHeader = () => {
|
|
const el = document.getElementById('environments-detail-view-header');
|
|
const container = document.getElementById('environments-detail-view');
|
|
const dataset = convertObjectPropsToCamelCase(JSON.parse(container.dataset.details));
|
|
|
|
return new Vue({
|
|
el,
|
|
mixins: [environmentsMixin],
|
|
data() {
|
|
const environment = {
|
|
name: dataset.name,
|
|
id: Number(dataset.id),
|
|
externalUrl: dataset.externalUrl,
|
|
isAvailable: dataset.isEnvironmentAvailable,
|
|
hasTerminals: dataset.hasTerminals,
|
|
autoStopAt: dataset.autoStopAt,
|
|
onSingleEnvironmentPage: true,
|
|
// TODO: These two props are snake_case because the environments_mixin file uses
|
|
// them and the mixin is imported in several files. It would be nice to conver them to camelCase.
|
|
stop_path: dataset.environmentStopPath,
|
|
delete_path: dataset.environmentDeletePath,
|
|
};
|
|
|
|
return {
|
|
environment,
|
|
};
|
|
},
|
|
render(createElement) {
|
|
return createElement(EnvironmentsDetailHeader, {
|
|
props: {
|
|
environment: this.environment,
|
|
canDestroyEnvironment: dataset.canDestroyEnvironment,
|
|
canUpdateEnvironment: dataset.canUpdateEnvironment,
|
|
canStopEnvironment: dataset.canStopEnvironment,
|
|
canAdminEnvironment: dataset.canAdminEnvironment,
|
|
cancelAutoStopPath: dataset.environmentCancelAutoStopPath,
|
|
terminalPath: dataset.environmentTerminalPath,
|
|
metricsPath: dataset.environmentMetricsPath,
|
|
updatePath: dataset.environmentEditPath,
|
|
},
|
|
});
|
|
},
|
|
});
|
|
};
|
|
|
|
export const initPage = async () => {
|
|
if (!gon.features.environmentDetailsVue) {
|
|
return null;
|
|
}
|
|
const EnvironmentsDetailPageModule = await import('./environment_details/index.vue');
|
|
const EnvironmentsDetailPage = EnvironmentsDetailPageModule.default;
|
|
const dataElement = document.getElementById('environments-detail-view');
|
|
const dataSet = convertObjectPropsToCamelCase(JSON.parse(dataElement.dataset.details));
|
|
|
|
Vue.use(VueApollo);
|
|
Vue.use(VueRouter);
|
|
const el = document.getElementById('environment_details_page');
|
|
|
|
const router = new VueRouter({
|
|
mode: 'history',
|
|
base: window.location.pathname,
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
name: 'environment_details',
|
|
component: EnvironmentsDetailPage,
|
|
props: (route) => ({
|
|
after: route.query.after,
|
|
before: route.query.before,
|
|
projectFullPath: dataSet.projectFullPath,
|
|
environmentName: dataSet.name,
|
|
}),
|
|
},
|
|
],
|
|
scrollBehavior(to, from, savedPosition) {
|
|
if (savedPosition) {
|
|
return savedPosition;
|
|
}
|
|
return { top: 0 };
|
|
},
|
|
});
|
|
|
|
return new Vue({
|
|
el,
|
|
apolloProvider: apolloProvider(),
|
|
router,
|
|
provide: {},
|
|
render(createElement) {
|
|
return createElement('router-view');
|
|
},
|
|
});
|
|
};
|