* Update empty-state copy throughout app
Update empty-states throughout the app to only include mentions of ACLs if the user has ACLs enabled.
* Update peers empty state copy
Flip the empty state copy logic for peers. Small typo fixes on other empty states.
* Update Node empty state with docs
* Update intentions empty state
Make ACL copy dependent on if acls are enabled.
* Update Nodes empty state learn copy
* Fix binding rule copy key
* Use postcss instead of ember-cli-sass
This will make it possible to work with tailwindcss.
* configure postcss to compile sass
* add "sub-app" css into app/styles tree
* pin node@14 via volta
Only used by people that use volta
* Install tailwind and autoprefixer
* Create tailwind config
* Use tailwind via postcss
* Fix: tailwind changes current styling
When adding tailwind to the bottom of app.scss we apparently
change the way the application looks. We will import
it first to make sure we don't change the current styling
of the application right now.
* Automatic import of HDS colors in tailwind
* Install @hashicorp/design-system-components
* install add-on
* setup postcss scss pipeline to include tokens css
* import add-on css
* Install ember-auto-import v2
HDS depends on v2 of ember-auto-import so we need to upgrade.
* Upgrade ember-cli-yadda
v0.6.0 of ember-cli-yadda adds configuration for webpack.
This configuration is incompatible with webpack v5
which ember-auto-import v2 is using.
We need to upgrade ember-cli-yadda to the latest
version that fixes this incompatability with auto-import v2
* Install ember-flight-icons
HDS components are using the addon internally.
* Document HDS usage in engineering docs
* Upgrade ember-cli-api-double
* fix new linting errors
* Wrap service names on show and instance routes
Moves the trailing type/kind/actions to the second row of the header
no matter what length the service name is. Wraps service name text.
* Change grid format of AppView globally
* Add tooltips to the last element of breadcrumbs
* v3.20.2...v3.24.0
* Fix handle undefined outlet in route component
* Don't use template helper for optional modal.open
Using the optional-helper here will trigger a computation
in the same runloop error. This is because we are setting
the `modal`-property when the `<Ref>` component gets
rendered which will update the `this.modal`-property which
will then recompute the `optional`-helper leading to this
error.
Instead we will create an action that will call the `open`-method
on the modal when it is defined. This gets rid of the double
computation error as we will not access the modal property
twice in the same runloop when `modal` is getting set.
* Fix - fn needs to be passed function tab-nav
We create functions in the component file instead
so that fn-helper stops complaining about the
need to pass a function.
* Update ember-exam to 6.1 version
"Makes it compatible" with ember-qunit v5
* scheduleOnce setMaxHeight paged-collection
We need to schedule to get around double-computation error.
* Fix - model.data is removed from ember-data
This has been private API all along - we need to
work around the removal.
Reference: https://github.com/emberjs/data/pull/7338/files#diff-9a8746fc5c86fd57e6122f00fef3155f76f0f3003a24b53fb7c4621d95dcd9bfL1310
* Fix `propContains` instead of `deepEqual` policy
Recent model.data works differently than iterating attributes.
We use `propContains` instead of `deepEqual`. We are only
interested in the properties we assert against and match
the previous behavior with this change.
* Fix `propContains` instead of `deepEqual` token
* Better handling single-records repo test-helper
`model.data` has been removed we need to handle proxies and
model instances differently.
* Fix remaining repository tests with propContains
We don't want to match entire objects - we don't care
about properties we haven't defined in the assertion.
* Don't use template helper for optional modal.open
Using a template helper will give us a recomputation error -
we work around it by creating an explicit action on
the component instead.
* Await `I $verb the $pageObject object` step
* Fix no more customization ember-can
No need to customize, the helper handles destruction
fine on its own.
* Fix - don't pass `optional` functions to fn
We will declare the functions on the component instead.
This gives us the same behavior but no error from
`fn`, which expects a function to be passed.
* Fix - handle `undefined` state on validate modifier
StateChart can yield out an undefined `state` we need
to handle that in the validate modifier
* Fix linting errors tests directory
* Warn / turn off new ember linting issues
We will tackle them one by one and don't want to
autofix issues that could be dangerous to auto-fix.
* Auto-fix linting issues
* More linting configuration
* Fix remaining linting issues
* Fix linting issues new files after rebase
* ui: Remove ember-cli-uglify config now we are using terser (#14574)
Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
* ui: Add AWS Lambda as potential external source
* Update mocks to expect `lambda` as an external-source meta
* Additional mock to make sure all our mocks only contain whats possible
* Fix await page-object properties properly
* Remove "sleep"-hack show-routing test
* Fix - change serviceInstacesSelected test order
We need to change the order of test as the tab-nav
tab-elements are actually clickable and will be triggered
via the "see" step.
Because we are now properly awaiting these promises
we need to change the test order and check if the
service-instances tab is selected first, as the following
steps will actually click the respective tabs during
testing and thus change what is selected
on the tab-nav.
* Update ember-cli-page-object to latest
* Refactor remaining `moduleFor`-tests
`moduleFor*` will be removed from ember-qunit v5
* Upgrade ember-qunit to v5
* Update how we use ember-sinon-qunit
With ember-qunit v5 we need to use ember-sinon-qunit differently.
* Fix submit-blank test
We can't click on disabled buttons with new test-helpers.
We need to adapt the test accordingly.
* Make sure we await fill-in with form yaml step
We need to await `fill-in`. This changes the reducer
function in the step to create a proper await
chain.
* Fix show-routing test
We need to await a tick before visiting again.
* Remove redundant `wait one tick`-step
* remove unneeded "next Tick" promise from form step
* Increase timeout show-routing feature
* Comment on pause hack for show-routing test
* Include nspace when surfacing peer in bucket-list
Whenever we display a peer and we are not on OSS we will surface
the namespace as well. The rest of the ui logic of the bucket list
has not changed.
* Display bucket-list after instance-count service-list
* ui: Make DataWriter also deal with more standard shaped errors
* ui: Add error states/messages for peering establishment (#14026)
* ui: Add error states/messages for peering establishment
* Inspect state instead of asking about existence of error
* ui: Make peered intentions read-only
* Replace "" to undefined for SourcePeer so its the same as PeerName
* Fixup copypasta
* Ensure tests run with no peers
* add ember-cli-deprecation-workflow
* Add deprecation workflow configuration
This will silence all deprecations by default reducing noise in the test
output significantly.
We can tackle deprecations now one by one but won't have to deal with
very verbose console logs anymore.
* Only show instances- and tags-tab peered services
* Adapt show-with-slashes test to peering changes
Tests always have the peering feature turned on and the default service
we load from the mock-api will be peered. This is why the topology
view of the service.show page will not be accessible in the updated
test it will show the instances instead. This change does not change
what the test is actually testing so just putting changing to the now
different url is fine.
* don't show partition / peer at the same time in bucket-list
* use bucket-list in intentions table
* add bucket-list tests
* Simplify bucket list - match old behavior
Refactor the bucket-list component to be easier to grok and match
how the old template based approach worked. I.e. do not surface
partition or namespace when it matches the passed nspace or partition
property.
* Update docs for bucket-list
* fix linting
* ui: Add a modal.opened property for inspecting whether the modal is open
* merge isOpen setting into the exiting event handler
* Revert to multiple listeners, plus comment to explain
* Wrap close in an afterRender
* Only display dc dropdown when more than one dc is available
* Add wan federation message to dc dropdown
* Add test for conditionally displaying dc dropdown
* Move single datacenter indicator into datacenter selector
* Add `DATACENTERS` seperator dc dropdown
* "fix" unnecessary margin-top in dc dropdown
* Don't request nodes/services `with-peers` anymore
This will be automatic - no need for the query-param anymore.
* Return peering data based on feature flag mock-api services/nodes
* Update tests to reflect removed with-peers query-param
* setup cookie for turning peer feature flag on in mock-api in testing
* Add missing `S` for renamed PEERING feature-flag cookie
* Request peering permissions when peerings is active
* Update peering ability to use peering resource
* fix canDelete peer permission to check write permission
* use super call in abilities.peer#canDelete
* ui: use environment variable for feature flagging peers
* Add documentation for `features`-service
* Allow setting feature flag for peers via bookmarklet
* don't use features service for flagging peers
* add ability for checking if peers feature is enabled
* Use abilities to conditionally use peers feature
* Remove unused features service
* ui: Add peer searching and sorting
Initial name search and sort only, more to come here
* Remove old peerings::search component
* Use @model peers
* ui: Peer listing with dc/ns/partition/name based unique IDs and polling deletion (#13648)
* ui: Add peer repo with listing datasource
* ui: Use data-loader component to use the data-source
* ui: Remove ember-data REST things and Route.model hook
* 10 second not 1 second poll
* Fill out Datacenter and Partition
* route > routeName
* Faker randomised mocks for peering endpoint
* ui: Adds initial peer detail page plus address tab (#13651)
* 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.
* ui: Use new icon-size and icon-color for popover-menus
* Remove the default currentColor plus add some more defaults
* Undo transparency overwrites now we don't need them
* Fixup discochain icons
* Undo a default icon rule for vert align
* Fixup expanded icon for meatball popovers
* Fixup intention permission labels/badges/icons
* Remove different res icon
* Remove icon resolutions
* ui: Add more explanatory texts for empty states
* Change all template "Read the guide"s
* Add missing htmlSafe
* Remove the stuff I commented out to try and grok the hairy rebase
* Changelog
* More rebased yaml weirdness plus added node:read
This commit moves our in-app LockSessions code into an external 'app', which can theoretically be side-loaded but for now it just makes for good isolation/code hygiene.
Functionally, there is kind of one change here, and that is we only show the 'Lock Session' tab if you have permissions to see them. Currently as our UI authorization endpoint needs to be changed slightly to suit our usecase, you will always have permissions to see Lock Sessions as we hardcode the session:read to true (obvs this is a frontend thing, not a backend thing), so it doesn't really change anything from a user perspective.
Also added very bare docs while I was here.
Small note here, ideally we need to add the each individual tab depending on whether an 'app' is enabled or not instead of just permissions, ideally it would be done totally from The Outside rather than a can based conditional on the inside, just something else to be thinking about for the future.
This PR adds an Ember-Glimmer/Handlebars transform to drop the documentation copy from the CustomElement component out of the build, therefore it is not bundled into the code either at development time or production build time.
Builds on attach-shadow, adopt-styles and ShadowTemplate, this commit adds ShadowHost and finally CustomElement.
CustomElement is a renderless component to help with the creation of native HTML Custom Elements along with runtime type checking and self-documentation for attributes, slots, cssprops and cssparts. As you will probably see there is a little more work to come here. But in the same breath, everything would be fine to go in as is.
This adds a new component blueprint for all our components. We've been
using README.mdx files for quite some time to document our components
for other engineers. This adds a default file to help new engineers get
started writing useful documentation. These README.mdx file are also
very useful for building out components in isolation from scratch and
and some point will be used to run automated component testing.
* Add %panel CSS component
* Deprecate old menu-panel component
* Various smallish tweaks to disclosure-menu
* Move all menus in the app chrome to use new DisclosureMenu
* Follow up CSS to move all app chrome menus to new components
* Don't prevent default any events from anchors
* Add a tick to click steps
* Delete collapsible notices component and related helper
* Add relative t action/helper to our Route component
* Replace single use CollapsibleNotices with multi-use Disclosure
This commit excludes the health of any service instances from the Node Listing page. This means that if you are viewing the Node listing page you will only see failing nodes if there are any Node Checks failing, Service Instance Health checks are no longer taken into account.
Co-authored-by: Jamie White <jamie@jgwhite.co.uk>
We noticed that the Service Instance listing on both Node and Service views where not taking into account proxy instance health. This fixes that up so that the small health check information in each Service Instance row includes the proxy instances health checks when displaying Service Instance health (afterall if the proxy instance is unhealthy then so is the service instance that it should be proxying)
* Refactor Consul::InstanceChecks with docs
* Add to-hash helper, which will return an object keyed by a prop
* Stop using/relying on ember-data type things, just use a hash lookup
* For the moment add an equivalent "just give me proxies" model prop
* Start stitching things together, this one requires an extra HTTP request
..previously we weren't even requesting proxies instances here
* Finish up the stitching
* Document Consul::ServiceInstance::List while I'm here
* Fix up navigation mocks Name > Service
We need a way to load certain CSS based on the environment you are viewing, i.e. we have debug CSS that we use for our Eng Documentation and various other DX utilities that shouldn't be compiled into our production or test builds.
Previously we would compile two entirely different CSS files (app and debug) and the load one or the other depending on which environment you were in.
This approach just empties out the debug.css file in certain environments (prod/test) which means we can just import that file from app. When in staging/development this imports the contents of debug.css (quite a bit of CSS) whereas when building for production/test this debug.css is emptied out during the build process.
There is a slight little hack in order to have this work, we import _debug.scss which imports the debug.scss file. I couldn't for the life of me figure out how to have broccoli empty out a file during the build process, so instead we essentially copy over debug.scss during dev and create an empty file during prod to _debug.scss.
When using make build to build an artifact for production CSS remains at ~58kb (during dev its a lot bigger than this)
{{class-map}} is used to easily add a list of classes, conditionally, and
have them all formatted nicely ready to be printed in a DOM class attribute.
For ease, as well as using entries, you can also just provide a simple string
without the boolean and that class will always be added.
* ui: Correct some meta info
* Encoder doesn't take an argument whereas decoder does
* Math.trunc looks like the closest to parseInt but using the correct type
* use a dynamic string when setting things on window
- Simplifies how we 'import' our configuration files a little in order to make them more grokable.
- Starts to exclude files based on explicit configuration rather than convention.
- Adds the first instance of us being able to select an implementation (of multiple) of a component at runtime.
The fix here is two fold:
- We shouldn't be providing the DataSource (which loads the data) with an id when we are creating from within a folder (in the buggy code we are providing the parentKey of the new KV you are creating)
- Being able to provide an empty id to the DataSource/KV repository and that repository responding with a newly created object is more towards the "new way of doing forms", therefore the corresponding code to return a newly created ember-data object. As we changed the actual bug in point 1 here, we need to make sure the repository responds with an empty object when the request id is empty.
* Make sure the mocks reflect the requested partition/namespace
* Ensure partition is passed through to the HTTP adapter
* Pass AuthMethod object through to TokenSource in order to use Partition
* Change up docs and add potential improvements for future
* Pass the query partition back onto the response
* Make sure the OIDC callback mock returns a Partition
* Enable OIDC provider mock overwriting during acceptance testing
* Make sure we can enable partitions and SSO post bootup only required
...for now
* Wire up oidc provider mocking
* Add SSO full auth flow acceptance tests
* ui: Don't even ask whether we are authorized for a KV...
...just let the actual API tell us in the response, thin-client style.
* Add some similar commenting for previous PRs related to this problem
* Add some less fake API data
* Rename the models class so as to not be confused with JS Proxies
* Rearrange routlets slightly and add some initial outletFor tests
* Move away from a MeshChecks computed property and just use a helper
* Just use ServiceChecks for healthiness filtering for the moment
* Make TProxy cookie configurable
* Amend exposed paths and upstreams so they know about meta AND proxy
* Slight bit of TaggedAddresses refactor while I was checking for `meta` etc
* Document CONSUL_TPROXY_ENABLE
We recently changed the intentions form to take a full model of a dc rather than just the string identifier (so {Name: 'dc', Primary: true} vs just 'dc' in order to know whether the DC is the primary or not.
Unfortunately, we only did this on the global intentions page not the per service intentions page. This makes it impossible to save an intention from the per service intention page (whilst you can still save intentions from the global intention page as normal).
The fix here pretty much copy/pastes the approach taken in the global intention edit template over to the per service intention edit template.
Tests have been added for creation in the per service intention section, which again are pretty much just copied from the global one, unfortunately this didn't exist previously which would have helped prevent this.
- Move AuthDialog to use a Glimmer Component plus native named blocks/slots.
- Unravel the Auth* contextual components, there wasn't a lot of point having them as contextual components and now the AuthDialog (non-view-specific state machine component) can be used entirely separately from the view-specific components (AuthForm and AuthProfile).
- Move all the ACL related components that are in the main app chrome/navigation (our HashicorpConsul component) in our consul-acls sub package/module (which will eventually be loaded on demand only when ACLs are enabled)
* ui: Add login button to per service intentions for zero results
* Add login button and consistent header for when you have zero nodes
* `services` doesn't exists use `items` consequently:
Previous to this fix we would not show a more tailored message for when
you empty result set was due to a user search rather than an empty
result set straight from the backend
* Fix `error` > `@error` in ErrorState plus code formatting and more docs
* Changelog
When switching to a non-primary datacenter we should only show the word 'default' in place of the partition menu, this fixes up a bug preventing that from happening due to erroneous if/let nesting
* Update disco fixtures now we have partitions
* Add virtual-admin-6 fixture with partition 'redirects' and failovers
* Properly cope with extra partition segment for splitters and resolvers
* Make 'redirects' and failovers look/act consistently
* Fixup some unit tests
Ember Data requires the usage of unique ID to identify its records in the frontend, and we use a centralized function to do that for all records. There are occasions where it can't make an ID, usually this is a bug our side, but there are occasions where Consul might not be giving us the data needed to make an ID, for example if a Service comes down to us with a blank Name. Whilst this isn't a problem to be fixed in the UI, I thought we could make an improvement here by giving a little more info as to why the UI cannot make a unique ID.
This is currently semi-hidden away in the javascript console, but we could potentially surface this in the UI itself as a larger task. I figured this smaller task could help folks in the meantime if they hit upon this as they might open up the javascript console themselves to see whats up and they'd at least get this extra clue.
This commit uses all our new ways of doing things to Lock Sessions and their interactions with KV and Nodes. This is mostly around are new under-the-hood things, but also I took the opportunity to upgrade some of the CSS to reuse some of our CSS utils that have been made over the past few months (%csv-list and %horizontal-kv-list).
Also added (and worked on existing) documentation for Lock Session related components.
This sounds a bit 'backwards' as the end goal here is to add an improved UX to partitions, not namespaces. The reason for doing it this way is that Namespaces already has a type of 'improved UX' CRUD in that it has one to many relationship in the form when saving your namespaces (the end goal for partitions). In moving Namespaces to use the same approach as partitions we:
- Ensure the new approach works with one-to-many forms.
- Test the new approach without writing a single test (we already have a bunch of tests for namespaces which are now testing the approach used by both namespaces and partitions)
Additionally:
- Fixes issue with missing default nspace in the nspace selector
- In doing when checking to see that things where consistent between the two, I found a few little minor problems with the Admin Partition CRUD so fixed those up here also.
- Removed the old style Nspace notifications
- 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)
* Upgrade AuthForm and document current state a little better
* Hoist SSO out of the AuthForm
* Bare minimum admin partitioned SSO
also:
ui: Tabbed Login with Token or SSO interface (#11619)
- I upgraded our super old, almost the first ember component I wrote, to use glimmer/almost template only. This should use slots/contextual components somehow, but thats a bigger upgrade so I didn't go that far.
- I've been wanting to upgrade the shape of our StateChart component for a very long while now, here its very apparent that it would be much better to do this sooner rather than later. I left it as is for now, but there will be a PR coming soon with a slight reshaping of this component.
- Added a did-upsert modifier which is a mix of did-insert/did-update
- Documentation added/amended for all the new things.
Tyler Wendlandt