ui: Delete Proxy Info tab (#9141)

* Remove Proxy Info and create Upstreams and Exposed Paths tabs

* Update routes formatting

* Update typo for Expose.Checks

* Remove, update, and add tests

* Make consul-upstream-instance-list into a glimmer component

* Create styling for upstream-instance-list component

ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs

@@ -1,5 +1,5 @@
-<ul data-test-proxy-upstreams>
+<ul data-test-proxy-upstreams class="consul-upstream-instance-list">
-{{#each items as |item|}}
+{{#each @items as |item|}}
   <li>
     <div class="header">
       <p data-test-destination-name>
@@ -21,7 +21,7 @@
       </dl>
     {{/if}}
   {{/if}}
-    {{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}}
+    {{#if (and (not-eq item.Datacenter @dc) (not-eq item.Datacenter ""))}}
       <dl class="datacenter">
         <dt>
           <Tooltip>
@@ -35,15 +35,15 @@
     {{/if}}
     {{#if (gt item.LocalBindPort 0)}}
     {{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
-      <dl>
+      <span>
-        <dt>
+        <CopyButton
-          <CopyButton
+          @value={{combinedAddress}}
-            @value={{combinedAddress}}
+          @name="Address"
-            @name="Address"
+        />
-          />
+        <span>
-        </dt>
+          {{combinedAddress}}
-        <dd>{{combinedAddress}}</dd>
+        </span>
-      </dl>
+      </span>
     {{/let}}
     {{/if}}
     </div>

ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.js

@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss

@@ -0,0 +1,6 @@
+.consul-upstream-instance-list > li {
+  @extend %composite-row;
+}
+.consul-upstream-instance-list > ul {
+  border-top: 1px solid $gray-200;
+}

ui/packages/consul-ui/app/router.js

@@ -46,9 +46,6 @@ export const routes = {
         healthchecks: {
           _options: { path: '/health-checks' },
         },
-        proxy: {
-          _options: { path: '/proxy' },
-        },
         upstreams: {
           _options: { path: '/upstreams' },
         },

ui/packages/consul-ui/app/routes/dc/services/instance/exposedpaths.js

@@ -1,5 +1,4 @@
 import Route from 'consul-ui/routing/route';
-import { get } from '@ember/object';
 
 export default class ExposedpathsRoute extends Route {
   model() {
@@ -10,19 +9,6 @@ export default class ExposedpathsRoute extends Route {
     return this.modelFor(parent);
   }
 
-  afterModel(model, transition) {
-    if (
-      get(model, 'item.Kind') !== 'connect-proxy' ||
-      get(model, 'item.Proxy.Expose.Paths.length') < 1
-    ) {
-      const parent = this.routeName
-        .split('.')
-        .slice(0, -1)
-        .join('.');
-      this.replaceWith(parent);
-    }
-  }
-
   setupController(controller, model) {
     super.setupController(...arguments);
     controller.setProperties(model);

ui/packages/consul-ui/app/routes/dc/services/instance/proxy.js

@@ -1,16 +0,0 @@
-import Route from 'consul-ui/routing/route';
-
-export default class ProxyRoute extends Route {
-  model() {
-    const parent = this.routeName
-      .split('.')
-      .slice(0, -1)
-      .join('.');
-    return this.modelFor(parent);
-  }
-
-  setupController(controller, model) {
-    super.setupController(...arguments);
-    controller.setProperties(model);
-  }
-}

ui/packages/consul-ui/app/routes/dc/services/instance/upstreams.js

@@ -1,5 +1,4 @@
 import Route from 'consul-ui/routing/route';
-import { get } from '@ember/object';
 
 export default class UpstreamsRoute extends Route {
   model() {
@@ -10,16 +9,6 @@ export default class UpstreamsRoute extends Route {
     return this.modelFor(parent);
   }
 
-  afterModel(model, transition) {
-    if (get(model, 'item.Service.Kind') !== 'connect-proxy') {
-      const parent = this.routeName
-        .split('.')
-        .slice(0, -1)
-        .join('.');
-      this.replaceWith(parent);
-    }
-  }
-
   setupController(controller, model) {
     super.setupController(...arguments);
     controller.setProperties(model);

ui/packages/consul-ui/app/styles/components/composite-row.scss

@@ -1,6 +1,6 @@
 @import './composite-row/index';
 
-.proxy-upstreams > ul > li,
+.consul-upstream-instance-list > li,
 .list-collection > ul > li:not(:first-child) {
   @extend %composite-row;
 }
@@ -34,7 +34,7 @@
   overflow-x: visible !important;
 }
 .consul-intention-permission-list > ul,
-.proxy-upstreams > ul {
+.consul-upstream-instance-list > ul {
   border-top: 1px solid $gray-200;
 }
 .consul-service-instance-list .port dt,

ui/packages/consul-ui/app/styles/layout.scss

@@ -12,10 +12,11 @@ html[data-route$='edit'] .app-view > header + div > *:first-child {
 %app-view-content [role='tabpanel'] > .filter-bar + p {
   margin-top: 1.25em;
 }
-/* turn off top borders for things flush up to a filter bar */
+.consul-upstream-instance-list,
 .consul-lock-session-list {
   margin-top: 0 !important;
 }
+/* turn off top borders for things flush up to a filter bar */
 html[data-route='dc.services.index'] .consul-service-list ul,
 .consul-nspace-list ul,
 .consul-service-instance-list ul,

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

@@ -47,8 +47,10 @@
                       (hash label="Addresses" href=(href-to "dc.services.instance.addresses") selected=(is-href "dc.services.instance.addresses")) ""
 )
 (if proxy
-                      (hash label="Proxy Info" href=(href-to "dc.services.instance.proxy") selected=(is-href "dc.services.instance.proxy"))
+                      (hash label="Upstreams" href=(href-to "dc.services.instance.upstreams") selected=(is-href "dc.services.instance.upstreams"))
-
+)
+(if proxy
+                      (hash label="Exposed Paths" href=(href-to "dc.services.instance.exposedpaths") selected=(is-href "dc.services.instance.exposedpaths"))
 )
                       (hash label="Tags & Meta" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
               )

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

@@ -0,0 +1,10 @@
+<div class="tab-section">
+  <div role="tabpanel">
+  {{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}}
+    <p>
+      The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation.
+    </p>
+    <Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} />
+  {{/if}}
+  </div>
+</div>

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

@@ -2,7 +2,10 @@
   <div role="tabpanel">
     {{#if (gt item.Checks.length 0) }}
       <section data-test-checks>
-        <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} @exposed={{proxy.ServiceProxy.Expose.Checks}} />
+        <HealthcheckList
+          @items={{sort-by (comparator 'check' 'Status:asc') (append item.Checks proxy.Checks)}}
+          @exposed={{proxyMeta.ServiceProxy.Expose.Checks}}
+        />
       </section>
     {{else}}
       <EmptyState>

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

@@ -1,25 +0,0 @@
-<div class="tab-section">
-  <div role="tabpanel">
-  {{#if (gt proxy.Service.Proxy.Upstreams.length 0)}}
-    <section class="proxy-upstreams">
-      <h3>Upstreams</h3>
-      <Consul::UpstreamInstance::List @items={{proxy.Service.Proxy.Upstreams}} @dc={{dc}} @nspace={{nspace}} />
-    </section>
-  {{/if}}
-  {{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}}
-    <section class="proxy-exposed-paths">
-      <h3>Exposed paths</h3>
-      <p>
-        The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation.
-      </p>
-      <Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} />
-    </section>
-  {{/if}}
-  {{#if (or (gt proxy.ServiceChecks.length 0) (gt proxy.NodeChecks.length 0))}}
-    <section>
-      <h3>Proxy health</h3>
-      <HealthcheckList data-test-proxy-checks @items={{sort-by (comparator 'check' 'Status:asc') (append proxy.ServiceChecks proxy.NodeChecks)}} />
-    </section>
-  {{/if}}
-  </div>
-</div>

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

@@ -0,0 +1,7 @@
+<div class="tab-section">
+  <div role="tabpanel">
+  {{#if (gt proxy.Service.Proxy.Upstreams.length 0)}}
+    <Consul::UpstreamInstance::List @items={{proxy.Service.Proxy.Upstreams}} @dc={{dc}} @nspace={{nspace}} />
+  {{/if}}
+  </div>
+</div>

ui/packages/consul-ui/tests/acceptance/dc/services/instances/exposed-paths.feature

@@ -0,0 +1,42 @@
+@setupApplicationTest
+Feature: dc / services / instances / Exposed Paths
+  Background:
+    Given 1 datacenter model with the value "dc1"
+  Scenario: A Service instance without a Proxy does not display Exposed Paths tab
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-1
+        DestinationServiceID: ~
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0
+      node: node-0
+      id: service-0-with-id
+    ---
+    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
+    And I don't see exposedPaths on the tabs
+  Scenario: A Service instance with a Proxy displays Exposed Paths tab
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-0
+        DestinationServiceID: ~
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0
+      node: node-0
+      id: service-0-with-id
+    ---
+    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
+    And I see exposedPaths on the tabs
+
+    When I click exposedPaths on the tabs
+
+    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/exposed-paths
+    And I see exposedPathsIsSelected on the tabs
+

ui/packages/consul-ui/tests/acceptance/dc/services/instances/proxyinfo.feature

@@ -1,214 +0,0 @@
-@setupApplicationTest
-Feature: dc / services / instances / proxyinfo: Proxy Info tab
-  Background:
-    Given 1 datacenter model with the value "dc1"
-  Scenario: A Service instance without a Proxy does not display Proxy Info tab
-    Given 1 proxy model from yaml
-    ---
-    - ServiceProxy:
-        DestinationServiceName: service-1
-        DestinationServiceID: ~
-    ---
-    When I visit the instance page for yaml
-    ---
-      dc: dc1
-      service: service-0
-      node: node-0
-      id: service-0-with-id
-    ---
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I don't see proxyInfo on the tabs
-  Scenario: A Service instance with a Proxy displays Proxy Info tab
-    When I visit the instance page for yaml
-    ---
-      dc: dc1
-      service: service-0
-      node: node-0
-      id: service-0-with-id
-    ---
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I see proxyInfo on the tabs
-
-    When I click proxyInfo on the tabs
-
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
-    And I see proxyInfoIsSelected on the tabs
-  Scenario: A Proxy with health checks, upstreams, and exposed paths displays all info
-    Given 2 instance models from yaml
-    ---
-    - Service:
-        ID: service-0-with-id
-        Kind: consul
-      Node:
-        Node: node-0
-    - Service:
-        ID: service-0-with-id-proxy
-        Kind: connect-proxy
-        Proxy:
-          DestinationServiceName: service-0
-          Expose:
-            Checks: false
-            Paths:
-              - Path: /grpc-metrics
-                Protocol: grpc
-                LocalPathPort: 8081
-                ListenerPort: 8080
-              - Path: /http-metrics
-                Protocol: http
-                LocalPathPort: 8082
-                ListenerPort: 8083
-              - Path: /http-metrics-2
-                Protocol: http
-                LocalPathPort: 8083
-                ListenerPort: 8084
-          Upstreams:
-            - DestinationType: service
-              DestinationName: service-2
-              DestinationNamespace: default
-              LocalBindAddress: 127.0.0.1
-              LocalBindPort: 1111
-            - DestinationType: prepared_query
-              DestinationName: service-3
-              LocalBindAddress: 127.0.0.1
-              LocalBindPort: 1112
-      Node:
-        Node: node-0
-      Checks:
-        - Name: Service check
-          ServiceID: service-0-proxy
-          Output: Output of check
-          Status: passing
-        - Name: Service check
-          ServiceID: service-0-proxy
-          Output: Output of check
-          Status: warning
-        - Name: Service check
-          Type: http
-          ServiceID: service-0-proxy
-          Output: Output of check
-          Status: critical
-        - Name: Node check
-          ServiceID: ""
-          Output: Output of check
-          Status: passing
-        - Name: Node check
-          ServiceID: ""
-          Output: Output of check
-          Status: warning
-        - Name: Node check
-          ServiceID: ""
-          Output: Output of check
-          Status: critical
-    ---
-    When I visit the instance page for yaml
-    ---
-      dc: dc1
-      service: service-0
-      node: node-0
-      id: service-0-with-id
-    ---
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I see proxyInfo on the tabs
-
-    When I click proxyInfo on the tabs
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
-
-    And I see 6 of the proxyChecks object
-
-    And I see 2 of the upstreams object
-    And I see name on the upstreams like yaml
-    ---
-    - service-2
-    - service-3
-    ---
-  Scenario: A Proxy without health checks does not display Proxy Health section
-   And 2 instance models from yaml
-    ---
-    - Service:
-        ID: service-0-with-id
-        Kind: consul
-      Node:
-        Node: node-0
-    - Service:
-        ID: service-0-with-id-proxy
-        Kind: connect-proxy
-      Node:
-        Node: node-0
-      Checks: []
-    ---
-    When I visit the instance page for yaml
-    ---
-      dc: dc1
-      service: service-0
-      node: node-0
-      id: service-0-with-id
-    ---
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I see proxyInfo on the tabs
-
-    When I click proxyInfo on the tabs
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
-    And I see 0 of the proxyChecks object
-  Scenario: A Proxy without upstreams does not display Upstreams section
-    And 2 instance models from yaml
-    ---
-    - Service:
-        ID: service-0-with-id
-        Kind: consul
-      Node:
-        Node: node-0
-    - Service:
-        ID: service-0-with-id-proxy
-        Kind: connect-proxy
-        Proxy:
-          Upstreams: []
-      Node:
-        Node: node-0
-    ---
-    When I visit the instance page for yaml
-    ---
-      dc: dc1
-      service: service-0
-      node: node-0
-      id: service-0-with-id
-    ---
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I see proxyInfo on the tabs
-
-    When I click proxyInfo on the tabs
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
-    And I see 0 of the upstreams object
-  Scenario: A Proxy without exposed path does not display Exposed Paths section
-    And 2 instance models from yaml
-    ---
-    - Service:
-        ID: service-0-with-id
-        Kind: consul
-      Node:
-        Node: node-0
-    - Service:
-        ID: service-0-with-id-proxy
-        Kind: connect-proxy
-        Proxy:
-          Expose:
-            Checks: false
-            Paths: []
-      Node:
-        Node: node-0
-    ---
-    When I visit the instance page for yaml
-    ---
-      dc: dc1
-      service: service-0
-      node: node-0
-      id: service-0-with-id
-    ---
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I see proxyInfo on the tabs
-
-    When I click proxyInfo on the tabs
-    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/proxy
-    And I see 0 of the exposedPaths object
-
-
-

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

@@ -65,7 +65,7 @@ Feature: dc / services / instances / show: Show Service Instance
 
     And I don't see upstreams on the tabs
     And I see healthChecksIsSelected on the tabs
-    And I see 6 of the checks object
+    And I see 7 of the checks object
 
     When I click tags&Meta on the tabs
     And I see tags&MetaIsSelected on the tabs

ui/packages/consul-ui/tests/acceptance/dc/services/instances/upstreams.feature

@@ -0,0 +1,42 @@
+@setupApplicationTest
+Feature: dc / services / instances / Upstreams
+  Background:
+    Given 1 datacenter model with the value "dc1"
+  Scenario: A Service instance without a Proxy does not display Upstreams tab
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-1
+        DestinationServiceID: ~
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0
+      node: node-0
+      id: service-0-with-id
+    ---
+    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
+    And I don't see upstreams on the tabs
+  Scenario: A Service instance with a Proxy displays Upstreams tab
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-0
+        DestinationServiceID: ~
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0
+      node: node-0
+      id: service-0-with-id
+    ---
+    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
+    And I see upstreams on the tabs
+
+    When I click upstreams on the tabs
+
+    Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/upstreams
+    And I see upstreamsIsSelected on the tabs
+

ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/upstreams-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/tests/pages/dc/services/instance.js

@@ -4,7 +4,7 @@ export default function(visitable, attribute, collection, text, tabs) {
     externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
       scope: '.title',
     }),
-    tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags-&-meta']),
+    tabs: tabs('tab', ['health-checks', 'upstreams', 'exposed-paths', 'addresses', 'tags-&-meta']),
     checks: collection('[data-test-checks] li'),
     upstreams: collection('[data-test-proxy-upstreams] > li', {
       name: text('[data-test-destination-name]'),