stackstorm/st2web

StackStorm Web UI

StackStorm Web UI

Quick start

First of all, you need to make sure you have node and npm packages installed. Currently, we consider Node v14.x.x to be our stable.

$ n 20
  installing : node-v20.8.1
       mkdir : /home/enykeev/n/n/versions/node/20.8.1
       fetch : https://nodejs.org/dist/v20.8.1/node-v20.8.1-linux-x64.tar.xz
     copying : node/20.8.1
   installed : v20.8.1 (with npm 10.1.0)

$ node -v
v20.8.1

$ npm -v
10.1.0

then you need to globally install gulp, lerna and yarn

$ sudo npm install -g gulp-cli lerna yarn

then you need to bootstrap the micromodules

$ lerna bootstrap

to avoid conflicts on node_modules, delete those generated by lerna:

$ rm -rf apps/st2-workflows/node_modules/

and finally run build system to fetch the font, compile css and so on

$ gulp

At that point you should be able to point your browser to http://localhost:3000/ and see the the page.

Quick start (docker-compose)

Note: docker-compose uses config.local.js which is gitignored and should be a copy of config.js with your specific values

Production:

docker-compose  up

Dev:

docker-compose -f docker-compose.dev.yml up --build

Production with NGINX:

docker-compose -f docker-compose.nginx.yml up --build

Dev with NGINX:

docker-compose -f docker-compose.nginx-dev.yml up --build

Build system

While gulp runs the longest chain of tasks including style compiling, spining up dev server and watching for changes, you can run all of them directly using gulp <task>. Some common tasks are:

• gulp build - just lint and compile all the stuff
• gulp test - build the project and then run e2e tests
• gulp serve - build the project and start serving it at 3000 port
• gulp production - build production version of the project

You can see the whole list of tasks in gulpfile.js.

Connecting to st2 server

Configure the CORS on StackStorm server: on your st2 installation, edit the following lines to [api] section in /etc/st2/st2.conf:

[api]
# Host and port to bind the API server.
host = 0.0.0.0
port = 9101
logging = st2api/conf/logging.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://st2web.example.com:3000

Configure st2web to point to the right server. By default, UI tries to get its data relative to the st2web.

If for some reason st2web is served from another domain, edit config.js at the root of the project and update the hosts array with proper object of name, url and auth. URL should include scheme, domain and port in compliance with rfc1808. Auth might be either boolean (in which case the default schema and port is used) or a url of the auth server (see url requirements). For vagrant deployment of st2express, it would be:

hosts: [{
  name: 'Express Deployment',
  url: 'http://172.168.90.50:9101',
  auth: true
}]

Production

While gulp serve is ideal for development purposes and quick preview, it requires browser to make lots and lots of requests downloading every single project file separately thus wasting a lot of time on making a request and waiting for response. Production version minimizes the number of files by concatenating them together and minifies some of the most heavy files reducing their size up to 5 times. It also makes compiled version completely independent of the rest of code allowing you to deploy it everywhere: static apache\nginx server, AWS, Heroku, Github Pages.

To build production version, run

$ gulp production

Then, you can find compiled version of the project in build/ folder. You can just copy it to the public folder your webserver, create symlink or push it to another repository as a deployment strategy.

Testing

We're using zombie as our headless browser for integration testing. It is a simulated environment (virtual DOM) so there's no need in WebDriver or a real browser to be present.

First of all, you need to make sure you have a running copy of st2 to run tests against. We're using official docker images for our automated tests, but the AIO deployment will work just as good (though will take more time to deploy).

To let test runner know the details of your st2 installation, you need to set ST2_PROTOCOL, ST2_HOST, ST2_USERNAME and ST2_PASSWORD env variables, then call gulp test.

$ ST2_PROTOCOL=http ST2_HOST=localhost ST2_USERNAME=admin ST2_PASSWORD=123 gulp test

Copyright, License, and Contributors Agreement

Copyright 2015-2019 Extreme Networks, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

By contributing you agree that these contributions are your own (or approved by your employer) and you grant a full, complete, irrevocable copyright license to all users and developers of the project, present and future, pursuant to the license of the project.

st2web's Issues

Difference in datetime formatting between UI and CLI

UI: Jul 1, 2015 11:12:26 PM
CLI: Wed, 01 Jul 2015 23:12:26 UTC

Display better error message if user tries to connect to the server with auth enabled but not configured in config.js

We should display a better and more friendly error message, something along the lines of "This server requires authentication make sure it's configured properly in config.js".

Search widget in all screens

