Web UI
st2web is a React-based HTML5 web application. It allows you to control the whole process of execution, from running an action to seeing the results of the execution. It also helps you to explore workflow executions up to the results of individual tasks. All in real time.
Deployment
st2web is installed via the st2web RPM or deb package. This is installed by default when using the
one-line install method. You can access the UI by pointing your browser to
https://<server hostname>/
. If you are using st2vagrant, it would be https://192.168.16.20/.
st2web is a pure HTML5 application and consists only of js scripts, html templates, css styles and static files including custom fonts and svg images. For the application to work correctly, all files should be served to the browser. By default they are served by nginx. For your custom deployments, you can also use Apache or a similar dedicated web server.
Note that the StackStorm API endpoint should be accessible from the browser, not the web server running static content.
Configuration
For the UI to work properly, both the web client and StackStorm server side should be configured appropriately.
On the web client side, the file config.js
in the project contains the list of servers this UI
can connect to. This is typically /opt/stackstorm/static/webui/config.js
. The file consists of
an array of objects, each with name
, url
and auth
properties.
hosts: [{
name: 'Express Deployment',
url: 'http://172.168.90.50/api',
auth: 'http://172.168.90.50/auth'
},{
name: 'Development Environment',
url: 'http://:9101'
auth: 'https://:9100'
}]
Multiple servers can be configured for the user to pick from. To disconnect from the current server and return to login screen, pick ‘Disconnect’ from the drop down at the top right corner of the UI.
On the StackStorm side, CORS should
also be configured. In st2.conf
, the allow_origin
property of the [api]
section should
contain the Origin header the browser sends with every request. For example, if you have deployed
the UI on its own server and are accessing it using http://webui.example.com
, your config
should look like this:
[api]
# Host and port to bind the API server.
host = 0.0.0.0
port = 9101
logging = /etc/st2/logging.api.conf
# List of allowed origins for CORS, use when deploying st2web client
# The URL must match the one the browser uses to access the st2web
allow_origin = http://webui.example.com
Origin consists of scheme, hostname and port (if it isn’t 80). Path (including trailing slash) should be omitted.
Please note that some of the origins are already included by default and do not require additional configuration:
http://localhost:3000
- development version ofgulp
running locallyhttp://localhost:9101,http://127.0.0.1:9101
-st2api
pecan deploymentapi_url
from[auth]
section ofst2.conf
Although this is not recommended and will undermine your security, you can allow every web UI
deployment to connect to your server by setting allow_origin = *
.
Authentication
To configure st2web to support authentication, edit config.js
and add an auth:
line for
every server that supports authentication. This should specify the URL to the auth service - usually
this will look something like auth: 'https://192.168.16.20/auth'
. To enable authentication on the
server side, please refer to Authentication.