Commit Graph

84 Commits

Author SHA1 Message Date
John Cowen d2b1698c0d ui: Improvements to modal-dialog (#5585)
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
2019-05-01 18:22:30 +00:00
John Cowen efb4341087 ui: Adds uid to tabular-details for/id's used in toggling for uniqueness (#5584) 2019-05-01 18:22:29 +00:00
John Cowen acfe17e552 ui: Remove index.html from the docs URL so we just point to `/docs` (#5547) 2019-05-01 18:22:25 +00:00
John Cowen 006b6000a8 UI: Add support for blocking queries on the service instance detail page (#5487)
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
2019-05-01 18:22:23 +00:00
John Cowen 1625a09372 ui: Adds blocking query support to the service detail page (#5479)
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.
2019-05-01 18:22:22 +00:00
John Cowen f1c8db1447 UI: Amends blocking queries text and toggle component in settings (#5467) 2019-05-01 18:22:20 +00:00
John Cowen e615d9f7eb ui: Add proxy icons to proxy services and instances where appropriate (#5463) 2019-05-01 18:22:19 +00:00
John Cowen b5b32c10c4 ui: Fix erroneous HTML that was being fixed by either browser/ember (#5530)
The resulting DOM from this template was actually correct, we'd assume
it was being fixed by the browser
2019-05-01 18:22:17 +00:00
John Cowen 75d8abd562 UI: Add forking based on service instance id existence (#5392)
* 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
2019-05-01 18:22:15 +00:00
John Cowen b1d5409d1c UI: Service Numbers (#5348)
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
2019-05-01 18:22:11 +00:00
John Cowen e0326c3b0a UI: Service Instances (#5326)
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
2019-05-01 18:22:10 +00:00
John Cowen da36c2a0f9 UI: Add EventSource ready for implementing blocking queries (#5070)
- 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)
2019-05-01 18:22:06 +00:00
John Cowen 3d5072cd2d ui: Correctly rebase own token/no delete change 2019-05-01 18:22:03 +00:00
John Cowen d49cf9d3c4 ui: Adds warning flash messages (yellow with warning icon) (#5033) 2019-05-01 18:21:52 +00:00
John Cowen 93ebf086e0 UI: Use buttons instead of anchors where appropriate (#4939)
Use buttons instead of anchors where appropriate
2019-05-01 18:21:45 +00:00
John Cowen 5049780134 ui: Move intention source/destination menus use text from the template (#4938) 2019-05-01 18:21:44 +00:00
John Cowen 5eed6dcef6 UI: Move legacy ACLs, KVs and Intentions to use `form` functionality (#4936)
Change legacy acls, kvs and intentions to use `form`s
2019-05-01 18:21:43 +00:00
John Cowen d6fd3f799c UI: Move legacy ACLs to use the new searchables/changeable-sets (#4933) 2019-05-01 18:21:42 +00:00
John Cowen 74390f2d24 ui: Async Search (#4859)
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
2019-05-01 18:21:34 +00:00
John Cowen 7d76fea123
ui: Removes delete button form pages that show your current token (#5241)
Tokens can no longer delete themselves see:

https://github.com/hashicorp/consul/pull/5210

...so we remove the button to allow you to do that from the UI
2019-01-23 13:51:36 +00:00
John Cowen 6ec6530e03
UI: [BUGFIX] Decode/encode urls (#5206)
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.
2019-01-23 13:46:59 +00:00
John Cowen 5eb5065f70
UI: Text change and clarity Node Health > Health Checks (#5115)
Text change Node Health > Health Checks
Also adds an info icon and tooltip to Health Checks column header
2019-01-17 09:20:00 +00:00
Jihoon Chung 788bf610ae ui: Fix typo in acl-migration guide link (#5135) 2019-01-17 09:03:23 +00:00
John Cowen 77ad621c04
ui: If a service has no external-source, don't show the icon (#4996) 2018-11-26 17:34:00 +00:00
John Cowen d1b3a63b2f
UI: Catch 500 error on token endpoint and revert to legacy tokens (#4874)
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
2018-11-02 14:44:36 +00:00
John Cowen 42919e91bb
ui: Adds multi syntax linting to the code editor (#4814) 2018-10-19 17:36:38 +01:00
John Cowen 52a62f2b8d UI: New ACLs (#4789)
UI to accompany the new ACLs APIs
2018-10-19 08:45:05 -07:00
John Cowen ef891a23b5
ui: Improve layout of node cards on large and small screens (#4761)
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
2018-10-11 10:19:06 +01:00
John Cowen cc41c86f30
UI: Reduce in-development deprecations (also use toLocaleString) (#4677)
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.
2018-10-01 13:42:42 +01:00
John Cowen 6c35480053
ui: Layout fix. Small padding additions to tables (#4701)
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.
2018-09-21 11:14:38 +01:00
John Cowen df40c77e0e
UI: Tooltips and feedback-dialogs are the same thing - merge (#4678) 2018-09-21 11:13:21 +01:00
John Cowen 577dbef70a
UI: CSS Additions (mainly %frames) (#4623)
* 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
2018-09-21 10:18:32 +01:00
John Cowen ab568f6b94
ui: Adds a `default` view helper for providing a default value (#4650)
If the first value passed to the helper is an empty string or undefined
then return the second value
2018-09-12 20:38:57 +01:00
John Cowen b279f23372
UI: External Source markers (#4640)
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.
2018-09-12 20:23:39 +01:00
John Cowen b1d83f98b0
UI: Bugfix. Remove split view code editor (#4615)
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
2018-09-12 20:18:12 +01:00
John Cowen 8d9285b294
UI: Bugfix. Fix code toggle in Safari (#4608)
I'd mistakenly changed the checkbox event to listen to oninput, which
works in Chrome and Firefox. Changed this back to onchange as it should
be.
2018-08-30 10:02:26 +01:00
John Cowen d1fea9ec0a
UI: Simplify/refactor the actions/notification layer (#4572) + (#4573)
* 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.
2018-08-29 19:14:31 +01:00
John Cowen accdefd18e
UI: Begin unskipping some more trivial tests (#4574)
WIP Unskip some lower level trivial tests.

This is the beginning of work to unskip some of the more trivial tests that I'd skipped a while back (if the thing they are testing broke, they would have failed higher up in other acceptance tests).

I'd rather keep the tests, as they do test things in a more isolated manner, and the plan was to always come back and work to unskip them time allowing.

I didn't get to far into this work in progress here, but I'd rather merge what I've done all the same and come back at a later date and continue.
2018-08-29 09:59:02 +01:00
John Cowen 7a41c40dbc Show the Service.IP address instead of the Node.IP address in detail 2018-07-18 13:37:14 +01:00
John Cowen 2e2e942f3f Show Service.ID's throughout the app, allow searching by Service.ID
1. In the Services > Services detail page for both healthy and unhealthy
nodes, also add searching by Service.ID here
2. In the Nodes > Node detail > [Services] tab only if its different
from the Service name, add searching by Service.ID here
2018-07-12 13:36:47 +01:00
John Cowen d147e297e2 Add some navigation testing for back buttons and create buttons 2018-07-04 17:23:33 +01:00
John Cowen da246e972d Acceptance test for using tokens from listing and detail pages 2018-07-04 16:37:41 +01:00
John Cowen ea43f04c8e Move deleting to a top level feature 2018-07-04 15:58:09 +01:00
John Cowen b7c806a061 Start purifying page objects 2018-07-04 15:06:20 +01:00
John Cowen 75cb5f695e Lock Session invalidation acceptance test 2018-07-04 13:41:44 +01:00
John Cowen 87ecae2c39 Add some low hanging intention tests, basically add intentions to others
1. There are various things tests that can just have intentions added
into them, like filters and such like, add intentions to these
2. Start thinking about being able to negate steps easily, which will
lead on to a cleanup of the steps
2018-07-04 13:21:30 +01:00
John Cowen e029b92b3f Use html5 oninput instead of onkeyup for native textual inputs
This enables people to enter things using the mouse to paste for
example, plus possible other things.

As an aside it also answers my query regarding `fillIn` for testing,
nothing needs to be actually _typed_ anymore! Doh
2018-07-03 15:40:15 +01:00
mkeeler 1da3c42867 Merge remote-tracking branch 'connect/f-connect' 2018-06-25 19:42:51 +00:00
John Cowen cb11361511 Change the appearance of `*` for intention listings
1. Use 'All Services (*)' as opposed to '*'
2. Set 'Destination' in teh same bold font as 'Source'
3. Ensure you can search for all services by using '*' or 'All Services
(*)'
2018-06-25 12:26:18 -07:00
John Cowen 2f56c6e1be Fix linting typo, caused the selection of future services to break 2018-06-25 12:25:40 -07:00