1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
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');
},
});
};
|
