Commit Graph

60 Commits

Author SHA1 Message Date
Ronald 6bcb98ea71
Add UI copyright headers files (#16614)
* Add copyright headers to UI files

* Ensure copywrite file ignores external libs
2023-03-14 09:18:55 -04:00
wenincode 5f5d438724 Remove consul logo icons 2022-10-26 08:57:43 -06:00
wenincode 913873f520 Remove some icons 2022-10-25 14:02:38 -06:00
wenincode c91e604591 Update icon-map to work for auth methods 2022-10-25 07:14:55 -06:00
wenincode 914467f8b7 Use FlightIcon component for external sources 2022-10-24 13:39:28 -06:00
Michael Klein 1228b9a8a8 Prototype StreamStatus integration peers detail 2022-10-13 16:43:49 +02:00
Michael Klein b9d5d3cb62 Don't handle undefined in smart-date-format
We will handle that from the outside
2022-10-13 16:43:38 +02:00
Michael Klein be604a2828 Implement smart-date-format-helper
Add a helper that knows how to format past dates
in a smart way. When less than a week ago we will
use relative date strings - for dates older than a week
we will use a friendly human-readable format.

This matches best practices we want to adhere to
based on what Terraform did for date-formatting.
2022-10-13 16:43:38 +02:00
John Cowen e174ec3dce
ui: Add initial tests for peering searching/sorting (#14568)
* ui: Add initial tests for peering searching/sorting

* New lint
2022-09-20 15:34:08 +01:00
Michael Klein 048572946c
ui: chore - upgrade ember and friends (#14518)
* v3.20.2...v3.24.0

* Fix handle undefined outlet in route component

* Don't use template helper for optional modal.open

Using the optional-helper here will trigger a computation
in the same runloop error. This is because we are setting
the `modal`-property when the `<Ref>` component gets
rendered which will update the `this.modal`-property which
will then recompute the `optional`-helper leading to this
error.

Instead we will create an action that will call the `open`-method
on the modal when it is defined. This gets rid of the double
computation error as we will not access the modal property
twice in the same runloop when `modal` is getting set.

* Fix - fn needs to be passed function tab-nav

We create functions in the component file instead
so that fn-helper stops complaining about the
need to pass a function.

* Update ember-exam to 6.1 version

"Makes it compatible" with ember-qunit v5

* scheduleOnce setMaxHeight paged-collection

We need to schedule to get around double-computation error.

* Fix - model.data is removed from ember-data

This has been private API all along - we need to
work around the removal.

Reference: https://github.com/emberjs/data/pull/7338/files#diff-9a8746fc5c86fd57e6122f00fef3155f76f0f3003a24b53fb7c4621d95dcd9bfL1310

* Fix `propContains` instead of `deepEqual` policy

Recent model.data works differently than iterating attributes.
We use `propContains` instead of `deepEqual`. We are only
interested in the properties we assert against and match
the previous behavior with this change.

* Fix `propContains` instead of `deepEqual` token

* Better handling single-records repo test-helper

`model.data` has been removed we need to handle proxies and
model instances differently.

* Fix remaining repository tests with propContains

We don't want to match entire objects - we don't care
about properties we haven't defined in the assertion.

* Don't use template helper for optional modal.open

Using a template helper will give us a recomputation error -
we work around it by creating an explicit action on
the component instead.

* Await `I $verb the $pageObject object` step

* Fix no more customization ember-can

No need to customize, the helper handles destruction
fine on its own.

* Fix - don't pass `optional` functions to fn

We will declare the functions on the component instead.
This gives us the same behavior but no error from
`fn`, which expects a function to be passed.

* Fix - handle `undefined` state on validate modifier

StateChart can yield out an undefined `state` we need
to handle that in the validate modifier

* Fix linting errors tests directory

* Warn / turn off new ember linting issues

We will tackle them one by one and don't want to
autofix issues that could be dangerous to auto-fix.

* Auto-fix linting issues

* More linting configuration

* Fix remaining linting issues

* Fix linting issues new files after rebase

* ui: Remove ember-cli-uglify config now we are using terser (#14574)

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2022-09-15 09:43:17 +01:00
John Cowen f658ee9996
ui: Add AWS Lambda as potential external source (#14605)
* ui: Add AWS Lambda as potential external source

* Update mocks to expect `lambda` as an external-source meta

* Additional mock to make sure all our mocks only contain whats possible
2022-09-14 18:38:03 +01:00
Michael Klein d25b025468
ui: use environment variable for feature flagging peers (#13703)
* ui: use environment variable for feature flagging peers

* Add documentation for `features`-service

* Allow setting feature flag for peers via bookmarklet

* don't use features service for flagging peers

* add ability for checking if peers feature is enabled

* Use abilities to conditionally use peers feature

* Remove unused features service
2022-07-12 12:02:45 +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 c86aedfdd5
ui: Gradual deprecation of old StateChart interface (#13604) 2022-07-04 11:22:14 +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
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 e711b920c4
ui: Overview UI Routing (#12493)
This PR adds routes and an initial landing page for the Cluster Overview page
2022-03-15 12:58:14 +00:00
John Cowen 7fbfab669c
ui: DisclosureCard component (#12541) 2022-03-15 12:54:56 +00:00
John Cowen 7c4dd75abd
ui: Add license endpoint/datasource (#12506)
* ui: Add auto-pilot/state endpoint usage (merged into DC models) (#12514)

* ui: Catalog Health Overview DataSource (#12520)
2022-03-09 09:03:15 +00:00
John Cowen 3ae1d8fec2
ui: DistributionMeter Component (#12452) 2022-03-09 08:28:34 +00:00
John Cowen a563c121fc
ui: CustomElement component (#12451)
Builds on attach-shadow, adopt-styles and ShadowTemplate, this commit adds ShadowHost and finally CustomElement.

CustomElement is a renderless component to help with the creation of native HTML Custom Elements along with runtime type checking and self-documentation for attributes, slots, cssprops and cssparts. As you will probably see there is a little more work to come here. But in the same breath, everything would be fine to go in as is.
2022-03-07 09:51:47 +00:00
John Cowen 6e0eddd841
ui: Replace CollapsibleNotices with more a11y focussed Disclosure component (#12305)
* Delete collapsible notices component and related helper

* Add relative t action/helper to our Route component

* Replace single use CollapsibleNotices with multi-use Disclosure
2022-02-18 17:16:03 +00:00
John Cowen d3e5d6edc4
ui: Ensure proxy instance health is taken into account in Service Instance Listings (#12279)
We noticed that the Service Instance listing on both Node and Service views where not taking into account proxy instance health. This fixes that up so that the small health check information in each Service Instance row includes the proxy instances health checks when displaying Service Instance health (afterall if the proxy instance is unhealthy then so is the service instance that it should be proxying)

* Refactor Consul::InstanceChecks with docs

* Add to-hash helper, which will return an object keyed by a prop

* Stop using/relying on ember-data type things, just use a hash lookup

* For the moment add an equivalent "just give me proxies" model prop

* Start stitching things together, this one requires an extra HTTP request

..previously we weren't even requesting proxies instances here

* Finish up the stitching

* Document Consul::ServiceInstance::List while I'm here

* Fix up navigation mocks Name > Service
2022-02-10 15:28:26 +00:00
John Cowen 01437e81ea
ui: attach-shadow modifier (#12207)
* ui: attach-shadow modifier
* ui: adopt-styles helper (#12208)
2022-02-01 19:48:57 +00:00
John Cowen 23d45f5ef5
ui: style-map helper (#12203) 2022-02-01 16:39:02 +00:00
John Cowen a8466a874c
ui: class-map helper (#12202)
{{class-map}} is used to easily add a list of classes, conditionally, and
have them all formatted nicely ready to be printed in a DOM class attribute.

For ease, as well as using entries, you can also just provide a simple string
without the boolean and that class will always be added.
2022-01-27 11:21:12 +00:00
John Cowen 514e24ba9f
ui: Ensure service instance data does not get re-written on blocking refresh (#11903)
* Add some less fake API data

* Rename the models class so as to not be confused with JS Proxies

* Rearrange routlets slightly and add some initial outletFor tests

* Move away from a MeshChecks computed property and just use a helper

* Just use ServiceChecks for healthiness filtering for the moment

* Make TProxy cookie configurable

* Amend exposed paths and upstreams so they know about meta AND proxy

* Slight bit of TaggedAddresses refactor while I was checking for `meta` etc

* Document CONSUL_TPROXY_ENABLE
2022-01-07 19:16:21 +00:00
John Cowen 3d1b859533
ui: Support for SSO with Admin Partitions (#11604)
* Upgrade AuthForm and document current state a little better
* Hoist SSO out of the AuthForm
* Bare minimum admin partitioned SSO

also:

ui: Tabbed Login with Token or SSO interface (#11619)

- I upgraded our super old, almost the first ember component I wrote, to use glimmer/almost template only. This should use slots/contextual components somehow, but thats a bigger upgrade so I didn't go that far.
- I've been wanting to upgrade the shape of our StateChart component for a very long while now, here its very apparent that it would be much better to do this sooner rather than later. I left it as is for now, but there will be a PR coming soon with a slight reshaping of this component.
- Added a did-upsert modifier which is a mix of did-insert/did-update
- Documentation added/amended for all the new things.
2021-11-24 14:53:12 +00: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 764c22a6c4
ui: Add eng docs for our render-template helper (#11359)
Adds Engineer documentation for our recently improved render-template helper, plus some ideas for further work/improvement here should anyone ever want to pick that up.
2021-11-18 10:21:36 +00:00
Kenia 2bdc98552a
ui: Add Consul API Gateway as an external source (#11371) 2021-11-10 16:54:12 -05:00
John Cowen ecd296eaf7 Revert "Merge pull request #11328 from radiantly/ui/feature/allow-${}-style-interpolation"
This reverts commit cd55c0cda3310c06abe989b8d145d9946945ae8d, reversing
changes made to 14af8cb7a9e7fc0a65178e6ca7708b3f395f0d70.
2021-11-10 17:54:33 +00:00
Kenia 24d8236219
ui: Topology view with no dependencies (#11280) 2021-11-05 13:46:41 -04:00
John Cowen 4dd7e34c96
ui: Ensure dc selector correctly shows the currently selected dc (#11380)
* ui: Ensure dc selector correctly shows the currently selected dc

* ui: Restrict access to non-default partitions in non-primaries (#11420)

This PR restricts access via the UI to only the default partition when in a non-primary datacenter i.e. you can only have multiple (non-default) partitions in the primary datacenter.
2021-10-26 19:26:04 +01:00
radiantly 79ba05b2a6
ui: Allow ${} interpolation for template URLs 2021-10-15 15:37:51 +05:30
Kenia 08138a86fb
ui: Topology - Fix up Default Allow and Permissive Intentions notices (#11216)
* ui: Default allow notices test (#11240)
2021-10-12 09:27:06 -04:00
John Cowen 93b78aee53
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 d4d6466665
ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117)
Our DataSource came in very iteratively, when we first started using it we specifically tried not to use it for things that would require portions of the @src="" attribute to be URL encoded (so things like service names couldn't be used, but dc etc would be fine). We then gradually added an easy way to url encode the @src="" attributes with a uri helper and began to use the DataSource component more and more. This meant that some DataSource usage continued to be used without our uri helper.

Recently we hit #10901 which was a direct result of us not encoding @src values/URIs (I didn't realise this was one of the places that required URL encoding) and not going back over things to finish things off once we had implemented our uri helper, resulting in ~half of the codebase using it and ~half of it not.

Now that almost all of the UI uses our DataSource component, this PR makes it even harder to not use the uri helper, by wrapping the string that it requires in a private URI class/object, that is then expected/asserted within the DataSource component/service. This means that as a result of this PR you cannot pass a plain string to the DataSource component without seeing an error in your JS console, which in turn means you have to use the uri helper, and it's very very hard to not URL encode any dynamic/user provided values, which otherwise could lead to bugs/errors similar to the one mentioned above.

The error that you see when you don't use the uri helper is currently a 'soft' dev time only error, but like our other functionality that produces a soft error when you mistakenly pass an undefined value to a uri, at some point soon we will make these hard failing "do not do this" errors.

Both of these 'soft error' DX features have been used this to great effect to implement our Admin Partition feature and these kind of things will minimize the amount of these types of bugs moving forwards in a preventative rather than curative manner. Hopefully these are the some of the kinds of things that get added to our codebase that prevent a multitude of problems and therefore are often never noticed/appreciated.

Additionally here we moved the remaining non-uri using DataSources to use uri (that were now super easy to find), and also fixed up a place where I noticed (due to the soft errors) where we were sometimes passing undefined values to a uri call.

The work here also led me to find another couple of non-important 'bugs' that I've PRed already separately, one of which is yet to be merged (#11105), hence the currently failing tests here. I'll rebase that once that PR is in and the tests here should then pass 🤞

Lastly, I didn't go the whole hog here to make DataSink also be this strict with its uri usage, there is a tiny bit more work on DataSink as a result of recently work, so I may (or may not) make DataSink equally as strict as part of that work in a separate PR.
2021-09-30 15:54:46 +01:00
John Cowen 5da06645b0
ui: Gracefully recover from non-existent DC errors (#11077)
* ui: Gracefully recover from non-existent DC errors

This PR fixes what happens in the UI if you try to navigate to a non-existing DC.

When we received a 500 error from an API response due to a non-existent DC, previously we would show a 404 error, which is what we were trying to convey. But in the spirit of the UI being a 'thin client', its probably best to just show the 500 error from the API response, which may help folks to debug any issues better.

* Automatically set the CONSUL_DATACENTER_LOCAL env var for testing
2021-09-22 18:26:36 +01:00
Kenia 01ec8d1419
ui: Add Vault as a Service External Source (#10769) 2021-08-04 18:22:43 -04:00
John Cowen 7083c39b96
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 17:43:46 +01:00
John Cowen a389eab7b0
ui: Adds human formatting to nanosecond based session durations (#10062)
* ui: Adds human formatting to nanosecond based session durations
2021-04-28 12:12:56 +01:00
kenia b62042fe44 review note fixes 2021-04-15 09:19:22 -04:00
kenia 672c0a818e Create icon and dashed line for intention not explictly defined 2021-04-15 09:19:21 -04: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 7c36d749f5
ui: Add Route component / routlet service (#9813)
* Add Routlet service and Route Component

* Add ember-assign-helper (already an indirect dependency)

* Use EventListeners for is-href instead of observing

* Don't include :active in '-intent' styles
2021-03-08 12:15:54 +00:00
John Cowen 8b58d81d64
ui: Adds unique-id helper (#9676) 2021-02-02 10:03:46 +00:00
John Cowen 367482c540
ui: Improves the 'you must provide ... to `generate`' error from href-to (#9514)
This originally comes form the ember-href-to helper and is one of those
errors that when I see it I think ... hmmm

This gives a little bit more of a clue as to what is wrong by logging
the route name you asked for plus the params you passed to it so you:

1. Have more help finding the href-to that is problematic in the
template/component
2. Can see all the parameters you passed (including a potential null
parameter for the thing you are missing)
2021-01-19 15:25:37 +00:00
Kenia 8c00340b83
ui: Return empty state for no health check in Topology Cards (#9403) 2020-12-15 14:32:03 -05:00
John Cowen 36a1666bdb
ui: Install ember-intl (#9399)
* ui: Install ember-intl

Also:

1. Removes our own format-number in order to use ember-intl's instead
2. Moves format-time to format-short-time so as to not clash with
ember-intls own format-time
2020-12-15 18:29:32 +00:00