* Fix clickFirstAnchor bug
* Create Proxy Info Tab for Instance Detail Page
* Create tests for ProxyInfo and update other scenarios with Proxy data
* ui: Refactors our app-view/%app-view component (#7752)
Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
* Remove Proxy link and add ExternalSource to instance detail page header
* Create HealthChecks tab with route and styling
* Fix up tests to fit redesign of Service Instances Detail page
* ui: Add tab navigation to the browser history/URLs
This commit changes all our tabbed UI interfaces in the catalog to use
actual URL changes rather than only updating the content in the page
using CSS.
Originally we had decided not to add tab clicks into the browser
history for a variety of reasons. As the UI has progressed these tabs
are a fairly common pattern we are using and as the UI grows and
stabilizes around certain UX patterns we've decided to make these tabs
'URL changing'.
Pros:
- Deeplinking
- Potentially smaller Route files with a more concentrated scope of the
contents of a tab rather than the entire page.
- Tab clicks now go into your history meaning backwards and forwards
buttons take you through the tabs not just the pages.
- The majority of our partials are now fully fledged templates (Octane
🎉)
Cons:
- Tab clicks now go into your history meaning backwards and forwards
buttons take you through the tabs not just the pages. (Could be good and
bad from a UX perspective)
- Many more Route and Controller files (yet as mentioned above each of these
have a more reduced scope)
- Moving around the contents of these tabs, or changing the visual names
of them means updates to the URL structure, which then should
potentially entail redirects, therefore what things that seem like
straightforwards design reorganizations are now a little more impactful.
It was getting to the point that the Pros outweight the Cons
Apart from moving some files around we made a few more tiny tweaks to
get this all working:
- Our freetext-filter component now performs the initial search rather
than this happening in the Controller (remove of the search method in
the Controllers and the new didInsertElement hook in the component)
- All of the <TabNav>'s were changed to use its alternative href
approach.
- <TabPanel>s usage was mostly removed. This is th thing I dislike the
most. I think this needs removing, but I'd also like to remove the HTML
it creates. You'll see that every new page is wrappe din the HTML for
the old <TabPanel>, this is to continue to use the same HTML structure
and id's as before to avoid making further changes to any CSS that might
use this and being able to target things during testing. We could have
also removed these here, but it would have meant a much larger changeset
and can just as easily be done at a later date.
- We made a new `tabgroup` page-object component, which is almost
identical to the previous `radiogroup` one and injected that instead
where needed during testing.
* Make sure we pick up indexed routes when nspaces are enabled
* Move session invalidation to the child (session) route
* Revert back to not using didInsertElement for updating the searching
This adds a way for the searchable to remember the last search result
instead, which changes less and stick to the previous method of
searching.
* Modify templates with codemods angle brackets
* ui: Fix up problem with intention filter action attribute
Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
* 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)
* Change all instances of yield/block-slots to use attributes over positional arguments
* Remove the ability to use yield/block-slots with positional params
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)
- 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.
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
* 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
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
Kenia
John Cowen