Move all the dom-things to use the dom service in tabular-collection, feedback-dialog, list-collection and node show. Move get-component-factory into utils/dom and use dom.root() in a few more places
This includes an additional `dom.components` method which gives you a
list of components matching the selector instead of just one.
- Adds full set of svg icons as CSS/Sass variables to the source
- Starts picking out some frame-grays, whilst commenting in possibles
- Remove color prefixing
The prefixes `ui-` and `brand-` for colors hav been removed. This makes
colors slightly easier to type.
In order to differentiate between brand colors and 'normal' colors, normal
colors are named as 'true colors' i.e. blue, red, green etc etc
whereas the brand colors used a more premium sounding name such as
'steel' for vault gray, 'magenta' for consul, 'cobalt' for vagrant etc etc.
This does several things to make improving the search experience easier
moving forwards:
1. Separate searching off from filtering. 'Searching' can be thought of
as specifically 'text searching' whilst filtering is more of a
boolean/flag search.
2. Decouple the actual searching functionality to almost pure,
isolated / unit testable units and unit test. (I still import embers get
which, once I upgrade to 3.5, I shouldn't need)
3. Searching rules are now configurable from the outside, i.e. not
wrapped in Controllers or Components.
4. General searching itself now can use an asynchronous approach based on
events. This prepares for future possibilities of handing off the
searching to a web worker or elsewhere, which should aid in large scale
searching and prepares the way for other searching methods.
5. Adds the possibility of have multiple searches in one
template/route/page.
Additionally, this adds a WithSearching mixin to aid linking the
searching to ember in an ember-like way in a single place. Plus a
WithListeners mixin to aid with cleaning up of event listeners on
Controller/Component destruction.
Post-initial work I slightly changed the API of create listeners:
Returning the handler from a `remover` means you can re-add it again if you
want to, this avoids having to save a reference to the handler elsewhere
to do the same.
The `remove` method itself now returns an array of handlers, again you
might want to use these again or something, and its also more useful
then just returning an empty array.
The more I look at this the more I doubt that you'll ever use `remove`
to remove individual handlers, you may aswell just use the `remover`
returned from add. I've added some comments to reflect this, but they'll
likely be removed once I'm absolutely sure of this.
I also added some comments for WithSearching to explain possible further
work re: moving `searchParams` so it can be `hung` off the
controller object
The original version of ember-block-slots doesn't support ember 3 and it
seems like development has stalled on the original version.
This adds a modified version as an in-repo-addon that is compatible with
ember 3.
In 858b05fc31 (diff-46ef88aa04507fb9b039344277531584)
we removed encoding values in pathnames as we thought they were
eventually being encoded by `ember`. It looks like this isn't the case.
Turns out sometimes they are encoded sometimes they aren't. It's complicated.
If at all possible refer to the PR https://github.com/hashicorp/consul/pull/5206.
It's related to the difference between `dynamic` routes and `wildcard` routes.
Partly related to this is a decision on whether we urlencode the slashes within service names or not. Whilst historically we haven't done this, we feel its a good time to change this behaviour, so we'll also be changing services to use dynamic routes instead of wildcard routes. So service links will then look like /ui/dc-1/services/application%2Fservice rather than /ui/dc-1/services/application/service
Here, we define our routes in a declarative format (for the moment at least JSON) outside of Router.map, and loop through this within Router.map to set all our routes using the standard this.route method. We essentially configure our Router from the outside. As this configuration is now done declaratively outside of Router.map we can also make this data available to href-to and paramsFor, allowing us to detect wildcard routes and therefore apply urlencoding/decoding.
Where I mention 'conditionally' below, this is detection is what is used for the decision.
We conditionally add url encoding to the `{{href-to}}` helper/addon. The
reasoning here is, if we are asking for a 'href/url' then whatever we
receive back should always be urlencoded. We've done this by reusing as much
code from the original `ember-href-to` addon as possible, after this
change every call to the `{{href-to}}` helper will be urlencoded.
As all links using `{{href-to}}` are now properly urlencoded. We also
need to decode them in the correct place 'on the other end', so..
We also override the default `Route.paramsFor` method to conditionally decode all
params before passing them to the `Route.model` hook.
Lastly (the revert), as we almost consistently use url params to
construct API calls, we make sure we re-encode any slugs that have been
passed in by the user/developer. The original API for the `createURL`
function was to allow you to pass values that didn't need encoding,
values that **did** need encoding, followed by query params (which again
require url encoding)
All in all this should make the entire ember app url encode/decode safe.
In order to continue supporting the legacy ACL system, we replace
the 500 error from a non-existent `self` endpoint with a response of a
`null` `AccessorID` - which makes sense (a null AccessorID means old
API)
We then redirect the user to the old ACL pages which then gives a 403
if their token was wrong which then redirects them back to the login page.
Due to the multiple redirects and not wanting to test the validity of the token
before redirecting (thus calling the same API endpoint twice), it is not
straightforwards to turn the 'faked' response from the `self` endpoint
into an error (flash messages are 'lost' through multiple redirects).
In order to make this a slightly better experience, you can now return a
`false` during execution of an action requiring success/failure
feedback, this essentially skips the notification, so if the action is
'successful' but you don't want to show the notification, you can. This
resolves showing a successful notification when the `self` endpoint
response is faked. The last part of the puzzle is to make sure that the
global 403 catching error in the application Route also produces an
erroneous notification.
Please note this can only happen with a ui client using the new ACL
system when communicating with a cluster using the old ACL system, and
only when you enter the wrong token.
Lastly, further acceptance tests have been added around this
This commit also adds functionality to avoid any possible double
notification messages, to avoid UI overlapping
In some circumstances a consul 1.4 client could be running in an
un-upgraded 1.3 or lower cluster. Currently this gives a 500 error on
the new ACL token endpoint. Here we catch this specific 500 error/message
and set the users AccessorID to null. Elsewhere in the frontend we use
this fact (AccessorID being null) to decide whether to present the
legacy or the new ACL UI to the user.
Also:
- Re-adds in most of the old style ACL acceptance tests, now that we are keeping the old style UI
- Restricts code editors to HCL only mode for all `Rules` editing (legacy/'half legacy'/new style)
- Adds a [Stop using] button to the old style ACL rows so its possible to logout.
- Updates copy and documentation links for the upgrade notices
1. Unskip some trivial tests that were being tested higher up
2. Istanbul ignore some code for coverage.
1. Things that I didn't write and need to 100% follow
2. The source code checking test that has Istanbul code injected into
it
3. Add a few simple test cases
4. Support passing port numbers through to `ember serve` and `ember
test` for use cases that would benefit from being able to configure the
ports things are served over but still use `yarn run` thus reusing the
`yarn run` config in `package.json`
Repositories are a class of services to help with CRUD actions, most of
the functionality is reused across various Models. This creates a new
repository service that centralizes all this reused functionality.
Inheritance via ember `Service.extend` is used as opposed to
decorating via Mixins.
1. Move all repository services (and their tests) to a
services/repository folder
2. Standardize on a singular name format 'node vs nodes'
3. Create a new 'repository' service to centralize functionality. This
should be extended by 'repository' services
Essentially this was missing a call to `super`. The error unfortuantely
didn't arise in the tests as it only errors when the node list has 4
items are more (the 4 columns), and the acceptence tests by change were
only filling the page with 3 nodes for test purposes.
I've bumped the amount of nodes up to 4 in the tests, which then causes
the tests to fail, made the fix by adding the `super` call, and the
tests now pass.
I also tested the UI/text searching on a 10,000 node system, and
everything now works as expected.
1. The grid based unhealthy cards are now clamped to only four wide
maximum. This means that on larger screen the cards are much wider
meaning you can view more information. Grid gutters are also clamped at
a certain ideal width screen, remaining responsive for anything below
this.
2. The healthy node columns are finally responsive following the same
column rules as unhealthy nodes
Upgrade all patch and minor upgradeable packages, also uses `only`
in ember-cli-build to reduce the included helpers from certain helper
packages.
Make some major version upgrades for some dev tools
- husky
- lint-staged
- ember-cli-yadda
- ember-cli-sass (also moved from node-sass to dart-sass)
Minor tweak: spotted css file (instead of scss file), rename
The move to `dart-sass`:
dart-sass has been the primary implementation of sass for ~6 months and
will receive updates earlier than libsass (ruby-sass itself is now deprecated)
Other benefits include not having to recompile (via `npm rebuild` or similar)
when switching platforms and an 'almost' javascript based solution.
This update also alters some media queries that, whilst wouldn't compile
anymore with either an updated libsass or dart-sass, where probably a
little over complicated anyway, I've therefore made them similar to
other breakpoints that made sense.
Various ember addons produced deprecation messages, some in the browser
console and some in terminal. Upgrading and replacing some of these has
reduced this.
Upgrades:
- ember-collection
- ember-computed-style
Replacements:
- ember-pluralize replaced with ember-inflector
- ember-cli-format-number replaced with custom helper using standard
`toLocaleString`
Removing ember-cli-format-number also meant some further changes related
to decimal places in the tomography graph, done using `toFixed`
The ExternalSources background-images have also now been escaped
correctly preventing in-development `console` warnings.
The only deprecation warnings are now from ember-block-slots, only in
terminal, making for a better development experience overall, especially now we
have an empty browser console
Also adds a `callIfType` 'helper util' which is a util specifically for helpers (it conforms to a helper argument signature) to be expanded upon later.
1. The 'Services' header need to be knocked ot the right slightly to line
up properly with the service name when there are no external source
icons.
2. Add a single space between ServiceName and ServiceID on the Node >
[Services] tab table.
* Move almost everything to use %frames
* Fix pill styles of ACL types
* Remove horizontal scrollbars from dom recycling scroller component
* Make text areas look ok in Firefox
* Remove ember-bulma-css
* New form elements, break out %toggle
* %button design tweaks
* %form-element design tweaks
* Better hashicorp logo
* Small screen CSS improvements (#4624)
1. Reduce header size when there are no breadcrumbs
2. Make the filters toggleable, closed by default
3. Reduce the size of the footer on small screens
4. Hide all non-primary columns for forms
5. Slightly change the layout of various items, mainly buttons within
forms
6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small
screens
Sets the code toggle on the KV edit/create page to be on by default, we figured most people probably prefer this view.
Also, previously we forced the KV toggle back to a default setting for every
time you visited a KV form page. We've now changed this so that the KV code
toggle button acts as a 'global' toggle. So whatever you set it as will
be the same for every KV for the lifetime of your 'ember session'
If we are to keep this, then consider saving this into localStorage
settings or similar, added some thoughts in comments re: this as it's very likely
to happen.
The error notification was being shown on creation of an intention. This
was as a result of #4572 and/or #4572 and has not been included in a
release.
This includes a fix, plus tests to try to prevent any further regression.
1. Addition of external source icons for services marked as such.
2. New %with-tooltip css component (wip)
3. New 'no healthcheck' icon as external sources might not have
healthchecks, also minus icon on node cards in the service detail view
4. If a service doesn't have healthchecks, we use the [Services] tabs as the
default instead of the [Health Checks] tab in the Service detail page.
5. `css-var` helper. The idea here is that it will eventually be
replaced with pure css custom properties instead of having to use JS. It
would be nice to be able to build the css variables into the JS at build
time (you'd probably still want to specify in config which variables you
wanted available in JS), but that's possible future work.
Lastly there is probably a tiny bit more testing edits here than usual,
I noticed that there was an area where the dynamic mocking wasn't
happening, it was just using the mocks from consul-api-double, the mocks
I was 'dynamically' setting happened to be the same as the ones in
consul-api-double. I've fixed this here also but it wasn't effecting
anything until actually made certain values dynamic.
When adding an auto resizing (heightwise) code editor, the
ivy-codemirror plugin seems to do this using more nested divs. This div
had a horizontal scroller but couldn't be seen on some platforms (with
hidden scrollbars). This commit makes the code editor slightly more
usable and more visually correct by removing the scroll bar in this div
to stop producing the 'split view look', yet keeping the horizontal
scroller at the bottom of the code editor for when you enter code that
is wider than the area. A max-width has also been added here to prevent
the text area from growing off the side of the page.
Another improvement to the code editor here is the addition of a nicer
color for hightlighting text selection so its at least visible.
Lastly, there was a way you could get the bottom horizontal scrollbar to overlay
the code in the editor. This makes sure there is always some space at
the bottom of the editor to make sure the code won't be obscured
1. The previously used TextEncoder/Decoder (used as a polyfill for
browsers that don't have a native version) didn't expose an encoder via
CommonJS. Use a different polyfill that exposes both a decoder and an
encoder.
2. The feature detection itself was flawed. This does a less error prone
detection that ensures native encoding/decoding where available and polyfilled
encoding/decoding where not available.
* Move notification texts to a slightly different layer (#4572)
* Further Simplify/refactor the actions/notification layer (#4573)
1. Move the 'with-feedback' actions to a 'with-blocking-action' mixin
which better describes what it does
2. Additional set of unit tests almost over the entire layer to prove
things work/add confidence for further changes
The multiple 'with-action' mixins used for every 'index/edit' combo are
now reduced down to only contain the functionality related to their
specific routes, i.e. where to redirect.
The actual functionality to block and carry out the action and then
notify are 'almost' split out so that their respective classes/objects do
one thing and one thing 'well'.
Mixins are chosen for the moment as the decoration approach used by
mixins feels better than multiple levels of inheritence, but I would
like to take this fuether in the future to a 'compositional' based
approach.
There is still possible further work to be done here, but I'm a lot
happier now this is reduced down into separate parts.
* Begin refactoring CSS into component folders. Moved most
components into layout/skin folders, left out a couple of ones I want
to think about more.
* Adjust grays based on recent Structure changes
* Switch to fullscreen layout for lists and detail, left aligned forms (#4435)
* Specifically use the 'actions_close' label, not just the :last-child (actions-group)
* Replace some non-var-ed colours in vaults code skin, plus prefixing (black and white)
John Cowen