* 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.
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.
* 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>
* 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
* 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.
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.
* 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
When connect is disabled the discovery-chain endpoint returns a 500
error status, which we previoulsy did not gracefully cope with.
This commit gracefully copes with any errors from the disco-chain
endpoint by supressing the error and hiding the Routing tab from the
Service detail page.
Acceptance test included
* ui: Ensure we use nonEmptySet everywhere where we add Namespace
We missed a coupld of places where we use the noEmptySet function, which
will only perform the set if the specified property is non-empty.
Currently we aren't certain there is a place in OSS where a Namespace
can make its way down via the API and endup being PUT/POSTed back out
again when saved. If this did ever happen we would assume it would be
the default namespace, but we add an extra check here to ensure we never
PUT/POST the Namespace property if Namespaces are disabled.
* ui: Add step/assertion for assert if a property is NOT set in the body
* ui: Improve updated/create acc testing for policy/token/roles:
Including making sure a Namespace property is never sent through if you
are running without namespace support
* ui: Make API integration tests aware of CONSUL_NSPACES_ENABLED
* ui: Allow passing CONSUL_NSPACES_ENABLED in via the cli in ember
* ui: Add more makefile targets/package scripts to switch NSPACEs on/off
* ui: Ensure all acceptance tests continue to pass with NSPACEs on/off
This required a little tweaking of the dictionary, at some point
page-navigation and some of these little tweaks will no longer be
required
* ui: Try running CI frontend tests in two parellel runs oss/ent
* ui: Use correct make target, use different names for the reports
* ui: always pass KV flags through on update
* ui: Integration test to prove the flags queryParams gets passed through
* ui: Add Flags to the KV updating acceptance tests
* Update search field placeholder to display `Search`
* Add an acceptance test to search node listings with node name and IP Address
* Update and add unit tests for filter/search node listing with IP Address
* Adds conditional in route to not make discovery-chain request if service kind is equal to `connect-proxy` or `mesh-gateway`
* Adds conditional in template to not show Routing tab if `chain` returns as null
* Creates a new acceptance test to test the Routing tab not being displayed for a service proxy
* Adds `tabs` to the services/show page object
* Adds an acceptance test for hiding Blocking Queries
* Creates a new scenario - If a user adds CONSUL_UI_DISABLE_REALTIME to localStorage, the Blocking Queries section is hidden.
* Updates page assertion to accept functions and booleans as properties
* ui: Fix "don't see" step to watch for the different pageObject error
ember-cli-page object seems to throw a an error with a different message
depending on how you call a function:
currentPage()[property]() // message = 'Element not found'
const prop = currentPage()[property];
prop() // message = 'Something about destructuring'
This changes the step/test/assertion to ensure we check for both types of errors
Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
* ui: Fix typo expanded > ariaExpanded
* ui: Add the things we need to test this
* ui: Add tests for testing the menu closes when clicked
* ui: Ensure the aria-menu closes on route change
* ui: Discovery-Chain: Cope with redirects that have failovers
We found a few stranger configurations for discovery-chain, one of which
was redirects that can then failover.
We altered the parsing here to include 2 passes, one to organize the
nodes into resolvers and children/subsets based on the nodes themselves, which
includes adding the failovers to resolvers and subsets.
We then do a second pass which can more reliably figure out whether a
target is a redirect or a failover (target failovers don't have a
corresponding node), this then adds the redirect children to the already
exising resolver (from the first pass) and then checks if the redirect
also has failovers and adds those if so.
* ui: Check to see if we have a user configured default route or not
...if we don't add one so the visualization looks complete
* ui: Enable blocking queries/live updates for intentions
* ui: Add acceptance tests for intention blocking queries
* ui: Add copy to explain that intentions are also now 'real time'
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
* Change all instances of yield/block-slots to use attributes over positional arguments
* Remove the ability to use yield/block-slots with positional params
* Add data layer for discovery chain (model/adapter/serializer/repo)
* Add routing plus template for routing tab
* Add extra deps - consul-api-double upgrade plus ngraph for graphing
* Add discovery-chain and related components and helpers:
1. discovery-chain to orchestrate/view controller
2. route-card, splitter-card, resolver card to represent the 3 different
node types.
3. route-match helper for easy formatting of route rules
4. dom-position to figure out where things are in order to draw lines
5. svg-curve, simple wrapper around svg's <path d=""> attribute format.
6. data-structs service. This isn't super required but we are using
other data-structures provided by other third party npm modules in other
yet to be merged PRs. All of these types of things will live here for
easy access/injection/changability
7. Some additions to our css-var 'polyfill' for a couple of extra needed
rules
* Related CSS for discovery chain
1. We add a %card base component here, eventually this will go into our
base folder and %stats-card will also use it for a base component.
2. New icon for failovers
* ui: Discovery Chain Continued (#6939)
1. Add in the things we use for the animations
2 Use IntersectionObserver so we know when the tab is visible,
otherwise the dom-position helper won't work as the dom elements don't
have any display.
3. Add some base work for animations and use them a little
4. Try to detect if a resolver is a redirect. Right now this works for
datacenters and namespaces, but it can't work for services and subsets -
we are awaiting backend support for doing this properly.
5. Add a fake 'this service has no routes' route that says 'Default'
6. redirect icon
7. Add CSS.escape polyfill for Edge
Adds namespace support to the UI:
1. Namespace CRUD/management
2. Show Namespace in relevant areas (intentions, upstreams)
3. Main navigation bar improvements
4. Logic/integration to interact with a new `internal/acl/authorize` endpoint
Adds visibility for `Expose.Checks` config setting for proxies.
1. Adds an 'Exposed Path' tab to the proxy detail page to show the user information on exposed paths.
2. If the users has exposed their healthchecks we also add this information to the Service detail page for this proxy (only for http2 and gRPC checks)
## 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
- yarn upgrade consul-api-double which includes `status/leader`
- add all the ember-data things required to call a new endpoint
- Pass the new leader variable through to the template
- use the new leader variable in the template to set a leader
- add acceptance testing to verify leaders are highlighted
- Change testing navigation/api requests to status/leader (on the node listing page, status/leader is now the last get request to
be called).
- Template whitespace commit (less indenting)
- adds a test to to assert no errors happen with an unelected leader
-Enable blocking queries by default
-Change assertion to check for the last PUT request, not just any request for session destruction from a node page.
Since we've now turned on blocking queries by default this means that a
second GET request is made after the PUT request that we are asserting
for but before the assertion itself, this meant the assertion failed. We
double checked this by turning off blocking queries for this test using
```
And settings from yaml
---
consul:client:
blocking: 0
---
```
which made the test pass again.
As moving forwards blocking queries will be on by default, we didn't
want to disable blocking queries for this test, so we now assert the
last PUT request specifically. This means we continue to assert that the
session has been destroyed but means we don't get into problems of
ordering of requests here
ember-cli-api-double has been upgraded for 3 things:
1. Use the correct configuration flags
2. Automatically include the necessary files to enable the api doubles
without requiring a server. This can be disabled to provide custom
functionality (so we can stitch our BDD style testing in with this)
3. When used statically, read the cookies from the users browser to
enable basic ad-hoc double editing (e.g. CONSUL_SERVICE_COUNT=100000)
Once upgraded we've now moved the config to the correct place, added a
new environment (staging) to use the static-style of doubles
The test environment continues to use custom cookie setting and url
checking so we disable this 'auto importing' by setting 'auto-import' to
false for the configuration for the addon.
We also added a couple of new package script targets to explicitly serve
or build the UI with the entirely static UI.
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
Makes listening to multiple events on one target slightly easier.
Adding events can be rolled up into passing through an object, and the
returned remove function removes all of the handlers in the object
For example:
```
//this.listen...
const remove = listeners.add(
{
'message': handler,
'error': handler
}
);
remove(); // removes all listeners in the object
```
The entire API for listeners is now becoming slightly overloaded, so
potentially we'd use this API always and remove the ability to use a
string/function pair.
You can potentially close an EventSource before its first tick by
immediately setting the readyState to a non-open state. Therefore it
never opens.
Calling `open` will then open it.
'Open' fits better than 'reopen' when taking the above into account
Currently these gherkin dictionaries are contained in
`ember-cli-api-double`, which isn't the correct place for them.
They belong with the steps themselves.
This is also less complicated now we can require/import javascript
using a standard approach
Also runs an update of `ember-cli-api-double` which will be the last
installation of version 1 of this module.
EventSources will wait for 1 tick before 'opening'. There is always the
chance that the EventSource is '.close()'ed before that tick. We
therefore check the 'readyState' before opening the EventSource
* ui: Allow text selection of clickable elements and their contents
This commit disables a click on mousedown be removing the `href`
attribute and moving it to a `data-href` attribute. On mouseup it will
only move it back if there is no selection. This means that an anchor
will only be followed on click _if_ there is no selection.
This fixes the fact that whenever you select some copy within a
clickable element it immediately throws you into the linked page when
you release your mouse.
Further notes:
We use the `isCollapsed` property here which 'seems' to be classed as
'experimental' in one place where I researched it:
https://developer.mozilla.org/en-US/docs/Web/API/Selection/isCollapsed
Although in others it makes no mention of this 'experimental' e.g:
- https://webplatform.github.io/docs/dom/Selection/isCollapsed/
- https://w3c.github.io/selection-api/#dom-selection-iscollapsed
I may have gone a little overboard in feature detection for this, but I
conscious of that fact that if `isCollapsed` doesn't exist at some point
in the future (something that seems unlikely). The code here will have
no effect on the UI. But I'd specifically like a second pair of eyes on
that.
* ui: Don't break right click, detects a secondary click on mousedown
* ui: Put anchor selection capability behind an ENV var
* ui: Reconciliate ember-data store when records are deleted via blocking
Currently we are barely using the ember-data store/cache, but it will
still cache records in the store even though technically we aren't using
it.
This adds a SyncTime to every record that uses blocking queries so we
can delete older records from the ember-data cache to prevent them
building up
* ui: Add basic timestamp method we can access from tests, fixup tests
Adds a timestamp method that we can access from within tests so we can
test that the SyncTime is being set.
There is probably a better way to do this, but this is also probably the
simplest approach - we are also likely to revisit this at a later date
1. Adds a Listeners class, which lets us...
2. Add Listeners recursively. So you can
createListeners().add(createListeners())
3. Also add the ability to `.add` as a plain function
This moves the entire idea more towards a generic teardown utility
- Removes 'type' icons (basically the proxy icon, not the text itself)
- Add support for Mesh Gateways plus their addresses
This adds a 'Mesh Gateway' type label to service and service instance
pages, plus a new 'Addresses' tab if the service is a Mesh Gateway
showing a table of addresses for the service - plus tests
* Add ui-content-path flag
* tests complete, regex validator on string, index.html updated
* cleaning up debugging stuff
* ui: Enable ember environment configuration to be set via the go binary at runtime (#5934)
* ui: Only inject {{.ContentPath}} if we are makeing a prod build...
...otherwise we just use the current rootURL
This gets injected into a <base /> node which solves the assets path
problem but not the ember problem
* ui: Pull out the <base href=""> value and inject it into ember env
See previous commit:
The <base href=""> value is 'sometimes' injected from go at index
serve time. We pass this value down to ember by overwriting the ember
config that is injected via a <meta> tag. This has to be done before
ember bootup.
Sometimes (during testing and development, basically not production)
this is injected with the already existing value, in which case this
essentially changes nothing.
The code here is slightly abstracted away from our specific usage to
make it easier for anyone else to use, and also make sure we can cope
with using this same method to pass variables down from the CLI through
to ember in the future.
* ui: We can't use <base /> move everything to javascript (#5941)
Unfortuantely we can't seem to be able to use <base> and rootURL
together as URL paths will get doubled up (`ui/ui/`).
This moves all the things that we need to interpolate with .ContentPath
to the `startup` javascript so we can conditionally print out
`{{.ContentPath}}` in lots of places (now we can't use base)
* fixed when we serve index.html
* ui: For writing a ContentPath, we also need to cope with testing... (#5945)
...and potentially more environments
Testing has more additional things in a separate index.html in `tests/`
This make the entire thing a little saner and uses just javascriopt
template literals instead of a pseudo handbrake synatx for our
templating of these files.
Intead of just templating the entire file this way, we still only
template `{{content-for 'head'}}` and `{{content-for 'body'}}`
in this way to ensure we support other plugins/addons
* build: Loosen up the regex for retrieving the CONSUL_VERSION (#5946)
* build: Loosen up the regex for retrieving the CONSUL_VERSION
1. Previously the `sed` replacement was searching for the CONSUL_VERSION
comment at the start of a line, it no longer does this to allow for
indentation.
2. Both `grep` and `sed` where looking for the omment at the end of the
line. We've removed this restriction here. We don't need to remove it
right now, but if we ever put the comment followed by something here the
searching would break.
3. Added `xargs` for trimming the resulting version string. We aren't
using this already in the rest of the scripts, but we are pretty sure
this is available on most systems.
* ui: Fix erroneous variable, and also force an ember cache clean on build
1. We referenced a variable incorrectly here, this fixes that.
2. We also made sure that every `make` target clears ember's `tmp` cache
to ensure that its not using any caches that have since been edited
everytime we call a `make` target.
* added docs, fixed encoding
* fixed go fmt
* Update agent/config/config.go
Co-Authored-By: R.B. Boyer <public@richardboyer.net>
* Completed Suggestions
* run gofmt on http.go
* fix testsanitize
* fix fullconfig/hcl by setting correct 'want'
* ran gofmt on agent/config/runtime_test.go
* Update website/source/docs/agent/options.html.md
Co-Authored-By: Hans Hasselberg <me@hans.io>
* Update website/source/docs/agent/options.html.md
Co-Authored-By: kaitlincarter-hc <43049322+kaitlincarter-hc@users.noreply.github.com>
* remove contentpath from redirectFS struct
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
* ui: Normal proxies line to services, sidecars to instances
Following on from https://github.com/hashicorp/consul/pull/5933 we
noticed that 'normal' proxies should link to the service, rather than
the service instance. Additionally proxy 'searching' within the
repository should take into account the name of the node that the
originating service is on (sidecar proxies are generally co-located)
Added an additional test here to prove that a sidecar-proxy with the
same service id but on a different node does not show the sidecar proxy
link.
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.
1. Amends our `base` animation placeholder to always reset
transition-duration. This has no effect on other components that are
already using this animation.
2. Adds a confirming class whenever a key is pressed, to show the green
tick. Uses CSS via `transition-delay` for debouncing.
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`
1. Includes Datacenter variable for intperolation
2. Amends text on the Settings page to reflect new keyword
3. Adds further acceptance testing around the new dashboard buttons
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
If a service instance show page is being viewed and the service instance
is deregistered, this closes the blocking query for the proxy as well as
the instance (the instances query will be clsed on the error)
Also adds skipped tests to nag in future
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.
...also:
Temporarily overwrites native setTimeout and setInterval for e2e/acceptance
testing similar to how XHR is overwritten for e2e/acceptance testing.
This makes the blocking query acceptance tests run faster until we add a
better burstable rate limiter for blocking queries.
This commit includes several pieces of functionality to enable services
to be removed and the page to present information that this has happened
but also keep the deleted information on the page. Along with the more
usual blocking query based listing.
To enable this:
1. Implements `meta` on the model (only available on collections in
ember)
2. Adds new `catchable` ComputedProperty alongside a `listen` helper for
working with specific errors that can be thrown from EventSources in an
ember-like way. Briefly, normal computed properties update when a
property changes, EventSources can additionally throw errors so we can
catch them and show different visuals based on that.
Also:
Add support for blocking queries on the service instance detail page
1. Previous we could return undefined when a service instance has no
proxy, but this means we have nothing to attach `meta` to. We've changed
this to return an almost empty object, so with only a meta property.
At first glance there doesn't seem to be any way to provide a proxy
object to templates and be able to detect whether it is actually null
or not so we instead change some conditional logic in the templates to
detect the property we are using to generate the anchor.
2. Made a `pauseUntil` test helper function for steps where we wait for
things. This helps for DRYness but also means if we can move away from
setInterval to something else later, we can do it in one place
3. Whilst running into point 1 here, we managed to make the blocking
queries eternally loop. Whilst this is due to an error in the code and
shouldn't ever happen whilst in actual use, we've added an extra check
so that we only recur/loop the blocking query if the previous response has a
`meta.cursor`
Adds support for blocking queries on the node detail page (#5489)
1. Moves data re-shaping for the templates variables into a repository
so they are easily covered by blocking queries (into coordinatesRepo)
2. The node API returns a 404 as signal for deregistration, we also
close the sessions and coordinates blocking queries when this happens
This commit includes several pieces of functionality to enable services
to be removed and the page to present information that this has happened
but also keep the deleted information on the page. Along with the more
usual blocking query based listing.
To enable this:
1. Implements `meta` on the model (only available on collections in
ember)
2. Adds new `catchable` ComputedProperty alongside a `listen` helper for
working with specific errors that can be thrown from EventSources in an
ember-like way. Briefly, normal computed properties update when a
property changes, EventSources can additionally throw errors so we can
catch them and show different visuals based on that.
More recommendations for blocking queries clients was added here:
https://github.com/hashicorp/consul/pull/5358
This commit mainly adds cursor/index validation/correction based on
these recommendations (plus tests)
The recommendations also suggest that clients should include rate
limiting. Because of this, we've moved the throttling out of Consul UI
specific code and into Blocking Query specific code. Currently the 'rate
limiting' in this commit only adds a sleep to every iteration of the
loop, which is not the recommended approach, but the code here organizes
the throttling functionality into something we can work with later to
provide something more apt.
* ui: Add forking based on service instance id existence
Proxies come in 2 flavours, 'normal' and sidecar. We know when a proxy
is a sidecar proxy based on whether a DestinationServiceID is set.
LocalServiceAddress and LocalServicePort are only relevant for sidecar
proxies.
This adds template logic to show different text depending on this
information.
Additionally adds test around connect proxies (#5418)
1. Adds page object for the instance detail page
2. Adds further scenario steps used in the tests
3. Adds acceptance testing around the instance detail page. Services
with proxies and the sidecar proxies and proxies themselves
4. Adds datacenter column for upstreams
5. Fixes bug routing bug for decision as to whether to request proxy
information or not
Add totals to some listing views, remove healthcheck totals
1. Adds markup to render totals for Services, Nodes, Intentions and v1
ACLs
2. Removes counts from healthcheck filters, and therefore simplify text,
moving the copy to the templates
3. Alter test to reflect the fact that the text of the buttons are no
static in the component template rather than a dynamic attribute
This gives more prominence to 'Service Instances' as opposed to 'Services'. It also begins to surface Connect related 'nouns' such as 'Proxies' and 'Upstreams' and begins to interconnect them giving more visibility to operators.
Various smaller changes:
1. Move healthcheck-status component to healthcheck-output
2. Create a new healthcheck-status component for showing the number of
checks plus its icon
3. Create a new healthcheck-info component to group multiple statuses
plus a different view if there are no checks
4. Componentize tag-list
* ui: Add ember steps:list command for listing available steps
1. Adds `command` addon to house the new command
2. Start to organize out the steps themselves, bring a bit more order to
things ready to dedupe and cleanup
- Maintain http headers as JSON-API meta for all API requests (#4946)
- Add EventSource ready for implementing blocking queries
- EventSource project implementation to enable blocking queries for service and node listings (#5267)
- Add setting to enable/disable blocking queries (#5352)
Adds xhr connection managment to http/1.1 installs
This includes various things:
1. An object pool to 'acquire', 'release' and 'dispose' of objects, also
a 'purge' to completely empty it
2. A `Request` data object, mainly for reasoning about the object better
3. A pseudo http 'client' which doens't actually control the request
itself but does help to manage the connections
An initializer is used to detect the script element of the consul-ui sourcecode
which we use later to sniff the protocol that we are most likely using for API access
`window` and `document` are easily injected anyhow, but this
primarily this keeps everything dom related in the same place.
Included here are changes to make all ember related objects use the dom
service `document` and `viewport` instead of just `document` and
`window`.
Quote from a previous PR (#4924) which explains the thinking around this:
> Now I have all these things in the dom service, it would make sense
to get window from there also. I was thinking of making a viewport
method, which would be a nice word whether window was a browser window,
an iframe (not really a window) like when ember testing, or anything
else. To me the viewport is what we are actually talking about here.
1. Ensure any unexpected developer errors are passed through/shown
2. Previously when errors where returns/resolved the special
isEnabled/isAuthorized would never get resolved. This was fine as they
were set to false to start with anyway, but this resolves them again to
false for completeness
3. Improved unit testing coverage
Kenia