ui: Add Consul API Gateway as an external source (#11371)

.changelog/11371.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adding support of Consul API Gateway as an external source.
+```

ui/packages/consul-ui/app/components/consul/external-source/index.hbs

@@ -1,6 +1,35 @@
 {{#if @item}}
   {{#let (service/external-source @item) as |externalSource|}}
-    {{#if externalSource}}
+  {{#if (and @withInfo (eq externalSource 'consul-api-gateway'))}}
+        <dl class="tooltip-panel">
+          <dt>
+            <span
+              data-test-external-source={{externalSource}}
+              class="consul-external-source {{externalSource}}"
+              ...attributes
+            >
+              Registered via {{t (concat "common.brand." externalSource)}}
+            </span>
+          </dt>
+          <dd>
+            <MenuPanel @position="left" @menu={{false}}>
+              <BlockSlot @name="header">
+                API Gateways manage north-south traffic from external services to services in the Datacenter. For more information, read our documentation.
+              </BlockSlot>
+              <BlockSlot @name="menu">
+                <li role="separator">
+                  About {{t (concat "common.brand." externalSource)}}
+                </li>
+                <li role="none" class="learn-link">
+                  <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_LEARN_URL')}} rel="noopener noreferrer" target="_blank">
+                    Learn guides
+                  </a>
+                </li>
+              </BlockSlot>
+            </MenuPanel>
+          </dd>
+        </dl>
+  {{else if externalSource}}
     <span
       data-test-external-source={{externalSource}}
       class="consul-external-source {{externalSource}}"
@@ -9,11 +38,7 @@
       {{#if @label}}
         {{@label}}
       {{else}}
-          {{#if (eq externalSource 'aws')}}
+        Registered via {{t (concat "common.brand." externalSource)}}
-            Registered via {{uppercase externalSource}}
-          {{else}}
-            Registered via {{capitalize externalSource}}
-          {{/if}}
       {{/if}}
     </span>
   {{/if}}

ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs

@@ -65,7 +65,7 @@ as |item index|>
         {{/if}}
         </td>
     </BlockSlot>
-{{#if (or (can "write intention" item=item) (can "view CRD intention" item=item))}}
+{{#if (and (or (can "write intention" item=item) (can "view CRD intention" item=item)) (not-eq item.Meta.external-source 'consul-api-gateway'))}}
     <BlockSlot @name="actions" as |index change checked|>
       <PopoverMenu
         @expanded={{if (eq checked index) true false}}

ui/packages/consul-ui/app/components/pill/index.scss

@@ -29,7 +29,8 @@ span.policy-service-identity::before {
 %pill.nomad::before {
   @extend %with-logo-nomad-color-icon, %as-pseudo;
 }
-%pill.consul::before {
+%pill.consul::before,
+%pill.consul-api-gateway::before {
   @extend %with-logo-consul-color-icon, %as-pseudo;
 }
 %pill.vault::before {

ui/packages/consul-ui/app/components/popover-menu/layout.scss

@@ -5,7 +5,7 @@
   display: block;
 }
 %popover-menu-panel {
-  width: 192px;
+  min-width: 192px;
 }
 %popover-menu-panel:not(.above) {
   top: 38px;

ui/packages/consul-ui/app/components/popover-select/index.scss

@@ -55,12 +55,16 @@
 %popover-select .oidc button::before {
   @extend %with-logo-oidc-color-icon, %as-pseudo;
 }
-%popover-select .consul button::before {
+%popover-select .consul button::before,
+%popover-select .consul-api-gateway button::before {
   @extend %with-logo-consul-color-icon, %as-pseudo;
 }
 %popover-select .nomad button::before {
   @extend %with-logo-nomad-color-icon, %as-pseudo;
 }
+%popover-select .vault button::before {
+  @extend %with-logo-vault-color-icon, %as-pseudo;
+}
 %popover-select .terraform button::before {
   @extend %with-logo-terraform-color-icon, %as-pseudo;
 }

ui/packages/consul-ui/app/components/topology-metrics/index.hbs

@@ -48,6 +48,7 @@
     <div class="metrics-header">
       {{@service.Service.Service}}
     </div>
+  {{#if (not-eq @service.Service.Meta.external-source 'consul-api-gateway')}}
     {{#if @hasMetricsProvider}}
       <TopologyMetrics::Series
         @nspace={{or @service.Service.Namespace 'default'}}
@@ -76,6 +77,7 @@
       <a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/connect/observability/ui-visualization" target="_blank" rel="noopener noreferrer">Configure dashboard</a>
     {{/if}}
     </div>
+  {{/if}}
   </div>
   <div id="downstream-lines">
     <TopologyMetrics::DownLines

ui/packages/consul-ui/app/helpers/service/external-source.js

@@ -7,7 +7,12 @@ export function serviceExternalSource(params, hash) {
     source = get(params[0], 'Meta.external-source');
   }
   const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix;
-  if (source && ['vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) {
+  if (
+    source &&
+    ['consul-api-gateway', 'vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(
+      source
+    )
+  ) {
     return `${prefix}${source}`;
   }
   return;

ui/packages/consul-ui/app/templates/dc/services/instance.hbs

@@ -97,7 +97,7 @@ as |item|}}
             <h1>
               <route.Title @title={{item.Service.ID}} />
             </h1>
-            <Consul::ExternalSource @item={{item}} />
+            <Consul::ExternalSource @item={{item}} @withInfo={{true}} />
             <Consul::Kind @item={{item}} @withInfo={{true}} />
             {{#if (eq proxy.ServiceProxy.Mode 'transparent')}}
               <Consul::TransparentProxy />

ui/packages/consul-ui/app/templates/dc/services/show.hbs

@@ -112,7 +112,7 @@ as |items item dc|}}
               <h1>
                 <route.Title @title={{item.Service.Service}} />
               </h1>
-              <Consul::ExternalSource @item={{item.Service}} />
+              <Consul::ExternalSource @item={{item.Service}} @withInfo={{true}} />
               <Consul::Kind @item={{item.Service}} @withInfo={{true}} />
           </BlockSlot>
           <BlockSlot @name="nav">

ui/packages/consul-ui/mock-api/v1/connect/_

@@ -96,7 +96,7 @@ ${fake.helpers.randomize([
             "Precedence": ${i + 1},
 ${ fake.random.number({min: 1, max: 10}) > 2 ? `
             "Meta": {
-              "external-source": "${fake.helpers.randomize(['kubernetes'])}"
+              "external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
             },
 ` : `` }
             "CreatedAt": "2018-05-21T16:41:27.977155457Z",

ui/packages/consul-ui/mock-api/v1/connect/intentions/_

@@ -81,7 +81,7 @@ ${fake.helpers.randomize([
     "Precedence": ${fake.random.number({min: 1, max: 100})},
 ${ !legacy && fake.random.number({min: 1, max: 10}) > 2 ? `
     "Meta": {
-      "external-source": "${fake.helpers.randomize(['kubernetes'])}"
+      "external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
     },
 ` : `` }
     "CreatedAt": "2018-05-21T16:41:27.977155457Z",

ui/packages/consul-ui/mock-api/v1/connect/intentions/exact

@@ -83,7 +83,7 @@ ${fake.helpers.randomize([
     "Precedence": ${fake.random.number({min: 1, max: 100})},
 ${ !legacy && fake.random.number({min: 1, max: 10}) > 2 ? `
     "Meta": {
-      "external-source": "${fake.helpers.randomize(['kubernetes'])}"
+      "external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
     },
 ` : `` }
     "CreatedAt": "2018-05-21T16:41:27.977155457Z",

ui/packages/consul-ui/mock-api/v1/health/service/_

@@ -81,7 +81,7 @@ ${typeof location.search.partition !== 'undefined' ? `
 ${ fake.random.number({min: 1, max: 10}) > 2 ? `
             "Meta": {
               "consul-dashboard-url": "${fake.internet.protocol()}://${fake.internet.domainName()}/?id={{Service}}",
-              "external-source": "${fake.helpers.randomize(['vault', 'consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"
+              "external-source": "${fake.helpers.randomize(['consul-api-gateway', 'vault', 'consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"
             },
 ` : `
             "Meta": null,

ui/packages/consul-ui/mock-api/v1/internal/ui/node/_

@@ -60,7 +60,7 @@ return `
               ],
 ${ fake.random.number({min: 1, max: 10}) > 2 ? `
             "Meta": {
-              "external-source": "${fake.helpers.randomize(['consul', 'nomad', 'terraform', 'kubernetes', ''])}"
+              "external-source": "${fake.helpers.randomize(['consul-api-gateway', 'consul', 'nomad', 'terraform', 'kubernetes', ''])}"
             },
 ` : `` }
               "Address":"",

ui/packages/consul-ui/mock-api/v1/internal/ui/services

@@ -82,7 +82,7 @@ ${ fake.random.number({min: 1, max: 10}) > 2 ? `
                     range(fake.random.number({min: 1, max: 1})).map(
                         function(item, i)
                         {
-                            return `"${fake.helpers.randomize(['vault', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`;
+                            return `"${fake.helpers.randomize(['consul-api-gateway', 'vault', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`;
                         }
                     )
                 }

ui/packages/consul-ui/tests/acceptance/dc/services/show/topology/metrics.feature

@@ -48,3 +48,25 @@ Feature: dc / services / show / topology / metrics
       service: web
     ---
     And I see the "[data-test-sparkline]" element
+  Scenario: Metrics enabled but serivce source is Consul API Gateway
+    Given 1 datacenter model with the value "datacenter"
+    And the local datacenter is "datacenter"
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: web
+        Kind: ~
+        Meta:
+          external-source: consul-api-gateway
+    ---
+    And ui_config from yaml
+    ---
+    metrics_proxy_enabled: true
+    metrics_provider: 'prometheus'
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: datacenter
+      service: web
+    ---
+    And I don't see the "[data-test-sparkline]" element

ui/packages/consul-ui/translations/common/en-us.yaml

@@ -1,5 +1,6 @@
 brand:
   consul: Consul
+  consul-api-gateway: Consul API Gateway
   terraform: Terraform
   nomad: Nomad
   vault: Vault