ui: Add support in Topology view for Routing Configurations (#10872)

.changelog/10872.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Adding support in Topology view for Routing Configurations
+```

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

@@ -1,15 +1,16 @@
 {{#if (eq @item.Name '* (All Services)')}}
-<a class="topology-metrics-card" href={{href-to 'dc.services.index'}}>
+<a data-test-topology-metrics-card class="topology-metrics-card" href={{href-to 'dc.services.index'}}>
   <p class="empty">
     {{@item.Name}}
   </p>
 </a>
 {{else}}
-<a class="topology-metrics-card"
+<a data-test-topology-metrics-card
+  class="topology-metrics-card"
   href={{if
    (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))
-    (href-to "dc.services.show.index" @item.Datacenter @item.Name params=(hash nspace=@item.Namespace))
+    (href-to this.hrefPath @item.Datacenter @item.Name params=(hash nspace=@item.Namespace))
-    (href-to "dc.services.show.index" @item.Name)
+    (href-to this.hrefPath @item.Name)
   }}
   data-permission={{service/intention-permissions @item}}
   id="{{@item.Namespace}}{{@item.Name}}"
@@ -18,7 +19,10 @@
     {{@item.Name}}
   </p>
   {{#if (eq @item.Source 'proxy-registration')}}
-    <TopologyMetrics::SourceType />
+    <TopologyMetrics::SourceType @source='proxy-registration' />
+  {{/if}}
+  {{#if (eq @item.Source 'routing-config')}}
+    <TopologyMetrics::SourceType @source='routing-config' />
   {{/if}}
   <div class="details">
   {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
@@ -33,6 +37,9 @@
       </dd>
     </dl>
   {{/if}}
+
+{{#if (not-eq @item.Source 'routing-config')}}
+
 {{#if (eq @item.Datacenter @dc)}}
   {{#let (service/health-percentage @item) as |percentage|}}
   {{#if (eq percentage '')}}
@@ -60,6 +67,8 @@
         Health
       </dd>
     </dl>
+{{/if}}
+
 {{/if}}
   </div>
   {{yield}}

ui/packages/consul-ui/app/components/topology-metrics/card/index.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+export default class TopologyMetrics extends Component {
+  // =methods
+  get hrefPath() {
+    const source = get(this.args.item, 'Source');
+
+    return source === 'routing-config' ? 'dc.routing-config' : 'dc.services.show.index';
+  }
+}

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

@@ -1,6 +1,7 @@
 <span
+  data-test-topology-metrics-source-type
   class="topology-metrics-source-type"
-  {{tooltip (t "components.consul.topology-metrics.source-type.tooltip")}}
+  {{tooltip (t (concat "components.consul.topology-metrics.source-type." @source ".tooltip"))}}
 >
-  {{t "components.consul.topology-metrics.source-type.text"}}
+  {{t (concat "components.consul.topology-metrics.source-type." @source ".text")}}
 </span>

ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_

@@ -78,7 +78,7 @@ ${
       "ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
-      "Source": "${fake.helpers.randomize(['proxy-registration', 'default-allow', 'wildcard-intention'])}",
+      "Source": "${fake.helpers.randomize(['routing-config', 'proxy-registration', 'default-allow', 'wildcard-intention'])}",
       "TransparentProxy": ${fake.random.boolean()},
       "Intention": {
         "Allowed": ${allowed},
@@ -104,7 +104,7 @@ ${
       "ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
       "ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})},
-      "Source": "${fake.helpers.randomize(['proxy-registration', 'specific-intention', 'default-allow', 'wildcard-intention'])}",
+      "Source": "${fake.helpers.randomize(['routing-config', 'proxy-registration', 'specific-intention', 'default-allow', 'wildcard-intention'])}",
       "TransparentProxy": ${fake.random.boolean()},
       "Intention": {
         "Allowed": ${allowed},

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

@@ -0,0 +1,34 @@
+@setupApplicationTest
+Feature: dc / services / show / topology / routing-config
+  Background:
+    Given 1 datacenter model with the value "dc1"
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: service-0
+        ID: service-0-with-id
+    ---
+    And 1 topology model from yaml
+    ---
+      Upstreams: []
+      Downstreams:
+        - Name: db
+          Namespace: @namespace
+          Datacenter: dc1
+          Intention: {}
+          Source: routing-config
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see topology on the tabs
+  Scenario: Given the Source is routing config, show Source Type
+    Then I see the text "Routing configuration" in "[data-test-topology-metrics-source-type]"
+  Scenario: Given the Source is routing config, redirect to Routing Config page
+    When I click "[data-test-topology-metrics-card]"
+    Then the url should be /dc1/routing-config/db
+
+

ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/routing-config-steps.js

@@ -0,0 +1,10 @@
+import steps from '../../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}

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

@@ -117,8 +117,12 @@ intention:
 transparent-proxy: Transparent Proxy
 topology-metrics:
   source-type:
-    tooltip: This connection was defined in a proxy registration.
+    proxy-registration:
-    text: Defined in proxy registration
+      tooltip: This connection was defined in a proxy registration.
+      text: Defined in proxy registration
+    routing-config:
+      tooltip: This is not a registered Consul service. It’s a routing configuration that routes traffic to real services in Consul.
+      text: Routing configuration
   notice:
     limited-access:
       header: Limited Access