DT-3523 - standalone activities UI #3124
Merged
+5,284
−114
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
* WIP - start standalone activity * change routes, add duration input, fix imports * use queryparams for initial form values * clean up - update go api module - clean up api routes - add placeholder page for activity execution details - add support for query params to pre-fill form * add page components * add integration tests
* standalone activity details * decode and refactor * clean up * clean up * add page titles * add default param * remove pause, update and reset buttons * fix pnpm lock * add error state * increase toast duration
* Add standalone activities UI * Upgrade to svelte5 * Don't allow onclick on button until we migrate it to Svelte5 * Remove batch functionality * Fix up some table stuff * Add filterable/copiable cells * Add Start Activity Like this One
* add terminate and cancel to activity details page * update api
* design scrub * fix i18n * rename and reorganize * fix poller
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![temporal-cicd[bot]](https://avatars.githubusercontent.com/in/357945?s=60&v=4){kind=small}
Contributor
|
| loading = true; | ||
| try { | ||
| const { count, groups } = await fetchActivityCountByStatus({ | ||
| namespace, |
Contributor
There was a problem hiding this comment.
⚠️ Type 'string | null' is not assignable to type 'string'.
| query, | ||
| }).catch((_e) => { | ||
| return { count: '0', groups: [] }; | ||
| }); |
Contributor
There was a problem hiding this comment.
⚠️ Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
| }).catch((_e) => { | ||
| return { count: '0', groups: [] }; | ||
| }); | ||
| $activityCount.count = parseInt(count); |
Contributor
There was a problem hiding this comment.
⚠️ Argument of type 'never[] | { count: string; groupValues: IPayloads; }[] | undefined' is not assignable to parameter of type 'never[] | undefined'.
| const fetchNewCounts = async () => { | ||
| try { | ||
| const { count, groups } = await fetchActivityCountByStatus({ | ||
| namespace, |
Contributor
There was a problem hiding this comment.
⚠️ Type 'string | null' is not assignable to type 'string'.
| query, | ||
| }).catch((_e) => { | ||
| return { count: '0', groups: [] }; | ||
| }); |
Contributor
There was a problem hiding this comment.
⚠️ Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
|
|
||
| this.onUpdate(activityExecution); | ||
|
|
||
| if (activityExecution.info.status === 'ACTIVITY_EXECUTION_STATUS_RUNNING') { |
Contributor
There was a problem hiding this comment.
⚠️ 'activityExecution' is possibly 'undefined'.
| this.onUpdate(activityExecution); | ||
|
|
||
| if (activityExecution.info.status === 'ACTIVITY_EXECUTION_STATUS_RUNNING') { | ||
| this.runId = activityExecution.runId; |
Contributor
There was a problem hiding this comment.
⚠️ 'activityExecution' is possibly 'undefined'.⚠️ Type 'string | undefined' is not assignable to type 'string'.
| if ( | ||
| polledActivityExecution && | ||
| !isEmptyObject(polledActivityExecution) | ||
| ) { |
Contributor
There was a problem hiding this comment.
⚠️ Type 'string | undefined' is not assignable to type 'string'.
| if (error instanceof Error && error.name === 'AbortError') { | ||
| return; | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
⚠️ Argument of type 'unknown' is not assignable to parameter of type 'Error'.
| <ErrorComponent {error} /> | ||
| {:else} | ||
| <StandaloneActivityLayout | ||
| {poller} |
Contributor
There was a problem hiding this comment.
⚠️ Type 'ActivityExecution | undefined' is not assignable to type 'ActivityExecution'.
laurakwhit
reviewed
Jan 30, 2026
| disabled={!isRunning} | ||
| size="sm" | ||
| > | ||
| {translate('standalone-activities.request-cancellation')} |
Collaborator
There was a problem hiding this comment.
After requesting cancellation the button remains enabled and the status doesn't update. Should we refetch to make sure the status gets updated and the button gets disabled ⬇️?
| disabled={!isRunning} | ||
| data-testid="terminate-button" | ||
| > | ||
| {translate('standalone-activities.terminate')} |
Collaborator
There was a problem hiding this comment.
Similar to above, after terminating the status doesn't update and the button is still enabled unless the page is refreshed. We probably want to update it ⬇️
Otherwise there's an error if the user tries to select "terminate" again ⬇️
| </script> | ||
|
|
||
| <div class="flex shrink flex-wrap items-center justify-start gap-2"> | ||
| <ActivityDropdownFilterList /> |
Collaborator
There was a problem hiding this comment.
Do we want the filter values to show up in the filter bar next to + Filter? Right now it's only in the raw query input
when navigating to the list view from the detail page "Activity Type" filter link 🔗
| {#each systemActivityViews as view} | ||
| {@render queryButton({ | ||
| ...view, | ||
| active: query === view.query, |
Collaborator
There was a problem hiding this comment.
Is this expected? All activities fall under Failed, but the status in the columns differs from the status count at the top ⬇️
| > | ||
| <h5>{translate('standalone-activities.form-timeouts-heading')}</h5> | ||
|
|
||
| <DurationInput |
Collaborator
There was a problem hiding this comment.
Looks like these inputs don't account for dark mode 😎
| {:else if label === 'Close Time'} | ||
| <Timestamp dateTime={activity.closeTime} /> | ||
| {:else if label === 'Execution Duration'} | ||
| {#if activity.executionDuration} |
Collaborator
There was a problem hiding this comment.
Wondering if we should just hide this if they don't have a value (e.g. Close Time and Duration here ⬇️)?
Or maybe add a - similar to in workflow details?
| </td> | ||
| {/if} | ||
|
|
||
| <style lang="postcss"> |
Collaborator
There was a problem hiding this comment.
NIT: Maybe we can avoid adding more postcss if possible 🙏
| goto( | ||
| routeForStartStandaloneActivity({ | ||
| namespace, | ||
| activityId: activityExecutionInfo.activityId, |
Contributor
There was a problem hiding this comment.
⚠️ Type 'string | null | undefined' is not assignable to type 'string | undefined'.
| <DetailListLabel>Activity Type</DetailListLabel> | ||
| <DetailListLinkValue | ||
| copyable | ||
| iconName="filter" |
Contributor
There was a problem hiding this comment.
⚠️ Type 'string | null | undefined' is not assignable to type 'string'.
laurakwhit
reviewed
Feb 3, 2026
server/go.mod
Outdated
| github.com/stretchr/testify v1.10.0 | ||
| github.com/urfave/cli/v2 v2.3.0 | ||
| go.temporal.io/api v1.57.0 | ||
| go.temporal.io/api v1.61.0 |
| const handleCopy = (e: Event) => { | ||
| const sharableViewUrl = | ||
| new URL(page.url.href) + | ||
| '&savedQuery=' + |
Contributor
There was a problem hiding this comment.
⚠️ Argument of type 'string | undefined' is not assignable to parameter of type 'string | number | boolean'.
| <RetryPolicyInput | ||
| bind:initialInterval={$form.initialInterval} | ||
| bind:backoffCoefficient={$form.backoffCoefficient} | ||
| bind:maximumInterval={$form.maximumInterval} |
Contributor
There was a problem hiding this comment.
⚠️ Type 'undefined' is not assignable to type 'string'.
|
|
||
| if (index === $activeQueryIndex) { | ||
| $activeQueryIndex = null; | ||
| $filter = emptyFilter(); |
Contributor
There was a problem hiding this comment.
⚠️ '$activeQueryIndex' is possibly 'null'.
| if (index === $activeQueryIndex) { | ||
| $activeQueryIndex = null; | ||
| $filter = emptyFilter(); | ||
| } else if (index < $activeQueryIndex) { |
Contributor
There was a problem hiding this comment.
⚠️ '$activeQueryIndex' is possibly 'null'.
| {#if isStatusFilter(activityFilter) && i === firstExecutionStatusIndex} | ||
| <StatusDropdownFilterChip | ||
| filters={executionStatusFilters} | ||
| index={i} |
Contributor
There was a problem hiding this comment.
⚠️ Type 'number | null' is not assignable to type 'number | undefined'.
| {:else if !isStatusFilter(activityFilter) && activityFilter.attribute} | ||
| <DropdownFilterChip | ||
| filter={activityFilter} | ||
| index={i} |
Contributor
There was a problem hiding this comment.
⚠️ Type 'number | null' is not assignable to type 'number | undefined'.
src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte
Show resolved
Hide resolved
src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte
Show resolved
Hide resolved
src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte
Show resolved
Hide resolved
andrewzamojc
reviewed
Feb 3, 2026
| let refreshTime = $state(new Date()); | ||
|
|
||
| const refreshTimeFormatted = $derived( | ||
| formatDate(refreshTime, $timeFormat, { |
Contributor
There was a problem hiding this comment.
Change request: If you use the $timestamp store, this'll be reactive for 12/24 hour format change to.
| } | ||
| }); | ||
|
|
||
| $effect(() => { |
Contributor
There was a problem hiding this comment.
⚠️ Type 'string | null' is not assignable to type 'string'.
andrewzamojc
approved these changes
Feb 3, 2026
Contributor
andrewzamojc
left a comment
andrewzamojc
left a comment
There was a problem hiding this comment.
I tried out the branch locally and was able to start/stop a standalone activity and view its details. The decoding steps in the PR worked too. Looking pretty good to me 👍
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 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.
Description & motivation 💭
Screenshots (if applicable) 📸
Design Considerations 🎨
Testing 🧪
How was this tested 👻
Steps for others to test: 🚶🏽♂️🚶🏽♀️
Run temporal server from a local build
make binsandmake startdefaultnamespace, runtemporal operator namespace create --namespace defaultdefaultnamespace, runtemporal operator search-attribute create --namespace default --name MySearchAttribute --type KeywordRun the UI against a local build of temporal server
standalone-activitiesbranch in the ui repocd server/ && make buildcd .. && pnpm dev:local-temporalRun some sample workflows in the samples-go repo
cd temporal-fixtures/stuck-workflows/go run worker/main.gogo run starter/main.goStart a Standalone Activity
stuck-workflowsStuckWorkflowActivityStart to Close Timeoutfield with some long duration,1 hourfor examplehttp://localhost:3000/namespaces/default/activities/<activity_id>/detailsTo test Activities with Payloads + Codec Server
In the
samples-gorepo:cd codec-servergo run ./codec-server -web=http://localhost:3000 -port=8088go run worker/main.gogo run starter/main.goIn the UI
http://localhost:8088codecserverActivityhttp://localhost:3000/namespaces/default/activities/<activity_id>/detailsand ensure payloads are being decoded.Checklists
Draft Checklist
Merge Checklist
Issue(s) closed
Docs
Any docs updates needed?