Commit Graph

140 Commits

Author SHA1 Message Date
Kenia 2179bb0dec ui: Add sorting to ACLs tokens with tests (#8359)
* Add sorting to ACLs tokens with tests

* Create token comparator and implement in template

* Upgrade @hashicorp/consul-api-double to 3.1.6

* Add navigation test to acls tokens
2020-07-29 13:42:01 +00:00
duncanKr d00b0a1fa2 ui: Table element's have vertical scrollbars (#8296)
Close #8294. Set overflow to hidden for both x and y axis. This prevents the overflow-y defaulting to auto, and creating scrollbars. Given the text overflow is set to ellipsis, this doesn't change the UI functionality.
2020-07-21 13:41:37 +00:00
John Cowen d0b328e272 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 17:12:59 +00:00
John Cowen af20cb1f99 ui: Use top-level 'named index files' instead of in folder index files (#8274)
* Remove unused phrase-editor CSS

* Move index.scss files to top-level named files to make them more obvious
2020-07-09 13:51:56 +00:00
John Cowen f9fd2822e9 ui: Extract and organize popover-menu and related from main-nav (#8272) 2020-07-09 13:27:24 +00:00
John Cowen aa48d29191 ui: New Intention Form/List components (#8172) 2020-07-09 09:09:53 +00:00
Kenia fa3aa25839 ui: Fix up styling for the Tags tab (#8263) 2020-07-08 13:49:00 +00:00
John Cowen 74f5a7fa7c ui: Use empty-state for our small empty states (#8262) 2020-07-08 13:36:10 +00:00
John Cowen a6ab1daf2f ui: Re-adds gray backgrounds to old style %pills (#8251) 2020-07-07 18:04:08 +00:00
Kenia b78ef1fee0 ui: Redesign - Node service instances tab (#8204)
* Upgrade consul-api-dobule to version 3.1.3

* Create ConsulInstaceChecks component with test

* Redesign: Service Instaces tab in for a Node

* Update Node tests to work with the ConsulServiceInstancesList

* Style fix to the copy button in the composite-row details

* Delete helper and move logic to ConsulInstanceChecks component

* Delete unused component consul-node-service-list
2020-07-01 14:28:05 +00:00
Kenia 95605e4f24 ui: Support ingress gateways upstreams with multiple addresses (#8185)
* Upgrade consul-api-double to version 3.1.2

* Display multiple addresses for ingress gateway upstreams
2020-06-25 13:51:43 +00:00
John Cowen 2a321e7164 ui: Ensure the tooltip panel chevron isn't hidden by overflow (#8183) 2020-06-24 17:07:56 +00:00
Kenia 6753d81166 ui: Refactor composite rows to use description lists and add Tooltips (#8175)
* Update Consul Service List composite rows with Tooltips and description lists

* Update Consul Service Instance List composite rows with Tooltips and description lists

* Removed line height in reduced pill to match the description lists in the composite rows
2020-06-24 13:55:13 +00:00
John Cowen 5315f37d19 ui: Redesigns for the token/policy/roles listings pages (#8144) 2020-06-23 09:12:35 +00:00
John Cowen baecab54cb ui: Support for Node Identities (#8137)
* Add all the new data required for NodeIdentities

* Add potential NodeIdentity to the token list component

* Amend the policy-form/selector to allow node identity creation

* Fix up CSS for radio buttons and select label

* Add node-identity policy template component

* Fix up and add acceptance tests for NodeIndentities

* Make sure policy previews take node identities into account

* Only show certain policy markup if those we have those policies

* Potentially temporarily hide dt's that don't have icons yet
2020-06-23 09:00:56 +00:00
Kenia cb63a0557f ui: Refactor Upstreams and Exposed Paths icons (#8139)
* Update Ports to have copy-button to the left

* Update exposed paths use a description list
2020-06-18 13:24:36 +00:00
John Cowen 1d80920c81 ui: Token listing redesign (#8117) 2020-06-17 09:33:17 +00:00
Kenia 8620f7e325 ui: Refactor detailed health checks to use more of the service/instance-checks helper (#8119) 2020-06-17 09:32:54 +00:00
Kenia 9fcad3e0c3 ui: Add detailed Health Checks to Service Detail page (#8111) 2020-06-16 16:00:03 +00:00
Kenia fb1fd730a4 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 13:36:34 +00:00
John Cowen daf283d315 Merge pull request #8080 from hashicorp/ui-staging
ui: UI Release Merge (1.8-beta-3: ui-staging merge)
2020-06-10 16:41:25 +00:00
John Cowen a58d52e58a Merge pull request #8022 from hashicorp/ui/bugfix/switch-help-icons
ui: Switch help menu icons to use the correct icons
2020-06-04 15:04:43 +00:00
John Cowen 300a52f5ae Merge pull request #8013 from hashicorp/ui-staging
ui: UI Release Merge (1.8-beta-3: ui-staging merge)
2020-06-03 17:46:46 +00:00
John Cowen fa21399231 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 16:18:31 +00:00
John Cowen 4c9efd54e0 ui: Misc amends for Safari and Firefox (#7907)
1. Ensure dropdown menus function correctly in Safari
2. Ensure default grey color for buttons is not used
3. Ensure IntersectionObservers are cleaned up properly in Safari
2020-05-18 17:34:30 +00: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 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 182cdef45c ui: Restrict %secondary-button to only form buttons in the main content (#7836) 2020-05-12 17:14:56 +00:00
Kenia 319301abe8 ui: Update copy button icon margin (#7835) 2020-05-12 17:14:52 +00:00
John Cowen f21b17a1f2 UI: Improved Login/Logout flow inc SSO support (#7790)
* 6 new components for new login/logout flow, plus SSO support

UI Components:

1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile
2. AuthForm: Authorization form shown when logged out.
3. AuthProfile: Simple presentational component to show the users
'Profile'
4. OidcSelect: A 'select' component for selecting an OIDC provider,
dynamically uses either a single select menu or multiple buttons
depending on the amount of providers

Data Components:

1. JwtSource: Given an OIDC provider URL this component will request a
token from the provider and fire an donchange event when it has been
retrieved. Used by TokenSource.
2. TokenSource: Given a oidc provider name or a Consul SecretID,
TokenSource will use whichever method/API requests required to retrieve
Consul ACL Token, which is emitted to the onchange event handler.

Very basic README documentation included here, which is likely to be
refined somewhat.

* CSS required for new auth/SSO UI components

* Remaining app code required to tie the new auth/SSO work together

* CSS code required to help tie the auth/SSO work together

* Test code in order to get current tests passing with new auth/SSO flow

..plus extremely basics/skipped rendering tests for the new components

* Treat the secret received from the server as the truth

Previously we've always treated what the user typed as the truth, this
breaks down when using SSO as the user doesn't type anything to retrieve
a token. Therefore we change this so that we use the secret in the API
response as the truth.

* Make sure removing an dom tree from a buffer only removes its own tree
2020-05-12 17:14:51 +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
John Cowen 7e83dc2aeb ui: Small CSS tweaks (#7808)
1. Reinstate top border on in page tabs
2. Keep overflow:hidden just for dom-recycling-tables
2020-05-12 17:14:47 +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
John Cowen 822daaf486 ui: Fix CSS typo (#7791) 2020-05-12 17:14:43 +00:00
John Cowen 135d22586b ui: Tab Improvements (animations/branding) (#7772)
* ui: Adds a tab selection animation to our app tabs

1. Replace all mentions of `magenta` with a themeable CSS property.
2. Add an easy way to inline style DOM nodes
3. Use CSS properties to add tab animation

* Fix up rendering test

* Avoid DOM noodling as much as possible
2020-05-12 17:14:43 +00:00
Kenia 12e2c93e6b ui: Redesign - Service List page with Gateways (#7781)
* Return all services except Proxies

* Add Gateway icon to the codebase

* Create and implement ConsulExternalSource component

* Fix tests to work with new mock data and add a Gateway test

* Update consul-api-double to 2.14.3
2020-05-12 17:14:42 +00:00
John Cowen 61d7e9ba87 ui: Misc CSS amends, mainly changes to empty-state (#7743)
1. empty-state amends to bring it closer to what is in Structure and
optionally support icons.
2. You may have a button that semantically should be a button (it
performs and action not a link), but you want it to look like an anchor,
this means it shouldn't have an outline when :active.
3. Adds `label.type-password` as a `%form-element`
4. Adds an error state to our `%notice` CSS component
2020-05-12 17:14:39 +00:00
John Cowen dd6506e994 ui: Add background-color: currentColor to all our icon masks (#7729)
We currently define our 'decorational' iconography in our CSS via
background images and or psuedo content. For coloring these we use
`mask-image` and a background color.

This commit adds a background-color: currentColor to our %with-mask
placeholder that makes the color of these icons default to the `color`
of the current element, meaning the icons now inherit from things like
`:hover`.

This can easily be overwritten as before by just setting the
background-color on the icon manually as before.
2020-05-12 17:14:36 +00:00
Kenia 279b547673 ui: Fix up the padding for FilterBar (#7705) 2020-05-12 17:14:33 +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
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 c20cff9bf5 ui: Moves intentions listing and form into components (#7549)
Whilst we tried to do this with the smallest amount of changes possible,
our acceptance tests for trying to submit a blank form started failing
due to usage of `destroyRecord`, its seems that the correct way to
achieve the same thing is to use `rollbackAttributes` instead. We
changed that here and the tests pass once again. Furture work related to
this will involve change the rest of the UI where we use `destroyRecord`
to achieve the same thing, to use `rollbackAttributes` instead
2020-05-12 17:14:21 +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 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