HUE-9266 [ui] Enable Typescript for vue components

Review Request #15263 — Created June 24, 2020 and submitted

ranade, romain, Sreenath, yingc
commit 5e5d4ff854f0fcb2138e15dc1284f5edb2a7434b
Author: Johan Ahlen <>
Date:   Wed Jun 24 13:17:42 2020 +0200

    HUE-9266 [ui] Enable Typescript for vue components

:100644 100644 022c9dd9d0 cad6c102b0 M	.babelrc
:100644 100644 82e7d51809 d8acb0c854 M	desktop/core/src/desktop/js/apps/jobBrowser/components/hiveQueryPlan.vue
:000000 100644 0000000000 5cc1b9a0d6 A	desktop/core/src/desktop/js/types/web-component-wrapper/index.d.ts
:100644 100644 45d6702c09 5d140c6175 M	package-lock.json
:100644 100644 62c630b52a 6816998703 M	package.json
:100644 100644 1563f7c7ed fb17e802df M	tsconfig.json

commit d62b84980a14700b6588d185e8aaa2603cb7bf42
Author: Johan Ahlen <>
Date:   Wed Jun 24 12:35:05 2020 +0200

    HUE-9266 [ui] Switch the hive query plan component from ko to a vue web component

:100644 100644 e562987e6b 022c9dd9d0 M	.babelrc
:100644 100644 1a82105da8 4df7654fc6 M	apps/jobbrowser/src/jobbrowser/templates/job_browser.mako
:100644 100644 31aabbdc93 f1777739f7 M	desktop/core/src/desktop/js/apps/jobBrowser/app.js
:100644 000000 ca31fa04d7 0000000000 D	desktop/core/src/desktop/js/apps/jobBrowser/components/__snapshots__/ko.hiveQueryPlan.test.js.snap
:000000 100644 0000000000 82e7d51809 A	desktop/core/src/desktop/js/apps/jobBrowser/components/hiveQueryPlan.vue
:100644 000000 0b28f4f99d 0000000000 D	desktop/core/src/desktop/js/apps/jobBrowser/components/ko.hiveQueryPlan.js
:100644 000000 544646e9b9 0000000000 D	desktop/core/src/desktop/js/apps/jobBrowser/components/ko.hiveQueryPlan.test.js
:100644 100644 1122278160 cfb7bb6694 M	desktop/core/src/desktop/templates/hue.mako
:100644 100644 658a5b2c3c 45d6702c09 M	package-lock.json
:100644 100644 46dee6cde4 62c630b52a M	package.json

Manual on Chrome

What's interesting here is that all you'll need to use the query plan (in any webapp with any framework) is:

import 'apps/jobBrowser/components/hiveQueryPlan';

and then, in the html:


There's no Vue binding to a container element needed beforehand as the Vue component is wrapped as a web component.

Next up is passing data to the web component in a clean way, need to figure out the best approach for interop between ko and pure web components.

Also IE 11 is definitely out the window with this.

  1. Nice!

    And I see for missing data, tests but super good progress! Edge only!

    Good to keep internal components there, we can see for a way letter to better publish the public ones

Review request changed

Status: Closed (submitted)