open-consul/ui-v2
John Cowen 6ec6530e03
UI: [BUGFIX] Decode/encode urls (#5206)
In 858b05fc31 (diff-46ef88aa04507fb9b039344277531584)
we removed encoding values in pathnames as we thought they were
eventually being encoded by `ember`. It looks like this isn't the case.

Turns out sometimes they are encoded sometimes they aren't. It's complicated.
If at all possible refer to the PR https://github.com/hashicorp/consul/pull/5206.

It's related to the difference between `dynamic` routes and `wildcard` routes.

Partly related to this is a decision on whether we urlencode the slashes within service names or not. Whilst historically we haven't done this, we feel its a good time to change this behaviour, so we'll also be changing services to use dynamic routes instead of wildcard routes. So service links will then look like /ui/dc-1/services/application%2Fservice rather than /ui/dc-1/services/application/service

Here, we define our routes in a declarative format (for the moment at least JSON) outside of Router.map, and loop through this within Router.map to set all our routes using the standard this.route method. We essentially configure our Router from the outside. As this configuration is now done declaratively outside of Router.map we can also make this data available to href-to and paramsFor, allowing us to detect wildcard routes and therefore apply urlencoding/decoding.

Where I mention 'conditionally' below, this is detection is what is used for the decision.

We conditionally add url encoding to the `{{href-to}}` helper/addon. The
reasoning here is, if we are asking for a 'href/url' then whatever we
receive back should always be urlencoded. We've done this by reusing as much
code from the original `ember-href-to` addon as possible, after this
change every call to the `{{href-to}}` helper will be urlencoded.

As all links using `{{href-to}}` are now properly urlencoded. We also
need to decode them in the correct place 'on the other end', so..

We also override the default `Route.paramsFor` method to conditionally decode all
params before passing them to the `Route.model` hook.

Lastly (the revert), as we almost consistently use url params to
construct API calls, we make sure we re-encode any slugs that have been
passed in by the user/developer. The original API for the `createURL`
function was to allow you to pass values that didn't need encoding,
values that **did** need encoding, followed by query params (which again
require url encoding)

All in all this should make the entire ember app url encode/decode safe.
2019-01-23 13:46:59 +00:00
..
app UI: [BUGFIX] Decode/encode urls (#5206) 2019-01-23 13:46:59 +00:00
config UI: Add conditional enterprise logo (#4432) 2018-07-30 17:59:43 +01:00
lib ui: Adds the CONSUL_VERSION env var into the HTML source in a comment (#4993) 2018-11-26 14:27:56 +00:00
public ui: serve /robots.txt when UI is enabled. (#5089) 2018-12-17 19:35:03 +01:00
tests UI: [BUGFIX] Decode/encode urls (#5206) 2019-01-23 13:46:59 +00:00
.dev.eslintrc.js UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.editorconfig UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.ember-cli Move testing doubles to use data embedded in the HTML vs HTTP/fetch 2018-07-02 19:02:16 +01:00
.eslintrc.js UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.gitignore WIP: Feature/acceptance tests 2018-06-12 11:24:35 +01:00
.nvmrc UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.prettierrc UI V2 (#4086) 2018-05-10 19:52:53 +01:00
.watchmanconfig UI V2 (#4086) 2018-05-10 19:52:53 +01:00
GNUmakefile Move testing doubles to use data embedded in the HTML vs HTTP/fetch 2018-07-02 19:02:16 +01:00
README.md add documentation on how to use ember-exam 2019-01-03 23:50:02 -05:00
ember-cli-build.js ui: Adds multi syntax linting to the code editor (#4814) 2018-10-19 17:36:38 +01:00
package.json add test-parallel yarn command 2019-01-03 23:49:45 -05:00
testem.js output XML test results 2019-01-03 22:21:19 -05:00
yarn.lock adding ember-exam package 2019-01-03 16:59:30 -05: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

Running / Development

The source code comes with a small server 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.

  • make start-api or yarn start:api (this starts a Consul API double running on http://localhost:3000)
  • make start or yarn start to start the ember app that connects to the above API double
  • Visit your app at http://localhost:4200.

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.

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

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:

yarn test-parallel

To run manually:

$ EMBER_EXAM_PARALLEL=true ember exam --split <num> --parallel

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