ui: Hide all metrics for ingress gateway services (#10858)

.changelog/10858.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Hide all metrics for ingress gateway services
+```

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

@@ -25,8 +25,10 @@
       @hasMetricsProvider={{@hasMetricsProvider}}
       @noMetricsReason={{this.noMetricsReason}}
     >
-    {{#if (and @hasMetricsProvider (not-eq @service.Service.Kind 'ingress-gateway'))}}
+    {{#if (and @hasMetricsProvider this.mainNotIngressService (not-eq item.Kind 'ingress-gateway'))}}
+      {{!-- One of the only places in the app where it's acceptable to default to 'default' namespace --}}
       <TopologyMetrics::Stats
+        data-test-topology-metrics-downstream-stats
         @nspace={{or item.Namespace 'default'}}
         @dc={{item.Datacenter}}
         @endpoint='downstream-summary-for-service'
@@ -51,7 +53,7 @@
         @protocol={{@topology.Protocol}}
         @noMetricsReason={{this.noMetricsReason}}
       />
-      {{#if (not-eq @service.Service.Kind 'ingress-gateway')}}
+      {{#if this.mainNotIngressService}}
       <TopologyMetrics::Stats
         @nspace={{or @service.Service.Namespace 'default'}}
         @dc={{@dc}}
@@ -98,7 +100,8 @@
         @item={{item}}
         @service={{@service.Service}}
       >
-      {{#if (and @hasMetricsProvider (not-eq @service.Service.Kind 'ingress-gateway'))}}
+      {{#if (and @hasMetricsProvider this.mainNotIngressService (not-eq item.Kind 'ingress-gateway'))}}
+        {{!-- One of the only places in the app where it's acceptable to default to 'default' namespace --}}
         <TopologyMetrics::Stats
           @nspace={{or item.Namespace 'default'}}
           @dc={{item.Datacenter}}

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

@@ -84,6 +84,12 @@ export default class TopologyMetrics extends Component {
     return items;
   }
 
+  get mainNotIngressService() {
+    const kind = get(this.args.service.Service, 'Kind') || '';
+
+    return kind !== 'ingress-gateway';
+  }
+
   // =actions
   @action
   setHeight(el, item) {
@@ -98,9 +104,9 @@ export default class TopologyMetrics extends Component {
   @action
   calculate() {
     if (this.args.isRemoteDC) {
-      this.noMetricsReason = 'Unable to fetch metrics for a remote datacenter';
+      this.noMetricsReason = 'remote-dc';
     } else if (this.args.service.Service.Kind === 'ingress-gateway') {
-      this.noMetricsReason = 'Unable to fetch metrics for a ingress gateway';
+      this.noMetricsReason = 'ingress-gateway';
     } else {
       this.noMetricsReason = null;
     }

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

@@ -1,12 +1,16 @@
-{{#if @noMetricsReason}}
+{{#if (or @noMetricsReason @error)}}
-  <span class="topology-metrics-error">
+  <span data-test-topology-metrics-status class="topology-metrics-status-error">
-    Unable to load metrics
+    {{#if (eq @noMetricsReason 'ingress-gateway')}}
-    <span>
+      {{t "components.consul.topology-metrics.status.ingress-gateway"}}
-      <Tooltip>{{@noMetricsReason}}</Tooltip>
+    {{else if (eq @noMetricsReason 'remote-dc')}}
-    </span>
+      {{t "components.consul.topology-metrics.status.error"}}
-  </span>
+      <span
+        {{tooltip (t "components.consul.topology-metrics.status.remote-dc")}}
+      />
     {{else if @error}}
-  <span class="topology-metrics-error">Unable to load metrics</span>
+      {{t "components.consul.topology-metrics.status.error"}}
-{{else}}
+    {{/if}}
-  <span class="topology-metrics-loader">Loading Metrics</span>
+  </span>
+{{else}}
+  <span class="topology-metrics-status-loader">{{t "components.consul.topology-metrics.status.loading"}}</span>
 {{/if}}

ui/packages/consul-ui/app/components/topology-metrics/status/index.scss

@@ -1,5 +1,5 @@
-.topology-metrics-error,
+.topology-metrics-status-error,
-.topology-metrics-loader {
+.topology-metrics-status-loader {
   font-weight: normal;
   font-size: 0.875rem;
   color: $gray-500;
@@ -13,6 +13,6 @@
   }
 }
 
-span.topology-metrics-loader::after {
+span.topology-metrics-status-loader::after {
   @extend %with-loading-icon, %as-pseudo;
 }

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

@@ -72,6 +72,9 @@ ${
         const allowed = hasPerms ? false : fake.random.boolean();
         return `
     {
+${(Math.random(1) > 0.3) ? `
+      "Kind": "${fake.helpers.randomize(['mesh-gateway', 'ingress-gateway', 'terminating-gateway', ''])}",
+` : ''}
       "Name": "${item.Name}",
       "Datacenter": "${item.Datacenter}",
       "Namespace": "${item.Namespace}",
@@ -98,6 +101,9 @@ ${
         const allowed = hasPerms ? false : fake.random.boolean();
         return `
     {
+${(Math.random(1) > 0.3) ? `
+      "Kind": "${fake.helpers.randomize(['mesh-gateway', 'ingress-gateway', 'terminating-gateway', ''])}",
+` : ''}
       "Name": "${item.Name}",
       "Datacenter": "${item.Datacenter}",
       "Namespace": "${item.Namespace}",

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

@@ -33,4 +33,51 @@ Feature: dc / services / show / topology / stats
     ---
     And I see topology on the tabs
     And I see the "[data-test-topology-metrics-stats]" element
+  Scenario: Given metrics is enabled, metrics stats are disabled for an ingress gateway Topology
+    Given 1 datacenter model with the value "dc1"
+    Given a "prometheus" metrics provider
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: ingress-gateway
+        Kind: ingress-gateway
+        ID: ingress-gateway-with-id
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: ingress-gateway
+    ---
+    And I see topology on the tabs
+    And I don't see the "[data-test-topology-metrics-stats]" element
+    And I see the "[data-test-topology-metrics-status]" element
+  Scenario: Given metrics is enabled, metric stats are disabled for ingress gateway as downstream services
+    Given 1 datacenter model with the value "dc1"
+    Given a "prometheus" metrics provider
+    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: {}
+          Kind: ingress-gateway
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see topology on the tabs
+    And I see the "[data-test-sparkline]" element
+    And I don't see the "[data-test-topology-metrics-downstream-stats]" element
 

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

@@ -160,9 +160,13 @@ topology-metrics:
       header: No traffic
       body: Add "{upstream}" as an explicit upstream of "{downstream}" or set the "{downstream}" proxy to "transparent" mode to enable traffic.
       action: Documentation
+  status:
+    error: Unable to load metrics
+    remote-dc: Unable to fetch metrics for a remote datacenter
+    loading: Loading metrics
+    ingress-gateway: Viewing metrics for Ingress Gateways is not currently supported in the UI.
 source:
   header: This is not a registered Consul service. It’s a routing configuration that routes traffic to real services in Consul. For more information, read our documentation.
   menu-title: About Routing Configs
   links:
     documentation: Documentation
-