* ui: Split up client/http and replace $.ajax
This splits the client/http service more in the following ways:
1. Connections are now split out into its own service
2. The transport is now split out into its own service that returns a
listener based http transport
3. Various string parsing/stringifying functions are now split out into
utils
* Remove jQuery from our production build
* Move the coverage serving to the server.js file
* Self review amends
* Add X-Requested-With header
* Move some files around, externalize some functions
* Move connection tracking to use native Set
* Ensure HTTP parsing doesn't encode headers
In the future this will change to deal with all HTTP parsing in one
place, hence the commented out METHOD_PARSING etc
* Start to fix up integration tests to use requestParams
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
In https://github.com/hashicorp/consul/pull/8065 we attempted to reduce
the amount of times that the UI requests the discovery chain endpoint
when connect is disabled on a datacenter.
Currently we can only tell if connect is disabled on a datacenter by
detecting a 500 error from a connect related endpoint.
In the above PR we mistakenly returned from a catch instead of
rethrowing the error, which meant that when a none 500 error was caught
the discovery chain data would be removed. Whilst at first glance this
doens't seem like a big problem due to the endpoint erroring, but we
also receive a 0 error when we abort endpoints during blocking queries.
This means that in certain cases we can remove cached data for the
discovery chain and then delay reloading it via a blocking query.
This PR replaces the return with a throw, which means that everything is
dealt with correctly via the blocking query error detection/logic.
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
This excludes any /components/**/pageobject.js files from our production
builds which means we can co-locate all of our component page objects
(and selectors) along with the components themselves.
* ui: Reduce discovery-chain log spam
Currently the only way that the UI can know whether connect is enabled
or not is whether we get 500 errors from certain endpoints.
One of these endpoints we already use, so aswell as recovering from a
500 error, we also remember that connect is disabled for the rest of the
page 'session' (so until the page is refreshed), and make no further
http requests to the endpoint for that specific datacenter.
This means that log spam is reduced to only 1 log per page refresh/dc
instead of 1 log per service navigation.
Longer term we'll need some way to dynamically discover whether connect
is enabled per datacenter without relying on something that will add
error logs to consul.
Found using staticcheck.
binary.Write does not accept int types without a size. The error from binary.Write was ignored, so we never saw this error. Casting the data to uint64 produces a correct hash.
Also deprecate the Default{Addr,Port} fields, and prevent them from being encoded. These fields will always be empty and are not used.
Removing these would break backwards compatibility, so they are left in place for now.
Co-authored-by: Hans Hasselberg <me@hans.io>
* ui: Add ability to sort service based on health
* ui: Move custom sorting to sort/comparator Service/Helper (like search)
This moves custom sorting to use the same pattern as custom searching.
* Remove old Controller based comparator
* Remove gateway endpoint adapter, model, and serializer and tests
* Update service tests to handle gateway-services-nodes
* Upgrade consul-api-double to 2.15.2
* Add a fairly temporary shouldReconcile method
Co-authored-by: John Cowen <jcowen@hashicorp.com>
1. Removes all icons not supported by the backend
2. Adds other icons supported by the backend
3. If there is no icon available don't add CSS positioning for one
* 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: 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: 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>
Originally we assumed all settings would be editable in the settings
page, but over time we've added thigns to localStorage that aren't user
settable settings. This means we shouldn't save all you localStorage
settings everything time only a single setting has been saved.
This change only changes the setting you've changed via the settings
page, meaning it will never update non-user-settable settings.
ACLsEnabled is always set to either true or false. .SSOEnabled is only set if you are running enterprise (the same as .NamespacesEnabled). Therefore .SSOEnabled and .NamespacesEnabled require conditionals to check their existence.
In order to avoid future confusion we moved all go-template variables to use the conditional form, and added a comment to that effect.
Tests have been added to reflect this, but they only test that the template outputs what we expect, true e2e testing here would be advantageous.
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
* Fix to bottom border not applying to the correct <li>
* Create Linked Services tab with styling and tests
* Add internal endpoint gateway-services-nodes to the codebase with tests
* Upgrade consul-api-double to version 2.15.0
* 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
This commit moved the checkbox used for marking a token as
local/global to use a more traditional UX, i.e.:
[ ] Question?
Clicking the radiobutton toggles true/false:
true = yes
false = no
instead of:
false=yes
true=no
* 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: Adds model layer required for SSO
1. oidc-provider ember-data triplet plus repo, plus addition of torii
addon
2. Make blocking queries support a Cache-Control: no-cache header
3. Tweaks to the token model layer in preparation for SSO work
* Fix up meta related Cache-Control tests
* Add tests adapter tests for URL shapes
* Reset Cache-Control to the original value, return something from logout
1. empty-state amends to bring it closer to what is in Structure and
optionally support icons.
2. You may have a button that semantically should be a button (it
performs and action not a link), but you want it to look like an anchor,
this means it shouldn't have an outline when :active.
3. Adds `label.type-password` as a `%form-element`
4. Adds an error state to our `%notice` CSS component
We currently define our 'decorational' iconography in our CSS via
background images and or psuedo content. For coloring these we use
`mask-image` and a background color.
This commit adds a background-color: currentColor to our %with-mask
placeholder that makes the color of these icons default to the `color`
of the current element, meaning the icons now inherit from things like
`:hover`.
This can easily be overwritten as before by just setting the
background-color on the icon manually as before.
* ui: Add a way to reliably figure out where the UI is running
The main javascript that we use is at </where/the/ui/is>/ui/assets/consul-ui.js
This uses this fact to provide and base path 'environment' variable to
be used within the app. This is also overwritable via various methods
(testing/development) if we ever need to do that.
* Remove BASE_API_URL, the logic here isn't exactly correct
Right now the API always _has_ to be at http://domain/v1/ i.e. the root
of your domain /v1. If the URL of the ui is set differently to
http://root.com/somewhere/else/ui/ then the API is still at http://root.com/v1
There is definitely a plan to add this env var back in at some stage so
we can potentially allow this to be configured in other ways, but there
isn't a need to do it just yet so we don't need to worry about _how_ to do
this right now.
* 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
* Add model layer support for filtering intentions by service
* Add Route, Controller and template for services.show.intentions tab
We are still loading the intentions themselves in the parent Route for
the moment
* Load the intentions in in the parent route for the moment
* Temporarily add support for returning to history -1
Once we have an intention form underneath the service/intention tab this
will no longer be needed
* Add the new tab and enable blocking queries for it
* Add some further acceptance testing around intention listings
* 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: Adds blueprint for creating css-components
CSS Components are CSS only components, which can be one of 2 types:
1. A composable CSS component that is not commonly used on its own
2. A CSS component that is commonly used along with a HTML/JS component,
potentially made up of other composable CSS components.
For type 1. you probably don't need the ./styles/component-name.scss
file. But instead of complicating matters with options for the blueprint
right now, we just rely on the user to delete the
./styles/component-name.scss file if they don't need it.
We also don't automatically add this import to the
./styles/components/index.scss file for 2 reasons:
1. We are potentially going to be moving the
./styles/components/index.scss file to ./styles/components.scss.
2. If we aren't going to provide a CLI swicth to ask whether this is of
component type 1. or component type 2. we don't want to automatically
include things that the user might not need.
Both of these 2 reasons are a little TBD and at some point in the future
we'll probably iterate on this blueprint to make it even easier to make
either type of CSS component.
* 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>
* Update box-shadowing for cards and radio buttons to low
* Update box-shadowing for hover cards to middle
* Create a new box-shadow CSS variable for form elements
Previously the API around setting headers wasn't within a Promised like
code path, so we needed a little 'cheat' function to get a token from
localStorage syncronously.
Since we refactored our adapter layer, we now have a Promised codepath
where we need to access this localStorage value and set our headers.
This means we can remove our little 'cheat' function.
* Remove old %action-group
* Remove old variables we no longer need
* Use the discovery-chain component in the same manner as others
* Split `product` out into its separate components
* v3.12.0...v3.16.0
* Upgrades
* Remove old wormhole fix
* Fixup ember power select (camelcasing)
* Fixup immedaitely closing dropdown
When clicking on the syntax selector, it seemed like an extra click
event was firing from the label, which then immediately closed the
dropdown. By adding a for="" attribute this event isn't passed to the
dropdown menu and therefore doesn't immediately close
* Fix up integration tests with new style (plus standardize titles)
* Temporarily disable some template linting rules
* Add required methods (even though they aren't used anywhere)
* Ensure event sources get closed on destruction
* Modify templates with codemods angle brackets
* ui: Fix up problem with intention filter action attribute
Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
* ui: Test Coverage Reporting (#7027)
* Serve up the /coverage folder whilst developing
* Upgrade ember-cli-api-double now it supports passthrough per url
* ui: make env into a service and use it where we need to be injectable
* Give http/client a body method so we can use it on its own for testing
* Add test helper for testing with and without nspaces enabled
* Add two tests, one thay needs nspaces and one that doesn't
* Keep cleaning up client/http, whilst figuring out a immutable bug
* Convert tests to new return format ([actual, leftovers])
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 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.
During the refactor of the data layer we had a method that you can use
to do a request/response call i.e. adapter.request > serializer.respond
We weren't sure what to name this but eventually wanted it to live on
the HTTPAdapter itself (see removed comments in the changeset)
We've decided `rpc` is a good name and we've moved this to where we want
it. We've deprecated the old `request` method name but not removed it as
yet. There's also opportunity now to reduce the 'read/write' functions
further as they essentially do the same thing. Again we've left this for
the moment, but we are hoping to get the code for our custom Adapter down
to less than 100 LoC.
When using namespaces, the 'default' namespace is a little special in
that we wanted the option for all our URLs to stay the same when using
namespaces if you are using the default namespace, with the option of
also being able to explicitly specify `~default` as a namespace.
In other words both `ui/services/service-name` and
`ui/~default/services/service-name` show the same thing.
This means that if you switch between OSS and Enterprise, all of your
URLs stay the same, but you can still specifically link to the default
namespace itself.
Our routing configuration is duplicated in order to achieve this:
```
- :dc
- :service
- :kv
- :edit
- :nspace
- :dc
- :service
- :kv
- :edit
```
Secondly, ember routing resolves/matches routes in the order that you specify
them, unless, its seems, when using wildcard routes, like we do in the
KV area.
When not using the wildcard routes the above routing configuration
resolves/matches a `/dc-1/kv/service` to the `dc.kv.edit` route correctly
(dc:dc-1, kv:services), that route having been configured in a higher
priority than the nspace routes.
However when configured with wildcards (required in the KV area), note
the asterisk below:
```
- :dc
:service
- :kv
- *edit
- :nspace
- :dc
- :service
- :kv
- *edit
```
Given something like `/dc-1/kv/services` the router instead matches the
`nspace.dc.service` (nspace:dc-1, dc:kv, service:services) route first even
though the `dc.kv.edit` route should still match first.
Changing the `dc.kv.edit` route back to use a non-wildcard route
(:edit instead of *edit), returns the router to match the routes in the
correct order.
In order to work around this, we catch any incorrectly matched routes
(those being directed to the nspace Route but not having a `~`
character in the nspace parameter), and then recalculate the correct
route name and parameters. Lastly we use this recalculated route to
direct the user/app to the correct route.
This route recalcation requires walking up the route to gather up all of
the required route parameters, and although this feels like something
that could already exist in ember, it doesn't seem to. We had already
done a lot of this work a while ago when implementing our `href-mut`
helper. This commit therefore repurposes that work slighlty and externalizes
it outside of the helper itself into a more usable util so we can import
it where we need it. Tests have been added before refactoring it down
to make the code easier to follow.
This commit includes 2 things:
1. Sometimes (seemingly due to client caching), performance entries
aren't available, even for the currently executing script. This waits
until the first retrieval of 'CONSUL_HTTP_PROTOCOL' before using the
performance entries to decide this. This means that the entries aren't
inspected until ember has initialized, which means that the entries are
always available.
2. getCurrentResource/getResourceFor could potentially return undefined
if the correct entry could not be found. This adds a default {} return
value if the resource cannot be found. This means that if for whatever
reason the correct resource cannot be found at least we don't fail with
an error and just drop back to HTTP/1 functionality.
We need to detect whether an object is an ember-data snapshot or just a
plain object, and we where restricted from using `instanceof` due to
ember-data's `Snapshot` class being private.
We'd chosen to go with `constructor.name` instead, which seemed to work,
but when the javascript gets minifed the name of the contructor is also
minified and therefore is not what you are expecting.
This commit reverts to our original idea of checking for the existence
and type of the `.attributes` function, which is the function we require
within the conditional, and therefore is more reliable (if the function
doesn't exist it will error out during development aswell as production)
Ember tries to reuse DOM elements when it can but as ember looks for
changes to objects rather than the DOM itself sometimes. This and the
fact that an objects identity may change even though its value hasn't,
results in ember occasionally re-mutating DOM when it doesn't need to.
The `each` helper includes a `key` attribute to hint to ember what it
should look for when deciding whether something has changed, rather than
the objects identity.
https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/each#specifying-keys
We use this here to fix an issue where DOM was being redrawn after the
user had scrolled the page and was therefore resetting the scroll back
to 0 (the top of the page)
* ui: Ensure configuration is passed through to findInstanceBySlug
Due to the addition of namespace support, this arguments passed to this
method have been increased. Whilst the nspace support continues ot work
here, the configuration for blocking queries is never passed through.
This results in a 2 second poll rather than a blocking query.
This commit fixes that
* ui: Add a basic test to check the number of arguments passed through
For URL maintenance reasons we store the last visited DC in
localStorage incase you come back to a page (for example settings) that
doesn't have a dc in the URL.
A problem arises here if the last DC you tried to visit is unreachable.
The first fix here clears out the last visited DC from localStorage if
the API has errored out.
Secondly, our `href-mut` helper which mutates the current current and
replaces 'parts' in the URL rather than the whole thing functioned by
detecting the current route/URL you are on an 'mutating' that. A problem
arose here as even though you might be on the `/ui/dc-1/services` URL the
actual route is the 'error' route which does not have a URL that can be
changed properly.
The second fix here uses route.currentRoute.name over route.currentRouteName.
The latter is equal to error when an error occurs whereas the former gives you the name of the route before the error happened, which is actually what we want/the intent here.
ie. when `router.currentRouteName === 'error'` then
`router.currentRoute.name === Name Of Route Before It Errored` it seems
John Cowen
Blake Covarrubias
Kenia
Daniel Nephin
John Cowen
Mike Morris
Alvin Huang