Commit Graph

137 Commits (f7c5ba5f90b9c060cad1f6c80dc4b3eef7fd81d7)

Author SHA1 Message Date
John Cowen ed5204b6b5
ui: ShadowTemplate component (#12259) 2022-02-10 14:50:42 +00:00
John Cowen 39f15306d9
ui: Change approach to loading debug.css (#12242)
We need a way to load certain CSS based on the environment you are viewing, i.e. we have debug CSS that we use for our Eng Documentation and various other DX utilities that shouldn't be compiled into our production or test builds.

Previously we would compile two entirely different CSS files (app and debug) and the load one or the other depending on which environment you were in.

This approach just empties out the debug.css file in certain environments (prod/test) which means we can just import that file from app. When in staging/development this imports the contents of debug.css (quite a bit of CSS) whereas when building for production/test this debug.css is emptied out during the build process.

There is a slight little hack in order to have this work, we import _debug.scss which imports the debug.scss file. I couldn't for the life of me figure out how to have broccoli empty out a file during the build process, so instead we essentially copy over debug.scss during dev and create an empty file during prod to _debug.scss.

When using make build to build an artifact for production CSS remains at ~58kb (during dev its a lot bigger than this)
2022-02-03 08:40:03 +00:00
John Cowen 0f94ce3964
ui: Alias all our Structure Icons to Flight Icons (#12209) 2022-02-02 13:24:47 +00:00
John Cowen e6a084807b
ui: Enable theming (#12134)
plus Themeable icons (#12135)
2022-01-21 12:19:03 +00:00
John Cowen 0ac27ef473
ui: Alter position of dashboard button in the service instance header (#11988) 2022-01-12 09:31:54 +00:00
Kenia aaace559e2
ui: Adding Partition to topology card (#11805) 2022-01-11 10:04:06 -05:00
John Cowen 6bdb2c2216
ui: Upgrade AuthDialog (#11913)
- Move AuthDialog to use a Glimmer Component plus native named blocks/slots.
- Unravel the Auth* contextual components, there wasn't a lot of point having them as contextual components and now the AuthDialog (non-view-specific state machine component) can be used entirely separately from the view-specific components (AuthForm and AuthProfile).
- Move all the ACL related components that are in the main app chrome/navigation (our HashicorpConsul component) in our consul-acls sub package/module (which will eventually be loaded on demand only when ACLs are enabled)
2022-01-07 19:08:25 +00:00
John Cowen 340a0e03f5
ui: Make 'dangerous' buttons have white text even in dark theme (#11756) 2021-12-09 09:37:28 +00:00
John Cowen 85c39092c0
ui: Adds basic support for partition exports to Service listings (#11702)
Also:

* ui: Add cross partition linking and rollout BucketList (#11712)

* ui: Add exported service partition to the source filter menu (#11727)
2021-12-06 11:06:33 +00:00
John Cowen 171cb0a247
ui: Adds partition support to Service and Node Identity templates (#11696) 2021-12-06 10:33:44 +00:00
John Cowen f3d9565277
ui: Refactor KV and Lock Sessions following partitions update (#11666)
This commit uses all our new ways of doing things to Lock Sessions and their interactions with KV and Nodes. This is mostly around are new under-the-hood things, but also I took the opportunity to upgrade some of the CSS to reuse some of our CSS utils that have been made over the past few months (%csv-list and %horizontal-kv-list).

Also added (and worked on existing) documentation for Lock Session related components.
2021-12-01 11:33:33 +00:00
John Cowen 3f131dcf34
ui: Notifications re-organization/re-style (#11577)
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
2021-11-24 18:14:07 +00:00
John Cowen b84ee47ff0
ui: Fix brand coloring for inline-code plus docs (#11578)
* ui: Fix brand coloring for inline-code plus docs

Also use --tones instead of --black/--white (#11601)

Co-authored-by: Evan Rowe <ev.rowe@gmail.com>
2021-11-23 18:32:11 +00:00
John Cowen 35ccc2bc29
ui: Adding partitions + icons to upstreams/upstream instances (#11556)
Adds a partition badge/label/visual to upstreams and upstream instances.
2021-11-17 17:46:50 +00:00
John Cowen ebc8cbf957
ui: Fix up socket icon (#11234) 2021-10-11 14:37:05 +01:00
John Cowen baa377ddca
ui: Adds initial CRUD for partitions (#11188)
* Add `is` and `test` helpers in a similar vein to `can`

Adds 2 new helpers in a similar vein to ember-cans can:

- `is` allows you to use vocab/phrases such as (is "something model") which calls isSomething() on the models ability.
- `test` allows you to use vocab/phrases such as (test "is something model") or (test "can something model")which calls isSomething() / canSomething() on the models ability. Mostly using the is helper and the can helper. It's basically the is/can helper combined.

* Adds TextInput component + related modifiers/helpers/machines/services (#11189)

Adds a few new components/modifiers/helpers to aid building forms.

- state-chart helper, used in lieu of a more generic approach for requiring our statecharts.
- A few modifications to our existing disabled modifier.
- A new 'validation' modifier, a super small form validation approach built to make use of state charts (optionally). Eventually we should be able to replace our current validation approach (ember-changeset-validations + extra deps) with this.
- A new TextInput component, which is the first of our new components specifically to make it easy to build forms with validations. This is still a WIP, I left some comments in pointing out where this one would be progressed, but as we don't need the planned functionality yet, I left it where it was. All of this will be fleshed out more at a later date.

Documentation is included for all of ^

* ui: Adds initial CRUD for partitions (#11190)

Adds basic CRUD support for partitions. Engineering-wise probably the biggest takeaway here is that we needed to write very little javascript code to add this entire feature, and the little javascript we did need to write was very straightforwards. Everything is pretty much just HTML. Another note to make is that both ember-changeset and ember-data (model layer things) are now completely abstracted away from the view layer of the application.

New components:

- Consul::Partition::Form
- Consul::Partition::List
- Consul::Partition::Notifications
- Consul::Partition::SearchBar
- Consul::Partition::Selector

See additional documentation here for more details

New Route templates:

- index.hbs partition listing/searching/filtering
- edit.hbs partition editing and creation

Additionally:

There is some additional debug work here for better observability and to prevent any errors regarding our href-to usage when a dc is not available in our documentation site.

Our softDelete functionality has been DRYed out a little to be used across two repos.

isLinkable was removed from our ListCollection component for lists like upstream and service listing, and instead use our new is helper from within the ListCollection, meaning we've added a few more lighterweight templateOnly components.

* ui: Exclude all debug-like files from the build (#11211)

This PR adds **/*-debug.* to our test/prod excluded files (realised I needed to add test-support.js also so added that here as its more or less the same thing). Conditionally juggling ES6 static imports (specifically debug ones) for this was also getting a little hairy, so I moved it all to use the same approach as our conditional routes. All in all it brings the vendor build back down to ~430kb gzipped.
2021-10-08 16:29:30 +01:00
John Cowen b8166de30d
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200)
From an engineers perspective, whenever specifying colors from now on we should use the form:

```
color: rgb(var(--tone-red-500));
```

Please note:

- Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens.
- Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500.

Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black)

There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 19:21:11 +01:00
John Cowen 7a5f335b7c
ui: Adds Flight icons to our icon set (#11097)
* ui: Adds Flight icons to our icon set

This commit doesn't actually add anything to the UI, rather just makes
the flight icons available for use.
2021-09-27 18:26:42 +01:00
John Cowen 581357c32a
ui: Remove info panel from the nspace menu when editing nspaces (#11130)
* ui: Remove info panel form the nspace menu when editing nspaces
2021-09-24 18:05:22 +01:00
John Cowen 01c9dc5728
ui: Add initial partition support to intentions (#11129)
* ui: Add initial partition support to intentions
2021-09-24 17:31:58 +01:00
John Cowen fc14a412fd
ui: Partitions Application Layer (#11017)
* Add Partition to all our models

* Add partitions into our serializers/fingerprinting

* Make some amends to a few adapters ready for partitions

* Amend blueprints to avoid linting error

* Update all  our repositories to include partitions, also

Remove enabled/disable nspace repo and just use a nspace with
conditionals

* Ensure nspace and parition parameters always return '' no matter what

* Ensure data-sink finds the model properly

This will later be replaced by a @dataSink decorator but we are find
kicking that can down the road a little more

* Add all the new partition data layer

* Add a way to set the title of the page from inside the route

and make it accessibile via a route announcer

* Make the Consul Route the default/basic one

* Tweak nspace and partition abilities not to check the length

* Thread partition through all the components that need it

* Some ACL tweaks

* Move the entire app to use partitions

* Delete all the tests we no longer need

* Update some Unit tests to use partition

* Fix up KV title tests

* Fix up a few more acceptance tests

* Fixup and temporarily ignore some acceptance tests

* Stop using ember-cli-page-objects fillable as it doesn't seem to work

* Fix lint error

* Remove old ACL related test

* Add a tick after filling out forms

* Fix token warning modal

* Found some more places where we need a partition var

* Fixup some more acceptance tests

* Tokens still needs a repo service for CRUD

* Remove acceptance tests we no longer need

* Fixup and "FIXME ignore" a few tests

* Remove an s

* Disable blocking queries for KV to revert to previous release for now

* Fixup adapter tests to follow async/function resolving interface

* Fixup all the serializer integration tests

* Fixup service/repo integration tests

* Fixup deleting acceptance test

* Fixup some ent tests

* Make sure nspaces passes the dc through for when thats important

* ...aaaand acceptance nspaces with the extra dc param
2021-09-15 19:50:11 +01:00
Kenia 019ce785ab
ui: Create Routing Configurations route and page (#10835) 2021-08-16 12:04:04 -04:00
Kenia bcd53e73a2
ui: Add Vault as a Service External Source (#10769) 2021-08-04 18:22:43 -04:00
Kenia a96e87aece
ui: Add socket icon for UDS (#10573) 2021-07-12 09:28:01 -04:00
John Cowen e541a43b37
ui: Fixup definition-table + copy-button margin (#10512) 2021-07-06 16:57:20 +01:00
John Cowen a6996b6ea5
ui: CopyButton amends (#10511)
* ui: Add with-copyable modifier

* Use with-copyable modifier for our own CopyButton

* Move copy-button styling and remove most of `copy-btn`
2021-07-06 16:56:36 +01:00
John Cowen ace794d214
ui: Enable specifying additional docfy config as json (#10464) 2021-06-25 10:41:41 +01:00
John Cowen c78f7ecb27
ui: Colocate remaining CSS components to the app/components folder (#10328) 2021-06-23 09:19:35 +01:00
John Cowen 043f631b7f
ui: Rename icons for consistency and remove unused icons (#10311)
* ui: Standardize logo naming

According to structure it should always be logo-name not name-logo

* Make sure all our logos use logo-name format

* Upgrade to @hashicorp/structure-icons 1.9.0

* Add `-color` to be consistent with other logos

* Add ms logo back in

* Remove all the old `*-color` icons from before when we got masks

* Add missing files

* Missed glimmer extend name change
2021-06-22 18:56:17 +01:00
John Cowen 9eab715149
ui: Move all our icons to use CSS custom properties instead of SASS vars (#10298)
* ui: Move all our icons to use CSS custom properties

The good thing about SASS vars is, if you don't use them they get removed from the final build. Whereas with CSS we have no tree-shaking to get rid of unused CSS custom properties. We can mostly work around this and for some things like colors its no big deal if we have some hex-codes in the build that we don't use as hex-codes are relatively small.

We've been slowly but surely moving all of our colors (and other things) to use CSS custom properties instead of SASS vars now that we have them available.

This commit makes use of the 'tree-shaking' abilities of @extend to ensure that we only compile in the icons that we use.

This commit is mostly churn-less as we already use @extend for the majority of our icons, so generally there is zero change here for working on the UI, but I did spot one single place where we were using SASS vars instead of @extend. This now uses the new form (second commit)

Interestingly this reduces our CSS payload by ~2kb to ~53kb (around 25kb of that is these icons)
2021-06-21 11:54:58 +01:00
John Cowen ac424187fe
ui: %horizontal-kv-list CSS component (and related) (#10285)
This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options.

Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition.

The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway).

- %icon-definition
- %horizontal-kv-list
- %csv-list 
- %tag-list
- %badge
2021-06-21 11:40:14 +01:00
John Cowen af72b9e9ab
ui: Unix Domain Socket support (#10287)
This commit adds UI support for Unix Domain Sockets for upstream and downstreams (see #9981 and #10252)
2021-05-26 17:52:25 +01:00
John Cowen e11454cf71
ui: Colocate old base components into our app/component folder (#10275) 2021-05-26 15:08:57 +01:00
John Cowen a73b38a368
ui: Minor CSS tweaks (#10295) 2021-05-26 14:35:19 +01:00
Kenia f3efde3843
ui: Create and use collapsible notices component (#10270)
* Create and use collapsible notices

* Refactor collapsible-notices

* Split up the topology acceptance tests

* Add acceptance tests for tproxy notices

* Add component file

* Adds additional TProxy notices tests

* Adds conditional to only show collapsable if more than 2 notices are present

* Adds changelog

* Refactorting the conditonal for collapsing the notices

* Renaming undefinedIntention to be notDefinedIntention

* Refactor tests
2021-05-25 11:02:38 -04:00
John Cowen 600f857531
ui: Add docs for AppView (#10265)
* ui: change coloring of secondary navigation elements

* Remove top border, this was probably from older designs/iterations

* ui: Move app-view styles into components also...

1. Remove dead %app-view-content-error
2. Remove TabNav border overwriting

* Bring into line with our 'project standard' class/attributes pattern

* Add docs for AppView
2021-05-24 12:32:23 +01:00
John Cowen 39302041e9
ui: Miscellaneous Lock Session fixes (#10225) 2021-05-19 11:05:54 +01:00
John Cowen 04bd576179
ui: Serf Health Check warning notice (#10194)
When the Consul serf health check is failing, this means that the health checks registered with the agent may no longer be correct. Therefore we show a notice to the user when we detect that the serf health check is failing both for the health check listing for nodes and for service instances.

There were a few little things we fixed up whilst we were here:

- We use our @replace decorator to replace an empty Type with serf in the model.
- We noticed that ServiceTags can be null, so we replace that with an empty array.
- We added docs for both our Notice component and the Consul::HealthCheck::List component. Notice now defaults to @type=info.
2021-05-13 11:36:51 +01:00
Kenia ecbeaa87c1
ui: Add conditionals to Lock Session list items (#10121)
* Add conditionals to Lock Session list items

* Add changelog

* Show ID in details if there is a name to go in title

* Add copy-button if ID is in the title

* Update TTL conditional

* Update .changelog/10121.txt

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2021-05-11 11:35:15 -04:00
John Cowen 90d1a307ef
ui: Fix nspace spacing issue (#10157)
This fixes the spacing bug in nspaces only by only showing Description if the namespace has one, and removing the extra 2 pixel margin of dds for when dts aren't rendered/don't exist.
2021-05-10 11:19:11 +01:00
John Cowen 0e4db3f242
ui: Adds ability to show a 'partial' list in list-collections (#10174)
* ui: Add support for showing partial lists in ListCollection

* Add CSS for partial 'View more' button, and move all CSS to /components

* Enable partial view for intention permissions
2021-05-07 16:54:45 +01:00
John Cowen da78615b58
ui: Remove top border from Consul::AuthMethod::List (#10195) 2021-05-07 16:53:09 +01:00
John Cowen e3f9a0f8ee
ui: Loader amends/improvements (#10181)
* ui: Loader amends/improvements

1. Create a JS compatible template only 'glimmer' component so we can
use it with or without glimmer.
2. Add a set of `rose` colors.
3. Animate the brand loader to keep it centered when the side
navigation appears.
4. Tweak the color of Consul::Loader to use a 'rose' color.
5. Move everything loader related to the `app/components/` folder and
add docs.
2021-05-07 12:23:29 +01:00
John Cowen fc7fe23b4d
ui: Fix text search for upstream instances (#10151)
* ui: Fix text search for upstream instances

* Clean up predicates for other model types

* Add some docs around DataCollection and searching

* Enable UI Engineering Docs for our preview sites

* Use debug CSS in dev and staging
2021-05-04 17:25:57 +01:00
John Cowen 4533a5e959
ui: Adds CRD popover 'informed action' for intentions managed by CRDs (#10100)
* ui: Adds CRD popover 'informed action' for intentions add via CRDs
2021-05-04 17:21:54 +01:00
Hector Simpson 211bc824a9
Update brand assets (#10081)
* Update header logo and inline icon

* Update full logos + layout on loading screen

* Update favicon assets and strategy
- Switches to serve an ico file alongside an SVG file
- Introduces an apple-touch-icon

* Removes unused favicon/meta assets

* Changelog item for ui

* Create component for logo

* Simplify logo component, set brand color

* Fix docs loading state CSS issue
2021-05-03 16:19:09 +01:00
John Cowen f6f282ac77
ui: Add information regarding Host header for ingress gateways (#10050)
* Add inline-code CSS component

* Add %inline-code to all the places where we need it

* Inject selected env variables into the translations file

* Add ingress gateway upstream 'host header' intro text

* Make sure we can use actual correct component casing for titles but still have nice consistent menu item casing in the side nav
2021-04-22 12:16:56 +01:00
John Cowen d008dc3d85
ui: Hoist DC menu into the top navigation bar (#10034)
* Add story for %main-nav-vertical plus additions for hoisting menu items

* Make sure we don't source app.css twice

* Hoist the DC menu
2021-04-16 12:13:06 +01:00
kenia 52e88bbf65 Create TransparentProxy mode label for service instance page 2021-04-15 09:19:21 -04:00
kenia fc40212823 Create Topology Metrics Source Type to be in each Card 2021-04-15 09:19:21 -04:00
John Cowen e4e85a8f83
ui: Move control of login modal to use JS rather than HTML (label/id) (#9883)
* Add before and after skip links portals

* Move EmptyState and ErrorState to use a @login action/function

* Move page title setting to the Route component

* Add Routes and Outlets everywhere, and use those to access login modal

* Add some aria-labels to the modals

* Docs

* Remove the label/input now we no longer need it, fixup pageobject

* Add basic modal docs

* Switch out old toggle names for ids

* Wrap nspace Route template in a Route component

* type > class
2021-04-06 13:40:40 +01:00
Kenia 4d13e31ae0
ui: Auth Methods - Create Binding Rules tab (#9914)
* Create BindingRule adapter and tests

* Create BindingRule serializer and test

* Create BindingRule model and repository

* Add binding-rules mock data

* Create binding-rules router and call endpoint

* Create Binding rules tab

* Create and use BindingView component

* Create empty state for BindingView

* Remove binding rule requestForQueryRecord endpoint and tests

* Update binding rules selector to be monospaced

* Add bind type tooltip

* Create and Tabular-dl styling component

* Update hr tag global styling

* Rename BindingView to BindingList and refactor

* Add translations for bind types tooltip info

* Remove unused endpoint

* Refactor based on review notes
2021-03-26 11:47:47 -04:00
Kenia 980299d519
ui: Auth Methods- Updates to certificate and empty state in show page (#9895)
* Update Certificate to be monospaced

* Add empty states for claim and list claim mappings

* Update the styling of empty state actions block

* Update mocked PEM certificate format
2021-03-18 11:18:23 -04:00
John Cowen 9e715842d9
ui: Improves UI engineering docs (#9875)
Also fixes some typos in with-overlay
2021-03-17 15:58:17 +00:00
Kenia f9e8b26af6
ui: Create auth-method show page with General Info Tab (#9845)
* Update list items to be linkable to auth-methods show

* Add general, namespace, and binding sub-routes

* Remove namespace and binding tabs to be done separately

* Update auth-method byId endpoint

* Style the show auth-method kubernetes type

* Finish Kubernetes auth-method type styling

* OIDC and JWT auth-method styling

* Create consul-auth-method-view component

* Add navigation test for auth-methods

* Create Certificate component
2021-03-17 10:40:56 -04:00
John Cowen aca7976580
ui: Adds warning icon to side menu when ACLs are disabled (#9864)
* ui: Adds warning icon to side menu when ACLs are are disabled
2021-03-17 11:23:00 +00:00
John Cowen fa6687b7f4
ui: Implement ACLs access based on ACLs (#9835)
Adds restrictions to everything within the ACLs (and nspaces) area based on your ACLs (including readonly views etc.)
2021-03-11 09:29:11 +00:00
John Cowen 308e5a480e
ui: Remove storybook, add docfy (#9831)
This PR removes storybook and adds docfy and uses docfy to render our existing README files.

This now means we can keep adding README documentation without committing any specific format or framework. If we eventually move to storybook then fine, or if we just want to remove docfy for whatever reason then fine - we will still have a full set of README files viewable via GitHub.
2021-03-08 12:22:01 +00:00
John Cowen 779f7f7b60
ui: Side navigation tweaks (#9812)
* Remove footer and add the Consul version to the Help menu

* Tweak menu text and button styling

* Tweak some coloring and spacing

* Add slightly larger Consul logo
2021-02-25 09:35:53 +00:00
John Cowen 8263879e6f
ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687)
This commit use the internal authorize endpoint along wiht ember-can to further restrict user access to certain UI features and navigational elements depending on the users ACL token
2021-02-19 16:42:16 +00:00
Kenia 1507dd8ab3
ui: Auth Methods List view (#9617)
* Create mock-api endpoints for auth-methods

* Implement auth-method endpoints and model with tests

* Create route and tab for auth-methods

* Create auth-method list and type components with styles

* Add JWT and OIDC svg logos to codebase

* Add brand translations

* Add SearchBar to Auth Methods

* Add acceptance test for Auth Methods UI

* Skip auth method repo test

* Changes from review notes

* Fixup auth-method modela and mock-data

* Update SearhBar with rebased changes

* Add filterBy source and sortBy max token ttl

* Update to SortBy MethodName

* Update UI acceptance tests

* Update mock data DisplayNames

* Skip repo test

* Fix to breaking serializer test

* Implement auth-method endpoints and model with tests

* Add acceptance test for Auth Methods UI

* Update SearhBar with rebased changes

* Add filterBy source and sortBy max token ttl

* Update to SortBy MethodName

* Update UI acceptance tests

* Update mock data DisplayNames

* Fix to breaking serializer test

* Update class for search

* Add auth-methods link to sidebar

* Fixup PR review notes

* Fixup review notes

* Only show OIDC filter with enterprise

* Update conditionals for MaxTokenTTL & TokenLocality

* Refactor
2021-02-17 13:56:56 -05:00
John Cowen 92f0eb3bdc
ui: Re-organize our %h* placeholders (#9584)
We've always had this idea of being able to markup up information
semantically without thinking about what it should look like, then
applying our %h* placeholder styles to control what the information
should look like.

Back when we originally made our set of %h* placeholders, we tried to
follow Structure as much as possible, which defined the largest header
(which we thought would have been the h1 style) as a super large 3.5rem.

Therefore we made our set of %h* placeholders the same as Structure
beginning at a huge 3.5 size. We then re-overwrote those sizes only in
Consul specific CSS files thinking that this was due to us existing
before Structure did.

Lately we saw an extra clue in Structure - the extra large 3.5 header was
called 'h0'.

This commit moves all our headers to use a zero based scale, and
additionally uses our 3 digit scale as opposed to 1 digit (h1 vs h100),
similar to our color scales (note we don't use a hypen, which we can
alter later if need be), which means we can insert additional h150 etc
if need be.

Additional we stop styling our headers globally (h1 { @extend %h100; }
). This means there is no reason not to use headers for marking up
content depending on what it is rather than what it should look like,
and as a consequence means we can be more purposeful in ordering h*
tags.

Lastly, we use the new scale over the entire codebase and update a
couple of places where we were using using header tags due to what the
styleing for them looked like rather than what the meaning/order was.
2021-01-26 17:53:45 +00:00
John Cowen 82a62cd2ed
ui: Sidebar navigation / redesign (#9553)
* CSS for moving from a horizontal main menu to a side/vertical one
* Add <App /> Component and rearrange <HashcorpConsul /> to use it

1. HashicorpConsul now uses <App />
2. <App /> is now translated and adds 'skip to main content' functionality
3. Adds ember-in-viewport addon in order to visibly hide main navigation
items in order to take them out of focus/tabbing
4. Slight amends to the dom service while I was there
2021-01-26 17:40:33 +00:00
John Cowen bb95738321
ui: Search/filtering 'Filtered by:' search status (#9442)
Adds a 'status' for the filtering/searching in the UI, without this its not super clear that you are filtering a recordset due to the menu selections being hidden once closed. You can also use the pills in this status view to delete individual filters.
2021-01-25 18:13:54 +00:00
John Cowen 17438020f1
ui: Accessibility scan improvements (#9485)
* ui: Remove all vestiges of role=tabpanel

* Switch out tablist role for a label, default to Secondary

* Move healthcheckout-output headers to h2, ideally these would be outside the component

* Add aria-label for empty button

* Fix up non-unique ids in topology component

* Temporarily fixup h2 in KV > LockSession

* Fixup dl with no dt

* h3 > h2

* Fix up page objects that were reliant on ids
2021-01-05 10:05:59 +00:00
Kenia c7d9177775
ui: Add Local flag to local dc in dropdown (#9419)
* Add Local flag to local dc in dropdown

* Remove brand color from the check

* Move styling to main-nav-horizonal styling sheets
2020-12-17 13:57:07 -05:00
John Cowen 514270a413
ui: Controller dead code removal (#9367)
* ui: Controller dead code removal

This commit removes a little code that became 'dead' as a result of
previous PRs/commits

* Remove a little more from the settings Controller

* Remove CSS related to being able to set the dashboard_url in settings
2020-12-11 11:43:13 +00:00
John Cowen e0a4646768
ui: document-attrs helper (#9336)
This commit adds a {{document-attrs}} helper, specifically for adding attributes to the root documentElement, which in our case is always <html>
2020-12-09 09:22:01 +00:00
John Cowen 2061bff36b
ui: HealthCheck Search/Sort/Filtering (#9314)
* Adds model layer changes around HealthChecks

1. Makes a HealthCheck model fragment and uses it in ServiceInstances and
Nodes
2. Manually adds a relationship between a ServiceInstance and its
potential ServiceInstanceProxy
3. Misc changes related to the above such as an Exposed property on
MeshChecks, MeshChecks itself

* Add a potential temporary endpoint to distinguish ProxyServiceInstance

* Fix up Node search bar class

* Add search/sort/filter logic

* Fixup Service default sort key

* Add Healthcheck search/sort/filtering

* Tweak CSS add a default Type of 'Serf' when type is blank

* Fix up tests and new test support

* Add ability to search on Service/Node name depending on where you are

* Fixup CheckID search predicate

* Use computed for DataCollection to use caching

* Alpha sort the Type menu

* Temporary fix for new non-changing style Ember Proxys

* Only special case EventSource proxies
2020-12-07 09:14:30 +00:00
John Cowen e23b5b003d
ui: Reorganize Tabs CSS (#9313) 2020-12-02 15:48:06 +00:00
John Cowen a5b9ada9ad
ui: New overlays (#9305)
Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
John Cowen cf38309f61
ui: Add 'Search Across' for finer grained searching (#9282) 2020-12-01 15:45:09 +00:00
John Cowen d1ebe8c14d
ui: Moves healthcheck list to Glimmer template-only consul component (#9293) 2020-11-30 17:22:43 +00:00
John Cowen a59a2f8604
ui: Modifier based tooltips (#9288) 2020-11-30 16:52:13 +00:00
John Cowen 687ce1f9c5
ui: Alter background color of filter bars (#9238) 2020-11-19 16:07:58 +00:00
John Cowen 1edef424ad
ui: Refactor tomography graph component to glimmer and remove deprecation (#9219)
* ui: Refactor tomograph graph component to glimmer and remove deprecation

* Avoid ember-data deprecation error
2020-11-18 18:55:59 +00:00
John Cowen 6b29704027
ui: Upstream Instance Search and Sort (#9172)
* ui: Add predicate, comparator and necessary files for the search/sort

* Implement search and sort for upstream instance list

* ui: Tweak CSS so its all part of the component

* Remove the old proxy test attribute
2020-11-12 18:45:11 +00:00
Kenia 7243f1f4f9
ui: Topology Intentions Popovers (#9137)
* Refactor grid styling for Topology page

* Crate TopologyMetrics Button component and move styling

* Create intention ID

* fixup button styling

* Return a link to the create intention page

* Rename Button to Popover component

* Fixup serializer test

* ui: Inline Topology Intention Actions  (#9153)

* Add arrow and dot to/from metrics back in

* Add addional space to have metrics wrap and show in smaller screens

* Move logic for finding positioning

* Use color variables

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-11-12 10:40:15 -05:00
John Cowen e1d9771381
ui: Move discovery chain component (#9154) 2020-11-11 14:43:37 +00:00
Kenia e18d8e299d
ui: Delete Proxy Info tab (#9141)
* Remove Proxy Info and create Upstreams and Exposed Paths tabs

* Update routes formatting

* Update typo for Expose.Checks

* Remove, update, and add tests

* Make consul-upstream-instance-list into a glimmer component

* Create styling for upstream-instance-list component
2020-11-10 11:31:47 -05:00
John Cowen 475b4cd473
ui: Intention "Action change" warning modal (#9108)
* ui: Add a warning dialog if you go to remove permissions from an intention

* ui: Move modal styles next to component, add warning style

* ui: Move back to using the input name for a selector

* ui: Fixup negative "isn't" step so its optional

* Add warning modal to pageobject

* Fixup test for whether to show the warning modal or not

* Intention change action warning acceptence test

* Add a null/undefined Action
2020-11-06 14:57:19 +00:00
Paul Banks 52d7283cd6
UI metrics provider dc (#9001)
* Plumb Datacenter and Namespace to metrics provider in preparation for them being usable.

* Move metrics loader/status to a new component and show reason for being disabled.

* Remove stray console.log

* Rebuild AssetFS to resolve conflicts

* Yarn upgrade

* mend
2020-10-26 19:48:23 +00:00
John Cowen c4f027fa0d
ui: Upgrade the rest of the UI to use the new Notice component (#9035) 2020-10-26 16:51:53 +00:00
John Cowen 948917c6b0
ui: Intention Custom Resource Banners (#9018) 2020-10-26 09:30:07 +00:00
John Cowen 7559f64d01
ui: Fixup CSS for create pages (#9019) 2020-10-23 15:41:36 +01:00
John Cowen 45554e4e9c
ui: Notice component (#9011)
Add simple Notice template only glimmer component
2020-10-23 09:26:32 +01:00
John Cowen 6589cbbd0d
ui: Move to Workspaced Structure (#8994)
* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target
2020-10-21 15:23:16 +01:00