Event History API Pagination and Keyboard Navigation #997
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ageSizeChange which causes double fetch
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Test summaryRun details
View run in Cypress Dashboard ➡️ Failures are unavailable for this run. For more information, see the Cypress Dashboard This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
rossedfort
reviewed
Dec 15, 2022
| </script> | ||
|
|
||
| {#if open} | ||
| <div class="modal"> |
There was a problem hiding this comment.
Why not use holocene's modal?
There was a problem hiding this comment.
Because the Modal event listeners get overridden by the api-pagination event listeners. (i.e. Close / x doesn't work). Also, doesn't need button. But also... waiting on Ash's designs for this so it will change. Just wanted something out there for now.
Not sure if 'Space' will be the key to trigger open/close either.
There was a problem hiding this comment.
Hmm I see. Maybe we do away with Space and just have an Icon button next to the pagination controls?
As of right now, you'd have to know the 'Space' keyboard shortcut to see the pagination keyboard shortcuts
There was a problem hiding this comment.
Yeah for sure need a prompt or something to tell them how to view it. I'll ask Ash what they have in mind.
| let:activeIndex | ||
| let:setActiveIndex | ||
| > | ||
| => console.error(error)} |
There was a problem hiding this comment.
Is there anything else we want to do with this error?
There was a problem hiding this comment.
Yes. Totally forgot about this. Good catch.
There was a problem hiding this comment.
Hot take, we should make our own log function that proxies to console.log in development but logs to Sentry or something in production.
Comment on lines
+217
to
+220
| <span | ||
| class="arrow arrow-left" | ||
| class:arrow-left-disabled={!$store.hasPrevious} | ||
| /> |
There was a problem hiding this comment.
Why move away from the chevrons? Alternatively, could we use the <Shortcut /> component here?
There was a problem hiding this comment.
I wanted something that looked like the arrow keys. Let me look into using the Shortcut
Comment on lines
+1
to
+10
| <svg | ||
| class="h-4 w-4" | ||
| aria-hidden="true" | ||
| fill="currentColor" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 320 512" | ||
| ><path | 9E81||
| d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" | ||
| /></svg | ||
| > |
There was a problem hiding this comment.
I think we should add these to our Icon component, then this component just becomes
<Icon name="keyboard-arrow-down" />
<span class="sr-only">Arrow key down</span>
Probably not super likely we need these keyboard arrow icons outside of this context (e.g. without the label), but we might.
There was a problem hiding this comment.
Yup I should do that.
| return response.history.events; | ||
| }; | ||
|
|
||
| export const fetchStartAndEndEvents = async ( |
There was a problem hiding this comment.
Might be worth adding some tests for these more complex API interactions
Alex-Tideman
commented
Dec 15, 2022
src/lib/services/events-service.ts
Outdated
| route, | ||
| { | ||
| request: fetch, | ||
| params: { maximumPageSize: '20' }, |
There was a problem hiding this comment.
Is 20 a good number here? In reality it will return 40ish events (the maximumPageSize is the batch size, the number of events is unknown). We could probably make this 10 or lower
stevekinney
reviewed
Dec 15, 2022
| @@ -71,7 +73,7 @@ | |||
| <span class="block md:hidden"><Icon name="clock" /></span> | |||
| </svelte:fragment> | |||
| <div class="w-56"> | |||
| {#if $supportsReverseOrder} | |||
| {#if $supportsReverseOrder && !compact} | |||
There was a problem hiding this comment.
I wonder if there is a function or a value hiding in here called shouldBeInReverseOrder or something?
| $: groupsWithGroupFilter = $ascendingEventGroups.filter((group) => { | ||
| return eventGroupFilters.includes(group.category); | ||
| }); | ||
| $: groupsWithGroupFilter = groupEvents($eventHistory.start).filter( |
There was a problem hiding this comment.
I might pull this out into a function that we could unit test because I can see one of us accidentally breaking this down the road.
Alex-Tideman
added a commit
that referenced
this pull request
Jan 9, 2023
* fix toast position and deprecate old notifications (#995) * standardize toast position at bottom right of screen * deprecate notifications in favor of toasts * fix broken imports * fix tests * move toast store * DT-187 - signal workflow (#980) * signal workflow * base64 encode payload * add JSON editor component using codemirror * format * rm unused dep * format * add cy test, refresh wf after signal * allow signal workflow to be toggled on/off * add signalEnabled to workflow-run-layout * rm await tick() * fix input required indicator * move codemirror theme definitions to their own file rename JSON-editor to json-editor * rename json-editor for real * add assertion to make sure modal closes * give json editor a max height and trap scroll * reset inputs on modal close * Event History API Pagination and Keyboard Navigation (#997) * Add api-pagination to event-history. Need to fix onPageChange vs. onPageSizeChange which causes double fetch * More fixes/refactoring * Get arrows right, refactor * more refactoring * Remove imports * Add keyboard shortcuts * WIP: update pagination store * WIP: pagination store * More WIP: * WIP: more work * Finally fix pagination with cached items. Remove nextIndex * more stuff. need to fix reset logic * Remove initialItem from api-pagination, update reste * Key on category/refresh/sort to reload event summary * Hide bottom controls if no items * Move arrow key shortcuts out of api-pagination * Refactor, update unit tests. Need to add more, use Set * Add some color * More unit tests * Update failing unit tests * Remove unused service call, need to figure out Cypress tests * Remove unused imports * Fix all type errors, refactor import routes to work * Fix heartbeat css * Fix lint errors, export perPageSize * Add shortcut modal * Reorder keyboard shortcuts * Use const * Add dateFilterValue helper function with tests * Make all the types better for event-summary-row/details... * More helper functions with tests * Add jklh keyboard shortcuts * Add supportsReverseOrder logic and fix all the cypress tests * More refactoring, move onFetch to a derived store * Automate NPM package release process (#988) * [skip actions] first pass at automating package * update bump input * don't package, only bump version * skip commit hooks * [skip actions] fix string interpolation * [skip actions] make a script for creating release * fix github actions for publishing to npm * rm unused scripts * fix env vars * fix publish package * use package.json version instead of tags * Add Github codeowners (#1013) * Sveltekit Upgrade (#1012) * svelte-migrate: renamed files * Complete initial migration to Sveltekit 1.0.0 * Bump to 1.0.1 of sveltekit * Fix mock for app * Update exports * Add sveltejs/package * Remove _ from holocene component names so they are added to package * Upgrade histoire and vercel-adapter * Refactor based on PR comments, remove commented out code, add type to single line imports * Add app version config to histoire * fix vite public path for histoire builds * Fix error type * Remove pollInterval in histoire * Add global var for histoire Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io> Co-authored-by: Ross Edfort <rossedfort@gmail.com> * ignore .vercel for histoire (#1014) * Don't use ssr on workflows page to prevent weird jumping, remove hack for updateQueryParam (#1015) * [DT-139] Add link to child workflows for StartChildWorkflowExecutionInitiated (#1007) * Remove workflowExecution from label in event details * Get run id for workflow link on StartChildWorkflowExecutionInitiated event * Refactor to util and add unit tests * Remove child workflow execution link on StartChildWorkflowExecutionInitiated event * Add beta tag to npm version (#1018) * Run e2e tests against the current UI code via Temporal CLI (#1010) This builds the current UI code into Temporal CLI to run tests against. * disable SSR on Login and Signin page (#1019) * no ssr for login page * fix ssr disable * move login and signing Load fn to the layout move ssr disable to the layout * disable ssr at the root route (#1020) * Don't try to decode a null payloads (#1017) * Don't try to decode a null payload * Fix equality check Co-authored-by: Steve Kinney <hello@stevekinney.net> * Internal commit for Vercel Co-authored-by: Steve Kinney <hello@stevekinney.net> * Run prettier * Simplify e2e workflow. (#1024) * Add drawer component to holocene. Use drawer for keyboard shortcuts (#1027) * Fix lint issues. (#1025) * Add some docs for manually running e2e tests. (#1026) * Add some docs for manually running e2e tests. * Add some scripts to make it easier for manual running. * Update tests for update-query-param to remove addHash (#1029) * API Pagination fixes (#1031) * Add back No Items slot and update api-pagination to refetch on pageSize change * Bump beta tag * Remove unused import * Add defaultPageSize prop, cleanup * Add defaults for defaultPageOption, add unit tests * Use $lib/holocene instead of $holocene (#1033) * Use /holocene instead of if in holocene to fix imports of package * Fix lint * Remove all aliases * Remove rsync code and use svelte-package * Add back No Events Match for empty slot for Event History (#1035) * Remove beta label * Exclude e2e tests in vitest (#1036) Co-authored-by: Ross Edfort <rossedfort@gmail.com> Co-authored-by: Alex Tideman <alex.tideman@gmail.com> Co-authored-by: Ruslan <11838981+feedmeapples@users.noreply.github.com> Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io> Co-authored-by: Rob Holland <rob@temporal.io> Co-authored-by: Loïc Minaudier <loic.minaudier@gmail.com>
laurakwhit
added a commit
that referenced
this pull request
Jan 10, 2023
…able to run (#1032) * fix toast position and deprecate old notifications (#995) * standardize toast position at bottom right of screen * deprecate notifications in favor of toasts * fix broken imports * fix tests * move toast store * DT-187 - signal workflow (#980) * signal workflow * base64 encode payload * add JSON editor component using codemirror * format * rm unused dep * format * add cy test, refresh wf after signal * allow signal workflow to be toggled on/off * add signalEnabled to workflow-run-layout * rm await tick() * fix input required indicator * move codemirror theme definitions to their own file rename JSON-editor to json-editor * rename json-editor for real * add assertion to make sure modal closes * give json editor a max height and trap scroll * reset inputs on modal close * Event History API Pagination and Keyboard Navigation (#997) * Add api-pagination to event-history. Need to fix onPageChange vs. onPageSizeChange which causes double fetch * More fixes/refactoring * Get arrows right, refactor * more refactoring * Remove imports * Add keyboard shortcuts * WIP: update pagination store * WIP: pagination store * More WIP: * WIP: more work * Finally fix pagination with cached items. Remove nextIndex * more stuff. need to fix reset logic * Remove initialItem from api-pagination, update reste * Key on category/refresh/sort to reload event summary * Hide bottom controls if no items * Move arrow key shortcuts out of api-pagination * Refactor, update unit tests. Need to add more, use Set * Add some color * More unit tests * Update failing unit tests * Remove unused service call, need to figure out Cypress tests * Remove unused imports * Fix all type errors, refactor import routes to work * Fix heartbeat css * Fix lint errors, export perPageSize * Add shortcut modal * Reorder keyboard shortcuts * Use const * Add dateFilterValue helper function with tests * Make all the types better for event-summary-row/details... * More helper functions with tests * Add jklh keyboard shortcuts * Add supportsReverseOrder logic and fix all the cypress tests * More refactoring, move onFetch to a derived store * Automate NPM package release process (#988) * [skip actions] first pass at automating package * update bump input * don't package, only bump version * skip commit hooks * [skip actions] fix string interpolation * [skip actions] make a script for creating release * fix github actions for publishing to npm * rm unused scripts * fix env vars * fix publish package * use package.json version instead of tags * Add Github codeowners (#1013) * Sveltekit Upgrade (#1012) * svelte-migrate: renamed files * Complete initial migration to Sveltekit 1.0.0 * Bump to 1.0.1 of sveltekit * Fix mock for app * Update exports * Add sveltejs/package * Remove _ from holocene component names so they are added to package * Upgrade histoire and vercel-adapter * Refactor based on PR comments, remove commented out code, add type to single line imports * Add app version config to histoire * fix vite public path for histoire builds * Fix error type * Remove pollInterval in histoire * Add global var for histoire Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io> Co-authored-by: Ross Edfort <rossedfort@gmail.com> * ignore .vercel for histoire (#1014) * Don't use ssr on workflows page to prevent weird jumping, remove hack for updateQueryParam (#1015) * [DT-139] Add link to child workflows for StartChildWorkflowExecutionInitiated (#1007) * Remove workflowExecution from label in event details * Get run id for workflow link on StartChildWorkflowExecutionInitiated event * Refactor to util and add unit tests * Remove child workflow execution link on StartChildWorkflowExecutionInitiated event * Add beta tag to npm version (#1018) * Run e2e tests against the current UI code via Temporal CLI (#1010) This builds the current UI code into Temporal CLI to run tests against. * disable SSR on Login and Signin page (#1019) * no ssr for login page * fix ssr disable * move login and signing Load fn to the layout move ssr disable to the layout * disable ssr at the root route (#1020) * Don't try to decode a null payloads (#1017) * Don't try to decode a null payload * Fix equality check Co-authored-by: Steve Kinney <hello@stevekinney.net> * Internal commit for Vercel Co-authored-by: Steve Kinney <hello@stevekinney.net> * Run prettier * Simplify e2e workflow. (#1024) * Add drawer component to holocene. Use drawer for keyboard shortcuts (#1027) * Refactor pending activities to use Table component * Add slot to Tab component and remove amount prop * Fix lint issues. (#1025) * Add some docs for manually running e2e tests. (#1026) * Add some docs for manually running e2e tests. * Add some scripts to make it easier for manual running. * Update tests for update-query-param to remove addHash (#1029) * Add canceled badge to pending activities * API Pagination fixes (#1031) * Add back No Items slot and update api-pagination to refetch on pageSize change * Bump beta tag * Remove unused import * Add defaultPageSize prop, cleanup * Add defaults for defaultPageOption, add unit tests * Use $lib/holocene instead of $holocene (#1033) * Use /holocene instead of if in holocene to fix imports of package * Fix lint * Remove all aliases * Remove rsync code and use svelte-package * Add back No Events Match for empty slot for Event History (#1035) * Update icon snapshot test Co-authored-by: Ross Edfort <rossedfort@gmail.com> Co-authored-by: Alex Tideman <alex.tideman@gmail.com> Co-authored-by: Ruslan <11838981+feedmeapples@users.noreply.github.com> Co-authored-by: Rob Holland <rob@temporal.io> Co-authored-by: Loïc Minaudier <loic.minaudier@gmail.com> Co-authored-by: Steve Kinney <hello@stevekinney.net>
DJSanti
pushed a commit
that referenced
this pull request
Jan 11, 2023
* fix toast position and deprecate old notifications (#995) * standardize toast position at bottom right of screen * deprecate notifications in favor of toasts * fix broken imports * fix tests * move toast store * DT-187 - signal workflow (#980) * signal workflow * base64 encode payload * add JSON editor component using codemirror * format * rm unused dep * format * add cy test, refresh wf after signal * allow signal workflow to be toggled on/off * add signalEnabled to workflow-run-layout * rm await tick() * fix input required indicator * move codemirror theme definitions to their own file rename JSON-editor to json-editor * rename json-editor for real * add assertion to make sure modal closes * give json editor a max height and trap scroll * reset inputs on modal close * Event History API Pagination and Keyboard Navigation (#997) * Add api-pagination to event-history. Need to fix onPageChange vs. onPageSizeChange which causes double fetch * More fixes/refactoring * Get arrows right, refactor * more refactoring * Remove imports * Add keyboard shortcuts * WIP: update pagination store * WIP: pagination store * More WIP: * WIP: more work * Finally fix pagination with cached items. Remove nextIndex * more stuff. need to fix reset logic * Remove initialItem from api-pagination, update reste * Key on category/refresh/sort to reload event summary * Hide bottom controls if no items * Move arrow key shortcuts out of api-pagination * Refactor, update unit tests. Need to add more, use Set * Add some color * More unit tests * Update failing unit tests * Remove unused service call, need to figure out Cypress tests * Remove unused imports * Fix all type errors, refactor import routes to work * Fix heartbeat css * Fix lint errors, export perPageSize * Add shortcut modal * Reorder keyboard shortcuts * Use const * Add dateFilterValue helper function with tests * Make all the types better for event-summary-row/details... * More helper functions with tests * Add jklh keyboard shortcuts * Add supportsReverseOrder logic and fix all the cypress tests * More refactoring, move onFetch to a derived store * Automate NPM package release process (#988) * [skip actions] first pass at automating package * update bump input * don't package, only bump version * skip commit hooks * [skip actions] fix string interpolation * [skip actions] make a script for creating release * fix github actions for publishing to npm * rm unused scripts * fix env vars * fix publish package * use package.json version instead of tags * Add Github codeowners (#1013) * Sveltekit Upgrade (#1012) * svelte-migrate: renamed files * Complete initial migration to Sveltekit 1.0.0 * Bump to 1.0.1 of sveltekit * Fix mock for app * Update exports * Add sveltejs/package * Remove _ from holocene component names so they are added to package * Upgrade histoire and vercel-adapter * Refactor based on PR comments, remove commented out code, add type to single line imports * Add app version config to histoire * fix vite public path for histoire builds * Fix error type * Remove pollInterval in histoire * Add global var for histoire Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io> Co-authored-by: Ross Edfort <rossedfort@gmail.com> * ignore .vercel for histoire (#1014) * Don't use ssr on workflows page to prevent weird jumping, remove hack for updateQueryParam (#1015) * [DT-139] Add link to child workflows for StartChildWorkflowExecutionInitiated (#1007) * Remove workflowExecution from label in event details * Get run id for workflow link on StartChildWorkflowExecutionInitiated event * Refactor to util and add unit tests * Remove child workflow execution link on StartChildWorkflowExecutionInitiated event * Add beta tag to npm version (#1018) * Run e2e tests against the current UI code via Temporal CLI (#1010) This builds the current UI code into Temporal CLI to run tests against. * disable SSR on Login and Signin page (#1019) * no ssr for login page * fix ssr disable * move login and signing Load fn to the layout move ssr disable to the layout * disable ssr at the root route (#1020) * Don't try to decode a null payloads (#1017) * Don't try to decode a null payload * Fix equality check Co-authored-by: Steve Kinney <hello@stevekinney.net> * Internal commit for Vercel Co-authored-by: Steve Kinney <hello@stevekinney.net> * Run prettier * Simplify e2e workflow. (#1024) * Add drawer component to holocene. Use drawer for keyboard shortcuts (#1027) * minor changes made to links * update * reinstate rsync script for correct package types * Update src/lib/pages/workflow-stack-trace.svelte Co-authored-by: Cully <cullywakelin@gmail.com> Co-authored-by: Ross Edfort <rossedfort@gmail.com> Co-authored-by: Alex Tideman <alex.tideman@gmail.com> Co-authored-by: Ruslan <11838981+feedmeapples@users.noreply.github.com> Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io> Co-authored-by: Rob Holland <rob@temporal.io> Co-authored-by: Loïc Minaudier <loic.minaudier@gmail.com> Co-authored-by: Steve Kinney <hello@stevekinney.net> Co-authored-by: Cully <cullywakelin@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this
2CD9
line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What was changed
This PR is a major change to how we fetch the event history. Previously, we fetched the entire history and used client-side pagination. This could take a very long time to fetch for large event histories, especially if they had a lot of payloads as well.
This PR introduces API pagination for the event history as well as keyboard navigation to control the pagination. We fetch the start and end of the event history to get input/result, and then then api-pagination component controls fetching the event history pages. The arrow keys jump pages and row for easily navigating between events.
Why?
Drastically improves the performance of fetching the event history as well as better UX for navigating event history.
Checklist