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.
Throughout the app we mutate the value of the root node classList on
navigation between separate pages (basically on URL change).
Every template has a unique classList for example `template-service
template-show` and `template-service template-list` etc etc.
When navigating between 2 pages, both pages using the same template yet
with different data, previoulsy we would entirely clear out the
`html.classList` and then refill it again with eaxctly the same classes.
This commit moves this to perform a diff previous to mutating the
classList, and then potentially no classList mutating is needed when
moving between 2 pages of the same template.
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
Migrate roughly half of the base components into base
Adds a target for easily formatting CSS
Further CSS amends/migration (#5921)
1. tooltips within tables where a slightly bit troublesome due to a mix
of `inline-flex`, `overflow` and the need for truncation. This refineds
tooltips a slight bit more to work 'everywhere'.
2. We also move tooltip to use the correct color and min-width from
structure, but we overwrite the min-width here until we get confirmation
on widths/alignment of text within a tooltip.
3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings
4. Now we inline-flex our table cells, it means it is impossible to
truncate text without wrapping it in another element. This wraps all
Description like text in `<p>` tags. Generally the first column of text
is already wrapped in an `<a>` tag. Other items such as consul tags and
policy names etc get 'cutoff' rather than truncated.
5. We are now using all the icons from `@hashicorp/structure-icons`
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.
Just because Consul gives us a 404 this doesn't guarantee the KV doesn't
exist, it doesn't even mean we don't have access to it. Furthermore we
should never destroyRecord's without user interaction (therefore only via the
repo.delete method).
This switches destroyRecord to unloadRecord which performs the
additional legwork to keep ember-data in sync with the actual truth.
unloadRecord unloads the record from ember-data rather than sending an API
delete request, which would have been the intent here.
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`
This means its more straightforwards to calculate the height of the
listing itself. This component is currently only used on the form pages for tokens and roles, should therefore be a restricted size.
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.
The way icons are positioned was changed to enable icons for policy
names, and in a separate PR h2's where altered to provide a nicer
looking settings page. Once these PR's where merged together they
slighly effected each other. This commit tweaks the CSS to refine, but
will be revisted at a later date
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.
1. If the modal gets bigger than 80% of the viewport height a scrollbar
will be shown. Currently there isn't anywhere it can get this big, but
future work involves possible larger modals
2. Usually its difficult to figure out which was the 'unchecked' radio
button using an onchange event. Luckily ember/handlebars changes its
properties after the onchange event, so knowing that and using an extra
data-checked attribute set via ember, we can figure out which radio
button has been 'unchecked'. This means the logic for opening an
closing modals becomes slightly easier
...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.
