* ui: Remove custom css-vars 'polyfill' and use native CSS props
Previously we used a sort of polyfill for certain places where we needed
CSS property-like behavior. This meant duplicating code between JS and
CSS, specifically some of our SVG icons.
We moved to CSS props only in the places where they are beneficial and
populated the variables with our already existing SASS variables.
This means we no longer have to duplicate CSS and we can remove our
custom css-var helper/polyfill.
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)
* 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.
* 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
* 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
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
* 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
* 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.
* Change all instances of yield/block-slots to use attributes over positional arguments
* Remove the ability to use yield/block-slots with positional params
* 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
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
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)
## 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
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>`)
- 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
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)
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
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`
- 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
* 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.
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
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
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)
* 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
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
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.
* 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
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
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
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
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.
John Cowen