This commit moves our service list into a new presentational component,
and is therefore mainly just moving things around. The main thing moved
here is the logic required to resizing columns correctly is now moved to
a component instead of the controller
* 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.
* 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
* Update search field placeholder to display `Search`
* Add an acceptance test to search node listings with node name and IP Address
* Update and add unit tests for filter/search node listing with IP Address
* ui: Fix typo expanded > ariaExpanded
* ui: Add the things we need to test this
* ui: Add tests for testing the menu closes when clicked
* ui: Ensure the aria-menu closes on route change
* ui: Discovery-Chain: Cope with redirects that have failovers
We found a few stranger configurations for discovery-chain, one of which
was redirects that can then failover.
We altered the parsing here to include 2 passes, one to organize the
nodes into resolvers and children/subsets based on the nodes themselves, which
includes adding the failovers to resolvers and subsets.
We then do a second pass which can more reliably figure out whether a
target is a redirect or a failover (target failovers don't have a
corresponding node), this then adds the redirect children to the already
exising resolver (from the first pass) and then checks if the redirect
also has failovers and adds those if so.
* ui: Check to see if we have a user configured default route or not
...if we don't add one so the visualization looks complete
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.
* Reorganize resolvers so its clearer what's happening
* Use entire route definition for id
* Clean up a tiny bit more, use guid for ids instead of JSON
* ui: Externalize disco-chain utils and add initial unit testing
* Add some click outside-ness for de-highlighting things
* ui: Delete a bunch of CSS that we recently moved elsewhere
* ui: Add some masking placeholders
* Switch out hashicorp logo for one from structure-icons
* Change copy-button to use new copy-action icon
* Change secret-button to use new visibility-hide/show icons
* New folder icon for KVs
* Cleanup some of the icons we no longer use
* Switch from %with-exit to standard-like %with-exit-icon
* Move all chevrons to use structure-icons properly
* Use star-fill as much as possible
* Remove the remaining icons from icons/index plus the file itself
* 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)
This includes an update of our CSS npm module. The majority of this is
just moving files from one folder to another.
1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs
2. %checkbox-group: Moved
3. %radio-group: Moved
4. %sliding-toggle: Moved (used to be called just %toggle)
5. %form-elements: Moved and added a new %inline-alert for form field
messaging (see Structure design system)
6. %action-group is now a composition of %menu-panel, %toggle-button,
plus edits to existing style to bring the %action-groups inline with the
dropdowns from Structure). %action-group also includes a composed
%confirmation-alert that is yet to be include. This will be compiled out
until we integrate it.
We've also removed some of our old icon placeholders as the above
work seased to use some of them.
Now we done this I'd say all in all over half of our CSS components now
use the CSS npm module.
The CSS specific to Consul UI also uses much of this CSS module by way
of helper placeholders such as our %frames.
- 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`
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.
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.
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
* 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
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.
John Cowen