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

3 years ago · 37de276350
18 changed files with 93 additions and 30 deletions
--- a/.changelog/11371.txt
+++ b/.changelog/11371.txt
@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adding support of Consul API Gateway as an external source.
+```
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
@ -1,21 +1,46 @@
 {{#if @item}}
  {{#let (service/external-source @item) as |externalSource|}}
-    {{#if externalSource}}
-      <span
-        data-test-external-source={{externalSource}}
-        class="consul-external-source {{externalSource}}"
-        ...attributes
-      >
-        {{#if @label}}
-          {{@label}}
-        {{else}}
-          {{#if (eq externalSource 'aws')}}
-            Registered via {{uppercase externalSource}}
-          {{else}}
-            Registered via {{capitalize externalSource}}
-          {{/if}}
-        {{/if}}
-      </span>
-    {{/if}}
+  {{#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}}"
+      ...attributes
+    >
+      {{#if @label}}
+        {{@label}}
+      {{else}}
+        Registered via {{t (concat "common.brand." externalSource)}}
+      {{/if}}
+    </span>
+  {{/if}}
  {{/let}}
 {{/if}}
--- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
+++ b/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}}
--- a/ui/packages/consul-ui/app/components/pill/index.scss
+++ b/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 {
--- a/ui/packages/consul-ui/app/components/popover-menu/layout.scss
+++ b/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;
--- a/ui/packages/consul-ui/app/components/popover-select/index.scss
+++ b/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;
 }
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
+++ b/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
--- a/ui/packages/consul-ui/app/helpers/service/external-source.js
+++ b/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;
--- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
+++ b/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 />
--- a/ui/packages/consul-ui/app/templates/dc/services/show.hbs
+++ b/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">
--- a/ui/packages/consul-ui/mock-api/v1/connect/_
+++ b/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",
--- a/ui/packages/consul-ui/mock-api/v1/connect/intentions/_
+++ b/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",
--- a/ui/packages/consul-ui/mock-api/v1/connect/intentions/exact
+++ b/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",
--- a/ui/packages/consul-ui/mock-api/v1/health/service/_
+++ b/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,
--- a/ui/packages/consul-ui/mock-api/v1/internal/ui/node/_
+++ b/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":"",
--- a/ui/packages/consul-ui/mock-api/v1/internal/ui/services
+++ b/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', ''])}"`;
                        }
                    )
                }
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/show/topology/metrics.feature
+++ b/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
--- a/ui/packages/consul-ui/translations/common/en-us.yaml
+++ b/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