L7 Routing empty state

[jnwright]

Overview of issue

• If a user hasn't configured any L7 traffic management stages (routers, splitters, resolvers), show an informational banner at the top explaining why the router and resolver is present by default
• Add tooltips to the default router and resolver cards which appear on mouseover

Desired styling:

Without TCP protocol

NOTE: the images below should have the "Read the documentation" and "Follow the guide" links at the bottom, just like in the "With TCP protocol" image below.

With TCP protocol

Links to include in the informational banner

• Read the documentation:
  • Icon: use same icon as is used on the intention page empty state
  • Link: https://www.consul.io/docs/connect/l7-traffic
• Follow the guide:
  • Icon: use same icon as is used on the intention page empty state
  • Link: https://learn.hashicorp.com/tutorials/consul/service-mesh-traffic-management

[jkirschner-hashicorp]

Hello Consul community members,

We would welcome a PR contributed by the community for this UI enhancement!

If you're interested, please comment here so anyone interested can stay informed.

Getting started with Consul UI development To launch the UI in development mode, follow the directions in the UI readme.

When running the development app (make start), any changes you save in the website source files will be recompiled and reloaded in your browser pages pointed at the app (e.g., http://localhost:4200/ui/).

Please name your branch according to these guidelines to ensure that the PR you submit triggers CI execution of the frontend test suite.

Accessing a service's routing tab Open the UI and click on services (http://localhost:4200/ui/dc1/services). Click on a standard service (most types of services have intentions tabs, but not all). On the service page, click on the Routing tab. You will likely see a non-empty list of L7 traffic management stages.

To force the stages to be empty, you may have to modify the source. For example, this is where info for the routing stage is fetched.

Here's where the default routing stage is currently added (in the model).

[VinWare]

I'm interested, will take this up

[jkirschner-hashicorp]

Hi @VinWare ,

Just checking in to see how things are going and whether you have any questions!

And if your circumstances have changed and you are no longer able to work on this at this time, just let us know. You are certainly welcome to continue on this after Hacktoberfest if you wish :) Thanks!

[VinWare]

Yes, I'll first submit the basic L7 one. Might need some clarification on TCP, but I'll get to it later. And yes.. I would be contributing even after Hacktoberfest :)

[VinWare]

I have a doubt about the default router definition. From this code Here's where the default routing stage is currently added, I see that the default router is only added if the 'default' splitter or resolver are present, else even the router is not added. Is the card only to be shown when the router is added (i.e. this code is called)