Commit Graph

150 Commits

Author SHA1 Message Date
John Cowen 6ffe0e6fe4
ui: Use the `each key=""` parameter to force ember to reuse DOM (#7550)
Ember tries to reuse DOM elements when it can but as ember looks for
changes to objects rather than the DOM itself sometimes. This and the
fact that an objects identity may change even though its value hasn't,
results in ember occasionally re-mutating DOM when it doesn't need to.

The `each` helper includes a `key` attribute to hint to ember what it
should look for when deciding whether something has changed, rather than
the objects identity.

https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/each#specifying-keys

We use this here to fix an issue where DOM was being redrawn after the
user had scrolled the page and was therefore resetting the scroll back
to 0 (the top of the page)
2020-03-31 14:58:59 +01:00
John Cowen 468e82dcf9
ui: Alter position of logic for showing the Round Trip Time tab to prevent DOM refresh (#7377)
* ui: Move tomography length check inside of the partial

Previously we checked the length of tomography.distances to decide
whether to show the RTT tab or not. Previous to our ember upgrade this
would not cause a DOM reload of so many elements (i.e. all of the tab
content). Since our ember upgrade, any change to tomography (so not
necessarily the length of distances) seems to fire a change to the length (even if
the length remains the same). The knock on effect of this is that the
array of tab panels seems to be recalculated (but remain the same) and
all of the tab panels are completely re-rendered, causing the scroll of
the page to be reset.

This commit moves the check for tomography.distance.length to the lower
down with the loop, which means the array of tab panels always remains
the same, which consequently means that the entire array of tab panels
is never re-rendered entirely, and therefore fixes the issue.
2020-03-04 18:12:27 +00:00
John Cowen ad3b5327d2
ui: Discovery chain improvements (#7222)
* ui: remove the default word when describing routes

* ui: Avoid mutating the chain and look for the default edges more safely

* ui: Use not null check instead of a truthy check for showing disco-chain

* ui: Upgrade consul-api-double for better disco-chain mocks/fixtures
2020-02-06 12:06:47 +00:00
Kenia c706089c9f
ui: Hides the Routing tab for a service proxy (#7195)
* Adds conditional in route to not make discovery-chain request if service kind is equal to `connect-proxy` or `mesh-gateway`

* Adds conditional in template to not show Routing tab if `chain` returns as null

* Creates a new acceptance test to test the Routing tab not being displayed for a service proxy

* Adds `tabs` to the services/show page object
2020-02-03 10:09:15 -05:00
Kenia ff315c95fd
ui: Implements the ember-page-title addon to the UI (#7118)
* Installs ember-page-title 5.x

* Adds a page title to all template files that need one

* Adds an assertion step to test the page titles
2020-01-28 09:25:52 -05:00
John Cowen 1ff8678df7
ui: Remove the Policy/Service Identity selector from nspaces (#7124)
When editing Nspaces, although you can assign policies to a nspace using
PolicyDefaults you cannot assign a Service Identity to a policy like you
can when adding a policy to a token.

This commit adds an extra attribute to our policy-form/policy-selector
component so you can disable this setting. At a later date we may change
this to have a conficgurable `<Slot />` instead.

Simple acceptance tests is included here
2020-01-28 09:39:09 +00:00
John Cowen 327aac9fe9
ui: Acceptance test improvements to prepare for more NS tests (#6980)
* ui: Acceptance test improvements to prepare for more NS tests

* ui: Namespace acceptance testing (#7005)

* Update api-double and consul-api-double for http.body

* Adds places where we missed passing the nspace through

* Hardcode nspace CRUD to use the default nspace for policies and roles

* Alter test helpers to allow us to control nspaces from the outside

* Amends to allow tests to account for namespace, move ns from queryParam

1. We decided to move how we pass the namespace value through to the
backend when performing write actions (create, update). Previoulsy we
were using the queryParam although using the post body is the preferred
method to send the Namespace details through to the backend.
2. Other various amends to take into account testing across multiple
namespaced scenarios

* Enable nspace testing by default

* Remove last few occurances of old style http assertions

We had informally 'deprecated' our old style of http assertions that
relied on the order of http calls (even though that order was not
important for the assertion). Following on from our namespace work we
removed the majority of the old occrances of these old style assertions.

This commit removes the remaining few, and also then cleans up the
assertions/http.js file to only include the ones we are using.

This reduces our available step count further and prevents any confusion
over the usage of the old types and the new types.

* ui: Namespace CRUD acceptance tests (#7016)

* Upgrade consul-api-double

* Add all the things required for testing:

1. edit and index page objects
2. enable CONSUL_NSPACE_COUNT cookie setting
3. enable mutating HTTP response bodies based on URL

* Add acceptance test for nspace edit/delete/list and searching
2020-01-24 12:26:28 +00:00
John Cowen afafe677a3
ui: New Confirmation Dialogs (#7007)
* ui: Change action-group to use new popup-menu component in intentions

* ui: Slight amends to aria-menu to prevent scrolling

* ui: Begin to use aria-menu/popover-menu for other elements

* Use a simpler, hackier method to fix up zIndexing

* ui: Implement new confirmation dialogs in other list views (#7080)

This includes another amend to the popover-menu in order to allow
mutiple confirmations/subpanels in the same popover menu.

The functionality added here to allow this is likely to change in the
future.
2020-01-22 12:08:29 +00:00
John Cowen 06d09d11f1
ui: Move slots to use attributes over positional params (#7032)
* Change all instances of yield/block-slots to use attributes over positional arguments

* Remove the ability to use yield/block-slots with positional params
2020-01-15 09:15:54 +00:00
John Cowen aa680d5f0c ui: Discovery Chain (#6746)
* Add data layer for discovery chain (model/adapter/serializer/repo)

* Add routing plus template for routing tab

* Add extra deps - consul-api-double upgrade plus ngraph for graphing

* Add discovery-chain and related components and helpers:

1. discovery-chain to orchestrate/view controller
2. route-card, splitter-card, resolver card to represent the 3 different
node types.
3. route-match helper for easy formatting of route rules
4. dom-position to figure out where things are in order to draw lines
5. svg-curve, simple wrapper around svg's <path d=""> attribute format.
6. data-structs service. This isn't super required but we are using
other data-structures provided by other third party npm modules in other
yet to be merged PRs. All of these types of things will live here for
easy access/injection/changability
7. Some additions to our css-var 'polyfill' for a couple of extra needed
rules

* Related CSS for discovery chain

1. We add a %card base component here, eventually this will go into our
base folder and %stats-card will also use it for a base component.
2. New icon for failovers

* ui: Discovery Chain Continued (#6939)

1. Add in the things we use for the animations
2 Use IntersectionObserver so we know when the tab is visible,
otherwise the dom-position helper won't work as the dom elements don't
have any display.
3. Add some base work for animations and use them a little
4. Try to detect if a resolver is a redirect. Right now this works for
datacenters and namespaces, but it can't work for services and subsets -
we are awaiting backend support for doing this properly.
5. Add a fake 'this service has no routes' route that says 'Default'
6. redirect icon
7. Add CSS.escape polyfill for Edge
2019-12-18 12:26:47 +00:00
John Cowen 7044aa52c8 ui: Namespace Support (#6639)
Adds namespace support to the UI:

1. Namespace CRUD/management
2. Show Namespace in relevant areas (intentions, upstreams)
3. Main navigation bar improvements
4. Logic/integration to interact with a new `internal/acl/authorize` endpoint
2019-12-18 12:26:47 +00:00
John Cowen e6ecb47765 ui: Expose checks (#6575)
Adds visibility for `Expose.Checks` config setting for proxies.

1. Adds an 'Exposed Path' tab to the proxy detail page to show the user information on exposed paths.
2. If the users has exposed their healthchecks we also add this information to the Service detail page for this proxy (only for http2 and gRPC checks)
2019-12-18 12:26:43 +00:00
John Cowen b3b32dc0f6
ui: UI Release Merge (ui-staging merge) (#6527)
## HTTPAdapter (#5637)

## Ember upgrade 2.18 > 3.12 (#6448)

### Proxies can no longer get away with not calling _super

This means that we can't use create anymore to define dynamic methods.
Therefore we dynamically make 2 extended Proxies on demand, and then
create from those. Therefore we can call _super in the init method of
the extended Proxies.

### We aren't allowed to reset a service anymore

We never actually need to now anyway, this is a remnant of the refactor
from browser based confirmations. We fix it as simply as possible here
but will revisit and remove the old browser confirm functionality at a
later date

### Revert classes to use ES5 style to workaround babel transp. probs

Using a mixture of ES6 classes (and hence super) and arrow functions
means that when babel transpiles the arrow functions down to ES5, a
reference to this is moved before the call to super, hence causing a js
error.

Furthermore, we the testing environment no longer lets use use
apply/call on the constructor.

These errors only manifests during testing (only in the testing
environment), the application itself runs fine with no problems without
this change.

Using ES5 style class definitions give us freedom to do all of the above
without causing any errors, so we reverted these classes back to ES5
class definitions

### Skip test that seems to have changed due to a change in RSVP timing

This test tests a usecase/area of the API that will probably never ever
be used, it was more testing out the API. We've skipped the test for now
as this doesn't affect the application itself, but left a note to come
back here later to investigate further

### Remove enumerableContentDidChange

Initial testing looks like we don't need to call this function anymore,
the function no longer exists

### Rework Changeset.isSaving to take into account new ember APIs

Setting/hanging a computedProperty of an instantiated object no longer
works. Move to setting it on the prototype/class definition instead

### Change how we detect whether something requires listening

New ember API's have changed how you can detect whether something is a
computedProperty or not. It's not immediately clear if its even possible
now. Therefore we change how we detect whether something should be
listened to or not by just looking for presence of `addEventListener`

### Potentially temporary change of ci test scripts to ensure deps exist

All our tooling scripts run through a Makefile (for people familiar with
only using those), which then call yarn scripts which can be called
independently (for people familar with only using yarn).

The Makefile targets always check to make sure all the dependencies are
installed before running anything that requires them (building, testing
etc).

The CI scripts/targets didn't follow this same route and called the yarn
scripts directly (usually CI builds a cache of the dependencies first).

For some reason this cache isn't doing what it usually does, and it
looks as though, in CI, ember isn't installed.

This commit makes the CI scripts consistently use the same method as all
of the other tooling scripts (Makefile target > Install Deps if
required > call yarn script). This should install the dependencies if
for some reason the CI cache building doesn't complete/isn't successful.

Potentially this commit may be reverted if, the root of the problem is
elsewhere, although consistency is always good, so it might be a good
idea to leave this commit as is even if we need to debug and fix things
elsewhere.

### Make test-parallel consistent with the rest of the tooling scripts

As we are here making changes for CI purposes (making test-ci
consistent), we spotted that test-parallel is also inconsistent and also
the README manual instructions won't work without `ember` installed
globally.

This commit makes everything consistent and changes the manual
instructions to use the local ember instance that gets installed via
yarn

### Re-wrangle catchable to fit with new ember 3.12 APIs

In the upgrade from ember 3.8 > 3.12 the public interfaces for
ComputedProperties have changed slightly. `meta` is no longer a public
property of ComputedProperty but of a ComputedDecoratorImpl mixin
instead.

7e4ba1096e/packages/%40ember/-internals/metal/lib/computed.ts (L725)

There seems to be no way, by just using publically available
methods, to replicate this behaviour so that we can create our own
'ComputedProperty` factory via injecting the ComputedProperty class as
we did previously.

3f333bada1/ui-v2/app/utils/computed/factory.js (L1-L18)

Instead we dynamically hang our `Catchable` `catch` method off the
instantiated ComputedProperty. In doing it like this `ComputedProperty`
has already has its `meta` method mixed in so we don't have to manually
mix it in ourselves (which doesn't seem possible)

This functionality is only used during our work in trying to ensure
our EventSource/BlockingQuery work was as 'ember-like' as possible (i.e.
using the traditional Route.model hooks and ember-like Controller
properties). Our ongoing/upcoming work on a componentized approach to
data a.k.a `<DataSource />` means we will be able to remove the majority
of the code involved here now that it seems to be under an amount of
flux in ember.

### Build bindata_assetfs.go with new UI changes
2019-09-30 14:47:49 +01:00
John Cowen 20984e2a73
ui: re-remove the `Type` header on the service listing page (#6439)
The `Type` column used for giving details on what type of a service each
item is was removed in https://github.com/hashicorp/consul/pull/6075.

As a result of keeping long running branches in sync, this change was
partly reverted in an earlier PR (the type header was re-added)
https://github.com/hashicorp/consul/pull/5913 following a rebase.

This commit re-removes the `Type` table header (the `<th>`)
2019-09-04 11:45:13 +01:00
John Cowen 24847b169e ui: Leader icon for node listing view (#6265)
- yarn upgrade consul-api-double which includes `status/leader`
- add all the ember-data things required to call a new endpoint
- Pass the new leader variable through to the template
- use the new leader variable in the template to set a leader
- add acceptance testing to verify leaders are highlighted
- Change testing navigation/api requests to status/leader (on the node listing page, status/leader is now the last get request to
be called).
- Template whitespace commit (less indenting)
- adds a test to to assert no errors happen with an unelected leader
2019-09-04 08:35:16 +00:00
John Cowen 44c2da3518 ui: add some additional env level URLs for easier linking (#6145)
Right now we only use CONSUL_DOCS_URL, the others are for future usage
2019-09-04 08:35:14 +00:00
John Cowen e636a72ffd ui: [Bugfix] - Sticky KV Sessions (#6166)
Initialize session value to `null` to prevent stickiness from a session the previous KV
2019-09-04 08:35:13 +00:00
John Cowen dd91ce33d6 ui: Show the correct message when a session has been removed from a KV (#6167) 2019-09-04 08:35:11 +00:00
John Cowen d01ef7225a ui: Add `stats-card` component, integrate more `@hashicorp/structure-icons` (#6021)
1. Rebuild the heathchecked-resource component now we can copy and paste
2. As the above rebuild came with new icons, we also swapped out 'most'
of the other areas where we were using these new icons, plus any icons
that were effected by the new icon placeholders
3. Begin to remove more and more of the project specific icons (now
replaced by the shared ones)
2019-09-04 08:35:11 +00:00
John Cowen 62fa803d9f ui: {{phrase-editor}} amends (#5991)
1. Re-focus the input element on phrase removal
2. Move all actions to `actions:`
3. Move to a form looking `value` rather than `items`
4. Move placeholder functionalit yinto the component
5. Force DDAU instead of two way binding with `slice` and `onchange`
6. Begin to deprecate the `searchable` interface
2019-09-04 08:35:07 +00:00
John Cowen 06b6aff8d0 ui: CSS Components Migration (#5913)
Migrate roughly half of the base components into base
Adds a target for easily formatting CSS

Further CSS amends/migration (#5921)

1. tooltips within tables where a slightly bit troublesome due to a mix
of `inline-flex`, `overflow` and the need for truncation. This refineds
tooltips a slight bit more to work 'everywhere'.
2. We also move tooltip to use the correct color and min-width from
structure, but we overwrite the min-width here until we get confirmation
on widths/alignment of text within a tooltip.
3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings
4. Now we inline-flex our table cells, it means it is impossible to
truncate text without wrapping it in another element. This wraps all
Description like text in `<p>` tags. Generally the first column of text
is already wrapped in an `<a>` tag. Other items such as consul tags and
policy names etc get 'cutoff' rather than truncated.
5. We are now using all the icons from `@hashicorp/structure-icons`
2019-09-04 08:35:01 +00:00
John Cowen 266c288fc0
ui: Adds readonly meta data to the serviceInstance and node detail pages (#6196) 2019-08-02 13:53:52 +02:00
John Cowen dcb9800442
ui: Gateway Addresses (#6075)
- Removes 'type' icons (basically the proxy icon, not the text itself)

- Add support for Mesh Gateways plus their addresses
This adds a 'Mesh Gateway' type label to service and service instance
pages, plus a new 'Addresses' tab if the service is a Mesh Gateway
showing a table of addresses for the service - plus tests
2019-07-05 09:07:25 +01:00
John Cowen e8722e6a35
ui: Normal proxies link to services, sidecars to instances (#5944)
* ui: Normal proxies line to services, sidecars to instances

Following on from https://github.com/hashicorp/consul/pull/5933 we
noticed that 'normal' proxies should link to the service, rather than
the service instance. Additionally proxy 'searching' within the
repository should take into account the name of the node that the
originating service is on (sidecar proxies are generally co-located)

Added an additional test here to prove that a sidecar-proxy with the
same service id but on a different node does not show the sidecar proxy
link.
2019-06-20 09:37:17 +01:00
John Cowen a41c13ae83
ui: Ensure Service Instance pages account for nodes (#5933)
Include node name in the URL for service instances
Integrate the node name slug into tests for service instance pages
2019-06-11 10:18:50 +01:00
John Cowen 685b89bdec
ui: Adds ability to search by policy, role or service ident names (#5811) 2019-06-05 09:25:32 +01:00
John Cowen 999426794f ui: Adds {{Datacenter}} keyword for URL template interpolation (#5768)
1. Includes Datacenter variable for intperolation
2. Amends text on the Settings page to reflect new keyword
3. Adds further acceptance testing around the new dashboard buttons
2019-05-02 18:29:43 +00:00
John Cowen 7eda188382 ui: Re-fix old erroneous link 2019-05-01 19:01:03 +00:00
John Cowen d88b2d4150 ui: dashboard links (#5704)
This PR adds a new {{template-anchor}} component. This component lets you specify a 'href template' in a handlebars like format instead of a normal string href. This template will be interpolated with the contents of a vars="" attribute.

Also contains code to add an extra UI Setting to be able to store a template to be used for this anchor in localStorage
2019-05-01 18:22:38 +00:00
John Cowen 482426b13e UI: ACL Roles (#5635)
Adds support for ACL Roles and Service Identities CRUD, along with necessary changes to Tokens, and the CSS improvements required.

Also includes refinements/improvements for easier testing of deeply nested components.

1. ember-data adapter/serializer/model triplet for Roles
2. repository, form/validations and searching filter for Roles
3. Moves potentially, repeated, or soon to to repeated functionality
into a mixin (mainly for 'many policy' relationships)
4. A few styling tweaks for little edge cases around roles
5. Router additions, Route, Controller and templates for Roles

Also see: 

* UI: ACL Roles cont. plus Service Identities (#5661 and #5720)
2019-05-01 18:22:37 +00:00
John Cowen eeb7a858e2 ui: Search improvements (#5540)
* ui: Replaces Service listing filterbar with a phrase-editor search (#5507)

1. New phrase-editor restricting search to whole phrases (acts on
enter key). Allows removal of previously entered phrases
2. Searching now allows arrays of terms, multiple terms work via AND
2019-05-01 18:22:36 +00:00
John Cowen a14a37a078 UI: Add support for blocking queries on the service instance detail page (#5487)
This commit includes several pieces of functionality to enable services
to be removed and the page to present information that this has happened
but also keep the deleted information on the page. Along with the more
usual blocking query based listing.

To enable this:

1. Implements `meta` on the model (only available on collections in
ember)
2. Adds new `catchable` ComputedProperty alongside a `listen` helper for
working with specific errors that can be thrown from EventSources in an
ember-like way. Briefly, normal computed properties update when a
property changes, EventSources can additionally throw errors so we can
catch them and show different visuals based on that.

Also:

Add support for blocking queries on the service instance detail page

1. Previous we could return  undefined when a service instance has no
proxy, but this means we have nothing to attach `meta` to. We've changed
this to return an almost empty object, so with only a meta property.
At first glance there doesn't seem to be any way to provide a proxy
object to templates and be able to detect whether it is actually null
or not so we instead change some conditional logic in the templates to
detect the property we are using to generate the anchor.
2. Made a `pauseUntil` test helper function for steps where we wait for
things. This helps for DRYness but also means if we can move away from
setInterval to something else later, we can do it in one place
3. Whilst running into point 1 here, we managed to make the blocking
queries eternally loop. Whilst this is due to an error in the code and
shouldn't ever happen whilst in actual use, we've added an extra check
so that we only recur/loop the blocking query if the previous response has a
`meta.cursor`

Adds support for blocking queries on the node detail page (#5489)

1. Moves data re-shaping for the templates variables into a repository
so they are easily covered by blocking queries (into coordinatesRepo)
2. The node API returns a 404 as signal for deregistration, we also
close the sessions and coordinates blocking queries when this happens
2019-05-01 18:22:23 +00:00
John Cowen 9daf8f53d9 ui: Adds blocking query support to the service detail page (#5479)
This commit includes several pieces of functionality to enable services
to be removed and the page to present information that this has happened
but also keep the deleted information on the page. Along with the more
usual blocking query based listing.

To enable this:

1. Implements `meta` on the model (only available on collections in
ember)
2. Adds new `catchable` ComputedProperty alongside a `listen` helper for
working with specific errors that can be thrown from EventSources in an
ember-like way. Briefly, normal computed properties update when a
property changes, EventSources can additionally throw errors so we can
catch them and show different visuals based on that.
2019-05-01 18:22:22 +00:00
John Cowen 10c1f29ffa ui: Add proxy icons to proxy services and instances where appropriate (#5463) 2019-05-01 18:22:19 +00:00
John Cowen 3d76540297 ui: Fix erroneous HTML that was being fixed by either browser/ember (#5530)
The resulting DOM from this template was actually correct, we'd assume
it was being fixed by the browser
2019-05-01 18:22:17 +00:00
John Cowen 5dd9cd2d2e UI: Add forking based on service instance id existence (#5392)
* ui: Add forking based on service instance id existence

Proxies come in 2 flavours, 'normal' and sidecar. We know when a proxy
is a sidecar proxy based on whether a DestinationServiceID is set.

LocalServiceAddress and LocalServicePort are only relevant for sidecar
proxies.

This adds template logic to show different text depending on this
information.

Additionally adds test around connect proxies (#5418)

1. Adds page object for the instance detail page
2. Adds further scenario steps used in the tests
3. Adds acceptance testing around the instance detail page. Services
with proxies and the sidecar proxies and proxies themselves
4. Adds datacenter column for upstreams
5. Fixes bug routing bug for decision as to whether to request proxy
information or not
2019-05-01 18:22:15 +00:00
John Cowen 8f35715e47 UI: Service Numbers (#5348)
Add totals to some listing views, remove healthcheck totals

1. Adds markup to render totals for Services, Nodes, Intentions and v1
ACLs
2. Removes counts from healthcheck filters, and therefore simplify text,
moving the copy to the templates
3. Alter test to reflect the fact that the text of the buttons are no
static in the component template rather than a dynamic attribute
2019-05-01 18:22:11 +00:00
John Cowen 355f034822 UI: Service Instances (#5326)
This gives more prominence to 'Service Instances' as opposed to 'Services'. It also begins to surface Connect related 'nouns' such as 'Proxies' and 'Upstreams' and begins to interconnect them giving more visibility to operators.

Various smaller changes:

1. Move healthcheck-status component to healthcheck-output
2. Create a new healthcheck-status component for showing the number of
checks plus its icon
3. Create a new healthcheck-info component to group multiple statuses
plus a different view if there are no checks
4. Componentize tag-list
2019-05-01 18:22:10 +00:00
John Cowen f225da36f1 ui: Correctly rebase own token/no delete change 2019-05-01 18:22:03 +00:00
John Cowen 9ec7f3851b UI: Use buttons instead of anchors where appropriate (#4939)
Use buttons instead of anchors where appropriate
2019-05-01 18:21:45 +00:00
John Cowen 3780622df0 ui: Move intention source/destination menus use text from the template (#4938) 2019-05-01 18:21:44 +00:00
John Cowen 4368040a4a UI: Move legacy ACLs, KVs and Intentions to use `form` functionality (#4936)
Change legacy acls, kvs and intentions to use `form`s
2019-05-01 18:21:43 +00:00
John Cowen 104e6bac71 UI: Move legacy ACLs to use the new searchables/changeable-sets (#4933) 2019-05-01 18:21:42 +00:00
John Cowen 65ef2969c7 ui: Async Search (#4859)
This does several things to make improving the search experience easier
moving forwards:

1. Separate searching off from filtering. 'Searching' can be thought of
as specifically 'text searching' whilst filtering is more of a
boolean/flag search.
2. Decouple the actual searching functionality to almost pure,
isolated / unit testable units and unit test. (I still import embers get
which, once I upgrade to 3.5, I shouldn't need)
3. Searching rules are now configurable from the outside, i.e. not
wrapped in Controllers or Components.
4. General searching itself now can use an asynchronous approach based on
events. This prepares for future possibilities of handing off the
searching to a web worker or elsewhere, which should aid in large scale
searching and prepares the way for other searching methods.
5. Adds the possibility of have multiple searches in one
template/route/page.

Additionally, this adds a WithSearching mixin to aid linking the
searching to ember in an ember-like way in a single place. Plus a
WithListeners mixin to aid with cleaning up of event listeners on
Controller/Component destruction.

Post-initial work I slightly changed the API of create listeners:

Returning the handler from a `remover` means you can re-add it again if you
want to, this avoids having to save a reference to the handler elsewhere
to do the same.

The `remove` method itself now returns an array of handlers, again you
might want to use these again or something, and its also more useful
then just returning an empty array.

The more I look at this the more I doubt that you'll ever use `remove`
to remove individual handlers, you may aswell just use the `remover`
returned from add. I've added some comments to reflect this, but they'll
likely be removed once I'm absolutely sure of this.

I also added some comments for WithSearching to explain possible further
work re: moving `searchParams` so it can be `hung` off the
controller object
2019-05-01 18:21:34 +00:00
John Cowen a35fe7c5ba
ui: Removes delete button form pages that show your current token (#5241)
Tokens can no longer delete themselves see:

https://github.com/hashicorp/consul/pull/5210

...so we remove the button to allow you to do that from the UI
2019-01-23 13:51:36 +00:00
John Cowen c8386ec0cc
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
John Cowen 66c139ceae
UI: Text change and clarity Node Health > Health Checks (#5115)
Text change Node Health > Health Checks
Also adds an info icon and tooltip to Health Checks column header
2019-01-17 09:20:00 +00:00
Jihoon Chung d5e28bda56 ui: Fix typo in acl-migration guide link (#5135) 2019-01-17 09:03:23 +00:00
John Cowen 9c11109db4
ui: If a service has no external-source, don't show the icon (#4996) 2018-11-26 17:34:00 +00:00
John Cowen f65f001675
UI: Catch 500 error on token endpoint and revert to legacy tokens (#4874)
In some circumstances a consul 1.4 client could be running in an
un-upgraded 1.3 or lower cluster. Currently this gives a 500 error on
the new ACL token endpoint. Here we catch this specific 500 error/message
and set the users AccessorID to null. Elsewhere in the frontend we use
this fact (AccessorID being null) to decide whether to present the
legacy or the new ACL UI to the user.

Also:
- Re-adds in most of the old style ACL acceptance tests, now that we are keeping the old style UI
- Restricts code editors to HCL only mode for all `Rules` editing (legacy/'half legacy'/new style)
- Adds a [Stop using] button to the old style ACL rows so its possible to logout.
- Updates copy and documentation links for the upgrade notices
2018-11-02 14:44:36 +00:00
John Cowen d98c1242dc
ui: Adds multi syntax linting to the code editor (#4814) 2018-10-19 17:36:38 +01:00
John Cowen 7d89e519a2 UI: New ACLs (#4789)
UI to accompany the new ACLs APIs
2018-10-19 08:45:05 -07:00
John Cowen 5f39bfd161
ui: Improve layout of node cards on large and small screens (#4761)
1. The grid based unhealthy cards are now clamped to only four wide
maximum. This means that on larger screen the cards are much wider
meaning you can view more information. Grid gutters are also clamped at
a certain ideal width screen, remaining responsive for anything below
this.

2. The healthy node columns are finally responsive following the same
column rules as unhealthy nodes
2018-10-11 10:19:06 +01:00
John Cowen 99c51c9f86
UI: Reduce in-development deprecations (also use toLocaleString) (#4677)
Various ember addons produced deprecation messages, some in the browser
console and some in terminal. Upgrading and replacing some of these has
reduced this.

Upgrades:

- ember-collection
- ember-computed-style

Replacements:

- ember-pluralize replaced with ember-inflector
- ember-cli-format-number replaced with custom helper using standard
`toLocaleString`

Removing ember-cli-format-number also meant some further changes related
to decimal places in the tomography graph, done using `toFixed`

The ExternalSources background-images have also now been escaped
correctly preventing in-development `console` warnings.

The only deprecation warnings are now from ember-block-slots, only in
terminal, making for a better development experience overall, especially now we
have an empty browser console

Also adds a `callIfType` 'helper util' which is a util specifically for helpers (it conforms to a helper argument signature) to be expanded upon later.
2018-10-01 13:42:42 +01:00
John Cowen 96508e556b
ui: Layout fix. Small padding additions to tables (#4701)
1. The 'Services' header need to be knocked ot the right slightly to line
up properly with the service name when there are no external source
icons.
2. Add a single space between ServiceName and ServiceID on the Node >
[Services] tab table.
2018-09-21 11:14:38 +01:00
John Cowen ece09e300d
UI: Tooltips and feedback-dialogs are the same thing - merge (#4678) 2018-09-21 11:13:21 +01:00
John Cowen d0405ba8b9
UI: CSS Additions (mainly %frames) (#4623)
* Move almost everything to use %frames
* Fix pill styles of ACL types
* Remove horizontal scrollbars from dom recycling scroller component
* Make text areas look ok in Firefox
* Remove ember-bulma-css
* New form elements, break out %toggle
* %button design tweaks
* %form-element design tweaks
* Better hashicorp logo
* Small screen CSS improvements (#4624)
  1. Reduce header size when there are no breadcrumbs
  2. Make the filters toggleable, closed by default
  3. Reduce the size of the footer on small screens
  4. Hide all non-primary columns for forms
  5. Slightly change the layout of various items, mainly buttons within
forms
  6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small
screens
2018-09-21 10:18:32 +01:00
John Cowen 0757a08684
ui: Adds a `default` view helper for providing a default value (#4650)
If the first value passed to the helper is an empty string or undefined
then return the second value
2018-09-12 20:38:57 +01:00
John Cowen 5ea748005c
UI: External Source markers (#4640)
1. Addition of external source icons for services marked as such.
2. New %with-tooltip css component (wip)
3. New 'no healthcheck' icon as external sources might not have
healthchecks, also minus icon on node cards in the service detail view
4. If a service doesn't have healthchecks, we use the [Services] tabs as the
default instead of the [Health Checks] tab in the Service detail page. 
5. `css-var` helper. The idea here is that it will eventually be
replaced with pure css custom properties instead of having to use JS. It
would be nice to be able to build the css variables into the JS at build
time (you'd probably still want to specify in config which variables you
wanted available in JS), but that's possible future work.

Lastly there is probably a tiny bit more testing edits here than usual,
I noticed that there was an area where the dynamic mocking wasn't
happening, it was just using the mocks from consul-api-double, the mocks
I was 'dynamically' setting happened to be the same as the ones in
consul-api-double. I've fixed this here also but it wasn't effecting
anything until actually made certain values dynamic.
2018-09-12 20:23:39 +01:00
John Cowen 5e987965fa
UI: Bugfix. Fix code toggle in Safari (#4608)
I'd mistakenly changed the checkbox event to listen to oninput, which
works in Chrome and Firefox. Changed this back to onchange as it should
be.
2018-08-30 10:02:26 +01:00
John Cowen 40e71f1b91
UI: Simplify/refactor the actions/notification layer (#4572) + (#4573)
* Move notification texts to a slightly different layer (#4572)
* Further Simplify/refactor the actions/notification layer (#4573)

1. Move the 'with-feedback' actions to a 'with-blocking-action' mixin
which better describes what it does
2. Additional set of unit tests almost over the entire layer to prove
things work/add confidence for further changes

The multiple 'with-action' mixins used for every 'index/edit' combo are
now reduced down to only contain the functionality related to their
specific routes, i.e. where to redirect.

The actual functionality to block and carry out the action and then
notify are 'almost' split out so that their respective classes/objects do
one thing and one thing 'well'.

Mixins are chosen for the moment as the decoration approach used by
mixins feels better than multiple levels of inheritence, but I would
like to take this fuether in the future to a 'compositional' based
approach.

There is still possible further work to be done here, but I'm a lot
happier now this is reduced down into separate parts.
2018-08-29 19:14:31 +01:00
John Cowen 1d31bef0a4 Show the Service.IP address instead of the Node.IP address in detail 2018-07-18 13:37:14 +01:00
John Cowen 310a038f87 Show Service.ID's throughout the app, allow searching by Service.ID
1. In the Services > Services detail page for both healthy and unhealthy
nodes, also add searching by Service.ID here
2. In the Nodes > Node detail > [Services] tab only if its different
from the Service name, add searching by Service.ID here
2018-07-12 13:36:47 +01:00
John Cowen f85369c375 Add some navigation testing for back buttons and create buttons 2018-07-04 17:23:33 +01:00
John Cowen 649d777714 Acceptance test for using tokens from listing and detail pages 2018-07-04 16:37:41 +01:00
John Cowen 701d6a3a72 Move deleting to a top level feature 2018-07-04 15:58:09 +01:00
John Cowen e0f7cdb128 Start purifying page objects 2018-07-04 15:06:20 +01:00
John Cowen e3ce2a8beb Lock Session invalidation acceptance test 2018-07-04 13:41:44 +01:00
John Cowen ed286585e9 Add some low hanging intention tests, basically add intentions to others
1. There are various things tests that can just have intentions added
into them, like filters and such like, add intentions to these
2. Start thinking about being able to negate steps easily, which will
lead on to a cleanup of the steps
2018-07-04 13:21:30 +01:00
John Cowen b445df39bb Use html5 oninput instead of onkeyup for native textual inputs
This enables people to enter things using the mouse to paste for
example, plus possible other things.

As an aside it also answers my query regarding `fillIn` for testing,
nothing needs to be actually _typed_ anymore! Doh
2018-07-03 15:40:15 +01:00
mkeeler 6813a99081 Merge remote-tracking branch 'connect/f-connect' 2018-06-25 19:42:51 +00:00
John Cowen 5ac19b164e Change the appearance of `*` for intention listings
1. Use 'All Services (*)' as opposed to '*'
2. Set 'Destination' in teh same bold font as 'Source'
3. Ensure you can search for all services by using '*' or 'All Services
(*)'
2018-06-25 12:26:18 -07:00
John Cowen d61a09ea28 Fix linting typo, caused the selection of future services to break 2018-06-25 12:25:40 -07:00
John Cowen f4218b4bea Validate all the things, all the time 2018-06-25 12:25:15 -07:00
John Cowen ea3e4a720a Only offer to create a future service if the name doesn't already exist 2018-06-25 12:25:15 -07:00
John Cowen 5575455053 Add support for specifying future services and wildcards 2018-06-25 12:25:15 -07:00
John Cowen 24f6155efc Switch to single selects rather than inputs 2018-06-25 12:25:15 -07:00
John Cowen 148621d98e Have a look at power select for select elements 2018-06-25 12:25:14 -07:00
John Cowen 9d6b9b7717 Remove SourceType for the moment 2018-06-25 12:25:14 -07:00
John Cowen b38e5df630 WIP: First draft intentions
1. Listing, filtering by action and searching by source name and
destination name
2. Edit/Create page, edits ping the API double fine, need to work through
creates and deletes
3. Currently uses a `Precedence` intention keyname that doesn't yet
exist in the real API
2018-06-25 12:25:14 -07:00
John Cowen fd60f225ec
Merge branch 'master' into feature/ui-node-ports-for-service 2018-06-22 17:17:03 +01:00
John Cowen 30402b51b1
Merge pull request #4253 from hashicorp/feature/ui-clearer-tags
UI - Clearer tags
2018-06-22 09:24:13 +01:00
John Cowen 1881ec4824 Add a failing test to show that lock session TTL's are not shown 2018-06-21 10:56:38 +01:00
John Cowen 0ad1d562db Use the pill styling elsewhere...
TODO: Probably change the %tag to %pill now I've remembered the word I was
looking for!
2018-06-20 15:14:16 +01:00
John Cowen d2d501a4a4 Add a reusable %tag and use it for the ACL 'tags' ready to use elsewhere 2018-06-20 14:01:42 +01:00
John Cowen 484f6ccaf2 Add port the service is running on for each node in the service view 2018-06-20 13:08:59 +01:00
John Cowen 894667b87a
Merge pull request #4247 from hashicorp/feature/acl-sort-by-name
UI - Sort ACL tokens by name
2018-06-20 09:18:36 +01:00
John Cowen 6949b22d5f Sort ACL tokens by name 2018-06-19 10:51:31 +01:00
John Cowen 04435dbdaf Ensure all tags for a service are listed on the service detail page 2018-06-18 15:38:52 +01:00
John Cowen 62a4c1098e Add test for not showing the delete button for the first acl...
Also, change the action group page objects to use data-test attributes
instead of last-child which isn't reliable (and stay consistent)
2018-06-14 15:01:54 +01:00
John Cowen 58f99703a4 Disable the delete button in the acl list for the anon token only 2018-06-14 13:34:38 +01:00
John Cowen e37136ecae Prevent being able to submit a create form with empty values 2018-06-12 11:24:36 +01:00
John Cowen 59ce55227c Explicitly sort by Key after folder/file 2018-06-12 11:24:36 +01:00
John Cowen 4b46caf77a Make sure `didAppear` and therefore `resize` is called on change
Tables need to calculate their sizing depending on other things in the
DOM. When a table is in a tab panel, some of these things aren't visible
and therefore some values are zero during `didInsertElement`.

This commit ensures that the resize calc of the table is performed when
it's parent tab is clicked (and therefore when the table 'appears')
2018-06-12 11:24:36 +01:00
John Cowen 17ebf96755 WIP: Feature/acceptance tests 2018-06-12 11:24:35 +01:00
John Cowen b7498b3079 Tweak placeholder text to add 'port' 2018-06-12 11:24:35 +01:00
John Cowen f9cf50547a Adds filtering to the KV listing page 2018-06-12 11:24:35 +01:00
John Cowen 8f76a54c6a Change KV inputs to textareas, also JSON > CODE
As the input field was used for KV's it looked like you couldn't save
multiline KV's. Changed to textarea so you can see the multilines.

Also, JSON is slightly misleading as clicking the toggle doesn't
necessarily mean 'I'm going to edit some JSON' it means I want the code
editor with syntax highlighting, so renamed the toggle to say 'Code'
2018-06-12 11:24:35 +01:00
John Cowen b162bea9a2
Session Delete confirmation button and KV console error message (#4109)
Fix session invalidation in table confirmation dialog, plus console error message when deleting deep KV's
2018-05-11 16:25:35 +01:00
John Cowen e5eeb0aa7c
UI V2 (#4086)
* Move settings to use the same service/route API as the rest of the app

* Put some ideas down for unit testing on adapters

* Favour `Model` over `Entity`

* Move away from using `reopen` to using Mixins

* Amend messages, comment/document some usage

* Make sure the returns are consistent in normalizePayload, also

Add some todo's in to remind me to think consider this further at a
later date. For example, is normalizePayload to be a hook or an
overridable method

* Start stripping back the HTML to semantics

* Use a variable rather than chaining

* Remove unused helpers

* Start picking through the new designs, start with listing pages

* First draft HTML for every page

* Making progress on the CSS

* Keep plugging away at the catalog css

* Looking at scrolling

* Wire up filtering

* Sort out filter counting, more or less done a few outstanding

* Start knocking the forms into shape

* Add in codemirror

* Keep moving forwards with the form like layouts

* Start looking at ACL editing page, add footer in

* Pull the filters back in, look at an autoresizer for scroll views

* First draft toggles

* 2nd draft healthcheck icons

* Tweak node healthcheck icons

* Looking at healthcheck detail icons

* Tweak the filter-bar and add selections to the in content tabs

* Add ACL create, pill-like acl type highlight

* Tweaking the main nav some more

* Working on the filter-bar and freetext-filter

* Masonry layout

* Stick with `checks` instead of healthy/unhealthy

* Fix up the filter numbers/counts

* Use the thead for a measure

* First draft tomography back in

* First draft DC dropdown

* Add a temporary create buttong to kv's

* Move KV and ACL to use a create page

* Move tags

* Run through old tests

* Injectable server

* Start adding test attributes

* Add some page objects

* More test attributes and pages

* Acl filter objects

* Add a page.. page object

* Clickable items in lists

* Add rest/spread babel plugin, remove mirage for now

* Add fix for ember-collection

* Keep track of acl filters

* ember-cli-page-object

* ember-test-selectors

* ui: update version of ui compile deps

* Update static assets

* Centralize radiogroup helper

* Rejig KV's and begin to clean it up

* Work around lack of Tags for the moment..

* Some little css tweaks and start to remove possibles

* Working on the dc page and incidentals

1. Sort the datacenter-picker list
2. Add a selected state to the datacenter-picker
3. Make dc an {Name: dc}
4. Add an env helper to get to 'env vars' from within templates

* Click outside stuff for the datacenter-picker, is-active on nav

* Make sure the dropdown CTA can be active

* Bump ember add pluralize helper

* Little try at sass based custom queries

* Rejig tablular collection so it deals with resizing, actions

1. WIP: start building actions dropdowns
2. Move tabular collection to deal with resizing to rule out differences

* First draft actions dropdowns

* Add ports, selectable IP's

* Flash messages, plus general cleanup/consistency

1. Add ember-cli-flash for flash messages
2. Move everything to get() instead of item.get
3. Spotted a few things that weren't consistent

* DOn't go lower than zero

* First draft vertical menu

* Missed a get, tweak dropmenu tick

* Big cleanup

1. this.get(), this.set() > get(), set()
2. assign > {...{}, ...{}}
3. Seperator > separator

* WIP: settings

* Moved things into a ui-v2 folder

* Decide on a way to do the settings page whilst maintaining the url + dc's

* Start some error pages

* Remove base64 polyfill

* Tie in settings, fix atob bug, tweak layout css

* Centralize confirmations into a component

* Allow switching between the old and new UI with the CONSUL_UI_BETA env var

Currently all the assets are packaged into a single AssetFS and a prefix is configured to switch between the two.

* Attempt at some updates to integrate the v2 ui build into the main infrastructure

* Add redirect to index.html for unknown paths

* Allow redictor to /index.html for new ui when using -ui-dir

* Take ACLs to the correct place on save

* First pass breadcrumbs

* Remove datacenter selector on the index page

* Tweak overall layout

* Make buttons 'resets'

* Tweak last DC stuff

* Validations plus kv keyname viewing tweaks

* Pull sessions back in

* Tweak the env vars to be more reusable

* Move isAnon to the view

* No items and disabled acl css

* ACL and KV details

1. Unauthorized page
2. Make sure the ACL is always selected when it needs it
3. Check record deletion with a changeset

* Few more acl tweaks/corrections

* Add no items view to node > services

* Tags for node > services

* Make sure we have tags

* Fix up the labels on the tomography graph

* Add node link (agent) to kv sessions

* Duplicate up `create` for KV 'root creation'

* Safety check for health checks

* Fix up the grids

* Truncate td a's, fix kv columns

* Watch for spaces in KV id's

* Move actions to their own mixins for now at least

* Link reset to settings incase I want to type it in

* Tweak error page

* Cleanup healthcheck icons in service listing

* Centralize errors and make getting back easier

* Nice numbers

* Compact buttons

* Some incidental css cleanups

* Use 'Key / Value' for root

* Tweak tomography layout

* Fix single healthcheck unhealthy resource

* Get loading screen ready

* Fix healthy healthcheck tick

* Everything in header starts white

* First draft loader

* Refactor the entire backend to use proper unique keys, plus..

1. Make unique keys form dc + slug (uid)
2. Fun with errors...

* Tweak header colors

* Add noopener noreferrer to external links

* Add supers to setupController

* Implement cloning, using ember-data...

* Move the more expensive down the switch order

* First draft empty record cleanup..

* Add the cusomt store test

* Temporarily use the htmlSafe prototype to remove the console warning

* Encode hashes in urls

* Go back to using title for errors for now

* Start removing unused bulma

* Lint

* WIP: Start looking at failing tests

* Remove single redirect test

* Finish off error message styling

* Add full ember-data cache invalidation to avoid stale data...

* Add uncolorable warning icons

* More info icon

* Rearrange single service, plus tag printing

* Logo

* No quotes

* Add a simple startup logo

* Tweak healthcheck statuses

* Fix border-color for healthchecks

* Tweak node tabs

* Catch 401 ACL errors and rethrow with the provided error message

* Remove old acl unauth and error routes

* Missed a super

* Make 'All' refer to number of checks, not services

* Remove ember-resizer, add autoprefixer

* Don't show tomography if its not worth it, viewify it more also

* Little model cleanup

* Chevrons

* Find a way to reliably set the class of html from the view

* Consistent html

* Make sure session id's are visible as long as possible

* Fix single service check count

* Add filters and searchs to the query string

* Don't remember the selected tab

* Change text

* Eror tweaking

* Use chevrons on all breadcrumbs even in kv's

* Clean up a file

* Tweak some messaging

* Makesure the footer overlays whats in the page

* Tweak KV errors

* Move json toggle over to the right

* feedback-dialog along with copy buttons

* Better confirmation dialogs

* Add git sha comment

* Same title as old UI

* Allow defaults

* Make sure value is a string

* WIP: Scrolling dropdowns/confirmations

* Add to kv's

* Remove set

* First pass trace

* Better table rows

* Pull over the hashi code editor styles

* Editor tweaks

* Responsive tabs

* Add number formatting to tomography

* Review whats left todo

* Lint

* Add a coordinate ember data triplet

* Bump in a v2.0.0

* Update old tests

* Get coverage working again

* Make sure query keys are also encoded

* Don't test console.error

* Unit test some more utils

* Tweak the size of the tabular collections

* Clean up gitignore

* Fix copy button rollovers

* Get healthcheck 'icon icons' onto the text baseline

* Tweak healthcheck padding and alignment

* Make sure commas kick in in rtt, probably never get to that

* Improve vertical menu

* Tweak dropdown active state to not have a bg

* Tweak paddings

* Search entire string not just 'startsWith'

* Button states

* Most buttons have 1px border

* More button tweaks

* You can only view kv folders

* CSS cleanup reduction

* Form input states and little cleanup

* More CSS reduction

* Sort checks by importance

* Fix click outside on datacenter picker

* Make sure table th's also auto calculate properly

* Make sure `json` isn't remembered in KV editing

* Fix recursive deletion in KV's

* Centralize size

* Catch updateRecord

* Don't double envode

* model > item consistency

* Action loading and ACL tweaks

* Add settings dependencies to acl tests

* Better loading

* utf-8 base64 encode/decode

* Don't hang off a prototype for htmlSafe

* Missing base64 files...

* Get atob/btoa polyfill right

* Shadowy rollovers

* Disabled button styling for primaries

* autofocuses only onload for now

* Fix footer centering

* Beginning of 'notices'

* Remove the isLocked disabling as we are letting you do what the API does

* Don't forget the documentation link for sessions

* Updates are more likely

* Use exported constant

* Dont export redirectFS and a few other PR updates

* Remove the old bootstrap config which was used for the old UI skin

* Use curlies for multiple properties
2018-05-10 19:52:53 +01:00