open-consul/ui-v2
John Cowen 4c3fbebefd ui: Move to new ember nested file structure for components (#7403)
* ui: Move components to the new nested structure

* Move data-test attribute to the correct HTML element

We don't currently rely on this, but was incorrectly placed on the input
rather than the label tag

* Fix up left over curly bracket components that were causing issues

For some reason the combination of:

1. Old style curly bracket components
2. data-test-* attributes
3. Moving to the new component file structure

Meant that our data-test-* selectors where no longer being rendered.
Whilst this had no effect on the app, it meant our tests suite could no
longer select DOM elements in order to assert various things.

Moving the old style curly bracket components to the new style XML/Angle
bracket format fixes the issue

* Update ui-v2/app/templates/dc/nodes/-services.hbs

Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com>

* Update ui-v2/app/templates/dc/nodes/-services.hbs

Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com>

Co-authored-by: Greg Hoin <1416421+gregone@users.noreply.github.com>
2020-05-12 17:14:15 +00:00
..
app ui: Move to new ember nested file structure for components (#7403) 2020-05-12 17:14:15 +00:00
blueprints ui: Updates Consul blueprints to be compatible with new ED version (#7370) 2020-05-12 17:14:11 +00:00
config ui: Upgrade to ember 3.16 Octane Edition (#7334) 2020-05-12 17:14:10 +00:00
lib ui: Test Coverage Reporting (#7027) 2020-05-12 17:13:50 +00:00
node-tests/config ui: Run 2 separate test runs oss and ent (#7214) 2020-02-07 11:02:53 +00:00
public ui: serve /robots.txt when UI is enabled. (#5089) 2018-12-17 19:35:03 +01:00
tests ui: Move to new ember nested file structure for components (#7403) 2020-05-12 17:14:15 +00:00
.dev.eslintrc.js UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.editorconfig ui: Upgrade to ember 3.16 Octane Edition (#7334) 2020-05-12 17:14:10 +00:00
.ember-cli ui: Move to new ember nested file structure for components (#7403) 2020-05-12 17:14:15 +00:00
.eslintignore ui: UI Release Merge (ui-staging merge) (#6527) 2019-09-30 14:47:49 +01:00
.eslintrc.js ui: Upgrade to ember 3.16 Octane Edition (#7334) 2020-05-12 17:14:10 +00:00
.gitignore ui: UI Release Merge (ui-staging merge) (#6527) 2019-09-30 14:47:49 +01:00
.nvmrc ui: Upgrade to node 12 LTS (#7248) 2020-05-12 17:13:53 +00:00
.prettierrc UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.template-lintrc.js ui: Upgrade to ember 3.16 Octane Edition (#7334) 2020-05-12 17:14:10 +00:00
.travis.yml ui: Upgrade to ember 3.16 Octane Edition (#7334) 2020-05-12 17:14:10 +00:00
.watchmanconfig UI V2 (#4086) 2018-05-10 19:52:53 +01:00
_redirects ui: Netlify previews (#6419) 2019-09-04 08:35:17 +00:00
ember-cli-build.js ui: Use the dart-sass implementation of sass (#7175) 2020-05-12 17:13:51 +00:00
GNUmakefile ui: Make a specific CI coverage make target ensuring use of CI cache (#7335) 2020-05-12 17:14:08 +00:00
package.json ui: Install ref modifier and use it instead of dom selecting (#7383) 2020-05-12 17:14:14 +00:00
README.md ui: [dev] Adds express middleware, removes need to run api dev server (#6750) 2019-12-18 12:26:41 +00:00
testem.js ui: Upgrade to ember 3.16 Octane Edition (#7334) 2020-05-12 17:14:10 +00:00
yarn.lock ui: Install ref modifier and use it instead of dom selecting (#7383) 2020-05-12 17:14:14 +00:00

consul-ui

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • git clone https://github.com/hashicorp/consul.git this repository
  • cd ui-v2
  • yarn install

All tooling scripts below primarily use make which in turn call node package scripts.

Running / Development

The source code comes with a small development mode that runs enough of the consul API as a set of mocks/fixtures to be able to run the UI without having to run consul.

To enable ACLs using the mock API, use Web Inspector to set a cookie as follows:

CONSUL_ACLS_ENABLE=1

This will enable the ACLs login page, to which you can login with any ACL token/secret.

You can also use a number of other cookie key/values to set various things whilst developing the UI, such as (but not limited to):

CONSUL_SERVICE_COUNT=1000
CONSUL_NODE_CODE=1000
// etc etc

See ./node_modules/@hashicorp/consul-api-double for more details.

If you wish to run the UI code against a running consul instance, uncomment the proxy line in .ember-cli to point ember-cli to your consul instance.

You can also run the UI against a normal Consul installation.

make start-consul or yarn run start:consul will use the CONSUL_HTTP_ADDR environment variable to locate the Consul installation. If that it not set start-consul will use http://localhost:8500.

Example usage:

CONSUL_HTTP_ADDR=http://10.0.0.1:8500 make start-consul

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

Please note: You do not need to run make start-api/yarn run start:api to run the tests, but the same mock consul API is used.

  • make test or yarn run test
  • make test-view or yarn run test:view to view the tests running in Chrome

Linting

make lint currently runs linting on the majority of js files and hbs files (using ember-template-lint).

See .eslintrc.js and .eslintignore for specific configuration.

Building

  • make build builds the UI for production usage (env=production)
  • make build-ci builds the UI for CI/test usage (env=test)

Static files are built into ./dist

Running Tests in Parallel

Alternatively, ember-exam can be used to split the tests across multiple browser instances for faster results. Most options are the same as ember test. To see a full list of options, run ember exam --help.

Note: The EMBER_EXAM_PARALLEL environment variable must be set to override the default parallel value of 1 browser instance in testem.js.

To quickly run the tests across 4 parallel browser instances:

make test-parallel

To run manually:

$ EMBER_EXAM_PARALLEL=true ./node_modules/.bin/ember exam --split <num> --parallel

More ways to split tests can be found in the ember-exam README.md.