Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add query history to the Preview Web UI #24972

Merged
merged 1 commit into from
Feb 19, 2025
Merged

Add query history to the Preview Web UI #24972

merged 1 commit into from
Feb 19, 2025

Conversation

koszti
Copy link
Member

@koszti koszti commented Feb 10, 2025 •
edited
Loading

Description

Add Query History with search to the preview UI. Partially addressing #22697

NOTE: The layout of the metric cards at the top is currently broken, which could lead to layout issues if the values begin to change. This may become more pronounced when running queries, particularly when testing the query history and filter functions. Please note that this layout issue is outside the scope of the current PR and will be resolved separately by another PR.

Additional context and related issues

Retains the same functionality as the existing web UI, enhanced with the updated layout, design, and user experience.

Screenshots

image

image

Release notes

( ) This is not user-visible or is docs only, and no release notes are required.
( ) Release notes are required. Please propose a release note for me.
(x) Release notes are required, with the following suggested text:

## Section
* Add query history to the Preview Web UI. ({issue}`24875`)

@cla-bot cla-bot bot added the cla-signed label Feb 10, 2025
@github-actions github-actions bot added the ui Web UI label Feb 10, 2025
@koszti koszti mentioned this pull request Feb 10, 2025
Closed
@koszti
Copy link
Member Author

koszti commented Feb 10, 2025 •
edited
Loading

@wendigo let's move discussion to this PR. It has everything that we discussed in the other (and now closed) PR. Can you please take another look? Oh and thanks for making WebUiPreviewQueryRunner in #24962.

@wendigo
Copy link
Contributor

wendigo commented Feb 10, 2025

@koszti sure! I will :)

@mosabua
Copy link
Member

mosabua commented Feb 11, 2025

Please follow style from #24981 now

@koszti koszti force-pushed the preview-ui-query-history-clean branch from a8da2f3 to e1cadb6 Compare February 11, 2025 09:26
@koszti
Copy link
Member Author

koszti commented Feb 11, 2025

@mosabua np, done

wendigo
wendigo reviewed Feb 11, 2025
View reviewed changes
core/trino-web-ui/src/main/resources/webapp-preview/package.json
"sass": "^1.81.0",
"zustand": "^5.0.1"
"sass": "^1.83.4",
"zustand": "^5.0.3"
},
"devDependencies": {
"@eslint/js": "^9.14.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this file have a stable order of elements? :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is auto generated by npm. Am i missing something?

wendigo
wendigo reviewed Feb 11, 2025
View reviewed changes
core/trino-web-ui/src/main/resources/webapp-preview/src/api/webapp/api.ts
@@ -78,6 +78,66 @@ export interface WorkerStatusInfo {
uptime: string
}

export interface QueryStats {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like these typed response classes 👍🏻

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

luckily the auto completion works too in IDEs

wendigo
wendigo reviewed Feb 11, 2025
View reviewed changes
core/trino-web-ui/src/main/resources/webapp-preview/src/components/CodeBlock.tsx Outdated
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')

const styleToUse = () => {
if (config.theme === ThemeStore.Auto) {
return prefersDarkMode ? materialDark : materialLight
return prefersDarkMode ? a11yDark : materialLight
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a11 light? :)

@wendigo
Copy link
Contributor

wendigo commented Feb 11, 2025

When I run query select avg(extendedprice) from tpch.sf1000.lineitem group by shipmode limit 100; this gets rendered with a scrollbar instead of being wrapped:
Screenshot 2025-02-11 at 12 21 25

@wendigo
Copy link
Contributor

wendigo commented Feb 11, 2025

Can we drop "demo components"?

Screenshot 2025-02-11 at 12 23 59

@wendigo
Copy link
Contributor

wendigo commented Feb 11, 2025

Let's call it Input bytes/s and Input rows/s for consistency with other labels
Screenshot 2025-02-11 at 12 28 21

wendigo
wendigo approved these changes Feb 11, 2025
View reviewed changes
Copy link
Contributor

@wendigo wendigo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just couple of visual nits

@koszti koszti force-pushed the preview-ui-query-history-clean branch from e1cadb6 to 4efd1a2 Compare February 11, 2025 11:59
@koszti
Copy link
Member Author

koszti commented Feb 11, 2025 •
edited
Loading

I updated and made the following changes:

  • using a11yLigh and a11yDark styles in CodeBlock. I had to switch from Prism to HLJS because the a11yLight theme is only available in HLJS. It's working now, but the a11yDark theme looks slightly different.
  • changed the label on the mentioned metric cards
  • dropped the demo components page

When I run query select avg(extendedprice) from tpch.sf1000.lineitem group by shipmode limit 100; this gets rendered with a scrollbar instead of being wrapped

I tried so hard few days ago but couldn’t get the wrap lines to work and ran out of ideas. I thought no one would notice, but it turns out that wasn’t the case!. :)

@mosabua
Copy link
Member

mosabua commented Feb 11, 2025

Can we drop "demo components"?

Screenshot 2025-02-11 at 12 23 59

I think we want to wait a bit or maybe even keep it but have it hidden

@koszti koszti force-pushed the preview-ui-query-history-clean branch from 4efd1a2 to b39a5c6 Compare February 11, 2025 17:57
@koszti
Copy link
Member Author

koszti commented Feb 11, 2025 •
edited
Loading

Can we drop "demo components"?

I think we want to wait a bit or maybe even keep it but have it hidden

I restored it for now. Unfortunately, keeping it hidden isn’t straightforward, so if we want the link to remain accessible without appearing in the menu bar, we’ll need an alternative approach.

@mosabua
Copy link
Member

mosabua commented Feb 11, 2025

Oh .. sorry for the churn.. didnt realize you already removed it .. I think we can remove it once we have an example usage for each component .. that might be the case already now.. dont know myself

@koszti koszti force-pushed the preview-ui-query-history-clean branch from b39a5c6 to b241d4d Compare February 11, 2025 18:06
@koszti
Copy link
Member Author

koszti commented Feb 11, 2025 •
edited
Loading

no worries, I was wrong. Making it hidden was pretty easy actually. Now it's hidden in the menu bar but it's still accessible at http://localhost:5173/ui/preview#/demo-components

@mosabua
Copy link
Member

mosabua commented Feb 11, 2025

no worries, I was wrong. Making it hidden was pretty easy actually. Now it's hidden in the menu bar but it's still accessible at http://localhost:5173/ui/preview#/demo-components

Awesome

@koszti
Copy link
Member Author

koszti commented Feb 19, 2025

@wendigo wdyt, can this be merged?

@wendigo wendigo merged commit 882aa44 into trinodb:master Feb 19, 2025
96 checks passed
@wendigo
Copy link
Contributor

wendigo commented Feb 19, 2025

@koszti 👍🏻

@github-actions github-actions bot added this to the 471 milestone Feb 19, 2025
@koszti koszti deleted the preview-ui-query-history-clean branch February 19, 2025 17:12
@mosabua mosabua mentioned this pull request Feb 19, 2025
Merged
@koszti koszti mentioned this pull request Feb 27, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wendigo wendigo wendigo approved these changes

Assignees
No one assigned
Labels
cla-signed ui Web UI
Milestone
471
Development

Successfully merging this pull request may close these issues.
3 participants
@koszti @wendigo @mosabua