2019-08-16 12:21:46 -04:00
|
|
|
import { GlToast } from '@gitlab/ui';
|
2021-02-14 13:09:20 -05:00
|
|
|
import Vue from 'vue';
|
2020-06-16 11:08:32 -04:00
|
|
|
import createRouter from './router';
|
2021-02-14 13:09:20 -05:00
|
|
|
import { createStore } from './stores';
|
2020-06-30 08:08:57 -04:00
|
|
|
import { stateAndPropsFromDataset } from './utils';
|
2017-03-20 15:54:03 -04:00
|
|
|
|
2019-08-16 12:21:46 -04:00
|
|
|
Vue.use(GlToast);
|
|
|
|
|
2019-04-15 23:51:17 -04:00
|
|
|
export default (props = {}) => {
|
2018-03-06 02:25:19 -05:00
|
|
|
const el = document.getElementById('prometheus-graphs');
|
2018-02-22 01:07:58 -05:00
|
|
|
|
|
|
|
if (el && el.dataset) {
|
2020-06-30 08:08:57 -04:00
|
|
|
const { metricsDashboardBasePath, ...dataset } = el.dataset;
|
2019-06-05 18:03:30 -04:00
|
|
|
|
2020-07-15 17:09:26 -04:00
|
|
|
const { initState, dataProps } = stateAndPropsFromDataset(dataset);
|
2020-06-30 08:08:57 -04:00
|
|
|
const store = createStore(initState);
|
2020-06-16 11:08:32 -04:00
|
|
|
const router = createRouter(metricsDashboardBasePath);
|
|
|
|
|
2018-02-22 01:07:58 -05:00
|
|
|
// eslint-disable-next-line no-new
|
|
|
|
new Vue({
|
|
|
|
el,
|
2019-05-27 18:30:36 -04:00
|
|
|
store,
|
2020-06-16 11:08:32 -04:00
|
|
|
router,
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
dashboardProps: { ...dataProps, ...props },
|
|
|
|
};
|
2018-02-22 01:07:58 -05:00
|
|
|
},
|
2021-01-27 10:09:15 -05: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 01:07:58 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|