[tracking] Enhancements for the UX

[yhwang]

When working on the UX changes, I observed some nice-to-have enhancements to the UX. I'd like to use this issue to list and track those possible enhancements:

• 1. Optimize the Split page #21683
  In the Split tab of the Query details page, the loading and error view can be merged with the regular view by leveraging the show/hide CSS. This can reduce a setTimeout call.
• 2. Security vulnerabilities reported by yarn audit for Presto UI #21319
  Update the Babel version to avoid arbitrary code execution during compilation: https://www.npmjs.com/advisories/1094446
• 3. It's using bootstrap v3.3.5. It would be good to upgrade to 5.3.2 (the latest version when writing this issue) and use more components/CSS the new version provides.
• 4. Enhance web UX dev experience #21560
  When doing the UX development, it would be good to have a lightweight webserver to serve the UX pages and proxy the APIs call to a presto coordinator. This can decouple the UX webserver from the presto server and speed up the UX dev.
• 5. Separate some JS libraries from the generated JS pages. This can speed up the page loading time and eliminate the build warning from the webpack.
• 6. Generate JS files with Maven build #22645
  output JS files in the webapp/dist directory should be generated in build time.
• 7. Add SQL Client page on Web UI #21576
  Integrate presto-js-client into the Presto UI
• 8. Add Session Properties support #21817
  Support session properties in the SQL Client tab
• 9. Add a doc page for Presto Console development #22637
  Create a doc for web dev
• 10. Restructure the directories under presto-main/src/main/resources/webapp to avoid multiple path exposure for the same page.
• 11. Update the plan viewer page #22552
  Update the plan viewer page to include Overview, Stage Performance, and Splits tabs
• 12. The suggestion from React.js is to use function components. Refactor class components into function components.
• 13. Enforce flow checker to all UI components.
• 14. Fix warning about webpack performance recommendations #22759
• 15. Move webapp to independent module or repo #22741
• 16. Upgrade caniuse-lite to fix browserslist warnings during build #24377

Expected Behavior or Use Case

It would be good to have separate PRs to address each item listed above.

Presto Component, Service, or Connector

UX

Possible Implementation

Example Screenshots (if appropriate):

Context

[yhwang]

Feel free to add more items in the comments if you see fit and grab any item you'd like to work on. Let me assign this to myself and I will try to tackle them one by one.

Please also share your comments about the items I listed. Then I can prioritize them or even remove them if unnecessary.

[jaystarshot]

Will session properties also work with #21576?

[yhwang]

@jaystarshot good question also suggestion. Currently, session properties are not supported. This could be done in either the SQL Client component or presto-js-client. It's a good feature. Let me add it to the list.

[mbasmanova]

I'd like to add a small change to Query Details page to allow hiding query text. Often queries are very long and it is difficult to get to the stages section of the pages (although my workaround is to just search for 'stages' in the browser).

@yhwang I wonder if you could maybe write some docs to explain what frameworks are used to put together the UI and how it works in general.

CC: @steveburnett

[yingsu00]

@yhwang Would it be possible to add the table name to the scan operator in the live plan view?

[yhwang]

@yingsu00 I tried to run some queries to check the live plan view. I saw the ScanFilter like this:

I saw the connectorHandle='customer.sf1.0' and it should indicate the table. Could you elaborate more about where you want to add the table name?

[VidhuDashora]

Hi guys, sorry disregard the previous comment I had to remove it because it was the wrong account. Anyways, my name is Vidhu Dashora and I've started working on number 12,

12. The [suggestion](https://react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function) from React.js is to use function components. Refactor class components into function components.

cc: @yhwang

[tejkart]

Hi guys, my name is Tejas Karuturi and I will be working on task 13.

13. Enforce flow checker to all UI components.

cc: @yhwang

[yhwang]

use this to track several style issues from the dependency upgrade PR:

• Diagram text alignment presto-ui forwardfit #24167 (comment)
• Background color in the stage diagram presto-ui forwardfit #24167 (comment)
• Inconsistent dropdown styles presto-ui forwardfit #24167 (comment)

[ethanyzhang]

@unidevel can you work on the above 3?