Temporal-UI (beta version) v2 - local setup

[jaffarsadik]

Hi,
I am trying to setup temporal-ui beta version (V2) in local system and my temporal-server deployed on kubernetes.

I have followed the below commands:

Environment variable setup
$ export VITE_API=https://server-asyncworkflow-uat.jpmchase.net
$ export VITE_MODE=development
$ export VITE_TEMPORAL_UI_BUILD_TARGET=local

$ npm install
$ npm run build:local
Wrote site to “build-local” (this is similar to dist)
$ npm run preview:local

temporal-ui@0.0.1 preview:local I:\Code\asyncworkflow\ui\master-ui-04052022
VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-kit preview

‘VITE_TEMPORAL_UI_BUILD_TARGET’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! temporal-ui@0.0.1 preview:local: VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-kit preview
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the temporal-ui@0.0.1 preview:local script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

After removing the VITE_TEMPORAL_UI_BUILD_TARGET in package.json

“preview:local”: “svelte-kit preview”,

but expecting local issuer certificate. UI css not set.

in temporal-web V1 we set the environment variable something like this

export TEMPORAL_TLS_CA_PATH=“/h/jpmc_certs/JPMCROOTCA.pem”

in which environment variable need to set the pem file?
UI is not clear something wrong with CSS?

[Ruslan]

To understand better first, do you want to run the UI from source code intentionally?
If so, please run it from this repo as it combines both the server and frontend parts of UI GitHub - temporalio/ui-server: Golang Server for https://github.com/temporalio/ui

UI v2 is also available as a docker image, for example here is a docker-compose docker-compose/docker-compose.yml at 247a15b586b2db8eada0b5573e72a1ee2c50a910 · temporalio/docker-compose · GitHub

Here is an example for TLS setup samples-server/docker-compose.yml at 8ad8fc9e3e582575cef6c7e2b9fc7d0e2c91b34b · temporalio/samples-server · GitHub

If you want to pass your env variables with docker run instead of docker-compose, here is how you do this ui-server/docker at main · temporalio/ui-server · GitHub

You can also provide a config.yml instead of using docker environment variables. See config template ui-server/config_template.yaml at main · temporalio/ui-server · GitHub
As an example, here is a development version of config ui-server/config at main · temporalio/ui-server · GitHub

[jaffarsadik]

@Ruslan,

ui-server → config → deployment.yaml

when you make build-server it generate ui-server file which bundled with ui, api & openapi code.
When I start ui-server ie., localhost:8080, i can see the ui.

cors:
allowOrigins:
- http://localhost:3000

1. I have confusion about this url & port, when ui-server runs with port 8080. Can you please explain about this allowOrigins url where this is going to connect?

2. I can able to connect to frontend:7233 and get the namespaces on the header of the drop down but can’t see the workflows. Getting the below 400 error. I have disabled the elastic search in temporal-server deployment.yaml file.

persistence:
defaultStore: gcdb-default
visibilityStore: gcdb-visibility
#advancedVisibilityStore: es-visibility

I don’t want to use Elastic Search and using S3 Storage for Archival, How to resolve this error?

3. I have enabled the Archival for a namespace which archives in s3 storage (retention period 1 day). When i click on Archival tab shows 400 error.
   
   

[jaffarsadik]

@ruslan can you please respond.

[Ruslan]

This origin http://localhost:3000 is not needed at prod. It is only used at development by GitHub - temporalio/ui: The next-generation UI for Temporal.

Added a comment Add CORS comment in development config by feedmeapples · Pull Request #146 · temporalio/ui-server · GitHub

Regarding the Operation Not Supported error, what UI version you currently use? Is this the latest v0.14.1 ? I don’t seem to reproduce the issue with both ES enabled and disabled

[jaffarsadik]

@Ruslan - it seema there was recent changes couple of hours ago, I took the latest version couldn’t able to reproduce Elastic Search error.

But Archival tab still getting 400 error as shown above. Not sure URI /archived have some logic in the route?

[Ruslan]

What archival driver do you use on the backend?

[jaffarsadik]

We are archiving the data in s3-storage.
We do have same issue in temporal-web as well in Archival → Basic Search.
I remember you were going to fix in Beta version.

Trying to hit the same url from the browser.

We use to go for Advanced Search and query params the search data, able to see the archived data from s3-storage.

Beta version doesn’t have Basic / Advance Search option, i am not sure what would your Archival Search Implementation, can you please share more thoughts on this?

[jaffarsadik]

@rulslan
Did you get a chance to look into this

[Ruslan]

yes, just added into my work items. Thank you for reporting the issue

[jaffarsadik]

@Ruslan - do you have timeline for this task to be completed?

[Ruslan]

i’ve opened a github issue though no ETA as of now. We’ll put some updates in the github ticket as prioritize the next set of work items Archival throws error with S3 driver · Issue #572 · temporalio/ui · GitHub

[jaffarsadik]

@Ruslan - When do you have plan to enable Archival for S3?

[Ruslan]

hey Jaffar, there is still currently few of higher priorities before this item: we plan to

• release tctl v2 in the nearest future
• then on the UI server side: 1) sharing session between the UI pods 2) supporting serving the UI from subpaths, 3) fixing UI Archival with S3 backend

Please feel free to ping me if you would like to discuss S3 Archival/consider us prioritize this higher. Any contribution is welcomed

[Venkat_Tamirisa]

Hi @Ruslan . Has this bug been addressed in newer version of UI?