* add peers route
* add peers to nav
* use regular app ui patterns peers template
* use empty state in peers UI
* mock `v1/peerings` request
* implement custom adapter/serializer for `peers`-model
* index request for peerings on peers route
* update peers list to show as proper list
* Use tailwind for easier styling
* Unique ids in peerings response mock-api
* Add styling peerings list
* Allow creating empty tooltip
To make it easier to iterate over a set of items where some items
should not display a tooltip and others should.
* Add tooltip Peerings:Badge
* Add undefined peering state badge
* Remove imported/exported services count peering
This won't be included in the initial version of the API response
* Implement Peerings::Search
* Make it possible to filter peerings by name
* Install ember-keyboard
For idiomatic handling of key-presses.
* Clear peering search input when pressing `Escape`
* use peers.index instead of peers for peerings listing
* Allow to include peered services in services-query
* update services mock to add peerName
* add Consul::Peer component
To surface peering information on a resource
* add PeerName as attribute to service model
* surface peering information in service list
* Add tooltip to Consul::Peer
* Make services searchable by peer-name
* Allow passing optional query-params to href-to
* Add peer query-param to dc.services.show
* Pass peer as query-param services listing
* support option peer route-param
* set peer-name undefined in services serializer when empty
* update peer route-param when navigating to peered service
* request sercice with peer-name if need be
* make sure to reset peer route-param when leaving service.show
* componentize services.peer-info
* surface peer info services.show
* make sure to reset peer route-param in main nav
* fix services breadcrumb services.intentions
we need to reset peer route-param here to not break the app
* surface peer when querying for it on service api call
* query for peer info service-instance api calls
* surface peer info service-instance.show
* Camelize peer attributes to match rest of app
* Refactor peers.index to reflect camelized attributes for peer
* Remove unused query-params services.show
* make logo href reset peer route-param
* Cleanup optional peer param query service-instance
* Use replace decorator instead of serializer for empty peerName
* make sure to only send peer info when correct qp is passed
* Always send qp for querying peers services request
* rename with-imports to with-peers
* Use css for peer-icon
* Refactor bucket-list component to surface peer-info
* Remove Consul::Peer component
This info is now displayed via the bucket-list component
* Fix bucket-list component to surface service again
* Update bucket-list docs to reflect peer-info addition
* Remove tailwind related styles
* Remove consul-tailwind package
We won't be using tailwind for now
* Fix typo badge scss
* Add with-import handling mock-api nodes
* Add peerName to node attributes
* include peers when querying nodes
* reflect api updates node list mock
* Create consul::node::peer-info component
* Surface peer-info in nodes list
* Mock peer response for node request
* Make it possible to add peer-name to node request
* Update peer route-param when linking to node
* Reset peers route-param when leaving nodes.show
We need to reset the route-param to not introduce a bug - otherwise
subsequent node show request would request with the old peer query-param
* Add sourcePeer intentions api mock
* add SourcePeer attr to intentions model
* Surface peering info on intentions list
* Request peered intentions differently intentions.edit
* Handle peer info in intentions/exact mock
* Surface peering info intention view
* Add randomized peer data topology mock
* Surface peer info topology view
* fix service/peer-info styling
We aren't using tailwind anymore - we need to create a custom scss file
* Update peerings api mocks
* Update peerings::badge with updated styling
* cleanup intentions/exact mock
* Create watcher component to declaratively register polling
* Poll peers in background when on peers route
* use existing colors for peering-badge
* Add test for requesting service with `with-peers`-query
* add imported/exported count to peers model
* update mock-api to surface exported/imported count on peers
* Show exported/imported peers count on peers list
* Use translations for service import/export UI peers
* Make sure to ask for nodes with peers
* Add match-url step for easier url testing of service urls
* Add test for peer-name on peered services
* Add test for service navigation peered service
* Implement feature-flag handling
* Enable peering feature in test and development
* Redirect peers to services.index when feature-flag is disabled
* Only query for peers when feature is enabled
* Only show peers in nav when feature is enabled
* Componentize peering service count detail
* Handle non-state Peerings::Badge
* Use Peerings::ServiceCount in peerings list
* Only send peer query for peered service-instances.
* Add step to visit url directly
* add test for accessing peered service directly
* Remove unused service import peers.index
* Only query for peer when peer provided node-adapter
* fix tests
Upgrade ember-composable-helpers to version 5.x. This version contains the pick-helper which makes composition in the template layer easier with Octane.
{{!-- this is usually hard to do with Octane --}}
<input {{on "input" (pick "target.value" this.updateText)}} .../>
Version 5.x also fixes a regression with sort-by that according to @johncowen was the reason why the version was pinned to 4.0.0 at the moment.
Version 5 of ember-composable-helpers removes the contains-helper in favor of includes which I changed all occurences for.
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
Port of: Ensure we check intention service prefix permissions for per service (#11270)
Previously, when showing some action buttons for 'per service intentions' we used a global 'can I do something with any intention' permission to decide whether to show a certain button or not. If a user has a token that does not have 'global' intention permissions, but does have intention permissions on one or more specific services (for example via service / service_prefix), this meant that we did not show them certain buttons required to create/edit the intentions for this specific service.
This PR adds that extra permissions check so we now check the intentions permissions per service instead of using the 'global' "can I edit intentions" question/request.
**Notes:**
- If a HTML button is `disabled` this means tippy.js doesn't adopt the
popover properly and subsequently hide it from the user, so aswell as
just disabling the button so you can't active the popover, we also don't
even put the popover on the page
- If `ability.item` or `ability.item.Resources` are empty then assume no access
**We don't try to disable service > right hand side intention actions here**
Whether you can create intentions for a service depends on the
_destination_ of the intention you would like to create. For the
topology view going from the LHS to the center, this is straightforwards
as we only need to know the permissions for the central service, as when
you are going from the LHS to the center, the center is the
_destination_.
When going from the center to the RHS the _destination[s]_ are on the
RHS. This means we need to know the permissions for potentially 1000s of
services all in one go in order to know when to show a button or not.
We can't realistically discover the permissions for service > RHS
services as we'd have either make a HTTP request per right hand service,
or potentially make an incredibly large POST request for all the
potentially 1000s of services on the right hand side (more preferable to
1000s of HTTP requests).
Therefore for the moment at least we keep the old functionality (thin client)
for the middle to RHS here. If you do go to click on the button and you
don't have permissions to update the intention you will still not be
able to update it, only you won't know this until you click the button
(at which point you'll get a UI visible 403 error)
Note: We reversed the conditional here between 1.10 and 1.11
So this make 100% sense that the port is different here to 1.11
* ui: Ensure dc selector correctly shows the currently selected dc
* ui: Restrict access to non-default partitions in non-primaries (#11420)
This PR restricts access via the UI to only the default partition when in a non-primary datacenter i.e. you can only have multiple (non-default) partitions in the primary datacenter.
From an engineers perspective, whenever specifying colors from now on we should use the form:
```
color: rgb(var(--tone-red-500));
```
Please note:
- Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens.
- Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500.
Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black)
There are a 2 or 3 left for the code editor, plus our custom-query values
* ui: Don't show the CRD menu for read-only intentions
The UI bug here manifests itself only when a user/token is configured to have read-only access to intentions. Instead of only letting folks click to see a read only page of the intention, we would show an additional message saying that the intention was read-only due to it being 'Managed by [a kubernetes] CRD'. Whilst the intention was still read only, this extra message was still confusing for users.
This PR fixes up the conditional logic and further moves the logic to use ember-can - looking at the history of the files in question, this bug snuck itself in partly due to it being 'permission-y type stuff' previous to using ember-can and when something being editable or not was nothing to do with ACLs. Then we moved to start using ember-can without completely realising what IsEditable previously meant. So overall the code here is a tiny bit clearer/cleaner by adding a proper can view CRD intention instead of overloading the idea of 'editability'.
This PR supersedes #10706 and fixes#10686 whilst making sure that saving intentions continues to work.
The original fix in #10706 ignored the change action configured for the change event on the menus, meaning that the selected source/destination namespace could not be set by the user when editing/creating intentions. This, coupled with the fact that using the later intention exact endpoint for API requests endpoint means that you could not use wildcard namespaces for saving intentions.
All in all this meant that intentions could no longer be saved using the UI (whilst using ENT)
This PR reverts #10706 to fix the intention saving issue, and adds a fix for the original visual issue of nspaces doubling up in the menu once clicked. This meant repeating the existing functionality for nspaces aswell as services. It did seem strange to me that the original issue was only apparent for the nspace menus and not the service menus which should all function exactly the same way.
There is potentially more to come here partly related to what the exact functionality should be, but I'm working with other folks to figure out what the best way forwards is longer term. In the meantime this brings us back to the original functionality with the visual issue fixed.
Squashed commits:
* Revert "ui: Fix dropdown option duplications (#10706)"
This reverts commit eb5512fb74781ea49be743e2f0f16b3f1863ef61.
* ui: Ensure additional nspaces are added to the unique list of nspaces
* Add some acceptance tests
* Add Partition to all our models
* Add partitions into our serializers/fingerprinting
* Make some amends to a few adapters ready for partitions
* Amend blueprints to avoid linting error
* Update all our repositories to include partitions, also
Remove enabled/disable nspace repo and just use a nspace with
conditionals
* Ensure nspace and parition parameters always return '' no matter what
* Ensure data-sink finds the model properly
This will later be replaced by a @dataSink decorator but we are find
kicking that can down the road a little more
* Add all the new partition data layer
* Add a way to set the title of the page from inside the route
and make it accessibile via a route announcer
* Make the Consul Route the default/basic one
* Tweak nspace and partition abilities not to check the length
* Thread partition through all the components that need it
* Some ACL tweaks
* Move the entire app to use partitions
* Delete all the tests we no longer need
* Update some Unit tests to use partition
* Fix up KV title tests
* Fix up a few more acceptance tests
* Fixup and temporarily ignore some acceptance tests
* Stop using ember-cli-page-objects fillable as it doesn't seem to work
* Fix lint error
* Remove old ACL related test
* Add a tick after filling out forms
* Fix token warning modal
* Found some more places where we need a partition var
* Fixup some more acceptance tests
* Tokens still needs a repo service for CRUD
* Remove acceptance tests we no longer need
* Fixup and "FIXME ignore" a few tests
* Remove an s
* Disable blocking queries for KV to revert to previous release for now
* Fixup adapter tests to follow async/function resolving interface
* Fixup all the serializer integration tests
* Fixup service/repo integration tests
* Fixup deleting acceptance test
* Fixup some ent tests
* Make sure nspaces passes the dc through for when thats important
* ...aaaand acceptance nspaces with the extra dc param
* ui: Standardize logo naming
According to structure it should always be logo-name not name-logo
* Make sure all our logos use logo-name format
* Upgrade to @hashicorp/structure-icons 1.9.0
* Add `-color` to be consistent with other logos
* Add ms logo back in
* Remove all the old `*-color` icons from before when we got masks
* Add missing files
* Missed glimmer extend name change
* ui: Add support for showing partial lists in ListCollection
* Add CSS for partial 'View more' button, and move all CSS to /components
* Enable partial view for intention permissions
* Add before and after skip links portals
* Move EmptyState and ErrorState to use a @login action/function
* Move page title setting to the Route component
* Add Routes and Outlets everywhere, and use those to access login modal
* Add some aria-labels to the modals
* Docs
* Remove the label/input now we no longer need it, fixup pageobject
* Add basic modal docs
* Switch out old toggle names for ids
* Wrap nspace Route template in a Route component
* type > class
This PR uses the excellent a11y-dialog to implement our modal functionality across the UI.
This package covers all our a11y needs - overlay click and ESC to close, controlling aria-* attributes, focus trap and restore. It's also very small (1.6kb) and has good DOM and JS APIs and also seems to be widely used and well tested.
There is one downside to using this, and that is:
We made use of a very handy characteristic of the relationship between HTML labels and inputs in order to implement our modals previously. Adding a for="id" attribute to a label meant you can control an <input id="id" /> from anywhere else in the page without having to pass javascript objects around. It's just based on using the same string for the for attribute and the id attribute. This allowed us to easily open our login dialog with CSS from anywhere within the UI without having to manage passing around a javascript object/function/method in order to open the dialog.
We've PRed #9813 which includes an approach which would make passing around JS modal object easier to do. But in the meantime we've added a little 'hack' here using an additional <input /> element and a change listener which allows us to keep this label/input characteristic of our old modals. I'd originally thought this would be a temporary amend in order to wait on #9813 but the more I think about it, the more I think its quite a nice thing to keep - so longer term we may/may not keep this.
This commit use the internal authorize endpoint along wiht ember-can to further restrict user access to certain UI features and navigational elements depending on the users ACL token
We've always had this idea of being able to markup up information
semantically without thinking about what it should look like, then
applying our %h* placeholder styles to control what the information
should look like.
Back when we originally made our set of %h* placeholders, we tried to
follow Structure as much as possible, which defined the largest header
(which we thought would have been the h1 style) as a super large 3.5rem.
Therefore we made our set of %h* placeholders the same as Structure
beginning at a huge 3.5 size. We then re-overwrote those sizes only in
Consul specific CSS files thinking that this was due to us existing
before Structure did.
Lately we saw an extra clue in Structure - the extra large 3.5 header was
called 'h0'.
This commit moves all our headers to use a zero based scale, and
additionally uses our 3 digit scale as opposed to 1 digit (h1 vs h100),
similar to our color scales (note we don't use a hypen, which we can
alter later if need be), which means we can insert additional h150 etc
if need be.
Additional we stop styling our headers globally (h1 { @extend %h100; }
). This means there is no reason not to use headers for marking up
content depending on what it is rather than what it should look like,
and as a consequence means we can be more purposeful in ordering h*
tags.
Lastly, we use the new scale over the entire codebase and update a
couple of places where we were using using header tags due to what the
styleing for them looked like rather than what the meaning/order was.
Adds a 'status' for the filtering/searching in the UI, without this its not super clear that you are filtering a recordset due to the menu selections being hidden once closed. You can also use the pills in this status view to delete individual filters.
This PR adds the ns=* query parameter when namespaces are enabled to keep backwards compatibility with how the UI used to work (Intentions page always lists all intention across all namespace you have access to)
I found a tiny dev bug for printing out the current URL during acceptance testing and fixed that up while I was there.
* ui: Add a warning dialog if you go to remove permissions from an intention
* ui: Move modal styles next to component, add warning style
* ui: Move back to using the input name for a selector
* ui: Fixup negative "isn't" step so its optional
* Add warning modal to pageobject
* Fixup test for whether to show the warning modal or not
* Intention change action warning acceptence test
* Add a null/undefined Action
* ui: Add the most basic workspace root in /ui
* We already have a LICENSE file in the repository root
* Change directory path in build scripts ui-v2 -> ui
* Make yarn install flags configurable from elsewhere
* Minimal workspace root makefile
* Call the new docker specific target
* Update yarn in the docker build image
* Reconfigure the netlify target and move to the higher makefile
* Move ui-v2 -> ui/packages/consul-ui
* Change repo root to refleect new folder structure
* Temporarily don't hoist consul-api-double
* Fixup CI configuration
* Fixup lint errors
* Fixup Netlify target
Michael Klein