PRs #7610 and #7962 changed the locations/URLs for the gateway docs
which results in a HTTP 404 Not Found being returned when accessing
the previous URLs.
Update URLs for gateway docs to point to new URLs.
PR #8243 adds corresponding redirects on consul.io.
* Upgrade consul-api-dobule to version 3.1.3
* Create ConsulInstaceChecks component with test
* Redesign: Service Instaces tab in for a Node
* Update Node tests to work with the ConsulServiceInstancesList
* Style fix to the copy button in the composite-row details
* Delete helper and move logic to ConsulInstanceChecks component
* Delete unused component consul-node-service-list
We'd assumed that TTL check outputs shouldn't be shown as it seemed like
they never had outputs, but they can be submitted with notes, which are
then converted into the output.
This unhides the output for TTLs and treats them exactly the same as
other healthchecks.
* Update Consul Service List composite rows with Tooltips and description lists
* Update Consul Service Instance List composite rows with Tooltips and description lists
* Removed line height in reduced pill to match the description lists in the composite rows
* Add all the new data required for NodeIdentities
* Add potential NodeIdentity to the token list component
* Amend the policy-form/selector to allow node identity creation
* Fix up CSS for radio buttons and select label
* Add node-identity policy template component
* Fix up and add acceptance tests for NodeIndentities
* Make sure policy previews take node identities into account
* Only show certain policy markup if those we have those policies
* Potentially temporarily hide dt's that don't have icons yet
This mixin was a very thin mixin over the top of our listeners utility,
and we have been gradually preferring using the utility straight rather
than using the mixin. This commit removes the last places where we still
used the mixin, and also potentially the last few places where we
continued to use the old API for our listeners utility.
The WithEventSource mixin was responsible for catching EventSource
errors and cleaning up events sources then the user left a Controller.
As we are trying to avoid mixin usage, we moved this all to an
`EventSource` component, which can clean up when the component is
removed from the page, and also fires an onerror event.
Moving to a component firing an onerror event means we can also remove
all of our custom computed property work that we were using previously
to catch errors (thrown when a service etc. is removed)
* Add Health Checks and update Tooltips in Ingress Upstreams
* Update Tooltip in Proxy Info tab Upstreams
* Add Tooltips to Proxy Info tab Exposed Paths
* Add Health Checks with Tooltips to Service List page
* ui: CSS and component changes to the <EmptyState /> component
* ui: Reset the auth-form component back to its initial state
Moving forwards we are going to have the auth-form on the page all the
time, even when logged in (for relogging in purposes). This means the
auth-form will not always be removed from the DOM when you log in.
This sets the form back to its idle state before calling onsubmit
* ui: Make a public api for modal-dialog with a single close method
* ui : Move cache reset somewhere that makes more sense, + single refresh
1. Centralize cache resetting elsewhere, for now the store makes most
sense, although I would prefer the Repository class, so using the store
is temporary
2. We only need to refresh on login once, unless we have a differing
nspace
* ui: Ensure visibilitychange events are cleaned up
* ui: Only cache DataSource data if we have any, + only clear the cache
* ui: Add the modal login dialog to both unauth and auth views
This means we can 'relogin' when already logged in
* ui: Add new empty states
* ui: CSS Tweaks
* Remove marketing grays
It seems that blink/webkit browsers at least will leak memory when using
input[type=password] inputs. This only affects us during testing as we
'refresh' the ember app ~1000 times without actually refreshing
the browser. This means references to these HTML input elements mount
up now that every single page/test has an input[password] on it.
Following this change our memory usage during testing seems to have
reduced by as much as 75%.
During normal usage the single password element is only added to the
page once per login/logout.
* ui: Styling fixes (#7885)
* Move cellHeight to ListCollection js file
* Fix composite row border-top-color onHover state
* Add empty health check icon to CompositeRow styling
* ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886)
* ui: Move individual component types into a single %composite-list plus
1. Removes all out separate CSS components (that match HTML components)
to favour not having those separate for the moemnt at least
2. Reuses <ConsulServiceList /> component for Terminating Gateways >
Linked Services
* ui: Tweak breadcrumb spacing for '/' separator
* Fix up the tests i.e. services per tab so we can call them all services
* ui: Misc discovery chain fixes (#7892)
1. Look for a default splitter before looking for a default resolver in
order to route to.
2. Delay adding svg listeners until afterRender (fixes split tooltip)
3. Make router id's consistent for highlighting default routers in when
clicking the graph
* ui: If an error occurs on the server, surface it in the notification (#7893)
* ui: Delete old unused CSS (#7909)
This commit deletes CSS that we no longer use and we definitely will not
ever use.
We also dedup all of our imports here as it turns out SASS doesn't
dedupe imports. Strangely this increases out CSS weight by ~1kb instead
of reducing but we'd rather keep things deduped as that was the
intention
* ui: Redesign - Exposed Paths (#7912)
* Add new exposed paths icons to codebase
* Redesign Exposed Paths and create copy-button hover on Composite Row
* Refactor FeedbackDialog and CopyButton
* Change this.element to use `{{ref }}` now we don't have an element
We changed this to a tagless component with an eye to moving this to a
glimmer component, without spotting that this would also remove the
`this.element` property.
This adds an equivalent using the ref modifier.
Co-authored-by: John Cowen <jcowen@hashicorp.com>
* ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914)
Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
1. Ensure dropdown menus function correctly in Safari
2. Ensure default grey color for buttons is not used
3. Ensure IntersectionObservers are cleaned up properly in Safari
* ui: Combine all "see/don't see" steps into one step
* Fix up broken tests
* Add some test meta data/titles
* Test out proxies in the service listing
* Remove comments
* ui: Renames CopyButtonFeedback to CopyButton and use it everywhere
* Uncapitalize output
* Remove the ability to set the contents via an attr, and..
..change the attribute for the string that gets copied to be called
'value' so it feels like HTML
* ui: If an auth-method is in another namespace than default, make that clear
* Pass through the namespace of the auth method rather than use the current
* Make sure we refresh the application route, before redirecting
This ensure that the nspaces and are refreshed in the main nav menu
* 6 new components for new login/logout flow, plus SSO support
UI Components:
1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile
2. AuthForm: Authorization form shown when logged out.
3. AuthProfile: Simple presentational component to show the users
'Profile'
4. OidcSelect: A 'select' component for selecting an OIDC provider,
dynamically uses either a single select menu or multiple buttons
depending on the amount of providers
Data Components:
1. JwtSource: Given an OIDC provider URL this component will request a
token from the provider and fire an donchange event when it has been
retrieved. Used by TokenSource.
2. TokenSource: Given a oidc provider name or a Consul SecretID,
TokenSource will use whichever method/API requests required to retrieve
Consul ACL Token, which is emitted to the onchange event handler.
Very basic README documentation included here, which is likely to be
refined somewhat.
* CSS required for new auth/SSO UI components
* Remaining app code required to tie the new auth/SSO work together
* CSS code required to help tie the auth/SSO work together
* Test code in order to get current tests passing with new auth/SSO flow
..plus extremely basics/skipped rendering tests for the new components
* Treat the secret received from the server as the truth
Previously we've always treated what the user typed as the truth, this
breaks down when using SSO as the user doesn't type anything to retrieve
a token. Therefore we change this so that we use the secret in the API
response as the truth.
* Make sure removing an dom tree from a buffer only removes its own tree
1. When choosing Services/Nsmapces for intentions you can either choose
a service from autocomplete menus, or write any service name, existing
or not. We previous said this would be a 'Future' service, but it could
also be a service in another datacenter, or a 'virtual service'.
2. Reword the hints underneath the autocomplete menus to reflect point 1
* Create PopoverSelect component and styling
* Create CatalogToolbar component and Styling
* ui: Adds `selectable-key-values` helper (#7472)
Preferably we want all copy/text to live in the template. Whilst you can
achieve what we've done here with a combination of different helpers, as
we will be using this approach in various places it's probably best to
make a helper.
We also hit an ember bug related to using the `let` helper and trying to
access `thingThatWasLet.firstObject` (which can also be worked around
using `object-at`).
Moving everything to a helper 'sorted' everything.
Probably worthwhile noting that if the sort option themselves become
dynamic, I'm not sure if the helper here would actually react as you
would expect (I'm aware that ember helpers on react on the root
arguments, not necesarily sub properties of those arguments). If we get
to that point this helper could take the same approach as what I believe
ember-composable-helpers does to get around this, or move them to the
view controller. If we do ever moved this to the view controller, we
can still use the exported function from the new helper here to keep
using the same functionality and tests we have here.
* Create tests for sorting services with CatalogToolbar
* Add rule to print 'ember/no-global-jquery' as a warning
Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
* 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>
* ui: Adds a tab selection animation to our app tabs
1. Replace all mentions of `magenta` with a themeable CSS property.
2. Add an easy way to inline style DOM nodes
3. Use CSS properties to add tab animation
* Fix up rendering test
* Avoid DOM noodling as much as possible
* Return all services except Proxies
* Add Gateway icon to the codebase
* Create and implement ConsulExternalSource component
* Fix tests to work with new mock data and add a Gateway test
* Update consul-api-double to 2.14.3
* ui: Use Datasource for loading related data in ACLs area
* ui: Use more manual cleanup for Controller event-sources
* Update reconcile to use nspace and add SyncTime to role/policy
* Use the correct value for nspace and dc (the one from the item itself)
* Remove the // check, we no longer need it. Add some TODO
* 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
* Make datacenter queries use query vs findAll like the rest of the app
* Make sure we have an element to pass to isInViewport
* Make sure href-mut doesn't error even if the currentRoute === null
* More post test cleanup and Safari fix (safari requires http:// URLs)
* Reverse order of datasource nspace/dc's and add a namespace source
* Rearrange routes/templates/controllers to only use HashicorpConsul once
* Add datasources and correct token namespace detection/redirection
* Remove old dc findAll adapter method
* Add more comments around the 'child route/parent controller' vars
* Create ConsulServiceInstanceList with styling and test
* Implement ConsulServiceInstanceList to Service Detail page
* Implement ConsulExternalSource to Services Show page header
* Update services/show page object
* Update the styling of CompositeRow
* Refactor ConsulServiceList component and styling
* Update ConsulExternalSource to say 'Registered via...'
* Upgrade consul-api-double to patch 2.14.1
* Fix up tests to not use Kind in service models
* Update ListCollection with clickFirstAnchor action
* Add $typo-size-450 to typography base variables
* Create ConsulExternalSource with test and styling
* Implement ConsulExternalSource to Service list page
* Update icons for redesign
* Refactor ListCollection and CompositeRow styling
* Create GridCollection for nodes page with styling
* Update ListCollection styling
* Update TagList styling
* Create CompositeRow styling component
* Update ConsulServiceList component with styling
* Create service health-checks helper
* Add InstanceCount to the service model
* Add tag-svg to codebase
* Create and update tests for service-list page
* Upgrade @hashicorp/consul-api-double to 2.14.0
* ui: Logout button
This commit adds an easier way to logout of the UI using a logout button
Notes:
- Added a Logout button to the main navigation when you are logged in,
meaning you have easy access to a way to log out of the UI.
- Changed all wording to use 'Log in/out' vocabulary instad of 'stop
using'.
- The logout button opens a panel to show you your current ACL
token and a logout button in order to logout.
- When using legacy ACLs we don't show the current ACL token as legacy
ACLs tokens only have secret values, whereas the new ACLs use a
non-secret ID plus a secret ID (that we don't show).
- We also added a new `<EmptyState />` component to use for all our
empty states. We currently only use this for the ACLs disabled screen to
provide more outgoing links to more readind material/documentation to
help you to understand and enable ACLs.
- The `<DataSink />` component is the sibling to our `<DataSource />`
component and whilst is much simpler (as it doesn't require polling
support), its tries to use the same code patterns for consistencies
sake.
- We had a fun problem with ember-data's `store.unloadAll` here, and in
the end went with `store.init` to empty the ember-data store instead due
to timing issues.
- We've tried to use already existing patterns in the Consul UI here
such as our preexisting `feedback` service, although these are likely to
change in the future. The thinking here is to add this feature with as
little change as possible.
Overall this is a precursor to a much larger piece of work centered on
auth in the UI. We figured this was a feature complete piece of work as
it is and thought it was worthwhile to PR as a feature on its own, which
also means the larger piece of work will be a smaller scoped PR also.
* 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.
In case we ever need to link to anywhere on learn that isn't in the
`/consul` sub directory, this will let us do that whilst still using the
global env var.
We previoulsy had some pretty straightforward duplicated code for
rendering our metadata list for both Service Metadata and Node Metadata.
This moves this code into a component.
Whilst we tried to do this with the smallest amount of changes possible,
our acceptance tests for trying to submit a blank form started failing
due to usage of `destroyRecord`, its seems that the correct way to
achieve the same thing is to use `rollbackAttributes` instead. We
changed that here and the tests pass once again. Furture work related to
this will involve change the rest of the UI where we use `destroyRecord`
to achieve the same thing, to use `rollbackAttributes` instead
This commit adds 2 ember component/helpers and a service to contain the
shared functionality for matching/rendering content dependent on state
identifiers. Currently a `service.state` method has been added to easily
make manual state objects, but these are built towards using `xstate` to
manage UI state in some of our future components.
We've added some tests here, and we aren't currently using these
components anywhere in this commit.
This exposes an api for <ToggleButton /> so you can call it from
elsewhere, specifically here we use the api.click to close the dropdown
menus which is required is the DOM containing the toggle button isn't
redrawn as is the case with external links in a dropdown menu
* ui: Add data-source component and related services (#6486)
* ui: Add data-source component and related services:
1. DataSource component
2. Repository manager for retrieving repositories based on URIs
3. Blocking data service for injection to the data-source component to
support blocking query types of data sources
4. 'Once' promise based data service for injection for potential
fallback to old style promise based data (would need to be injected via
an initial runtime variable)
5. Several utility functions taken from elsewhere
- maybeCall - a replication of code from elsewhere for condition
calling a function based on the result of a promise
- restartWhenAvailable - used for restarting blocking queries when a
tab is brought to the front
- ifNotBlocking - to check if blocking is NOT enabled
* Move to a different organization based on protocols
* Don't call open twice when eager
* Workaround new ember error for reading and writing at the same time
* Add first draft of a README.mdx file
* ui: Move components to the new nested structure
* Move data-test attribute to the correct HTML element
We don't currently rely on this, but was incorrectly placed on the input
rather than the label tag
* Fix up left over curly bracket components that were causing issues
For some reason the combination of:
1. Old style curly bracket components
2. data-test-* attributes
3. Moving to the new component file structure
Meant that our data-test-* selectors where no longer being rendered.
Whilst this had no effect on the app, it meant our tests suite could no
longer select DOM elements in order to assert various things.
Moving the old style curly bracket components to the new style XML/Angle
bracket format fixes the issue
* Update ui-v2/app/templates/dc/nodes/-services.hbs
Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com>
* Update ui-v2/app/templates/dc/nodes/-services.hbs
Co-Authored-By: Greg Hoin <1416421+gregone@users.noreply.github.com>
Co-authored-by: Greg Hoin <1416421+gregone@users.noreply.github.com>
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
In a previous iteration of discovery-chain wrapping some event listeners
in a call to `next` (i.e. do this on next tick) was necessary. We added
a comment in here to see if we could get rid of it at a later date.
We've taken another look at this and it looks like this `next` is no
longer required in this later iteration. Further more there is the
tiniest chance that possibly, as we are adding listeners on next tick, that the
listeners could be added after component destruction, which means when
you click on the page we try to set a property of a destroyed object and
boom.
Removing this `next` removes this tiny possibility.
* 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
* 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
Previous to 1.7 splitter names didn't include the namespace name
i.e. 'service-name'
as of 1.7 they now include the namespace
i.e. 'service-name.namespace'
This commit take account of that
* 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
* Remove empty init
* Actually make the disco chain endpoint send the nspace, note:
The backend doesn't support this as yet.
* Tweak the font size of flash-messages ever so slightly
* Make sure the nspace menu is kept up to date when creating a new one
* Move comment to the correct place
* Only refresh the namespace menu if you specifically created a nspace
* Change FIXMEs to TODOs as we are happy for these to wait until later
* 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
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.
## HTTPAdapter (#5637)
## Ember upgrade 2.18 > 3.12 (#6448)
### Proxies can no longer get away with not calling _super
This means that we can't use create anymore to define dynamic methods.
Therefore we dynamically make 2 extended Proxies on demand, and then
create from those. Therefore we can call _super in the init method of
the extended Proxies.
### We aren't allowed to reset a service anymore
We never actually need to now anyway, this is a remnant of the refactor
from browser based confirmations. We fix it as simply as possible here
but will revisit and remove the old browser confirm functionality at a
later date
### Revert classes to use ES5 style to workaround babel transp. probs
Using a mixture of ES6 classes (and hence super) and arrow functions
means that when babel transpiles the arrow functions down to ES5, a
reference to this is moved before the call to super, hence causing a js
error.
Furthermore, we the testing environment no longer lets use use
apply/call on the constructor.
These errors only manifests during testing (only in the testing
environment), the application itself runs fine with no problems without
this change.
Using ES5 style class definitions give us freedom to do all of the above
without causing any errors, so we reverted these classes back to ES5
class definitions
### Skip test that seems to have changed due to a change in RSVP timing
This test tests a usecase/area of the API that will probably never ever
be used, it was more testing out the API. We've skipped the test for now
as this doesn't affect the application itself, but left a note to come
back here later to investigate further
### Remove enumerableContentDidChange
Initial testing looks like we don't need to call this function anymore,
the function no longer exists
### Rework Changeset.isSaving to take into account new ember APIs
Setting/hanging a computedProperty of an instantiated object no longer
works. Move to setting it on the prototype/class definition instead
### Change how we detect whether something requires listening
New ember API's have changed how you can detect whether something is a
computedProperty or not. It's not immediately clear if its even possible
now. Therefore we change how we detect whether something should be
listened to or not by just looking for presence of `addEventListener`
### Potentially temporary change of ci test scripts to ensure deps exist
All our tooling scripts run through a Makefile (for people familiar with
only using those), which then call yarn scripts which can be called
independently (for people familar with only using yarn).
The Makefile targets always check to make sure all the dependencies are
installed before running anything that requires them (building, testing
etc).
The CI scripts/targets didn't follow this same route and called the yarn
scripts directly (usually CI builds a cache of the dependencies first).
For some reason this cache isn't doing what it usually does, and it
looks as though, in CI, ember isn't installed.
This commit makes the CI scripts consistently use the same method as all
of the other tooling scripts (Makefile target > Install Deps if
required > call yarn script). This should install the dependencies if
for some reason the CI cache building doesn't complete/isn't successful.
Potentially this commit may be reverted if, the root of the problem is
elsewhere, although consistency is always good, so it might be a good
idea to leave this commit as is even if we need to debug and fix things
elsewhere.
### Make test-parallel consistent with the rest of the tooling scripts
As we are here making changes for CI purposes (making test-ci
consistent), we spotted that test-parallel is also inconsistent and also
the README manual instructions won't work without `ember` installed
globally.
This commit makes everything consistent and changes the manual
instructions to use the local ember instance that gets installed via
yarn
### Re-wrangle catchable to fit with new ember 3.12 APIs
In the upgrade from ember 3.8 > 3.12 the public interfaces for
ComputedProperties have changed slightly. `meta` is no longer a public
property of ComputedProperty but of a ComputedDecoratorImpl mixin
instead.
7e4ba1096e/packages/%40ember/-internals/metal/lib/computed.ts (L725)
There seems to be no way, by just using publically available
methods, to replicate this behaviour so that we can create our own
'ComputedProperty` factory via injecting the ComputedProperty class as
we did previously.
3f333bada1/ui-v2/app/utils/computed/factory.js (L1-L18)
Instead we dynamically hang our `Catchable` `catch` method off the
instantiated ComputedProperty. In doing it like this `ComputedProperty`
has already has its `meta` method mixed in so we don't have to manually
mix it in ourselves (which doesn't seem possible)
This functionality is only used during our work in trying to ensure
our EventSource/BlockingQuery work was as 'ember-like' as possible (i.e.
using the traditional Route.model hooks and ember-like Controller
properties). Our ongoing/upcoming work on a componentized approach to
data a.k.a `<DataSource />` means we will be able to remove the majority
of the code involved here now that it seems to be under an amount of
flux in ember.
### Build bindata_assetfs.go with new UI changes
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
Throughout the app we mutate the value of the root node classList on
navigation between separate pages (basically on URL change).
Every template has a unique classList for example `template-service
template-show` and `template-service template-list` etc etc.
When navigating between 2 pages, both pages using the same template yet
with different data, previoulsy we would entirely clear out the
`html.classList` and then refill it again with eaxctly the same classes.
This commit moves this to perform a diff previous to mutating the
classList, and then potentially no classList mutating is needed when
moving between 2 pages of the same template.
1. Remove ember-cli-clipboard dependency
2. Provide a new copy-button component implementing the same
interface as ^ but make the clipboard functionality injectable
3. Provide 2 implementations of a Clipboard. One using clipboard.js (as
previously) and an additional local storage 'clipboard'.
4. add a BDD step to assert whats in the clipboard (the fake one)
Main reason here is that `document.exec` must be called by a user
interaction
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.
Previously we were creating a fake event and amending the name of the
fake event, this meant that other `event.target` properties weren't
being passed through (in this instance `checked`) this changes the
approach to not use fake events, and allows you to overwrite the name
that the form uses for `handleEvent`
Encodes any variables passed in to be used for template interpolation, but importantly nothing else in the URL apart from the variables themselves. 'Generally' service names are reasonably URL safe, but we know of usecases using at least /s in service names.
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
Previously the tomography wasn't using ember `get` so proxy updates
(specifically here whilst receiving a blocking update) wasn't working.
This adds `get` here until we update to newer `get`less ember and also
refactors slightly removing `n` and using `distance.length` instead
Skipped tests are adding here to nag us to come back here at some point.
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
John Cowen
Blake Covarrubias
Kenia