Commit Graph

359 Commits (2adfb42bdebede712e97568032c73a6031304e86)

Author SHA1 Message Date
John Cowen 5e98ef3f51 ui: Add Ref component (#7442)
* ui: Add Ref component
2020-05-12 17:14:16 +00:00
John Cowen 8986b6ad7b ui: Move to new ember nested file structure for components (#7403)
* 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>
2020-05-12 17:14:15 +00:00
Kenia 69598b6803 ui: Update the shadows for radio buttons and the cards (#7391)
* Update box-shadowing for cards and radio buttons to low
* Update box-shadowing for hover cards to middle
* Create a new box-shadow CSS variable for form elements
2020-05-12 17:14:14 +00:00
John Cowen 2ad0f652e7 ui: Install ref modifier and use it instead of dom selecting (#7383) 2020-05-12 17:14:14 +00:00
John Cowen bda515abe9 ui: Remove settings.findHeaders now we can use promises in our adapters (#7375)
Previously the API around setting headers wasn't within a Promised like
code path, so we needed a little 'cheat' function to get a token from
localStorage syncronously.

Since we refactored our adapter layer, we now have a Promised codepath
where we need to access this localStorage value and set our headers.
This means we can remove our little 'cheat' function.
2020-05-12 17:14:13 +00:00
Kenia f0ce300204 ui: Delete the Promise rsvp imports from codebase (#7372) 2020-05-12 17:14:12 +00:00
John Cowen a8de3f3081 ui: Split out product css component into its separate elements (#7342)
* Remove old %action-group

* Remove old variables we no longer need

* Use the discovery-chain component in the same manner as others

* Split `product` out into its separate components
2020-05-12 17:14:11 +00:00
John Cowen 2f28232df0 ui: Upgrade to ember 3.16 Octane Edition (#7334)
* 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
2020-05-12 17:14:10 +00:00
Kenia 397757ae62 ui: Create CSS variables for box-shadowing consistency (#7337)
* Table - Lowest (on-hover of table items)
* Buttons - Middle
* Form-elements - Removed, no box-shadowing in input forms mocks.
* Menu-panel -High
* Modal-dialog - Highest
* Stats-card -Middle/High(Active)
* Tooltip - Middle
* Card - Middle
* Expanded-single-select - Middle
* Tabular-details - High
* Discovery chain - High
2020-05-12 17:14:09 +00:00
Kenia 191496e4a5 ui: Create a helper to show the last 8 characters of token Accessor ID (#7327)
* Create substr helper
* Create a test for the new substr helper
* Display the last 8 characters of token Accessor ID in the Token lists page
2020-05-12 17:14:07 +00:00
Kenia 95031f9f90 ui: Add box-shadow to table items on hover 2020-05-12 17:14:06 +00:00
John Cowen aea3d00a9d ui: Move to angle brackets for ember components (#7321)
* 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>
2020-05-12 17:14:05 +00:00
John Cowen 8e5cb78c1c ui: Add new Help menu with links to docs, learn and GH (#7310) 2020-05-12 17:14:03 +00:00
John Cowen f306c753e2 ui: HTTP Body testing (#7290)
* 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])
2020-05-12 17:14:02 +00:00
John Cowen 1a7a1fb4f1 Upgrade to use structure-icons 1.8 (plus additional mask placeholders) (#7287) 2020-05-12 17:13:58 +00:00
John Cowen e9ed49d9aa ui: Test coverage developer experience (#7275)
* ui: Add getSplitters unit test and additional getResolvers test

* Make ordering of makefile target consistent
2020-05-12 17:13:57 +00:00
John Cowen 771973a713 ui: Add consul-service-list presentational component (#7279)
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
2020-05-12 17:13:56 +00:00
John Cowen 7dc5201676 ui: Remove `next` from usage from discovery-chain component (#7273)
In a previous iteration of discovery-chain wrapping some event listeners
in a call to `next` (i.e. do this on next tick) was necessary. We added
a comment in here to see if we could get rid of it at a later date.

We've taken another look at this and it looks like this `next` is no
longer required in this later iteration. Further more there is the
tiniest chance that possibly, as we are adding listeners on next tick, that the
listeners could be added after component destruction, which means when
you click on the page we try to set a property of a destroyed object and
boom.

Removing this `next` removes this tiny possibility.
2020-05-12 17:13:55 +00:00
John Cowen b6915793d0 ui: Remove custom css-vars 'polyfill' and use native CSS props (#7249)
* 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.
2020-05-12 17:13:54 +00:00
John Cowen 7bca634087 ui: Slight refactor 'name deciding' for `request` > `rpc` (#6850)
During the refactor of the data layer we had a method that you can use
to do a request/response call i.e. adapter.request > serializer.respond

We weren't sure what to name this but eventually wanted it to live on
the HTTPAdapter itself (see removed comments in the changeset)

We've decided `rpc` is a good name and we've moved this to where we want
it. We've deprecated the old `request` method name but not removed it as
yet. There's also opportunity now to reduce the 'read/write' functions
further as they essentially do the same thing. Again we've left this for
the moment, but we are hoping to get the code for our custom Adapter down
to less than 100 LoC.
2020-05-12 17:13:50 +00:00
John Cowen 604de8758b
ui: Fix using 'ui-like' KVs when using an empty default nspace (#7734)
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.
2020-04-30 09:28:20 +01:00
John Cowen 04a8a77365
ui: Lazily detect HTTP protocol (#7644)
This commit includes 2 things:

1. Sometimes (seemingly due to client caching), performance entries
aren't available, even for the currently executing script. This waits
until the first retrieval of 'CONSUL_HTTP_PROTOCOL' before using the
performance entries to decide this. This means that the entries aren't
inspected until ember has initialized, which means that the entries are
always available.

2. getCurrentResource/getResourceFor could potentially return undefined
if the correct entry could not be found. This adds a default {} return
value if the resource cannot be found. This means that if for whatever
reason the correct resource cannot be found at least we don't fail with
an error and just drop back to HTTP/1 functionality.
2020-04-15 14:42:55 +01:00
John Cowen 8d4631526c
ui: Fix token duplication bug (#7552)
We need to detect whether an object is an ember-data snapshot or just a
plain object, and we where restricted from using `instanceof` due to
ember-data's `Snapshot` class being private.

We'd chosen to go with `constructor.name` instead, which seemed to work,
but when the javascript gets minifed the name of the contructor is also
minified and therefore is not what you are expecting.

This commit reverts to our original idea of checking for the existence
and type of the `.attributes` function, which is the function we require
within the conditional, and therefore is more reliable (if the function
doesn't exist it will error out during development aswell as production)
2020-04-01 09:55:20 +01:00
John Cowen 6ffe0e6fe4
ui: Use the `each key=""` parameter to force ember to reuse DOM (#7550)
Ember tries to reuse DOM elements when it can but as ember looks for
changes to objects rather than the DOM itself sometimes. This and the
fact that an objects identity may change even though its value hasn't,
results in ember occasionally re-mutating DOM when it doesn't need to.

The `each` helper includes a `key` attribute to hint to ember what it
should look for when deciding whether something has changed, rather than
the objects identity.

https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/each#specifying-keys

We use this here to fix an issue where DOM was being redrawn after the
user had scrolled the page and was therefore resetting the scroll back
to 0 (the top of the page)
2020-03-31 14:58:59 +01:00
John Cowen 31b9b90bc3
ui: Ensure blocking query configuration is passed through to findInstanceBySlug (#7543)
* 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
2020-03-30 15:23:06 +01:00
John Cowen 5f625666b4
ui: Enable recovery from an unreachable datacenter (500 error) (#7404)
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
2020-03-09 09:10:47 +00:00
John Cowen 6074a1b4c8
ui: Coordinates don't require a nspace, so don't expect one in the repo (#7378)
* ui: Coordinates don't require a nspace, so don't expect one in the repo

* Add a test to prove the correct number of arguments are being passed
2020-03-04 18:12:47 +00:00
John Cowen 468e82dcf9
ui: Alter position of logic for showing the Round Trip Time tab to prevent DOM refresh (#7377)
* ui: Move tomography length check inside of the partial

Previously we checked the length of tomography.distances to decide
whether to show the RTT tab or not. Previous to our ember upgrade this
would not cause a DOM reload of so many elements (i.e. all of the tab
content). Since our ember upgrade, any change to tomography (so not
necessarily the length of distances) seems to fire a change to the length (even if
the length remains the same). The knock on effect of this is that the
array of tab panels seems to be recalculated (but remain the same) and
all of the tab panels are completely re-rendered, causing the scroll of
the page to be reset.

This commit moves the check for tomography.distance.length to the lower
down with the loop, which means the array of tab panels always remains
the same, which consequently means that the entire array of tab panels
is never re-rendered entirely, and therefore fixes the issue.
2020-03-04 18:12:27 +00:00
John Cowen 74ade640e3
ui: Use WithEventSource mixin on intentions to ensure cleanup (#7333)
The WithEventSource mixin has a reset method when the Controller is
exited which will close any open EventSources/Blocking queries.

This adds it in for intentions
2020-02-21 14:00:33 +00:00
John Cowen e85fd18f89
ui: Be more specific with the display toggling checkboxes (#7309) 2020-02-18 17:05:45 +00:00
John Cowen b83c190f0c
ui: Use options.method for keying not options.type (#7308) 2020-02-18 14:03:27 +00:00
John Cowen 65dd14daf3
ui: Gracefully cope with 500 errors from the disco-chain API endpoint (#7291)
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
2020-02-14 14:46:16 +00:00
John Cowen ebc574c509
ui: oss don't ever POST/PUT Namespaces when writing data (#7238)
* 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
2020-02-07 15:50:50 +00:00
John Cowen eb35d89893
ui: Run 2 separate test runs oss and ent (#7214)
* 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
2020-02-07 11:02:53 +00:00
John Cowen 9e186c7af8
ui: Fix for differences between uncompiled and compiled CSS (#7233)
We noticed that this relative positioning is not even applied when the CSS is
compiled/compressed. When looking via Web Inspector this style/selector
doesn't even appear even though it is in the CSS source.

This !important reduces the amount of selectors for this style rule,
which fixes the error, so potentially this isn't a specificity thing.
2020-02-06 20:13:13 +00:00
John Cowen ad3b5327d2
ui: Discovery chain improvements (#7222)
* ui: remove the default word when describing routes

* ui: Avoid mutating the chain and look for the default edges more safely

* ui: Use not null check instead of a truthy check for showing disco-chain

* ui: Upgrade consul-api-double for better disco-chain mocks/fixtures
2020-02-06 12:06:47 +00:00
John Cowen 279cd874cc
ui: Ensure KV flags are passed through to Consul on update (#7216)
* 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
2020-02-05 09:37:45 +00:00
Kenia 773b092a64
ui: Add ability to search nodes listing page with IP Address (#7204)
* 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
2020-02-04 10:45:25 -05:00
Kenia c706089c9f
ui: Hides the Routing tab for a service proxy (#7195)
* 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
2020-02-03 10:09:15 -05:00
Kenia b9e023dfe1
ui: Adds an acceptance test for hiding Blocking Queries (#7162)
* 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>
2020-01-31 10:12:22 -05:00
John Cowen f45880bffe
ui: Fix sticky nspace menu (#7164)
* 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
2020-01-31 14:11:46 +00:00
John Cowen a8504802db
ui: Split splitter names in the discovery-chain (#7180)
Previous to 1.7 splitter names didn't include the namespace name

i.e. 'service-name'

as of 1.7 they now include the namespace

i.e. 'service-name.namespace'

This commit take account of that
2020-01-30 19:08:45 +00:00
John Cowen 3eec5edadf
ui: Discovery-Chain: Cope with some edge case configs (#7174)
* 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
2020-01-30 16:09:05 +00:00
John Cowen ac60338269
ui: Add live updates/blocking queries to the Intention listing page (#7161)
* 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'
2020-01-29 16:22:31 +00:00
John Cowen d47f1ca2a9
ui: Fix wrapping service ids in the Node Detail > Services tab (#7149) 2020-01-28 14:43:32 +00:00
John Cowen c6e72c3e46
ui: Fix positioning of active icon in the selected menu item (#7148) 2020-01-28 14:42:20 +00:00
Kenia ff315c95fd
ui: Implements the ember-page-title addon to the UI (#7118)
* Installs ember-page-title 5.x

* Adds a page title to all template files that need one

* Adds an assertion step to test the page titles
2020-01-28 09:25:52 -05:00
John Cowen 1ff8678df7
ui: Remove the Policy/Service Identity selector from nspaces (#7124)
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
2020-01-28 09:39:09 +00:00
John Cowen 327aac9fe9
ui: Acceptance test improvements to prepare for more NS tests (#6980)
* 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
2020-01-24 12:26:28 +00:00
Kenia b836a772fc
ui: Checks env CONSUL_UI_DISABLE_REALTIME to show/hide blocking queries toggle (#7099)
Adds a conditional that checks env CONSUL_UI_DISABLE_REALTIME to show/hide the Blocking Queries toggle in the Settings page.
2020-01-22 09:19:01 -05:00
John Cowen afafe677a3
ui: New Confirmation Dialogs (#7007)
* 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.
2020-01-22 12:08:29 +00:00
John Cowen a65d941e76
ui: Improve configuration/env/feature flag usage (also add build time year detection) (#7072)
* Add new getEnvironment util/function

* Use new-ish `env` function in all the places

* Clean up ember env file, add year detection from commit date
2020-01-21 17:52:40 +00:00
John Cowen ac613993bb
ui: Keyboard navigation improvements (#7090)
* ui: Improve keyboard access for some custom components

* ui: Add some accessibility related metadata
2020-01-20 14:15:15 +00:00
John Cowen e15d1466aa
ui: Discovery Chain Improvements (#7036)
* 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
2020-01-16 16:31:09 +00:00
John Cowen 13eb536e24
ui: Use structure-icons as much as possible (#6851)
* ui: Delete a bunch of CSS that we recently moved elsewhere

* ui: Add some masking placeholders

* Switch out hashicorp logo for one from structure-icons

* Change copy-button to use new copy-action icon

* Change secret-button to use new visibility-hide/show icons

* New folder icon for KVs

* Cleanup some of the icons we no longer use

* Switch from %with-exit to standard-like %with-exit-icon

* Move all chevrons to use structure-icons properly

* Use star-fill as much as possible

* Remove the remaining icons from icons/index plus the file itself
2020-01-16 09:10:32 +00:00
John Cowen 06d09d11f1
ui: Move slots to use attributes over positional params (#7032)
* Change all instances of yield/block-slots to use attributes over positional arguments

* Remove the ability to use yield/block-slots with positional params
2020-01-15 09:15:54 +00:00
John Cowen 99fae9d65a
ui: Make sure that the namespace is passed when changing a token via [Use] (#6973)
* Pass the namespace parameter through to the repo when using a token
* Refresh the namespace menu when somebody [Use]s a token
2019-12-20 14:57:10 +00:00
John Cowen 18bafaec35
ui: Cope with the possibility of receiving no namespaces (#6975) 2019-12-20 14:56:18 +00:00
John Cowen b2c0c08e08
Ensure ember-data ids are created correct taking into account the nspace (#6974) 2019-12-20 14:30:19 +00:00
John Cowen 36728b961f
ui: Various amends for 1.7beta (#6965)
* Remove empty init

* Actually make the disco chain endpoint send the nspace, note:

The backend doesn't support this as yet.

* Tweak the font size of flash-messages ever so slightly

* Make sure the nspace menu is kept up to date when creating a new one

* Move comment to the correct place

* Only refresh the namespace menu if you specifically created a nspace

* Change FIXMEs to TODOs as we are happy for these to wait until later
2019-12-18 18:27:54 +00:00
John Cowen aa680d5f0c ui: Discovery Chain (#6746)
* 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
2019-12-18 12:26:47 +00:00
John Cowen 7044aa52c8 ui: Namespace Support (#6639)
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
2019-12-18 12:26:47 +00:00
John Cowen f06c3adca5 ui: %form-element-textarea > %form-area-textinput typo (#6952) 2019-12-18 12:26:46 +00:00
John Cowen 74e2b95535 ui: Fixes styling of 'duplicate intention' error message (#6936) 2019-12-18 12:26:46 +00:00
John Cowen ab461f6603 ui: Remove `writable` usage from policy and use the request instead (#6934) 2019-12-18 12:26:45 +00:00
John Cowen 520eb41393 ui: Use base fonts throughout the app (#6881)
We've had a set of %placeholders in our base styles for quite a while
but not butten the bullet to use them. This begins to use them.

We had to make a small amount of tweaks to base whilst doing this, but
its as we'd prefer there to be as few font placeholders as possible. We
might/should be able to reduce these further at somepoint, or
potentially rename them. We currently have six header fonts (or 4 header
fonts/2 strong body fonts) and 3 body fonts.

We also noticed an empty CSS file and deleted that while we were here.
We also noticed that the bottom border of structure tabs was a pixel
larger than ours so we tweaked that here also.
2019-12-18 12:26:45 +00:00
John Cowen 7f2a1e8a54 ui: Remove some javascript files we no longer use (#6853) 2019-12-18 12:26:44 +00:00
John Cowen 8017b5ab6e ui: Ensure %app-content > %app-view-content rename is complete (#6843)
In https://github.com/hashicorp/consul/pull/6575 we changed the name of
%app-content to %app-view-content, but missed a few places that needed
renaming, this corrects that.
2019-12-18 12:26:44 +00:00
John Cowen e6ecb47765 ui: Expose checks (#6575)
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)
2019-12-18 12:26:43 +00:00
John Cowen 5a2fc5bffb ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495)
This includes an update of our CSS npm module. The majority of this is
just moving files from one folder to another.

1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs
2. %checkbox-group: Moved
3. %radio-group: Moved
4. %sliding-toggle: Moved (used to be called just %toggle)
5. %form-elements: Moved and added a new %inline-alert for form field
messaging (see Structure design system)
6. %action-group is now a composition of %menu-panel, %toggle-button,
plus edits to existing style to bring the %action-groups inline with the
dropdowns from Structure). %action-group also includes a composed
%confirmation-alert that is yet to be include. This will be compiled out
until we integrate it.

We've also removed some of our old icon placeholders as the above
work seased to use some of them.

Now we done this I'd say all in all over half of our CSS components now
use the CSS npm module.

The CSS specific to Consul UI also uses much of this CSS module by way
of helper placeholders such as our %frames.
2019-12-18 12:26:43 +00:00
John Cowen 28239e70d9 ui: Add missed calls to `_super` (#6595) 2019-12-18 12:26:41 +00:00
John Cowen 1678014132 ui: Remove `$radius-small` in favour of the `$decor-*` ones in `base` (#6605) 2019-12-18 12:26:40 +00:00
John Cowen 5a88d4ebe1
ui: Explicitly remove properties that shouldn't be sent when saving (#6917) 2019-12-10 15:47:02 +00:00
John Cowen f691a29240
Ensure AbortErrors have a zero status (#6839) 2019-12-10 12:02:45 +00:00
John Cowen b3b32dc0f6
ui: UI Release Merge (ui-staging merge) (#6527)
## 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
2019-09-30 14:47:49 +01:00
Dmitry Shemin 90d945590a ui: [bugfix] Tag wrapping on detail pages (#6478)
Makes sure that tags wrap on the detail pages for service and nodes whilst making sure they don't wrap on the listing pages.
2019-09-17 17:29:04 +01:00
John Cowen 20984e2a73
ui: re-remove the `Type` header on the service listing page (#6439)
The `Type` column used for giving details on what type of a service each
item is was removed in https://github.com/hashicorp/consul/pull/6075.

As a result of keeping long running branches in sync, this change was
partly reverted in an earlier PR (the type header was re-added)
https://github.com/hashicorp/consul/pull/5913 following a rebase.

This commit re-removes the `Type` table header (the `<th>`)
2019-09-04 11:45:13 +01:00
John Cowen 2369c47033 ui: Adds a `sort-control` component for asc/desc sorting of columns etc (#6034)
This adds the component but doesn't yet use it anywhere. No tests
are added here as there isn't an awful lot to test.
2019-09-04 08:35:16 +00:00
John Cowen 24847b169e ui: Leader icon for node listing view (#6265)
- 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
2019-09-04 08:35:16 +00:00
John Cowen ceebd53b81 ui: fix/replace magnifier icon (#6308) 2019-09-04 08:35:15 +00:00
John Cowen 44c2da3518 ui: add some additional env level URLs for easier linking (#6145)
Right now we only use CONSUL_DOCS_URL, the others are for future usage
2019-09-04 08:35:14 +00:00
John Cowen 5debc74fa2 ui: Enable blocking queries by default (#6194)
-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
2019-09-04 08:35:14 +00:00
John Cowen e636a72ffd ui: [Bugfix] - Sticky KV Sessions (#6166)
Initialize session value to `null` to prevent stickiness from a session the previous KV
2019-09-04 08:35:13 +00:00
John Cowen a263bff6b9 ui: Change layout styling for healthcheckoutput, add CheckID (#6195) 2019-09-04 08:35:12 +00:00
John Cowen dd91ce33d6 ui: Show the correct message when a session has been removed from a KV (#6167) 2019-09-04 08:35:11 +00:00
John Cowen d01ef7225a ui: Add `stats-card` component, integrate more `@hashicorp/structure-icons` (#6021)
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)
2019-09-04 08:35:11 +00:00
John Cowen 86208b4a70 ui: Add an additional 'more than 1 char' check for selection (#6022)
We'd rather 'play it safe' for our selection detection (which avoids
following links if you have some text selected). This commit adds an
additional check of 'more than 1 character' to the 'isSelected' check.
This is based on the fact that it's far quicker to type the character so
why would a user select on character? This therefore caters for any
fairly large (in the scheme of things) incidential mouse moves whilst
clicking a link.

Overall this is probably overkill
2019-09-04 08:35:10 +00:00
John Cowen 5c6fa1c458 ui: Be more exact with intent for table truncation (#6023)
Truncation should only happen currently on table content if the tag
within the td is the only child
2019-09-04 08:35:09 +00:00
John Cowen 876dd3b97d ui: Ensure event sources are closed to the correct state when connecting (#6036)
This fails the tests, but wouldn't produce an actual bug as the source
is still set to closing, just 1 tick later.
2019-09-04 08:35:08 +00:00
John Cowen 9efe2b2ced ui: removes `npm:` imports now we have standard importing (#6035) 2019-09-04 08:35:08 +00:00
John Cowen 62fa803d9f ui: {{phrase-editor}} amends (#5991)
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
2019-09-04 08:35:07 +00:00
John Cowen 6d8a706b4d ui: Adds the ability to frontend search instances by address (ip:port) (#5993) 2019-09-04 08:35:06 +00:00
John Cowen 01d1b3c139 ui: Small EventSource additions (#5978)
1. EventSources now pass themselves thorugh to the run function as a
second argument. This enables the use of arrow functions along with the
EventSources API
`(configuration, source) => source.close()`. Order of arguments could
potentially be switched at a later date.
2. BlockingEventSources now let you pass an 'event' through at
instantation time. If you do this, the event will immediately be dispatched
once the EventSource is opened. The usecase for this is for 'unfreezing' cached
BlockingEvents. This makes it easier to provide a cache for
BlockingEventSources by caching its data rather than the entire
BlockingEventSource itself.

```
new BlockingEventSource(
  (config, source) => { /* something */ },
  {
    cursor: 1024, // this would also come from a cache
    currentEvent: getFromSomeSortOfCache(eventSourceId) //this is the new bit
  }
);

// more realistically

new BlockingEventSource(
  (config, source) => { return data.findSomething(slug, config) },
  getFromSomeSortOfCache(eventSourceId)
);

```
2019-09-04 08:35:05 +00:00
John Cowen 32387fdbcf ui: Enable creating listeners using an object/hash (#5975)
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.
2019-09-04 08:35:04 +00:00
John Cowen 63a0582fa3 ui: Reduce mutation of html.classList (#5974)
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.
2019-09-04 08:35:03 +00:00
John Cowen 62e3c5605c ui: Change vocab of ReopenableEventSource from 'reopen' to 'open' (#5973)
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
2019-09-04 08:35:02 +00:00
John Cowen 06b6aff8d0 ui: CSS Components Migration (#5913)
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`
2019-09-04 08:35:01 +00:00
John Cowen 2b30667fc7 ui: Adds ember-auto-import and replaces the 3 places where we used npm: (#5952)
Also removes ember-browserify
2019-09-04 08:35:00 +00:00
John Cowen df0cf11a0f ui: Put some options in for event source runners (behind flags) (#5738) 2019-09-04 08:34:59 +00:00
John Cowen 82a2f206dc ui: Ensure an EventSource isn't opened if closed before first tick (#5703)
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
2019-09-04 08:34:59 +00:00