diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/monitoring_app.js')
-rw-r--r-- | app/assets/javascripts/monitoring/monitoring_app.js | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/app/assets/javascripts/monitoring/monitoring_app.js b/app/assets/javascripts/monitoring/monitoring_app.js index 307154c9a84..ee67e5dd827 100644 --- a/app/assets/javascripts/monitoring/monitoring_app.js +++ b/app/assets/javascripts/monitoring/monitoring_app.js @@ -1,7 +1,7 @@ -import Vue from 'vue'; import { GlToast } from '@gitlab/ui'; -import { createStore } from './stores'; +import Vue from 'vue'; import createRouter from './router'; +import { createStore } from './stores'; import { stateAndPropsFromDataset } from './utils'; Vue.use(GlToast); @@ -26,7 +26,24 @@ export default (props = {}) => { dashboardProps: { ...dataProps, ...props }, }; }, - template: `<router-view :dashboardProps="dashboardProps"/>`, + 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, + }, + }); + }, }); } }; |