Stream and Execution endpoint report different time

According to the report, the time of the execution is changing during page reload from Jul 2, 2015 3:12:26 AM to Jul 1, 2015 11:12:26 PM. Also, non of them reflect neither server local nor UTC time.

Smart text field

The st2-form-input directive we're using right now for type: 'string' fields isn't good enough when the text inside it is bigger than the field itself (which is undesirable yet not unlikely situation when we're dealing with user's existing scripts).

The main problem is that it is hard to scroll through the input element, especially when it is disabled (as in case of history records where user may not even realize he still can scroll this field)

New directive should automatically resize vertically depending on the length of the string. As soon as the line no longer fits in one line, it should be wrapped to the next line. Whether it should break the line by words or by characters is up for discussion.

It should inherit from ngModel to support validation and ngModelOptions out the box.

New directive is for type: 'string' fields only so no type conversion is necessary. On the other hand, since it is now a highly specialized field, it should support all the JSON schema properties of the string type (min\maxLength, pattern and filters in the strict compliance with the RFCs provided) along with generic metadata (name, description, default, required, immutable).

There is also should be a possibility to define minimum and maximum number of rows allowed for the particular instance of the directive. This is mostly required for cases like core.sendmail body field when we pretty certain it would likely take more than four-five lines of text and we want to limit it to keep the form together.

From implementation standpoint, I believe it should be done with [contenteditable] element. I expect it would require a lot more effort to make UX work (keyboard support and all that stuff) than to just pick textarea, although I have a feeling textarea won't be enough for everything we want to achieve and we may spend even more time trying to hack around its limitations. Although, I might be wrong so it is up to the author to pick the right way.

Extend grid's loop to display dynamic Category value

Loop should include st2-panel__heading value (either provided by user in JSON or automatically set as namespace value).

st2web needs a Changelog

Similar to https://github.com/StackStorm/st2/blob/master/CHANGELOG.rst

Dropdown list opt out for 'enum' parameters

When action parameter is enum in yaml:

parameters:
  verbose:
    description: "Verbose mode (-vvvv to enable connection debugging)"
    type: string
    enum:
      - v
      - vv
      - vvv
      - vvvv

In UI when I select it from dropdown:

there is no way to opt out (select blank value)

Such behavior is useful when parameter is required, but for this case when parameter is optional - should be a way to select blank dropdown item.

Hints for nested properties in Sensor `payload_schema` (house.dog.fleas)

The cool thing I found (suddenly 👊) is that Sensor payload schema supports description for each property and even more, webui shows the hints!

That's just awesome, however never seen someone uses that in any docs or examples.

---

It will be also nice to show hints for every child property in sensor payload_schema, like house.dog.fleas.

More hints = faster rule creation and better user experience

Parameters ordering

When showing list of parameters for specific action via CLI, the parameters are ordered first by alphabet, and then by required:

$ st2 run core.http -h

Action that performs an http request.

Required Parameters:
    url
        URL to the HTTP endpoint.
        Type: string

Optional Parameters:
    allow_redirects
        Set to True if POST/PUT/DELETE redirect following is allowed.
        Type: boolean
        Default: False

    auth
        Auth string to be used. This can be like 'x-auth-token=XYZ'.
        Type: string

    body
        Body to send with the request
        Type: string

    cookies
        Optional cookies to send with the request.
        Type: object

       ....

In Web UI control panel there is no any ordering and it's a bit confusing:

WebUI doesn't present parameters for action input when they are objects

How to reproduce:

1. Create an action with a python dictionary parameter.
2. Declare parameter type as object in the action yaml file.
3. Load action and try to run it in UI.

Invalid error message returned on invalid credentials

It looks like there was a regression since if the auth service is online and you enter invalid credentials you get the following error back "Unable to reach auth service. [auth:https://:9100]".

Entering correct credentials works fine.

On a related note - this (grey?) font color in the error bubble is hard to read on this backround. Should probably change it.

Open "New Issue" on "Report issue"

use this link instead
https://github.com/StackStorm/st2web/issues/new

While testing...

Cross-browser IE/FF compatibility issues

Nice interfaces!
I know that everything looks just flawlessly in Chrome,
but here are several IE/FF cross-browser compatibility issues I've found that could be useful to know about:

Dropdown elements

IE11:

Firefox:

Scrolling elements

IE11:

Firefox:

"Create a rule" page

No autocomplete for "Action name" in IE11:

Thanks!

Keepass auto-fill doesn't get propagated through Angular data flow

