Add some basic UI improvements for api-gateway services#16476
Add some basic UI improvements for api-gateway services#16476andrewstucki wants to merge 4 commits intomainfrom
Conversation
nathancoleman
left a comment
There was a problem hiding this comment.
Nice! Some really high-value improvements without any complexity 👍
Would like to see the currently-broken docs links fixed, but that's not an issue introduced by this PR
| (array 'ingress-gateway' '/consul/developer-mesh/ingress-gateways') | ||
| (array 'terminating-gateway' '/consul/developer-mesh/understand-terminating-gateways') | ||
| (array 'mesh-gateway' '/consul/developer-mesh/connect-gateways') |
There was a problem hiding this comment.
We only have the Learn guide covering API Gateway for Kubernetes, so I suppose it makes sense to leave API gateway out of this list for now
There was a problem hiding this comment.
Yeah, I was thinking we could add it eventually. As is it'll still show a learn guide link, but it'll just link to the root of the learn guides, which I think is fine, didn't want to change this component around too much.
t-eckert
left a comment
There was a problem hiding this comment.
Awesome followthrough on this, making sure the whole thing is buttoned down is great
WenInCode
left a comment
There was a problem hiding this comment.
For some reason the frontend tests on this are only running a noop job. Looking into it.
Changes look great though.
| Name: computed('item.Kind', function () { | ||
| const name = normalizedGatewayLabels[this.item.Kind]; | ||
| return name ? name : titleize(humanize(this.item.Kind)); | ||
| }), |
There was a problem hiding this comment.
This works great as is, but if you'd like to update this component to use the newer ember (Octane) conventions for component you can update this to be:
import Component from '@glimmer/component';
import { titleize } from 'ember-cli-string-helpers/helpers/titleize';
import { humanize } from 'ember-cli-string-helpers/helpers/humanize';
const normalizedGatewayLabels = {
'api-gateway': 'API Gateway',
'mesh-gateway': 'Mesh Gateway',
'ingress-gateway': 'Ingress Gateway',
'terminating-gateway': 'Terminating Gateway',
};
export default class CounterComponent extends Component {
get name() {
const name = normalizedGatewayLabels[this.args.item.Kind];
return name ? name : titleize(humanize(this.args.item.Kind));
}
}
However, doing this will also require updating the associated template's usages of item and withInfo to be @item and @withInfo to denote the usage of passed in arguments.
Definitely not required, just providing it as an option.
https://guides.emberjs.com/release/components/component-arguments-and-html-attributes/#toc_arguments
and
https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/#component-properties__tracked-vs-cp
There was a problem hiding this comment.
Ooh, neat to know, that'd at least let us start removing some of the deprecation warnings that get thrown.
I'm thinking the bigger change can probably wait since we'll likely have some more changes going into this component in the next release i.e. at minimum, a learn tutorial -- and since we're trying to merge for a patch release, I don't want to make too many changes (especially not having touched Ember code for ~8 years).
| Then the url should be /dc-1/services | ||
| And the title should be "Services - Consul" | ||
| Then I see 2 service models | ||
| Then I see 3 service models |
There was a problem hiding this comment.
I'm seeing this test fail locally still showing 2 service models. I can try and look into it to help out later if I have some time after some meetings
|
@andrewstucki any chance you could open this under a new branch name following the It looks like our CI frontend tests only run if the branch has that naming structure. |
good catch Tyler 🏅 |
|
Closing in favor of #16508 |
Description
There are a number of things we don't support yet, such as topologies, displaying upstreams, etc. for API gateways (the new VM-native ones), but I think these are the quickest things that we can add to clean up how our new gateways display in the UI. The fonts are slightly off due to running in proxying mode I guess?
Service Listing Page
Before:
After:
Search Bar
Before:
After:
Hovered Kind Label
Before:
After:
PR Checklist