consul/ui/packages/consul-ui
John Cowen 27c74f7141
ui: New search/sort/filtering bar for Node > ServiceInstances (#9326)
* Model layer changes to turn Node:ServiceInstances into hasMany

We tried to make something that feels a little like ember-data yet
not leave our approach of re-shaping the JSON directly from the
response.

1. We added transformHasManyResponse for re-shaping JSON for hasMany
relationships. we avoided the normalize word as ember-data serialize
methods usually return something JSON:API shaped and we distinctly don't
want to do that. Transform was the best word we could think of.

2. The integration tests across all of our models here feel very much
like those types of tests that aren't really testing much, or assert
too much to an extent that they get in the way rather than be of any
use. I'd very much like to move a lot of this to unit tests. Currently
most of the fingerprinting functionality is unit tested and these
integration tests were originally to give confidence that IDs and
related properties were being added correctly.

3. We've added a hasMany relationship, but not the corresponding
belongsTo - yet at least. We don't require the belongsTo right now, and
if we do  we can add it later.

* Integrate ServiceInstance search bar for Node:ServiceInstances

* Hide Node.Meta when on the Node:ServiceINstance page

We use a little string replace hack here for a human-like label, this is
soon to be replaced with proper i10n replacement

* Always ensure that a Namespace is set, and add comment explaining
2020-12-09 13:08:30 +00:00
..
.storybook ui: Move AppError and ErrorState to glimmer components (#9095) 2020-11-06 09:24:17 +00:00
app ui: New search/sort/filtering bar for Node > ServiceInstances (#9326) 2020-12-09 13:08:30 +00:00
blueprints ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
config ui: Move mocks into the ui project (#9084) 2020-11-05 16:03:49 +00:00
lib ui: Fix up typo for the UI config template url (#9109) 2020-11-05 14:04:40 -05:00
mock-api ui: Add 'Search Across' for finer grained searching (#9282) 2020-12-01 15:45:09 +00:00
node-tests/config ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
public ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
server ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
tests ui: New search/sort/filtering bar for Node > ServiceInstances (#9326) 2020-12-09 13:08:30 +00:00
vendor/metrics-providers Add DC and NS support for Envoy metrics (#9207) 2020-11-16 16:37:19 -07:00
.dev.eslintrc.js ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
.editorconfig ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
.ember-cli ui: Default to glimmer components (#9121) 2020-11-06 14:54:44 +00:00
.eslintignore ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
.eslintrc.js ui: Add vendor directory as a target for JS linting and lint (#9157) 2020-11-11 16:59:15 +00:00
.istanbul.yml ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
.nvmrc ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
.prettierrc ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
.template-lintrc.js ui: Add vendor directory as a target for JS linting and lint (#9157) 2020-11-11 16:59:15 +00:00
.watchmanconfig ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
GNUmakefile ui: Update node_modules deps path in GNUMakefile (#9066) 2020-10-29 13:28:55 -05:00
README.md ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
_redirects ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
ember-cli-build.js ui: Add vendor directory as a target for JS linting and lint (#9157) 2020-11-11 16:59:15 +00:00
package.json ui: Native-ize class based helpers (#9337) 2020-12-08 09:27:28 +00:00
testem.js ui: Add vendor directory as a target for JS linting and lint (#9157) 2020-11-11 16:59:15 +00:00

README.md

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.