@emptywee reporting he's unable to connect to st2web while the fields gets auto-filled by keepass browser addon. Clicking on connect button returns unauthorized. Triggering a change in fields and then trying to connect again solves the problem.

Support for timestamp display timezones

st2web part of this change - StackStorm/st2#2532

I asked my browser to remember my credentials for the UI and it doesn't remember them

We need dem cookies.

I'd like to re-run an action via UI just like CLI

Feature request: parameters order the same way they are defined in meta

Hello,

It would be nice to order parameters in the WebUI the same way they are defined in meta files. Perhaps, adding an optional order field to the parameters in the meta would let it implement easier.

Thanks!

UI shows timestamps different than CLI

CLI uses UTC. We should be consistent with CLI but in UI allow timestamps to be displayed in local time by clicking some button.

reported by: @skarmark on IRC

Code hightlighter hangs on a particularly large snippets

Due to the nature of Prism.highlight, it tends to block the whole thread until it finish tokenizing the string. While this is usually not that big of a problem, in some cases (ex., when st2 is used for CI/CD and dealing with exceptionally verbose output), it might result some browsers freezing on History tab of st2web.

To prevent highlighter from affecting performance of the rest of the app, we need to spawn the Tokenizer as web worker. Prism codebase already provides the solution for this task (https://github.com/PrismJS/prism/blob/gh-pages/prism.js#L201-L217) but it requires some changes to the production build pipeline.

As a long term solution for that kind of problems, we need to stop storing the results of the execution inside an execution itself instead create an additional model and API endpoint that would allow us to stream the long output or its parts.

AMI (ami-de454e8c) installation with numerous errors

st2express 1440850027-9c7bb926-7782-473b-b7fb-06cbc30453b3-ami-ebf07580.2

[mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::collect_anonymous_data]/Exec[set-st2-key-st2::collect_anonymous_data]/returns: /usr/local/lib/python2.7/dist-packages/requests/packages/urllib3/util/ssl_.py:90: InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fail. For more information, see https://urllib3.readthedocs.org/en/latest/security.html#insecureplatformwarning.[0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::collect_anonymous_data]/Exec[set-st2-key-st2::collect_anonymous_data]/returns: Failed to authenticate with credentials provided in the config.[0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::collect_anonymous_data]/Exec[set-st2-key-st2::collect_anonymous_data]/returns: ERROR: 500 Server Error: Internal Server Error[0m [1;31mError: st2 key set st2::collect_anonymous_data true returned 1 instead of one of [0][0m [1;31mError: /Stage[main]/St2::Kvs/St2::Kv[st2::collect_anonymous_data]/Exec[set-st2-key-st2::collect_anonymous_data]/returns: change from notrun to 0 failed: st2 key set st2::collect_anonymous_data true returned 1 instead of one of [0][0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::server_uuid]/Exec[set-st2-key-st2::server_uuid]/returns: /usr/local/lib/python2.7/dist-packages/requests/packages/urllib3/util/ssl_.py:90: InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fail. For more information, see https://urllib3.readthedocs.org/en/latest/security.html#insecureplatformwarning.[0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::server_uuid]/Exec[set-st2-key-st2::server_uuid]/returns: Failed to authenticate with credentials provided in the config.[0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::server_uuid]/Exec[set-st2-key-st2::server_uuid]/returns: ERROR: 500 Server Error: Internal Server Error[0m [1;31mError: st2 key set st2::server_uuid 3d6649ac-5511-11e5-8e3e-06fb52387489 returned 1 instead of one of [0][0m [1;31mError: /Stage[main]/St2::Kvs/St2::Kv[st2::server_uuid]/Exec[set-st2-key-st2::server_uuid]/returns: change from notrun to 0 failed: st2 key set st2::server_uuid 3d6649ac-5511-11e5-8e3e-06fb52387489 returned 1 instead of one of [0][0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::user_data]/Exec[set-st2-key-st2::user_data]/returns: /usr/local/lib/python2.7/dist-packages/requests/packages/urllib3/util/ssl_.py:90: InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fail. For more information, see https://urllib3.readthedocs.org/en/latest/security.html#insecureplatformwarning.[0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::user_data]/Exec[set-st2-key-st2::user_data]/returns: Failed to authenticate with credentials provided in the config.[0m [mNotice: /Stage[main]/St2::Kvs/St2::Kv[st2::user_data]/Exec[set-st2-key-st2::user_data]/returns: ERROR: 500 Server Error: Internal Server Error[0m [1;31mError: st2 key set st2::user_data {} returned 1 instead of one of [0][0m [1;31mError: /Stage[main]/St2::Kvs/St2::Kv[st2::user_data]/Exec[set-st2-key-st2::user_data]/returns: change from notrun to 0 failed: st2 key set st2::user_data {} returned 1 instead of one of [0][0m

Rule page ain't show when it was last applied on a trigger.

Ability to select all in result on UI

https://stackstorm-community.slack.com/archives/community/p1455137383005288

Receiving the self-signed message at the end of /setup even with a "real" certificate

The subject pretty much says it all, I'll upload a screenshot of the message box in case it's not obvious.

Check Freshdesk feedback widget

@jfryman proposed to take a look at Freshdesk feedback widget as a replacement for "Report a bug" link to Github issues.

http://freshdesk.com/customer-engagement/feedback-widget

Filter widgets for History grid

Select2 plugin can be used on initial implementation. It can be replaced by custom code or another plugin later on.

Feature request: JSON Treeview in results/details

Hello,

Might be a good idea to implement something like http://www.sitepoint.com/demos/online-json-tree-viewer/ with the result/details of the actions. Sometimes it's not really clear what is nested from what.

Better presentation for errors

We need a solid single way of presenting the long error messages or notifications for successfully performed background tasks. This especially important for rule editing flow since we may never be able to cover all the possible ways things may go wrong using just client-side validation.

Most obvious solution would be to use popup notification messages in the corner of the page, but I would prefer us to think of the other options first.

Issue with rule edit

While creating the rule in the UI, we probably spotted some wrong behavior: Try to create a criteria based on the slack channel name (trigger.channel.name). While it is possible to do that during rule creation, the save button will be disabled if you ever want to edit the rule again and do not delete the criteria referring to trigger.channel.name again:

"criteria": {
    "trigger.text": {
      "pattern": "^Comment on <https://github\\.com/.*$",
      "type": "matchregex"
    },
    "trigger.channel.name": {
      "type": "contains",
      "pattern": "git"
    }
  },

Note : report came in via support

Modal panel for Rules creation

Bad parameters in action YAML causes WebUI to not render

I made a typo today in a pack development, and it broke the entire UI. Oh no!

I took some photos:

The error in code

The error in the UI

What else do you need?

---

Somewhat related... this rule loaded with the bad attribute. Should this also be a st2 bug? /cc @manasdk @lakshmi-kannan

Cancel Button

It is great that we have a Rerun button now but a Cancel button would be awesome too!

After AWS installation (ami-de454e8c) with errors, cannot AUTH: Unable to reach auth service. [auth:https://:9100]

Error message on

Unable to reach auth service. [auth:https://:9100]

Should we rename `disconnect` to `logout` just like most control panels?

[Possible bug] CORS operation respect, support client url (same as location.hostnome)

There seems to be an issue on configurations where webui operates behind NAT. Reproduce.

1. Bring up st2web under vagrant. Required vagrant config is:

   config.vm.network "forwarded_port", guest: 80, host: 8080
   config.vm.network "forwarded_port", guest: 443, host: 8443
   

   Network mode should be NAT (forward), not bridged!

Connect to https://localhost:8443 on the host node and try to login with console open. Requests do not regard correct proto+hostname part which is https://localhost, but it actually should be equal to the one on client side (location.hostname or whatever). So for example /auth/tokens method of course fail.

Request URL:https://localhost/auth/tokens
Request Headers
Provisional headers are shown
Access-Control-Request-Headers:accept, authorization
Access-Control-Request-Method:POST
Origin:https://localhost:8443
Referer:https://localhost:8443/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/48.0.2564.82 Chrome/48.0.2564.82 Safari/537.36

However config.js can not be used to change the paths for these kind of requests (client-side), because server side requests are relative to the server (where endpoints can be reached as https://localhost/smth or whatever is in config.js) at the same point client side requests should not use the same endpoint address, but rather use hostname part available from the client.

cc: @enykeev

Stream loosing events

We have several reports on the stream not updating the results of the execution.

This requires further investigation to determine the root of the problem or at least make sure it is not related to the st2web or st2client.js and originates on the backend.

Due to discoveries made during StackStorm/st2#1348, there is a real possibility we would have to rewrite the whole routine related to the stream endpoint anyway.

Second level workflow indentation color shall alternate

Same color is used for indentation, making multi-level workflows difficult to parse visually. Suggest we alternate and use #9e53ea. Wish I knew CSS :)

Data on the right panel doesn't get automatically updated (status, result) when an action finishes.

Data on the right panel doesn't get automatically updated (status, result) when an action finishes / changes status/

I imagine updateListener needs to be updated to also update the right panel.

Make use of st2-view in actions and rules

As @manasdk reported, more often than not, we have a pretty long names for rules and it makes them truncate and became unreadable, especially on a lower resolutions. To fix that for sure, we would need to redesign the list view, but to ease the pain right now, the better option would be to port view menu to other apps besides executions.

Return more user friendly error when we can't reach st2auth or st2api service

If we get connection refused back we should return a more friendly error message.

Something along the lines of "Cant reach StackStorm Auth / API service at XXX, make sure your the Auth / API service is running and config.js points to the correct address".

Action param type and rule param type mismatch may be an issue

I am using the StackStorm UI to design my rules. Whereas in the UI I can see the expression in the issue field, the JSON I just pasted says null. This is probably because issue is an int field in the JSON.

created rule -

{
  "name": "CommentOnGitHubPullRequest",
  "tags": [],
  "enabled": true,
  "trigger": {
    "type": "slack.message",
    "parameters": {},
    "pack": "slack"
  },
  "criteria": {
    "trigger.text": {
      "pattern": "^Comment on <https://github\\.com/.*$",
      "type": "matchregex"
    }
  },
  "action": {
    "ref": "github.add_comment",
    "parameters": {
      "body": "{{trigger.text | regex_replace(\"(^Comment on <https://github\\.com/[^/]*/[^/]*/pull/)|(>:[^:]*$)\", \"\") | int(35)}}",
      "repo": "{{trigger.text | regex_replace(\"(^Comment on <https://github\\.com/[^/]*/)|(/pull/[^/]*>:[^:]*$)\", \"\")}}",
      "issue": null,
      "user": "{{trigger.text | regex_replace(\"(^Comment on <https://github\\.com/)|(/[^/]*/pull/[^/]*>:[^:]*$)\", \"\")}}"
    }
  },
  "ref": "default.CommentOnGitHubPullRequest",
  "id": "55d64316c0f3143f8fe4ff16",
  "pack": "default"
}

Action/Details/History doesn't show full workflow

Only last few actions are shown, and NO indication given that there are more actions.
The fix is to show ALL tasks in the workflow.

This is what is shown:

And this is the full history:

Extended filters

The filters we're currently using isn't flexible enough and require some rework.

For one, we need to implement an 'or' logic to be able to query all the executions with trigger 'a' or 'b' or 'c' and action 'd' or 'e'.

It should also allow us to filter through all available values in an autocomplete manner helping us to pick the right one from the ever growing list.

An obvious idea would be to implement it in the way github issue filters are implemented: a single text field representing the current choices along with the number of filterable dropdowns for most common types of filters.

Fresh installation UI message for no executions is not helpful

https://www.evernote.com/l/ANH3N8l5jfhHE7-QVy2-Y-KyQw2Baz0IlCoB/image.png

A more user friendly message along the lines of No executions found. Try st2 right now! would be better I think.

Strange behavior on Rules tab

See the screenshot. Any action with Rules redirects back to default to History tab:

(click for full resolution)

st2 version is the most recent, installed with st2_deploy.sh:

# st2 --version
st2 ('0.13dev.159',)

Error while installing bower dependencies (conflicting dependency requirements)

There is an error when running bowser install:

Unable to find a suitable version for moment, please choose one:
    1) moment#>=2.0.0 <2.7.0 which resolved to 2.6.0 and is required by angular-moment#0.7.1 
    2) moment#>=2.0.0 <2.9.0 which resolved to 2.6.0 and is required by angular-moment#0.8.3 
    3) moment#~2.8.0 which resolved to 2.8.4 and is required by stanley-webPrefix the choice with ! to persist it to bower.json

? Answer:: 3

It looks like stanley-web and angular-moment depend different and conflicting versions.

ENV field stays highlighted red even after key value pair gets typed in

hi I am trying to run the jenkins_build_job action from the ui. Every time I try and add env variables the field always stays red and never allows me to select the RUN button. If I run the command from the CLI it works.
st2 --version
st2 ('1.2.0.8',)

Feature request: expand all/collapse all buttons in st2 dashboard

Hello.

Please, add buttons to collapse all/expand all for packs in actions/rules tabs in the st2 dashboard. I know there's a filter editbox, but still sometimes you want to throw a glance at actions available in a couple of packs. Thank you.

Display a better error message if user tries to authenticate with invalid credentials

I believe this is a regression since IIRC, we did display "invalid credentials" message in the past. Now the login page just lets you through and you see the unfriendly error message.