Modernize the Trino webapp

[koszti]

Original issue from @koszti:

Currently, the Trino web UI uses outdated components like react 16, jquery, and bootstrap 3. It would be great to have a fresh look and feel with more recent tooling and UI frameworks. The trino gateway for example is using vite.js with recent deps, and perhaps it would be beneficial for the trino web UI to use it as well to maintain consistency. Additionally, we could consider using a UI component library like ant design instead of plain bootstrap CSS.

Original slack thread: https://trinodb.slack.com/archives/CKCEWGYT0/p1720904086284609

Following content is edited by various maintainers and stakeholders:

Core goals

• Create a modern UI as replacement for the existing UI
• Create complete feature match with old UI
• Replace old UI

Implicit and further goals

• Enable more contributions due to usage of modern stack
• Pull more JS developers into the project
• Expand functionality beyond original UI
• Include query editor eventually, Note from @mosabua: please do not spend work on this since we are talking to potential contributors
• Enable component creation and usage, potentially share some with Trino Gateway UI and other UIs

Other things in consideration

• Should separate UI/REST endpoints be created
• Should they be elevated to a support API for the UI and potentially other UIs with some sort of notion of stability

[mosabua]

fyi @ytwp ;-)

[koszti]

Potential tasks that need to be done. (Not finalized or reviewed)

General

• Build and packaging: New (preview) Web UI scaffolding #22783
• Decide on frontend component library: Semi Design (trino-gateway) or Material UI (trino website and documentation)
• Common layout: Webapp Preview: Core components #22869
• Adjust colors, theming, and overall look and feel to follow the Trino website, see https://trino.io/ and https://trinodb.github.io/presentations/presentations/introduction/index.html#/3
• Client API class with helper async GET and POST requests to the server. Similar to base.ts in trino-gateway
• Login screens and authentication: Add authentication to the Preview Web UI #23230

Pages/ Components

• Cluster Overview - Webapp Preview: Cluster Overview with sparklines #23600
• Query Details
• Worker List
• Worker Overview
• Query Details - Overview
• Query Details - Live Plan
• Query Details - Stage Performance
• Query Details - Splits
• Query Details - JSON

[mosabua]

I am adding this to the roadmap since I think there is significant interest and effort. I will try to monitor and probably organize some more collaboration. The topics was referenced in the Trino Contributor Call on the 25 Aug 2025.

[mosabua]

@koszti I added a task to adjust the theme and colors to get aligned with the Trino website and colors, I added links to https://trinodb.github.io/presentations/presentations/introduction/index.html#/3 and the website, if you have any need for further colors or questions please reach out to myself and potentially also @aliloney .. also if we need adjusted images of the trino logo or Commmander Bun Bun we can make that happen as well

cc @dain

[mosabua]

First preview shipped with Trino 454

Docs are available at https://trino.io/docs/current/admin/preview-web-interface.html

[mosabua]

Good discussion during contributor call on the 22 Aug - see notes and video at https://github.com/trinodb/trino/wiki/Contributor-meetings#trino-contributor-call-22-aug-2024

[mosabua]

Also note for any client protocol stuff we should use https://github.com/trinodb/trino-js-client cc @regadas

And related to that.. we still need to figure out publishing a new release for that.