Commit Graph

31 Commits

Author SHA1 Message Date
John Cowen a9d3de8b3e
ui: Peer token use form (#13792) 2022-07-20 12:38:39 +01:00
John Cowen 8c0da8fdfb
ui: Peer Deletion (#13665)
* ui: Peer Deletion (#13665)
* ui: Add sorting peer listing by State (#13684)
* ui: Add filtering peer listing by State (#13685)
2022-07-07 18:23:26 +01:00
John Cowen 8d275ac186
ui: CopyableCode component (#13686)
* ui: CopyableCode component plus switch into existing implementations
2022-07-07 17:42:47 +01:00
Michael Klein 272c878559
ui: feature-flagged peering mvp (#13425)
* add peers route

* add peers to nav

* use regular app ui patterns peers template

* use empty state in peers UI

* mock `v1/peerings` request

* implement custom adapter/serializer for `peers`-model

* index request for peerings on peers route

* update peers list to show as proper list

* Use tailwind for easier styling

* Unique ids in peerings response mock-api

* Add styling peerings list

* Allow creating empty tooltip

To make it easier to iterate over a set of items where some items
should not display a tooltip and others should.

* Add tooltip Peerings:Badge

* Add undefined peering state badge

* Remove imported/exported services count peering

This won't be included in the initial version of the API response

* Implement Peerings::Search

* Make it possible to filter peerings by name

* Install ember-keyboard

For idiomatic handling of key-presses.

* Clear peering search input when pressing `Escape`

* use peers.index instead of peers for peerings listing

* Allow to include peered services in services-query

* update services mock to add peerName

* add Consul::Peer component

To surface peering information on a resource

* add PeerName as attribute to service model

* surface peering information in service list

* Add tooltip to Consul::Peer

* Make services searchable by peer-name

* Allow passing optional query-params to href-to

* Add peer query-param to dc.services.show

* Pass peer as query-param services listing

* support option peer route-param

* set peer-name undefined in services serializer when empty

* update peer route-param when navigating to peered service

* request sercice with peer-name if need be

* make sure to reset peer route-param when leaving service.show

* componentize services.peer-info

* surface peer info services.show

* make sure to reset peer route-param in main nav

* fix services breadcrumb services.intentions

we need to reset peer route-param here to not break the app

* surface peer when querying for it on service api call

* query for peer info service-instance api calls

* surface peer info service-instance.show

* Camelize peer attributes to match rest of app

* Refactor peers.index to reflect camelized attributes for peer

* Remove unused query-params services.show

* make logo href reset peer route-param

* Cleanup optional peer param query service-instance

* Use replace decorator instead of serializer for empty peerName

* make sure to only send peer info when correct qp is passed

* Always send qp for querying peers services request

* rename with-imports to with-peers

* Use css for peer-icon

* Refactor bucket-list component to surface peer-info

* Remove Consul::Peer component

This info is now displayed via the bucket-list component

* Fix bucket-list component to surface service again

* Update bucket-list docs to reflect peer-info addition

* Remove tailwind related styles

* Remove consul-tailwind package

We won't be using tailwind for now

* Fix typo badge scss

* Add with-import handling mock-api nodes

* Add peerName to node attributes

* include peers when querying nodes

* reflect api updates node list mock

* Create consul::node::peer-info component

* Surface peer-info in nodes list

* Mock peer response for node request

* Make it possible to add peer-name to node request

* Update peer route-param when linking to node

* Reset peers route-param when leaving nodes.show

We need to reset the route-param to not introduce a bug - otherwise
subsequent node show request would request with the old peer query-param

* Add sourcePeer intentions api mock

* add SourcePeer attr to intentions model

* Surface peering info on intentions list

* Request peered intentions differently intentions.edit

* Handle peer info in intentions/exact mock

* Surface peering info intention view

* Add randomized peer data topology mock

* Surface peer info topology view

* fix service/peer-info styling

We aren't using tailwind anymore - we need to create a custom scss file

* Update peerings api mocks

* Update peerings::badge with updated styling

* cleanup intentions/exact mock

* Create watcher component to declaratively register polling

* Poll peers in background when on peers route

* use existing colors for peering-badge

* Add test for requesting service with `with-peers`-query

* add imported/exported count to peers model

* update mock-api to surface exported/imported count on peers

* Show exported/imported peers count on peers list

* Use translations for service import/export UI peers

* Make sure to ask for nodes with peers

* Add match-url step for easier url testing of service urls

* Add test for peer-name on peered services

* Add test for service navigation peered service

* Implement feature-flag handling

* Enable peering feature in test and development

* Redirect peers to services.index when feature-flag is disabled

* Only query for peers when feature is enabled

* Only show peers in nav when feature is enabled

* Componentize peering service count detail

* Handle non-state Peerings::Badge

* Use Peerings::ServiceCount in peerings list

* Only send peer query for peered service-instances.

* Add step to visit url directly

* add test for accessing peered service directly

* Remove unused service import peers.index

* Only query for peer when peer provided node-adapter

* fix tests
2022-06-23 14:16:26 +01:00
Michael Klein f58fca2048
ui: upgrade ember composable helper (#13394)
Upgrade ember-composable-helpers to version 5.x. This version contains the pick-helper which makes composition in the template layer easier with Octane.

{{!-- this is usually hard to do with Octane --}}
<input {{on "input" (pick "target.value" this.updateText)}} .../>
Version 5.x also fixes a regression with sort-by that according to @johncowen was the reason why the version was pinned to 4.0.0 at the moment.

Version 5 of ember-composable-helpers removes the contains-helper in favor of includes which I changed all occurences for.
2022-06-08 16:07:51 +01:00
John Cowen af460dcd97
ui: Icon related fixups (#13183)
* ui: Use new icon-size and icon-color for popover-menus

* Remove the default currentColor plus add some more defaults

* Undo transparency overwrites now we don't need them

* Fixup discochain icons

* Undo a default icon rule for vert align

* Fixup expanded icon for meatball popovers

* Fixup intention permission labels/badges/icons

* Remove different res icon

* Remove icon resolutions
2022-05-25 14:28:42 +01:00
Evan Rowe 59d0ec3be3
Merge pull request #12738 from hashicorp/ui/bugfix/safari-icons
ui: Fixup icons not displaying in Safari
2022-04-15 14:00:07 -07:00
John Cowen 19cb9779e2
ui: Adds licensing overview tab (#12706)
* Add some utilities/helpers to temporal for formatting etc

* Enable the licensing tab

* Add licensing page

* Add CSS for licensing page

* Fixup typo

* Remove box shadow from panel
2022-04-12 09:56:54 +01:00
John Cowen e4d8c3b1d0 Fallback icons to currentColor 2022-04-11 10:04:26 +01:00
John Cowen 13c6959b2b
ui: Tile CSS component (#12570)
* ui: Tile CSS component

* ui: Consul ServerCard component (#12576)
2022-03-23 10:34:26 +00:00
John Cowen 7fbfab669c
ui: DisclosureCard component (#12541) 2022-03-15 12:54:56 +00:00
John Cowen dfefcabfbe
ui: Native CSS Icon Composition (#12461)
This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
2022-03-15 12:54:14 +00:00
John Cowen b525389286
ui: Fix loading icon size (adds a viewbox) (#12479) 2022-03-07 10:13:56 +00:00
John Cowen 404523f7ea
ui: Alias all our Structure Icons to Flight Icons (#12209) 2022-02-02 13:24:47 +00:00
John Cowen 8990d383e8
ui: Enable theming (#12134)
plus Themeable icons (#12135)
2022-01-21 12:19:03 +00:00
Kenia fbb9f5cdf5
ui: Adding Partition to topology card (#11805) 2022-01-11 10:04:06 -05:00
John Cowen a686404ccd
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 dae93f8a9c
ui: Fix up socket icon (#11234) 2021-10-11 14:37:05 +01:00
John Cowen 2200cde988
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 7639cc8797
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
Kenia 01ec8d1419
ui: Add Vault as a Service External Source (#10769) 2021-08-04 18:22:43 -04:00
Kenia a8f1f28785
ui: Add socket icon for UDS (#10573) 2021-07-12 09:28:01 -04:00
John Cowen 6d8dc8a09b
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 93c5780fab
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 07496c0180
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 0e9d4ceb0f
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 d47ccb859f
ui: Improves UI engineering docs (#9875)
Also fixes some typos in with-overlay
2021-03-17 15:58:17 +00:00
John Cowen 5ff1897070
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
Kenia da8280f4c5
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 6ef7c15e51
ui: New overlays (#9305)
Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
John Cowen c98130cc08
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