summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/monitoring/monitoring_app.js
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/monitoring/monitoring_app.js')
-rw-r--r--app/assets/javascripts/monitoring/monitoring_app.js19
1 files changed, 18 insertions, 1 deletions
diff --git a/app/assets/javascripts/monitoring/monitoring_app.js b/app/assets/javascripts/monitoring/monitoring_app.js
index 307154c9a84..2f8c3e2a0c4 100644
--- a/app/assets/javascripts/monitoring/monitoring_app.js
+++ b/app/assets/javascripts/monitoring/monitoring_app.js
@@ -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,
+ },
+ });
+ },
});
}
};