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. All {{ivy-codemirror}} components need 'refreshing' when they become
visible via our own `didAppear` method on the `{{code-editor}}`
component
(also see:)
- https://github.com/hashicorp/consul/pull/4190#discussion_r193270223
- 73db111db8 (r225264296)
2. On initial investigation, it looks like the component we are using
for the code editor doesn't distinguish between setting its `value`
programatically and a `keyup` event, i.e. an interaction from the user.
We currently pretend that whenever its `value` changes, it is a `keyup`
event. This means that when we reset the `value` to `""`
programmatically for form resetting purposes, a 'pretend keyup' event
would also be fired, which would in turn kick off the validation, which
would fail and show an error message for empty values in other fields of
the form - something that is perfectly valid if you haven't typed
anything yet. We solved this by checking for `isPristine` on fields that
are allowed to be empty before you have typed anything.
1. Amends our `base` animation placeholder to always reset
transition-duration. This has no effect on other components that are
already using this animation.
2. Adds a confirming class whenever a key is pressed, to show the green
tick. Uses CSS via `transition-delay` for debouncing.
This means its more straightforwards to calculate the height of the
listing itself. This component is currently only used on the form pages for tokens and roles, should therefore be a restricted size.
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
1. If the modal gets bigger than 80% of the viewport height a scrollbar
will be shown. Currently there isn't anywhere it can get this big, but
future work involves possible larger modals
2. Usually its difficult to figure out which was the 'unchecked' radio
button using an onchange event. Luckily ember/handlebars changes its
properties after the onchange event, so knowing that and using an extra
data-checked attribute set via ember, we can figure out which radio
button has been 'unchecked'. This means the logic for opening an
closing modals becomes slightly easier
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
- Maintain http headers as JSON-API meta for all API requests (#4946)
- Add EventSource ready for implementing blocking queries
- EventSource project implementation to enable blocking queries for service and node listings (#5267)
- Add setting to enable/disable blocking queries (#5352)
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.
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
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
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.
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.
John Cowen