Commit Graph

212 Commits

Author SHA1 Message Date
John Cowen 5f51ac931b ui: Increase z-index of main menus to avoid layering issues (#10428) 2021-06-22 13:22:48 +00:00
John Cowen 9bfa9afb5a 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 10:55:29 +00:00
John Cowen 2f9e968d38 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 10:45:38 +00:00
John Cowen 8fb3ef99c8 ui: Move intention description field (#10292)
...from under the permissions widget to over the permissions widget
2021-05-27 14:56:19 +00:00
John Cowen 5518c36e62 ui: Fixup prettier for scss files and run (#10296)
* ui: Ensure prettier makes all our scss files pretty

* Run prettier on all our scss files
2021-05-27 12:24:45 +00:00
Kenia 8a34582273 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-27 08:01:01 -04:00
John Cowen 206e414908 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 16:53:03 +00:00
John Cowen dd280ee2b2 ui: Support Route optional parameters/segments (#10212)
Moves our URLs with 'optional namespace segment' into a separately abstracted 'optional URL segment' feature
2021-05-26 16:46:46 +00:00
John Cowen 56a165b489 ui: Colocate old base components into our app/component folder (#10275) 2021-05-26 14:09:32 +00:00
John Cowen 7731aab820 ui: Minor CSS tweaks (#10295) 2021-05-26 13:39:48 +00:00
John Cowen f6605b2770 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 11:33:04 +00:00
John Cowen be13c4ff42 ui: change coloring of secondary navigation elements (#10259) 2021-05-24 10:52:04 +00:00
John Cowen f69c4a2501 ui: Miscellaneous Lock Session fixes (#10225) 2021-05-19 10:08:18 +00:00
John Cowen eb396b0409 ui: Bump node to v14 (#10238) 2021-05-18 15:35:54 +00:00
John Cowen 981b8af307 ui: Use babel plugin to strip calls to runInDebug (#10237) 2021-05-17 12:28:42 +00:00
John Cowen 1fe17b720a 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 10:37:46 +00:00
Kenia 062590180f 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 15:40:46 +00:00
John Cowen b93df0e22d 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 10:20:09 +00:00
John Cowen 8522c83283 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 15:55:33 +00:00
John Cowen 4c983cfd3e ui: Remove top border from Consul::AuthMethod::List (#10195) 2021-05-07 15:54:38 +00:00
John Cowen f61866fda6 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 11:24:01 +00:00
John Cowen 16eb3263a3 ui: [BUGFIX] De-duplicate Tag rendering (#10186)
* Add some tests for duplicated and non-duplicated tags

* Ensure tags get de-duped and add docs

* Update docs to include info on the recursive-ness
2021-05-07 11:08:14 +00:00
Mike Morris a80a1d87bf ui: add data-enterprise-logo to logo svg for enterprise 2021-05-05 23:30:42 +00:00
Hector Simpson a1cb79b1f8 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-05 16:17:32 -04:00
Kenia f35af2bb59 ui: Add TProxy Mode notice banner to service instance Upstreams tab (#10136) 2021-05-05 16:17:32 -04:00
Kenia bc0f175bbe ui: Update not-defined intention popover and banner (#10133) 2021-05-05 16:17:32 -04:00
Kenia c86c2222cd ui: Splitting up the translations file into folder structure (#10093) 2021-05-05 16:17:32 -04:00
Kenia 3439ec2d0b ui: Update conditional for topology empty state (#10124) 2021-05-05 16:17:32 -04:00
Kenia c41ef2d7cf ui: Fix empty SVG height to prevent service mesh from breaking when there are no upstreams (#10122) 2021-05-05 16:17:32 -04:00
John Cowen a666a08510 ui: Remove extra nspace value from service upstreams (#10152)
* ui: Remove extra nspace value from service upstreams
2021-05-04 16:45:27 +00:00
John Cowen 9ebc9561d9 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 16:28:18 +00:00
John Cowen 2d6f0d1854 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 16:24:30 +00:00
John Cowen 60163a13ce
ui: Hoist DC menu into the top navigation bar (#10034) (#10140)
* 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-05-04 14:00:14 +01:00
John Cowen f79302d44a ui: Add a max height and scroll to the intention perm header lists (#10128) 2021-04-29 09:42:17 +00:00
John Cowen fed8b59b00 ui: Adds human formatting to nanosecond based session durations (#10062)
* ui: Adds human formatting to nanosecond based session durations
2021-04-28 11:14:09 +00:00
John Cowen 380d151201 ui: Vertically stack methods listing in the L7 intentions form (#10052)
* ui: Vertically stack methods listing in the L7 intentions form
2021-04-22 11:24:14 +00:00
John Cowen 3378e4b5ad ui: Add Admin Partition feature flag (#10051)
* ui: Add Admin Partition feature flag

This adds a `PartitionEnabled`/`CONSUL_PARTITIONS_ENABLED` feature flag
that can be set during production form the consul binary, or
additionally during development/testing via cookies.

* Add partitions bookmarklet and docs, and all eng docs from main README to the docs instead.

You probably already have the app running once you need these, and it reduces the amount of text/detail in the main README

* Add the env variable section back into the README with actual env vars
2021-04-22 11:23:11 +00:00
John Cowen d6667880d4 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 11:18:29 +00:00
Mike Morris f00d5e3a2a
ui: fix mismatched curly brace in mock-api (#10044)
* ui: fix mismatched curly brace in mock-api

* ui: add missing closing paren in mock-api
2021-04-15 18:24:52 -04:00
Freddy daf897f1a9
Merge pull request #10002 from hashicorp/ui/feature/banners-and-labels-for-tproxy-changes 2021-04-15 14:14:20 -06:00
John Cowen f33feeeec4
ui: Never respond with empty gateway addresses (mock-api) (#10035)
We noticed that our mock API would sometimes respond with an empty array
of addresses - which resulted in an empty space in the gateway upstream
listing which looked as though it could be broken.

I checked with backend, and as this will never happen, I made the change
here also so the gateway upstream list is always fully populated with
addresses.
2021-04-15 19:18:37 +01:00
John Cowen 76b2122f38
ui: remove old nspace argument from the proxy instance repository (#10039)
The extra argument meant that the blocking query configuration wasn't
being read properly, and therefore the correct ?index wasn't being sent
with the request.
2021-04-15 19:18:07 +01:00
kenia 703869603e review note fixes 2021-04-15 09:19:22 -04:00
kenia 53a0fc56e9 Update catalog mock data for Mode attr 2021-04-15 09:19:22 -04:00
kenia 876d03a81b Refactor TopologyMetrics Notices 2021-04-15 09:19:22 -04:00
kenia 041245c7dd Create placeholder *(All Services) Card 2021-04-15 09:19:22 -04:00
kenia 934db376f4 Add translations for topology-mterics and transparent-proxy components 2021-04-15 09:19:22 -04:00
kenia 727b6e966b Create icon and dashed line for intention not explictly defined 2021-04-15 09:19:21 -04:00
kenia f5849fd500 Create not explicitly defined intentions banner 2021-04-15 09:19:21 -04:00
kenia 52e88bbf65 Create TransparentProxy mode label for service instance page 2021-04-15 09:19:21 -04:00