Commit Graph

97 Commits

Author SHA1 Message Date
John Cowen 5054d87a09
ui: Read-only CRD/Centralized Config Intentions (#8659) 2020-09-18 11:14:06 +01:00
John Cowen 31ad6e39ca
ui: Improved filtering and sorting (#8591) 2020-09-01 19:13:11 +01:00
John Cowen 1846e6316c
ui: Split ember-data service model into service/service-instance (#8557) 2020-08-26 15:24:30 +01:00
John Cowen 69ffd9ae01
ui: Add new Service.Mesh* properties for improved sorting (#8542)
* ui: Serialize proxies into the model, add Mesh* model props

Serializes the proxies associated with a service onto the Service model
itself, then adds various Mesh* properties

* ui: Uses the new Mesh* properties throughout the app
2020-08-21 08:53:22 +01:00
John Cowen a686de0414
ui: Add Optgroups and selectedItems to multiple select dropdown and use (#8476)
* ui: Switch selects to use more HTML-like approach for optgroups

* Add KV comparator

* Use new option/optgroup approach for sort/select

* Fix up tests for new order of menu items
2020-08-11 18:02:51 +01:00
John Cowen 5f3312a8ac
ui: Namespaces Redesign (#8336)
* ui: Add new consul-nspace-list component

* ui: Use new consul-nspace-list component

* Fix up other components to use linkable list-collection action

* ui: Remove some dead CSS
2020-07-20 18:12:34 +01:00
John Cowen 5d1ce1e120
ui: Move routes to use data-sources (#8321)
* Add uri identifiers to all data source things and make them the same

1. Add uri identitifer to data-source service
2. Make <EventSource /> and <DataSource /> as close as possible
3. Add extra `.closed` method to get a list of inactive/closed/closing
data-sources from elsewhere

* Make the connections cleanup the least worst connection when required

* Pass the uri/request id through all the things

* Better user erroring

* Make event sources close on error

* Allow <DataLoader /> data slot to be configurable

* Allow the <DataWriter /> removed state to be configurable

* Don't error if meta is undefined

* Stitch together all the repositories into the data-source/sink

* Use data.source over repositories

* Add missing  <EventSource /> components

* Fix up the views/templates

* Disable all the old route based blocking query things

* We still need the repo for the mixin for the moment

* Don't default to default, default != ''
2020-07-17 14:42:45 +01:00
John Cowen 0d35548519
ui: New Intention Form/List components (#8172) 2020-07-09 10:08:47 +01:00
John Cowen f0333138fe
ui: Use empty-state for our small empty states (#8262) 2020-07-08 14:34:57 +01:00
Blake Covarrubias 59b4a4d836 Update URLs for gateway docs
PRs #7610 and #7962 changed the locations/URLs for the gateway docs
which results in a HTTP 404 Not Found being returned when accessing
the previous URLs.

Update URLs for gateway docs to point to new URLs.

PR #8243 adds corresponding redirects on consul.io.
2020-07-06 11:34:22 -07:00
John Cowen 49ec61e523
ui: Remove WithEventSource mixin, use a component instead (#7953)
The WithEventSource mixin was responsible for catching EventSource
errors and cleaning up events sources then the user left a Controller.

As we are trying to avoid mixin usage, we moved this all to an
`EventSource` component, which can clean up when the component is
removed from the page, and also fires an onerror event.

Moving to a component firing an onerror event means we can also remove
all of our custom computed property work that we were using previously
to catch errors (thrown when a service etc. is removed)
2020-06-17 14:19:50 +01:00
John Cowen 7522bd5dab
ui: Token listing redesign (#8117) 2020-06-17 10:25:54 +01:00
John Cowen 62680891be
ui: Move healthcheck ordering to use new comparators (#8096) 2020-06-16 14:13:29 +01:00
Kenia 0d88c4ef67
ui: Add health check icon to Ingress Upstreams and add Tooltips in additional areas (#8091)
* Add Health Checks and update Tooltips in Ingress Upstreams

* Update Tooltip in Proxy Info tab Upstreams

* Add Tooltips to Proxy Info tab Exposed Paths

* Add Health Checks with Tooltips to Service List page
2020-06-12 09:35:52 -04:00
John Cowen 2838f7a2e9
ui: Reduce discovery-chain log errors (#8065)
* ui: Reduce discovery-chain log spam

Currently the only way that the UI can know whether connect is enabled
or not is whether we get 500 errors from certain endpoints.

One of these endpoints we already use, so aswell as recovering from a
500 error, we also remember that connect is disabled for the rest of the
page 'session' (so until the page is refreshed), and make no further
http requests to the endpoint for that specific datacenter.

This means that log spam is reduced to only 1 log per page refresh/dc
instead of 1 log per service navigation.

Longer term we'll need some way to dynamically discover whether connect
is enabled per datacenter without relying on something that will add
error logs to consul.
2020-06-10 16:07:06 +01:00
Kenia 328874ad4f
ui: Reorder items in the Proxy Info tab (#8061) 2020-06-09 11:36:04 -04:00
Kenia 0ea5250cf6
ui: Reorder the tabs for Ingress/Terminating Gateway Service Detail page (#8060) 2020-06-09 11:02:13 -04:00
John Cowen aafbfa167c
ui: ConsulKind explanatory tooltip panels (#8048)
* ui: Add tooltip panels to ConsulKind
2020-06-09 11:10:14 +01:00
John Cowen 7949410208 ui: Add ability to sort service based on health (#7989)
* ui: Add ability to sort service based on health

* ui: Move custom sorting to sort/comparator Service/Helper (like search)

This moves custom sorting to use the same pattern as custom searching.

* Remove old Controller based comparator
2020-06-03 16:46:57 +00:00
Kenia d295d976ce ui: Customize link for an Upstream in a different namespace as the ingress gateway (#8006)
* Add configuration default value for findGatewayBySlug

* Customize link for an Upstream in a different nspace as the ingress gateway
2020-06-03 16:46:56 +00:00
John Cowen b0f38fe899 ui: Add an Address copy button to the service instance page (#7977)
* ui: Add an Address copy button to the service instance page

* ui: Fallback to Node Address if no Service Address is configured
2020-06-03 16:46:54 +00:00
John Cowen 002797af82 ui: Remove WithSearching mixin, use helpers instead (#7961)
* ui: Remove WithSearching mixin, use composable helpers instead
2020-06-03 16:46:53 +00:00
Kenia d459bfd81c ui: Add blocking queries to gateways (#7967)
* Remove gateway endpoint adapter, model, and serializer and tests

* Update service tests to handle gateway-services-nodes

* Upgrade consul-api-double to 2.15.2

* Add a fairly temporary shouldReconcile method

Co-authored-by: John Cowen <jcowen@hashicorp.com>
2020-06-03 16:46:52 +00:00
John Cowen 94dd1849b4 ui: New Empty States (#7940)
* ui: CSS and component changes to the <EmptyState /> component

* ui: Reset the auth-form component back to its initial state

Moving forwards we are going to have the auth-form on the page all the
time, even when logged in (for relogging in purposes). This means the
auth-form will not always be removed from the DOM when you log in.

This sets the form back to its idle state before calling onsubmit

* ui: Make a public api for modal-dialog with a single close method

* ui : Move cache reset somewhere that makes more sense, + single refresh

1. Centralize cache resetting elsewhere, for now the store makes most
sense, although I would prefer the Repository class, so using the store
is temporary
2. We only need to refresh on login once, unless we have a differing
nspace

* ui: Ensure visibilitychange events are cleaned up

* ui: Only cache DataSource data if we have any, + only clear the cache

* ui: Add the modal login dialog to both unauth and auth views

This means we can 'relogin' when already logged in

* ui: Add new empty states

* ui: CSS Tweaks

* Remove marketing grays
2020-06-03 16:46:50 +00:00
Kenia c4b2fcbd38 ui: Create Tags & Meta tab (#7954) 2020-06-03 16:46:48 +00:00
Kenia 8077a41f42 ui: Make only existing services in Upstreams linkabled with hover effect (#7943)
* Create service/exist helper to be used in ListCollection list items

* Make only existing services in Upstreams linkabled with hover effect
2020-06-03 16:46:47 +00:00
Kenia 91b22f21ba ui: Implement EmberTooltips to Upstreams (#7930)
* Add ember-tooltips addon

* Create Tooltip component with styling and test

* Implement Tooltip into Upstreams
2020-06-03 16:46:44 +00:00
John Cowen 200945714a
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919)
* ui: Styling fixes (#7885)

* Move cellHeight to ListCollection js file

* Fix composite row border-top-color onHover state

* Add empty health check icon to CompositeRow styling

* ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886)

* ui: Move individual component types into a single %composite-list plus

1. Removes all out separate CSS components (that match HTML components)
to favour not having those separate for the moemnt at least
2. Reuses <ConsulServiceList /> component for Terminating Gateways >
Linked Services

* ui: Tweak breadcrumb spacing for '/' separator

* Fix up the tests i.e. services per tab so we can call them all services

* ui: Misc discovery chain fixes (#7892)

1. Look for a default splitter before looking for a default resolver in
order to route to.
2. Delay adding svg listeners until afterRender (fixes split tooltip)
3. Make router id's consistent for highlighting default routers in when
clicking the graph

* ui: If an error occurs on the server, surface it in the notification (#7893)

* ui: Delete old unused CSS (#7909)

This commit deletes CSS that we no longer use and we definitely will not
ever use.

We also dedup all of our imports here as it turns out SASS doesn't
dedupe imports. Strangely this increases out CSS weight by ~1kb instead
of reducing but we'd rather keep things deduped as that was the
intention

* ui: Redesign - Exposed Paths (#7912)

* Add new exposed paths icons to codebase

* Redesign Exposed Paths and create copy-button hover on Composite Row

* Refactor FeedbackDialog and CopyButton

* Change this.element to use `{{ref }}` now we don't have an element

We changed this to a tagless component with an eye to moving this to a
glimmer component, without spotting that this would also remove the
`this.element` property.

This adds an equivalent using the ref modifier.

Co-authored-by: John Cowen <jcowen@hashicorp.com>

* ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914)

Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 17:18:04 +01:00
Kenia d7ac550f00 ui: Add namespaces to gateway services (#7868)
* Add namespace info to gateway Linked Services and Upstreams tabs

* Upgrade consul-api-double to version 2.15.1
2020-05-13 13:12:56 -04:00
Kenia 6367160c93 ui: Create Upstreams tab for Ingress Gateways (#7865) 2020-05-13 13:12:56 -04:00
Kenia 2adfb42bde ui: Create Linked Services Tab for Terminating Gateways (#7858)
* Fix to bottom border not applying to the correct <li>

* Create Linked Services tab with styling and tests

* Add internal endpoint gateway-services-nodes to the codebase with tests

* Upgrade consul-api-double to version 2.15.0
2020-05-13 13:12:55 -04:00
John Cowen b608ceb815 ui: Test Improvements (#7854)
* ui: Combine all "see/don't see" steps into one step

* Fix up broken tests

* Add some test meta data/titles

* Test out proxies in the service listing

* Remove comments
2020-05-12 17:14:57 +00:00
John Cowen f469da640e ui: Renames CopyButtonFeedback to CopyButton and use it everywhere (#7834)
* ui: Renames CopyButtonFeedback to CopyButton and use it everywhere

* Uncapitalize output

* Remove the ability to set the contents via an attr, and..

..change the attribute for the string that gets copied to be called
'value' so it feels like HTML
2020-05-12 17:14:56 +00:00
John Cowen c4c06c2dab ui: refactor out the taglist component to use a recursive pattern (#7837)
* ui: refactor out the taglist component to use a recursive pattern

* Make sure simple rendering tests pass
2020-05-12 17:14:54 +00:00
Kenia b2ecc65d21 ui: Create PopoverSelect, CatalogToolbar, and update tests (#7489)
* Create PopoverSelect component and styling

* Create CatalogToolbar component and Styling

* ui: Adds `selectable-key-values` helper (#7472)

Preferably we want all copy/text to live in the template. Whilst you can
achieve what we've done here with a combination of different helpers, as
we will be using this approach in various places it's probably best to
make a helper.

We also hit an ember bug related to using the `let` helper and trying to
access `thingThatWasLet.firstObject` (which can also be worked around
using `object-at`).

Moving everything to a helper 'sorted' everything.

Probably worthwhile noting that if the sort option themselves become
dynamic, I'm not sure if the helper here would actually react as you
would expect (I'm aware that ember helpers on react on the root
arguments, not necesarily sub properties of those arguments). If we get
to that point this helper could take the same approach as what I believe
ember-composable-helpers does to get around this, or move them to the
view controller. If we do ever moved this to the view controller, we
can still use the exported function from the new helper here to keep
using the same functionality and tests we have here.

* Create tests for sorting services with CatalogToolbar

* Add rule to print 'ember/no-global-jquery' as a warning

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-12 17:14:48 +00:00
Kenia 1743da62d7 ui: Update Gateway headers to include Service Kind (#7805) 2020-05-12 17:14:46 +00:00
Kenia 4b2ff91b45 ui: Redesign - Instance Detail Proxy Info tab (#7745)
* Fix clickFirstAnchor bug

* Create Proxy Info Tab for Instance Detail Page

* Create tests for ProxyInfo and update other scenarios with Proxy data

* ui: Refactors our app-view/%app-view component (#7752)

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-12 17:14:46 +00:00
Kenia abc43b6a0f ui: Redesign - Gateway Instances List page (#7796)
* Hide Nav in Instances page for Gateway services

* Fix up tests to have mocked Services with no Kind attribute

* Upgrade consul-api-double to 2.14.4
2020-05-12 17:14:45 +00:00
John Cowen 5832e84822 ui: Remove last instances of 'meta data', replace with 'metadata' (#7793) 2020-05-12 17:14:44 +00:00
John Cowen ed2444c0b5 ui: Metadata cleanup (#7767)
* Use new ConsulMetadataList for service > instance > metadata tab

* Meta Data vs Metadata everywhere (Metadata is correct)

* Fix up wording in tests
2020-05-12 17:14:40 +00:00
Kenia 8b6b2a01f6 ui: Remove headers from the Healthchecks tab (#7751) 2020-05-12 17:14:39 +00:00
Kenia 893ee7c237 ui: Update Breadcrumbs styling (#7687) 2020-05-12 17:14:30 +00:00
Kenia 8643565b30 ui: Instance detail redesign (#7683)
* Remove Proxy link and add ExternalSource to instance detail page header

* Create HealthChecks tab with route and styling

* Fix up tests to fit redesign of Service Instances Detail page
2020-05-12 17:14:29 +00:00
Kenia 51db157fab ui: Redesign - Service Detail Page (#7655)
* Create ConsulServiceInstanceList with styling and test
* Implement ConsulServiceInstanceList to Service Detail page
* Implement ConsulExternalSource to Services Show page header
* Update services/show page object

* Update the styling of CompositeRow

* Refactor ConsulServiceList component and styling

* Update ConsulExternalSource to say 'Registered via...'

* Upgrade consul-api-double to patch 2.14.1

* Fix up tests to not use Kind in service models

* Update ListCollection with clickFirstAnchor action

* Add $typo-size-450 to typography base variables
2020-05-12 17:14:27 +00:00
John Cowen 8e9fca9be6 ui: Per Service Intentions Tab (#7615)
* Add model layer support for filtering intentions by service

* Add Route, Controller and template for services.show.intentions tab

We are still loading the intentions themselves in the parent Route for
the moment

* Load the intentions in in the parent route for the moment

* Temporarily add support for returning to history -1

Once we have an intention form underneath the service/intention tab this
will no longer be needed

* Add the new tab and enable blocking queries for it

* Add some further acceptance testing around intention listings
2020-05-12 17:14:26 +00:00
Kenia 288316432b ui: Redesign - Create ConsulExternalSource (#7632)
* Create ConsulExternalSource with test and styling

* Implement ConsulExternalSource to Service list page

* Update icons for redesign

* Refactor ListCollection and CompositeRow styling
2020-05-12 17:14:25 +00:00
Kenia f39671d568 ui: Redesign Service List page (#7605)
* Create GridCollection for nodes page with styling

* Update ListCollection styling

* Update TagList styling

* Create CompositeRow styling component

* Update ConsulServiceList component with styling

* Create service health-checks helper

* Add InstanceCount to the service model

* Add tag-svg to codebase

* Create and update tests for service-list page

* Upgrade @hashicorp/consul-api-double to 2.14.0
2020-05-12 17:14:25 +00:00
John Cowen 4bf1daef0a ui: Logout button (#7604)
* ui: Logout button

This commit adds an easier way to logout of the UI using a logout button

Notes:

- Added a Logout button to the main navigation when you are logged in,
meaning you have easy access to a way to log out of the UI.
- Changed all wording to use 'Log in/out' vocabulary instad of 'stop
using'.
- The logout button opens a panel to show you your current ACL
token and a logout button in order to logout.
- When using legacy ACLs we don't show the current ACL token as legacy
ACLs tokens only have secret values, whereas the new ACLs use a
non-secret ID plus a secret ID (that we don't show).
- We also added a new `<EmptyState />` component to use for all our
empty states. We currently only use this for the ACLs disabled screen to
provide more outgoing links to more readind material/documentation to
help you to understand and enable ACLs.
- The `<DataSink />` component is the sibling to our `<DataSource />`
component and whilst is much simpler (as it doesn't require polling
support), its tries to use the same code patterns for consistencies
sake.
- We had a fun problem with ember-data's `store.unloadAll` here, and in
the end went with `store.init` to empty the ember-data store instead due
to timing issues.
- We've tried to use already existing patterns in the Consul UI here
such as our preexisting `feedback` service, although these are likely to
change in the future. The thinking here is to add this feature with as
little change as possible.

Overall this is a precursor to a much larger piece of work centered on
auth in the UI. We figured this was a feature complete piece of work as
it is and thought it was worthwhile to PR as a feature on its own, which
also means the larger piece of work will be a smaller scoped PR also.
2020-05-12 17:14:24 +00:00
John Cowen 32a619ae99 ui: Add tab navigation to the browser history/URLs (#7592)
* ui: Add tab navigation to the browser history/URLs

This commit changes all our tabbed UI interfaces in the catalog to use
actual URL changes rather than only updating the content in the page
using CSS.

Originally we had decided not to add tab clicks into the browser
history for a variety of reasons. As the UI has progressed these tabs
are a fairly common pattern we are using and as the UI grows and
stabilizes around certain UX patterns we've decided to make these tabs
'URL changing'.

Pros:

- Deeplinking
- Potentially smaller Route files with a more concentrated scope of the
contents of a tab rather than the entire page.
- Tab clicks now go into your history meaning backwards and forwards
buttons take you through the tabs not just the pages.
- The majority of our partials are now fully fledged templates (Octane
🎉)

Cons:

- Tab clicks now go into your history meaning backwards and forwards
buttons take you through the tabs not just the pages. (Could be good and
bad from a UX perspective)
- Many more Route and Controller files (yet as mentioned above each of these
have a more reduced scope)
- Moving around the contents of these tabs, or changing the visual names
of them means updates to the URL structure, which then should
potentially entail redirects, therefore what things that seem like
straightforwards design reorganizations are now a little more impactful.

It was getting to the point that the Pros outweight the Cons

Apart from moving some files around we made a few more tiny tweaks to
get this all working:

- Our freetext-filter component now performs the initial search rather
than this happening in the Controller (remove of the search method in
the Controllers and the new didInsertElement hook in the component)
- All of the <TabNav>'s were changed to use its alternative href
approach.
- <TabPanel>s usage was mostly removed. This is th thing I dislike the
most. I think this needs removing, but I'd also like to remove the HTML
it creates. You'll see that every new page is wrappe din the HTML for
the old <TabPanel>, this is to continue to use the same HTML structure
and id's as before to avoid making further changes to any CSS that might
use this and being able to target things during testing. We could have
also removed these here, but it would have meant a much larger changeset
and can just as easily be done at a later date.
- We made a new `tabgroup` page-object component, which is almost
identical to the previous `radiogroup` one and injected that instead
where needed during testing.

* Make sure we pick up indexed routes when nspaces are enabled

* Move session invalidation to the child (session) route

* Revert back to not using didInsertElement for updating the searching

This adds a way for the searchable to remember the last search result
instead, which changes less and stick to the previous method of
searching.
2020-05-12 17:14:23 +00:00
John Cowen 5dad95faf1 ui: Add `<ConsulMetadataList />` and use it in 2 places (#7568)
We previoulsy had some pretty straightforward duplicated code for
rendering our metadata list for both Service Metadata and Node Metadata.

This moves this code into a component.
2020-05-12 17:14:21 +00:00