open-nomad/ui
Seth Hoenig 65f7abf2f4 cli: update default redis and use nomad service discovery
Closes #12927
Closes #12958

This PR updates the version of redis used in our examples from 3.2 to 7.
The old version is very not supported anymore, and we should be setting
a good example by using a supported version.

The long-form example job is now fixed so that the service stanza uses
nomad as the service discovery provider, and so now the job runs without
a requirement of having Consul running and configured.
2022-05-17 10:24:19 -05:00
..
.storybook ui: prettify js files 2022-01-20 09:54:56 -05:00
.vercel Migrate preview deployments from Netlify to Vercel (#9471) 2020-12-07 08:33:49 -06:00
app 12986 UI fails to load job when there is an "@" in job name in nomad 130 (#13012) 2022-05-13 17:01:27 -04:00
blueprints/story ui: disable no-string-protype-extensions where its currently in use 2022-01-20 09:46:49 -05:00
config Visual diff tests seed-stabilized by default (#12965) 2022-05-12 16:09:19 -04:00
lib/bulma ui: fix auto-fixable linting errors 2022-01-20 09:46:45 -05:00
mirage Visual diff tests seed-stabilized by default (#12965) 2022-05-12 16:09:19 -04:00
public ui: update favicon (#11371) 2021-10-22 09:40:38 -04:00
server ui: prettify js files 2022-01-20 09:54:56 -05:00
stories cli: update default redis and use nomad service discovery 2022-05-17 10:24:19 -05:00
tests 12986 UI fails to load job when there is an "@" in job name in nomad 130 (#13012) 2022-05-13 17:01:27 -04:00
vendor Remove vendored xterm.js files 2020-06-03 09:25:19 -07:00
.editorconfig Update to Ember 3.16/Data 3.12 (#8319) 2020-07-09 11:37:00 -05:00
.ember-cli Use existing ember proxy config within our custom proxy 2020-04-21 19:52:43 -07:00
.env UI: Migrate to Storybook (#6507) 2020-01-21 15:46:32 -06:00
.eslintignore Upgrade Ember and friends 3.28 (#12215) 2022-03-08 12:28:36 -05:00
.eslintrc.js Upgrade Ember and friends 3.28 (#12215) 2022-03-08 12:28:36 -05:00
.nvmrc Use Node v12 for UI development 2020-11-04 09:04:22 -08:00
.percy.yml Add a forgotten comma to snapshot-specific CSS (#13030) 2022-05-16 14:13:51 -04:00
.prettierignore ui: match eslintrc with ember-new-output 2022-01-20 09:29:10 -05:00
.prettierrc ui: upgrade prettier to match 3.28 ember-new-output 2022-01-20 09:46:50 -05:00
.prettierrc.js ui: match eslintrc with ember-new-output 2022-01-20 09:29:10 -05:00
.template-lintrc.js [ui, bugfix] Link fix for volumes where per_alloc=true (#12713) 2022-04-21 13:57:18 -04:00
.watchmanconfig
DEVELOPMENT_MODE.md A short guide for proxying to a different nomad cluster 2017-12-06 12:38:38 -08:00
README.md Upgrade Ember and friends 3.28 (#12215) 2022-03-08 12:28:36 -05:00
ember-cli-build.js Upgrade Ember and friends 3.28 (#12215) 2022-03-08 12:28:36 -05:00
jsconfig.json chore: add jsconfig to stop experimental decorator warnings 2022-01-20 09:29:10 -05:00
package.json Visual diff tests seed-stabilized by default (#12965) 2022-05-12 16:09:19 -04:00
testem.js ui: allow parallel test-runs 2022-01-26 13:06:56 -05:00
vercel.json Migrate preview deployments from Netlify to Vercel (#9471) 2020-12-07 08:33:49 -06:00
yarn.lock Percy snapshot tests (#12872) 2022-05-05 16:05:13 -04:00

README.md

Nomad UI

The official Nomad UI.

Prerequisites

This is an ember.js project, and you will need the following tools installed on your computer.

Installation

The Nomad UI gets cloned along with the rest of Nomad. To install dependencies, do the following from the root of the Nomad project:

$ cd ui
$ yarn

Running / Development

UI in development mode defaults to using fake generated data, but you can configure it to proxy a live running nomad process by setting USE_MIRAGE environment variable to false. First, make sure nomad is running. The UI, in development mode, runs independently from Nomad, so this could be an official release or a dev branch. Likewise, Nomad can be running in server mode or dev mode. As long as the API is accessible, the UI will work as expected.

You may need to reference the direct path to ember, typically in ./node_modules/.bin/ember.

The fake data in development is generated from a stable seed of 1. To generate different data, you can include a query parameter of ?faker-seed=2 or any other number in the URL. To turn off the seed and get different data with every load, use ?faker=seed=0.

When running with Mirage, the default scenario is set in config/environment.js but can be overridden with a query parameter to any of the scenarios named in mirage/scenarios/default.js with something like ?mirage-scenario=emptyCluster.

Running / Development with Vagrant

All necessary tools for UI development are installed as part of the Vagrantfile. This is primarily to make it easy to build the UI from source while working on Nomad. Due to the filesystem requirements of Broccoli (which powers Ember CLI), it is strongly discouraged to use Vagrant for developing changes to the UI.

That said, development with Vagrant is still possible, but the ember serve command requires two modifications:

  • --watch polling: This allows the vm to notice file changes made in the host environment.
  • --port 4201: The default port 4200 is not forwarded, since local development is recommended.

This makes the full command for running the UI in development mode in Vagrant:

$ ember serve --watch polling --port 4201

Running Tests

Nomad UI tests can be run independently of Nomad golang tests.

  • ember test (single run, headless browser)
  • ember test --server (watches for changes, runs in a full browser)

You can use --filter <test name> to run a targetted set of tests, e.g. ember test --filter 'allocation detail'.

In the test environment, the fake data is generated with a random seed. If you want stable data, you can set a seed while running the test server by appending &faker-seed=1 (or any other non-zero number) to the URL.

Linting

  • yarn lint
  • yarn lint:fix

Building

Typically make release or make dev-ui will be the desired build workflow, but in the event that build artifacts need to be inspected, ember build will output compiled files in ui/dist.

  • ember build (development)
  • ember build --environment production (production)

Releasing

Nomad UI releases are in lockstep with Nomad releases and are integrated into the make release toolchain.

Conventions

  • UI branches should be prefix with f-ui- for feature work and b-ui- for bug fixes. This instructs CI to skip running nomad backend tests.

Storybook UI Library

The Storybook project provides a browser to see what components and patterns are present in the application and how to use them. You can run it locally with yarn storybook after you have ember serve running. The latest version from the main branch is at nomad-storybook-and-ui.vercel.app/storybook/.

To generate a new story for a component, run ember generate story component-name. You can use the existing stories as a guide.

Troubleshooting

The UI is running, but none of the API requests are working

By default (according to the .ember-cli file), a proxy address of http://localhost:4646 is used. If you are running Nomad at a different address, you will need to override this setting when running ember serve: ember serve --proxy http://newlocation:1111.

Also, ensure that USE_MIRAGE environment variable is set to false, so the UI proxy requests to Nomad process instead of using autogenerated test data.

Nomad is running in Vagrant, but I can't access the API from my host machine

Nomad binds to 127.0.0.1:4646 by default, which is the loopback address. Try running nomad bound to 0.0.0.0: bin/nomad -bind 0.0.0.0.

Ports also need to be forwarded in the Vagrantfile. 4646 is already forwarded, but if a port other than the default is being used, that port needs to be added to the Vagrantfile and vagrant reload needs to be run.