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
2020-11-10 11:31:47 -05:00 · 2020-11-10 11:31:47 -05:00 · 4d4226ee38
parent 892fa384fe
commit 4d4226ee38
21 changed files with 143 additions and 308 deletions
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
@ -1,5 +1,5 @@
-<ul data-test-proxy-upstreams>
-{{#each items as |item|}}
+<ul data-test-proxy-upstreams class="consul-upstream-instance-list">
+{{#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>
-        <dt>
-          <CopyButton
-            @value={{combinedAddress}}
-            @name="Address"
-          />
-        </dt>
-        <dd>{{combinedAddress}}</dd>
-      </dl>
+      <span>
+        <CopyButton
+          @value={{combinedAddress}}
+          @name="Address"
+        />
+        <span>
+          {{combinedAddress}}
+        </span>
+      </span>
    {{/let}}
    {{/if}}
    </div>
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.js
+++ b/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: '',
-});
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
+++ b/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;
+}
--- a/ui/packages/consul-ui/app/router.js
+++ b/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' },
        },
--- a/ui/packages/consul-ui/app/routes/dc/services/instance/exposedpaths.js
+++ b/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);
--- a/ui/packages/consul-ui/app/routes/dc/services/instance/proxy.js
+++ b/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);
-  }
-}
--- a/ui/packages/consul-ui/app/routes/dc/services/instance/upstreams.js
+++ b/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);
--- a/ui/packages/consul-ui/app/styles/components/composite-row.scss
+++ b/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,
--- a/ui/packages/consul-ui/app/styles/layout.scss
+++ b/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,
--- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
+++ b/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"))
              )
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs
+++ b/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>
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs
+++ b/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>
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/proxy.hbs
+++ b/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>
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
+++ b/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>
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/instances/exposed-paths.feature
+++ b/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
+
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/instances/proxyinfo.feature
+++ b/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
-
-
-
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/instances/show.feature
+++ b/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
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/instances/upstreams.feature
+++ b/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
+
--- a/ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/exposed-paths-steps.js
+++ b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/exposed-paths-steps.js
--- a/ui/packages/consul-ui/tests/acceptance/steps/dc/services/instances/upstreams-steps.js
+++ b/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);
+  });
+}
--- a/ui/packages/consul-ui/tests/pages/dc/services/instance.js
+++ b/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]'),