697bd87998
* Extend variables under the nomad path prefix to allow for job-templates (#15570) * Extend variables under the nomad path prefix to allow for job-templates * Add job-templates to error message hinting * RadioCard component for Job Templates (#15582) * chore: add * test: component API * ui: component template * refact: remove bc naming collission * styles: remove SASS var causing conflicts * Disallow specific variable at nomad/job-templates (#15681) * Disallows variables at exactly nomad/job-templates * idiomatic refactor * Expanding nomad job init to accept a template flag (#15571) * Adding a string flag for templates on job init * data-down actions-up version of a custom template editor within variable * Dont force grid on job template editor * list-templates flag started * Correctly slice from end of path name * Pre-review cleanup * Variable form acceptance test for job template editing * Some review cleanup * List Job templates test * Example from template test * Using must.assertions instead of require etc * ui: add choose template button (#15596) * ui: add new routes * chore: update file directory * ui: add choose template button * test: button and page navigation * refact: update var name * ui: use `Button` component from `HDS` (#15607) * ui: integrate buttons * refact: remove helper * ui: remove icons on non-tertiary buttons * refact: update normalize method for key/value pairs (#15612) * `revert`: `onCancel` for `JobDefinition` The `onCancel` method isn't included in the component API for `JobEditor` and the primary cancel behavior exists outside of the component. With the exception of the `JobDefinition` page where we include this button in the top right of the component instead of next to the `Plan` button. * style: increase button size * style: keep lime green * ui: select template (#15613) * ui: deprecate unused component * ui: deprecate tests * ui: jobs.run.templates.index * ui: update logic to handle templates * refact: revert key/value changes * style: padding for cards + buttons * temp: fixtures for mirage testing * Revert "refact: revert key/value changes" This reverts commit 124e95d12140be38fc921f7e15243034092c4063. * ui: guard template for unsaved job * ui: handle reading template variable * Revert "refact: update normalize method for key/value pairs (#15612)" This reverts commit 6f5ffc9b610702aee7c47fbff742cc81f819ab74. * revert: remove test fixtures * revert: prettier problems * refact: test doesnt need filter expression * styling: button sizes and responsive cards * refact: remove route guarding * ui: update variable adapter * refact: remove model editing behavior * refact: model should query variables to populate editor * ui: clear qp on exit * refact: cleanup deprecated API * refact: query all namespaces * refact: deprecate action * ui: rely on collection * refact: patch deprecate transition API * refact: patch test to expect namespace qp * styling: padding, conditionals * ui: flashMessage on 404 * test: update for o(n+1) query * ui: create new job template (#15744) * refact: remove unused code * refact: add type safety * test: select template flow * test: add data-test attrs * chore: remove dead code * test: create new job flow * ui: add create button * ui: create job template * refact: no need for wildcard * refact: record instead of delete * styling: spacing * ui: add error handling and form validation to job create template (#15767) * ui: handle server side errors * ui: show error to prevent duplicate * refact: conditional namespace * ui: save as template flow (#15787) * bug: patches failing tests associated with `pretender` (#15812) * refact: update assertion * refact: test set-up * ui: job templates manager view (#15815) * ui: manager list view * test: edit flow * refact: deprecate column-helper * ui: template edit and delete flow (#15823) * ui: manager list view * refact: update title * refact: update permissions * ui: template edit page * bug: typo * refact: update toast messages * bug: clear selections on exit (#15827) * bug: clear controllers on exit * test: mirage config changes (#15828) * refact: deprecate column-helper * style: update z-index for HDS * Revert "style: update z-index for HDS" This reverts commit d3d87ceab6d083f7164941587448607838944fc1. * refact: update delete button * refact: edit redirect * refact: patch reactivity issues * styling: fixed width * refact: override defaults * styling: edit text causing overflow * styling: add inline text Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com> * bug: edit `text` to `template` Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com> Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com> * test: delete flow job templates (#15896) * refact: edit names * bug: set correct ref to store * chore: trim whitespace: * test: delete flow * bug: reactively update view (#15904) * Initialized default jobs (#15856) * Initialized default jobs * More jobs scaffolded * Better commenting on a couple example job specs * Adapter doing the work * fall back to epic config * Label format helper and custom serialization logic * Test updates to account for a never-empty state * Test suite uses settled and maintain RecordArray in adapter return * Updates to hello-world and variables example jobspecs * Parameterized job gets optional payload output * Formatting changes for param and service discovery job templates * Multi-group service discovery job * Basic test for default templates (#15965) * Basic test for default templates * Percy snapshot for manage page * Some late-breaking design changes * Some copy edits to the header paragraphs for job templates (#15967) * Added some init options for job templates (#15994) * Async method for populating default job templates from the variable adapter --------- Co-authored-by: Jai <41024828+ChaiWithJai@users.noreply.github.com>
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.
USE_MIRAGE=false ember serve- Visit your app at http://localhost:4200.
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 lintyarn 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 andb-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.