2019-08-16 16:21:46 +00:00
|
|
|
import { GlToast } from '@gitlab/ui';
|
2021-02-14 18:09:20 +00:00
|
|
|
import Vue from 'vue';
|
2020-06-16 15:08:32 +00:00
|
|
|
import createRouter from './router';
|
2021-02-14 18:09:20 +00:00
|
|
|
import { createStore } from './stores';
|
2020-06-30 12:08:57 +00:00
|
|
|
import { stateAndPropsFromDataset } from './utils';
|
2017-03-20 19:54:03 +00:00
|
|
|
|
2019-08-16 16:21:46 +00:00
|
|
|
Vue.use(GlToast);
|
|
|
|
|
2019-04-16 03:51:17 +00:00
|
|
|
export default (props = {}) => {
|
2018-03-06 07:25:19 +00:00
|
|
|
const el = document.getElementById('prometheus-graphs');
|
2018-02-22 06:07:58 +00:00
|
|
|
|
|
|
|
if (el && el.dataset) {
|
2020-06-30 12:08:57 +00:00
|
|
|
const { metricsDashboardBasePath, ...dataset } = el.dataset;
|
2019-06-05 22:03:30 +00:00
|
|
|
|
2020-07-15 21:09:26 +00:00
|
|
|
const { initState, dataProps } = stateAndPropsFromDataset(dataset);
|
2020-06-30 12:08:57 +00:00
|
|
|
const store = createStore(initState);
|
2020-06-16 15:08:32 +00:00
|
|
|
const router = createRouter(metricsDashboardBasePath);
|
|
|
|
|
2018-02-22 06:07:58 +00:00
|
|
|
// eslint-disable-next-line no-new
|
|
|
|
new Vue({
|
|
|
|
el,
|
2019-05-27 22:30:36 +00:00
|
|
|
store,
|
2020-06-16 15:08:32 +00:00
|
|
|
router,
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
dashboardProps: { ...dataProps, ...props },
|
|
|
|
};
|
2018-02-22 06:07:58 +00:00
|
|
|
},
|
2021-01-27 15:09:15 +00:00
|
|
|
render(h) {
|
|
|
|
return h('RouterView', {
|
|
|
|
// This is attrs rather than props because:
|
|
|
|
// 1. RouterView only actually defines one prop: `name`.
|
|
|
|
// 2. The RouterView [throws away other props][1] given to it, in
|
|
|
|
// favour of those configured in the route config/params.
|
|
|
|
// 3. The Vue template compiler itself in general compiles anything
|
|
|
|
// like <some-component :foo="bar" /> into roughly
|
|
|
|
// h('some-component', { attrs: { foo: bar } }). Then later, Vue
|
|
|
|
// [extract props from attrs and merges them with props][2],
|
|
|
|
// matching them up according to the component's definition.
|
|
|
|
// [1]: https://github.com/vuejs/vue-router/blob/v3.4.9/src/components/view.js#L124
|
|
|
|
// [2]: https://github.com/vuejs/vue/blob/v2.6.12/src/core/vdom/helpers/extract-props.js#L12-L50
|
|
|
|
attrs: {
|
|
|
|
dashboardProps: this.dashboardProps,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
2018-02-22 06:07:58 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|