Commit Graph

432 Commits

Author SHA1 Message Date
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 6d7a95f82d ui: Model Layer for SSO Support (#7771)
* ui: Adds model layer required for SSO

1. oidc-provider ember-data triplet plus repo, plus addition of torii
addon
2. Make blocking queries support a Cache-Control: no-cache header
3. Tweaks to the token model layer in preparation for SSO work

* Fix up meta related Cache-Control tests

* Add tests adapter tests for URL shapes

* Reset Cache-Control to the original value, return something from logout
2020-05-12 17:14:41 +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
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 3b34ccc99c ui: Adds `<StateChart />` component for wiring together Ember+XState (#7742) 2020-05-12 17:14:38 +00:00
John Cowen 067ed448e3 ui: Amends to the data-sink service/component (#7740)
1. Fix conditional typo
2. Code style changes
3. Don't use URL for parsing, Safari only likes http like URLs
2020-05-12 17:14:37 +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
John Cowen 00b34ee7f6 ui: Add a way to reliably figure out where the UI is running (#7722)
* ui: Add a way to reliably figure out where the UI is running

The main javascript that we use is at </where/the/ui/is>/ui/assets/consul-ui.js

This uses this fact to provide and base path 'environment' variable to
be used within the app. This is also overwritable via various methods
(testing/development) if we ever need to do that.

* Remove BASE_API_URL, the logic here isn't exactly correct

Right now the API always _has_ to be at http://domain/v1/ i.e. the root
of your domain /v1. If the URL of the ui is set differently to
http://root.com/somewhere/else/ui/ then the API is still at http://root.com/v1

There is definitely a plan to add this env var back in at some stage so
we can potentially allow this to be configured in other ways, but there
isn't a need to do it just yet so we don't need to worry about _how_ to do
this right now.
2020-05-12 17:14:36 +00:00
John Cowen f8d920d9ef ui: ConsulLoader component (#7719)
Moves the `consul-loader` partial to a template-only component
2020-05-12 17:14:35 +00:00
Mike Morris 9795c8c2cd ui: replace Makefile sed directive for coverage
Use .istanbul.yml config file instead.
2020-05-12 17:14:34 +00:00
Kenia 279b547673 ui: Fix up the padding for FilterBar (#7705) 2020-05-12 17:14:33 +00:00
John Cowen b2b6543157 ui: Reuse repo.reconcile and restartWhenAvailable (#7703) 2020-05-12 17:14:32 +00:00
John Cowen 3d9a55c28b ui: Fixup intention notifications and add SyncTime (#7702)
* ui: Specifically check for error rather than anything but success

* ui: Add SyncTime to intentions for reconciliation
2020-05-12 17:14:32 +00:00
Mike Morris a4565d77b7 ui: enable Babel-generated source maps for non-production builds 2020-05-12 17:14:31 +00:00
Kenia 893ee7c237 ui: Update Breadcrumbs styling (#7687) 2020-05-12 17:14:30 +00:00
John Cowen 7f3b9d04ba ui: Use DataSources in ACLs area (#7681)
* ui: Use Datasource for loading related data in ACLs area

* ui: Use more manual cleanup for Controller event-sources

* Update reconcile to use nspace and add SyncTime to role/policy

* Use the correct value for nspace and dc (the one from the item itself)

* Remove the // check, we no longer need it. Add some TODO
2020-05-12 17:14:29 +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
John Cowen 2685c5081b ui: Improved main navigation (#7673)
* Make datacenter queries use query vs findAll like the rest of the app

* Make sure we have an element to pass to isInViewport

* Make sure href-mut doesn't error even if the currentRoute === null

* More post test cleanup and Safari fix (safari requires http:// URLs)

* Reverse order of datasource nspace/dc's and add a namespace source

* Rearrange routes/templates/controllers to only use HashicorpConsul once

* Add datasources and correct token namespace detection/redirection

* Remove old dc findAll adapter method

* Add more comments around the 'child route/parent controller' vars
2020-05-12 17:14:28 +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 fb49d0473b ui: Changes our global LEARN link to start at root instead of /consul (#7573)
In case we ever need to link to anywhere on learn that isn't in the
`/consul` sub directory, this will let us do that whilst still using the
global env var.
2020-05-12 17:14:22 +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
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
John Cowen 80960c9d54 ui: Add `<State /> and `{{state-matches}}` ember component/helper (#7556)
This commit adds 2 ember component/helpers and a service to contain the
shared functionality for matching/rendering content dependent on state
identifiers. Currently a `service.state` method has been added to easily
make manual state objects, but these are built towards using `xstate` to
manage UI state in some of our future components.

We've added some tests here, and we aren't currently using these
components anywhere in this commit.
2020-05-12 17:14:20 +00:00
John Cowen 0afb8a1074 ui: Exposes the <ToggleButton /> 'click' action (#7479)
This exposes an api for <ToggleButton /> so you can call it from
elsewhere, specifically here we use the api.click to close the dropdown
menus which is required is the DOM containing the toggle button isn't
redrawn as is the case with external links in a dropdown menu
2020-05-12 17:14:19 +00:00
John Cowen 2413244b77 ui: Add DataSource component (#7448)
* ui: Add data-source component and related services (#6486)

* ui: Add data-source component and related services:

1. DataSource component
2. Repository manager for retrieving repositories based on URIs
3. Blocking data service for injection to the data-source component to
support blocking query types of data sources
4. 'Once' promise based data service for injection for potential
fallback to old style promise based data (would need to be injected via
an initial runtime variable)
5. Several utility functions taken from elsewhere
  - maybeCall - a replication of code from elsewhere for condition
  calling a function based on the result of a promise
  - restartWhenAvailable - used for restarting blocking queries when a
  tab is brought to the front
  - ifNotBlocking - to check if blocking is NOT enabled

* Move to a different organization based on protocols

* Don't call open twice when eager

* Workaround new ember error for reading and writing at the same time

* Add first draft of a README.mdx file
2020-05-12 17:14:18 +00:00
John Cowen 6f32981c76 ui: Adds blueprint for creating css-components (#7460)
* ui: Adds blueprint for creating css-components

CSS Components are CSS only components, which can be one of 2 types:

1. A composable CSS component that is not commonly used on its own
2. A CSS component that is commonly used along with a HTML/JS component,
potentially made up of other composable CSS components.

For type 1. you probably don't need the ./styles/component-name.scss
file. But instead of complicating matters with options for the blueprint
right now, we just rely on the user to delete the
./styles/component-name.scss file if they don't need it.

We also don't automatically add this import to the
./styles/components/index.scss file for 2 reasons:

1. We are potentially going to be moving the
./styles/components/index.scss file to ./styles/components.scss.
2. If we aren't going to provide a CLI swicth to ask whether this is of
component type 1. or component type 2. we don't want to automatically
include things that the user might not need.

Both of these 2 reasons are a little TBD and at some point in the future
we'll probably iterate on this blueprint to make it even easier to make
either type of CSS component.
2020-05-12 17:14:17 +00:00
John Cowen 64b07dcafe ui: Move <Ref /> docs to README.mdx (#7459)
README.mdx file are auto displayed in GH. Also added note on it being
renderless, which is useful to know from a CSS standpoint
2020-05-12 17:14:17 +00:00
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 27e8276e81 ui: Updates Consul blueprints to be compatible with new ED version (#7370) 2020-05-12 17:14:11 +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
John Cowen 64ff304585 ui: Make a specific CI coverage make target ensuring use of CI cache (#7335) 2020-05-12 17:14:08 +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 4be566e545 ui: Upgrade ember-cli-api-double (#7322)
* ui: Upgrade ember-cli-api-double
2020-05-12 17:14:04 +00:00