From e6ecb477659b9dbdd7a80a7366ad44c758b36dca Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 25 Nov 2019 18:45:10 +0000
Subject: [PATCH] ui: Expose checks (#6575)

Adds visibility for `Expose.Checks` config setting for proxies.

1. Adds an 'Exposed Path' tab to the proxy detail page to show the user information on exposed paths.
2. If the users has exposed their healthchecks we also add this information to the Service detail page for this proxy (only for http2 and gRPC checks)
---
 .../base/components/tooltip/layout.scss       |  9 +-
 .../styles/base/components/tooltip/skin.scss  |  9 ++
 ui-v2/app/styles/components/app-view.scss     | 15 ++--
 .../styles/components/app-view/layout.scss    | 28 +++---
 .../styles/components/healthcheck-output.scss |  7 ++
 .../components/healthcheck-output/layout.scss | 62 +++++++------
 .../components/healthcheck-output/skin.scss   |  8 ++
 ui-v2/app/styles/components/table.scss        |  1 +
 .../styles/components/tabular-collection.scss | 19 ++++
 ui-v2/app/styles/routes/dc/service/index.scss |  6 +-
 .../templates/components/healthcheck-list.hbs | 34 +++++++-
 .../components/healthcheck-output.hbs         | 22 +----
 .../templates/dc/services/-exposedpaths.hbs   | 33 +++++++
 .../templates/dc/services/-servicechecks.hbs  |  2 +-
 .../app/templates/dc/services/-upstreams.hbs  |  2 +-
 ui-v2/app/templates/dc/services/instance.hbs  |  8 ++
 ui-v2/package.json                            |  2 +-
 .../acceptance/components/copy-button.feature | 14 ++-
 .../dc/services/instances/proxy.feature       | 86 ++++++++++++++++++-
 .../dc/services/instances/show.feature        | 62 ++++++++++++-
 .../components/healthcheck-output-test.js     | 15 +---
 .../services/repository/service-test.js       |  2 +-
 ui-v2/tests/pages/dc/services/instance.js     | 12 ++-
 ui-v2/yarn.lock                               | 12 ++-
 24 files changed, 373 insertions(+), 97 deletions(-)
 create mode 100644 ui-v2/app/templates/dc/services/-exposedpaths.hbs

diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss
index 33c7d91b87..042e026ae2 100644
--- a/ui-v2/app/styles/base/components/tooltip/layout.scss
+++ b/ui-v2/app/styles/base/components/tooltip/layout.scss
@@ -42,7 +42,14 @@
 }
 /* TODO: Try and use the same vertical positioning all tooltips */
 /* this is only for pseudo tooltips be want to avoid */
-/* specifiying pseudo in this file */
+/* specifying pseudo in this file */
 %tooltip::after {
   bottom: calc(100% - 7px);
 }
+%tooltip-bottom::before {
+  bottom: auto;
+  top: calc(100% + 7px);
+}
+%tooltip-bottom::after {
+  bottom: -12px;
+}
diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss
index 04c19a939e..6663e84b2d 100644
--- a/ui-v2/app/styles/base/components/tooltip/skin.scss
+++ b/ui-v2/app/styles/base/components/tooltip/skin.scss
@@ -3,12 +3,21 @@
   color: $white;
   background-color: $gray-500;
 }
+
+/* borders here are used to draw a triangle in CSS */
+/* the are not actual borders */
+
 %tooltip-tail {
   background-color: transparent !important;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
+
   border-top: 18px solid $gray-500;
 }
+%tooltip-bottom::after {
+  border-top: 0;
+  border-bottom: 18px solid $gray-500;
+}
 %tooltip-bubble {
   font-weight: normal;
   border-radius: $decor-radius-200;
diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss
index 9d6403b5c4..7c2955f6e1 100644
--- a/ui-v2/app/styles/components/app-view.scss
+++ b/ui-v2/app/styles/components/app-view.scss
@@ -4,14 +4,17 @@
 main {
   @extend %app-view;
 }
+%app-view > div > header {
+  @extend %app-view-header;
+}
 %app-view > div > div {
-  @extend %app-content;
+  @extend %app-view-content;
 }
 %app-view header form {
   @extend %filter-bar;
 }
 @media #{$--lt-spacious-page-header} {
-  %app-view header .actions {
+  %app-view-header .actions {
     margin-top: 9px;
   }
 }
@@ -30,8 +33,8 @@ main {
 %app-view h1 em {
   color: $gray-600;
 }
-%app-view header .actions a,
-%app-view header .actions button {
+%app-view-header .actions a,
+%app-view-header .actions button {
   @extend %button-compact;
 }
 %app-content div > dl {
@@ -39,10 +42,10 @@ main {
 }
 [role='tabpanel'] > p:only-child,
 .template-error > div,
-%app-content > p:only-child,
+%app-view-content > p:only-child,
 %app-view > div.disabled > div,
 %app-view.empty > div {
-  @extend %app-content-empty;
+  @extend %app-view-content-empty;
 }
 [role='tabpanel'] > *:first-child {
   margin-top: 1.25em;
diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss
index 0eae559a23..a36dbefa5f 100644
--- a/ui-v2/app/styles/components/app-view/layout.scss
+++ b/ui-v2/app/styles/components/app-view/layout.scss
@@ -1,67 +1,67 @@
 /* layout */
-%app-view header > div:last-of-type > div:first-child {
+%app-view-header > div:last-of-type > div:first-child {
   flex-grow: 1;
 }
 %app-view {
   position: relative;
 }
-%app-view header .actions {
+%app-view-header .actions {
   float: right;
   display: flex;
   align-items: flex-start;
   margin-top: 9px;
 }
-%app-view header dl {
+%app-view-header dl {
   float: left;
   margin-top: 25px;
   margin-right: 50px;
   margin-bottom: 20px;
 }
-%app-view header dt {
+%app-view-header dt {
   font-weight: bold;
 }
 /* units */
 %app-view {
   margin-top: 50px;
 }
-%app-view header + div > *:first-child {
+%app-view-header + div > *:first-child {
   margin-top: 1.8em;
 }
 %app-view h2 {
   padding-bottom: 0.2em;
   margin-bottom: 0.2em;
 }
-%app-view header .actions > *:not(:last-child) {
+%app-view-header .actions > *:not(:last-child) {
   margin-right: 12px;
 }
 
 // content
-%app-content div > dl > dt {
+%app-view-content div > dl > dt {
   position: absolute;
 }
-%app-content div > dl {
+%app-view-content div > dl {
   position: relative;
 }
-%app-content-empty {
+%app-view-content-empty {
   margin-top: 0;
   padding: 50px;
   text-align: center;
 }
-%app-content form:not(:last-child) {
+%app-view-content form:not(:last-child) {
   margin-bottom: 2.2em;
 }
-%app-content div > dl > dt {
+%app-view-content div > dl > dt {
   width: 140px;
 }
-%app-content div > dl > dd {
+%app-view-content div > dl > dd {
   padding-left: 140px;
 }
-%app-content div > dl > * {
+%app-view-content div > dl > * {
   min-height: 1em;
   margin-bottom: 0.4em;
 }
 // TODO: Think about an %app-form or similar
-%app-content fieldset:not(.freetext-filter) {
+%app-view-content fieldset:not(.freetext-filter) {
   padding-bottom: 0.3em;
   margin-bottom: 2em;
 }
diff --git a/ui-v2/app/styles/components/healthcheck-output.scss b/ui-v2/app/styles/components/healthcheck-output.scss
index 6c3ccb5ed3..d9e19fdeb5 100644
--- a/ui-v2/app/styles/components/healthcheck-output.scss
+++ b/ui-v2/app/styles/components/healthcheck-output.scss
@@ -2,3 +2,10 @@
 .healthcheck-output {
   @extend %healthcheck-output;
 }
+%healthcheck-output em::before {
+  width: 250px;
+  /* TODO: All tooltips previously used */
+  /* nowrap, they shouldn't */
+  white-space: normal !important;
+}
+/**/
diff --git a/ui-v2/app/styles/components/healthcheck-output/layout.scss b/ui-v2/app/styles/components/healthcheck-output/layout.scss
index 629ef0fe9a..8917913eaa 100644
--- a/ui-v2/app/styles/components/healthcheck-output/layout.scss
+++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss
@@ -12,45 +12,54 @@
 %healthcheck-output > div {
   flex: 1 1 auto;
 }
+%healthcheck-output header,
+%healthcheck-output dl:last-of-type {
+  width: 100%;
+}
 %healthcheck-output header {
   margin-bottom: 0.9em;
 }
-%healthcheck-output dl:not(:last-of-type) {
-  float: left;
-  width: 25%;
-  margin-right: 2%;
+%healthcheck-output > div {
+  // 100% minus the width of the icon space (26)
+  width: calc(100% - 26px);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
-%healthcheck-output dl:nth-of-type(3) {
-  width: 46%;
-  margin-right: 0;
-}
-%healthcheck-output dl:not(:last-of-type) dd {
-  word-break: break-all;
-}
-%healthcheck-output dt {
-  margin-bottom: 0;
-}
-%healthcheck-output dl:last-of-type {
-  clear: both;
-  margin-bottom: 0;
-}
-%healthcheck-output dl:last-of-type dt {
-  margin-bottom: 0.3em;
-}
-%healthcheck-output dl:last-of-type dd {
-  position: relative;
+%healthcheck-output dl {
+  min-width: 110px;
 }
 %healthcheck-output dl > * {
-  float: none;
   display: block;
   width: auto;
   position: static;
   padding-left: 0;
 }
+%healthcheck-output dt {
+  margin-bottom: 0;
+}
+%healthcheck-output dd {
+  position: relative;
+}
+
+%healthcheck-output dl:nth-last-of-type(2) {
+  width: 50%;
+}
+%healthcheck-output dl:last-of-type {
+  margin-bottom: 0;
+}
+%healthcheck-output dl:last-of-type dt {
+  margin-bottom: 0.3em;
+}
+
 %healthcheck-output pre {
   padding: 12px;
   padding-right: 40px;
   white-space: pre-wrap;
+  position: relative;
+}
+%healthcheck-output pre code {
+  word-wrap: break-word;
 }
 %healthcheck-output .with-feedback {
   position: absolute;
@@ -67,9 +76,10 @@
   %healthcheck-output::before {
     margin-right: 8px;
   }
+  %healthcheck-output dl:nth-last-of-type(2) {
+    width: 100%;
+  }
   %healthcheck-output dl:not(:last-of-type) {
-    float: none;
-    width: auto;
     margin-right: 0;
   }
 }
diff --git a/ui-v2/app/styles/components/healthcheck-output/skin.scss b/ui-v2/app/styles/components/healthcheck-output/skin.scss
index ba90f3fc58..33b20f5135 100644
--- a/ui-v2/app/styles/components/healthcheck-output/skin.scss
+++ b/ui-v2/app/styles/components/healthcheck-output/skin.scss
@@ -14,6 +14,14 @@
     margin-right: 8px;
   }
 }
+%healthcheck-output dd em {
+  @extend %pill;
+  /*TODO: Should this be merged into %pill? */
+  cursor: default;
+  font-style: normal;
+  margin-top: -2px;
+  margin-left: 0.5em;
+}
 %healthcheck-output.passing::before {
   @extend %with-check-circle-fill-color-icon;
 }
diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index c2f7be881d..ad6f8003c2 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -45,6 +45,7 @@ th span em {
   font-style: normal;
   white-space: normal !important;
 }
+/**/
 
 /* ideally these would be in route css files, but left here as they */
 /* accomplish the same thing (hide non-essential columns for tables) */
diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss
index da5a034506..3f8f616100 100644
--- a/ui-v2/app/styles/components/tabular-collection.scss
+++ b/ui-v2/app/styles/components/tabular-collection.scss
@@ -95,6 +95,9 @@ html.template-token.template-list main table tr th {
 html.template-node.template-show main table.sessions tr {
   @extend %node-sessions-row;
 }
+html.template-instance.template-show main table.exposedpaths tr {
+  @extend %instance-paths-row;
+}
 // this will get auto calculated later in tabular-collection.js
 // keeping this here for reference
 // %services-row > * {
@@ -110,6 +113,22 @@ html.template-node.template-show main table.sessions tr {
 %instances-row > * {
   width: calc(100% / 5);
 }
+// instance-paths are for exposed paths
+// we make the columns that need as much space as possible
+// as wide as possible so 50% each minus enough room
+// for the 3 port columns - we probably need a max of 55px
+// for each port column so 55 * 3 = 165
+// so column 1 and 5 are 50% - 165 each
+// the 3 remaining columns split the 165 thats left between them
+%instance-paths-row > *:nth-child(1),
+%instance-paths-row > *:nth-child(5) {
+  width: calc(50% - 165px) !important;
+}
+%instance-paths-row > *:nth-child(2),
+%instance-paths-row > *:nth-child(3),
+%instance-paths-row > *:nth-child(4) {
+  width: 110px !important;
+}
 %tokens-row > *:first-child,
 %tokens-minimal-row > *:not(last-child),
 %tokens-row > *:nth-child(2),
diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss
index ccb1911573..6e8e878690 100644
--- a/ui-v2/app/styles/routes/dc/service/index.scss
+++ b/ui-v2/app/styles/routes/dc/service/index.scss
@@ -1,5 +1,9 @@
+/* TODO: need to standardize on the selectors used here */
+/* I would guess at the time of writing this we shojuld prefer */
+/* classes */
 html.template-instance.template-show #addresses table tr,
 html.template-instance.template-show #upstreams table tr,
-html.template-instance.template-show #meta-data table tr {
+html.template-instance.template-show #meta-data table tr,
+html.template-instance.template-show table.exposedpaths tr {
   cursor: default;
 }
diff --git a/ui-v2/app/templates/components/healthcheck-list.hbs b/ui-v2/app/templates/components/healthcheck-list.hbs
index 3bdf5ee21b..a3a24c9955 100644
--- a/ui-v2/app/templates/components/healthcheck-list.hbs
+++ b/ui-v2/app/templates/components/healthcheck-list.hbs
@@ -1,10 +1,10 @@
 <ul data-test-healthchecks>
 {{#each (sort-by (action 'sortChecksByImportance') items) as |item| }}
+{{! TODO: this component and its child should be moved to a single component }}
   {{#healthcheck-output
     data-test-node-healthcheck=item.Name
     class=item.Status
     tagName='li'
-    output=item.Output
     }}
       {{#block-slot 'header'}}
         <h3>{{item.Name}}</h3>
@@ -18,10 +18,42 @@
         <dt>CheckID</dt>
         <dd>{{or item.CheckID '-'}}</dd>
       </dl>
+      <dl>
+        <dt>Type</dt>
+        <dd>
+          {{item.Type}}
+{{#if (and exposed (contains item.Type (array 'http' 'grpc')))}}
+          <em data-test-exposed="true" data-tooltip="Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent.">Exposed</em>
+{{/if}}
+        </dd>
+      </dl>
       <dl>
         <dt>Notes</dt>
         <dd>{{or item.Notes '-'}}</dd>
       </dl>
+      <dl>
+{{#if (not-eq item.Type 'ttl')}}
+        <dt>Output</dt>
+        <dd>
+            <pre><code>{{item.Output}}</code></pre>
+    {{#feedback-dialog type='inline'}}
+      {{#block-slot 'action' as |success error|}}
+          {{copy-button success=(action success) error=(action error) clipboardText=item.Output title='copy output to clipboard'}}
+      {{/block-slot}}
+      {{#block-slot 'success' as |transition|}}
+        <p class={{transition}}>
+          Copied output!
+        </p>
+      {{/block-slot}}
+      {{#block-slot 'error' as |transition|}}
+        <p class={{transition}}>
+          Sorry, something went wrong!
+        </p>
+      {{/block-slot}}
+    {{/feedback-dialog}}
+        </dd>
+{{/if}}
+      </dl>
       {{/block-slot}}
     {{/healthcheck-output}}
 {{/each}}
diff --git a/ui-v2/app/templates/components/healthcheck-output.hbs b/ui-v2/app/templates/components/healthcheck-output.hbs
index ae852d05d1..298673a008 100644
--- a/ui-v2/app/templates/components/healthcheck-output.hbs
+++ b/ui-v2/app/templates/components/healthcheck-output.hbs
@@ -1,28 +1,8 @@
+{{! TODO: this component and its parent should be moved to a single component }}
 {{yield}}
 <div>
   <header>
     {{#yield-slot 'header'}}{{yield}}{{/yield-slot}}
   </header>
   {{#yield-slot 'content'}}{{yield}}{{/yield-slot}}
-  <dl>
-    <dt>Output</dt>
-    <dd>
-        <pre><code>{{output}}</code></pre>
-{{#feedback-dialog type='inline'}}
-  {{#block-slot 'action' as |success error|}}
-      {{copy-button success=(action success) error=(action error) clipboardText=output title='copy output to clipboard'}}
-  {{/block-slot}}
-  {{#block-slot 'success' as |transition|}}
-    <p class={{transition}}>
-      Copied output!
-    </p>
-  {{/block-slot}}
-  {{#block-slot 'error' as |transition|}}
-    <p class={{transition}}>
-      Sorry, something went wrong!
-    </p>
-  {{/block-slot}}
-{{/feedback-dialog}}
-    </dd>
-  </dl>
 </div>
\ No newline at end of file
diff --git a/ui-v2/app/templates/dc/services/-exposedpaths.hbs b/ui-v2/app/templates/dc/services/-exposedpaths.hbs
new file mode 100644
index 0000000000..d838707e95
--- /dev/null
+++ b/ui-v2/app/templates/dc/services/-exposedpaths.hbs
@@ -0,0 +1,33 @@
+<p>
+	You can expose individual HTTP paths like /metrics through Envoy for external services like Prometheus.
+</p>
+{{#tabular-collection
+    data-test-exposedpaths
+    class="exposedpaths"
+    items=item.Proxy.Expose.Paths as |path index|
+}}
+    {{#block-slot 'header'}}
+      <th>Path</th>
+      <th>Protocol</th>
+      <th>Listener port</th>
+      <th>Local path port</th>
+      <th>Combined address<span><em role="tooltip">Service address, listener port, and path all combined into one URL.</em></span></th>
+    {{/block-slot}}
+    {{#block-slot 'row'}}
+      <td>
+        <span>{{path.Path}}</span>
+      </td>
+      <td>
+        {{path.Protocol}}
+      </td>
+      <td>
+        {{path.ListenerPort}}
+      </td>
+      <td>
+        {{path.LocalPathPort}}
+      </td>
+      <td>
+        <span data-test-combined-address>{{item.Address}}:{{path.ListenerPort}}{{path.Path}}</span>
+      </td>
+    {{/block-slot}}
+{{/tabular-collection}}
diff --git a/ui-v2/app/templates/dc/services/-servicechecks.hbs b/ui-v2/app/templates/dc/services/-servicechecks.hbs
index 424772e705..61d6289e15 100644
--- a/ui-v2/app/templates/dc/services/-servicechecks.hbs
+++ b/ui-v2/app/templates/dc/services/-servicechecks.hbs
@@ -1,5 +1,5 @@
 {{#if (gt item.ServiceChecks.length 0) }}
-  {{healthcheck-list items=item.ServiceChecks}}
+  {{healthcheck-list items=item.ServiceChecks exposed=proxy.ServiceProxy.Expose.Checks}}
 {{else}}
   <p>
     This instance has no service health checks.
diff --git a/ui-v2/app/templates/dc/services/-upstreams.hbs b/ui-v2/app/templates/dc/services/-upstreams.hbs
index 62031ba28e..c80b433e0d 100644
--- a/ui-v2/app/templates/dc/services/-upstreams.hbs
+++ b/ui-v2/app/templates/dc/services/-upstreams.hbs
@@ -11,7 +11,7 @@
     {{/block-slot}}
     {{#block-slot 'row'}}
       <td>
-        <a data-test-destination-name>{{item.DestinationName}}</a>
+        <span data-test-destination-name>{{item.DestinationName}}</span>
       </td>
       <td data-test-destination-datacenter>
         {{item.Datacenter}}
diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
index 23fa1c733b..5822ed5ed7 100644
--- a/ui-v2/app/templates/dc/services/instance.hbs
+++ b/ui-v2/app/templates/dc/services/instance.hbs
@@ -72,6 +72,10 @@
   (eq item.Kind 'connect-proxy')
                 'Upstreams' ''
 )
+(if
+  (and (eq item.Kind 'connect-proxy') (gt item.Proxy.Expose.Paths.length 0))
+                'Exposed Paths' ''
+)
 (if
   (eq item.Kind 'mesh-gateway')
                 'Addresses' ''
@@ -91,6 +95,10 @@
   (eq item.Kind 'connect-proxy')
                     (hash id=(slugify 'Upstreams') partial='dc/services/upstreams') ''
 )
+(if
+  (and (eq item.Kind 'connect-proxy') (gt item.Proxy.Expose.Paths.length 0))
+                    (hash id=(slugify 'Exposed Paths') partial='dc/services/exposedpaths') ''
+)
 (if
   (eq item.Kind 'mesh-gateway')
                     (hash id=(slugify 'Addresses') partial='dc/services/addresses') ''
diff --git a/ui-v2/package.json b/ui-v2/package.json
index c9c1c7ecea..16bff9859e 100644
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@@ -48,7 +48,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@ember/jquery": "^0.6.0",
     "@ember/optional-features": "^0.7.0",
-    "@hashicorp/consul-api-double": "^2.0.1",
+    "@hashicorp/consul-api-double": "^2.6.2",
     "@hashicorp/ember-cli-api-double": "^2.0.0",
     "base64-js": "^1.3.0",
     "broccoli-asset-rev": "^3.0.0",
diff --git a/ui-v2/tests/acceptance/components/copy-button.feature b/ui-v2/tests/acceptance/components/copy-button.feature
index 5bf266f9ce..7d3dcaf4a6 100644
--- a/ui-v2/tests/acceptance/components/copy-button.feature
+++ b/ui-v2/tests/acceptance/components/copy-button.feature
@@ -3,11 +3,23 @@ Feature: components / copy-button
   Background:
     Given 1 datacenter model with the value "dc-1"
   Scenario: Clicking the copy button
+    Given 1 node model from yaml
+    ---
+    ID: node-0
+    Checks:
+      - Name: gprc-check
+        Node: node-0
+        CheckID: grpc-check
+        Status: passing
+        Type: grpc
+        Output: The output
+        Notes: The notes
+    ---
     When I visit the node page for yaml
     ---
       dc: dc-1
       node: node-0
-      ---
+    ---
     Then the url should be /dc-1/nodes/node-0
     When I click ".healthcheck-output:nth-child(1) button.copy-btn"
     Then I see the text "Copied output!" in ".healthcheck-output:nth-child(1) p.feedback-dialog-out"
diff --git a/ui-v2/tests/acceptance/dc/services/instances/proxy.feature b/ui-v2/tests/acceptance/dc/services/instances/proxy.feature
index 3454df7c3c..14a032f876 100644
--- a/ui-v2/tests/acceptance/dc/services/instances/proxy.feature
+++ b/ui-v2/tests/acceptance/dc/services/instances/proxy.feature
@@ -1,6 +1,6 @@
 @setupApplicationTest
 Feature: dc / services / instances / proxy: Show Proxy Service Instance
-  Scenario: A Proxy Service instance
+  Scenario: A Proxy Service instance with no exposed checks
     Given 1 datacenter model with the value "dc1"
     And 1 instance model from yaml
     ---
@@ -10,6 +10,9 @@ Feature: dc / services / instances / proxy: Show Proxy Service Instance
         ID: service-0-proxy-with-id
         Proxy:
           DestinationServiceName: service-0
+          Expose:
+            Checks: false
+            Paths: []
           Upstreams:
             - DestinationType: service
               DestinationName: service-1
@@ -32,6 +35,9 @@ Feature: dc / services / instances / proxy: Show Proxy Service Instance
 
     And I see serviceChecksIsSelected on the tabs
 
+    When I click serviceChecks on the tabs
+    And I don't see exposed on the serviceChecks
+
     When I click upstreams on the tabs
     And I see upstreamsIsSelected on the tabs
     And I see 2 of the upstreams object
@@ -45,5 +51,83 @@ Feature: dc / services / instances / proxy: Show Proxy Service Instance
     - service
     - prepared_query
     ---
+    And I don't see exposedPaths on the tabs
 
+  Scenario: A Proxy Service instance with no automatically exposed checks but with paths
+    Given 1 datacenter model with the value "dc1"
+    And 1 instance model from yaml
+    ---
+    - Service:
+        Kind: connect-proxy
+        Name: service-0-proxy
+        ID: service-0-proxy-with-id
+        Address: 10.0.0.1
+        Proxy:
+          DestinationServiceName: service-0
+          Expose:
+            Paths:
+              - Path: /grpc-metrics
+                Protocol: grpc
+                LocalPathPort: 8081
+                ListenerPort: 8080
+              - Path: /http-metrics
+                Protocol: http
+                LocalPathPort: 8082
+                ListenerPort: 8083
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0-proxy
+      node: node-0
+      id: service-0-proxy-with-id
+    ---
+    Then the url should be /dc1/services/service-0-proxy/node-0/service-0-proxy-with-id
+    And I see serviceChecksIsSelected on the tabs
 
+    When I click serviceChecks on the tabs
+    And I don't see exposed on the serviceChecks
+
+    When I click exposedPaths on the tabs
+    And I see exposedPaths on the tabs
+    And I see 2 of the exposedPaths object
+    And I see combinedAddress on the exposedPaths like yaml
+    ---
+    - 10.0.0.1:8080/grpc-metrics
+    - 10.0.0.1:8083/http-metrics
+    ---
+  Scenario: A Proxy Service instance with only automatically exposed checks but no paths
+    Given 1 datacenter model with the value "dc1"
+    And 1 instance model from yaml
+    ---
+    - Service:
+        Kind: connect-proxy
+        Name: service-0-proxy
+        ID: service-0-proxy-with-id
+        Address: 10.0.0.1
+        Proxy:
+          DestinationServiceName: service-0
+          Expose:
+            Checks: true
+            Paths: []
+      Checks:
+        - Name: http-check
+          Type: http
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0-proxy
+      node: node-0
+      id: service-0-proxy-with-id
+    ---
+    Then the url should be /dc1/services/service-0-proxy/node-0/service-0-proxy-with-id
+    And I see serviceChecksIsSelected on the tabs
+
+    And I don't see exposedPaths on the tabs
+
+    When I click serviceChecks on the tabs
+    And I don't see exposed on the serviceChecks
+
+    When I click nodeChecks on the tabs
+    And I don't see exposed on the nodeChecks
diff --git a/ui-v2/tests/acceptance/dc/services/instances/show.feature b/ui-v2/tests/acceptance/dc/services/instances/show.feature
index f08857d380..752db0c259 100644
--- a/ui-v2/tests/acceptance/dc/services/instances/show.feature
+++ b/ui-v2/tests/acceptance/dc/services/instances/show.feature
@@ -29,6 +29,7 @@ Feature: dc / services / instances / show: Show Service Instance
           Output: Output of check
           Status: warning
         - Name: Service check
+          Type: http
           ServiceID: service-0
           Output: Output of check
           Status: critical
@@ -45,13 +46,13 @@ Feature: dc / services / instances / show: Show Service Instance
           Output: Output of check
           Status: critical
     ---
-    And 1 proxy model from yaml
+  Scenario: A Service instance has no Proxy
+    Given 1 proxy model from yaml
     ---
     - ServiceProxy:
         DestinationServiceName: service-1
         DestinationServiceID: ~
     ---
-  Scenario: A Service instance has no Proxy
     When I visit the instance page for yaml
     ---
       dc: dc1
@@ -99,6 +100,63 @@ Feature: dc / services / instances / show: Show Service Instance
     Then the url should be /dc1/services/service-0/node-0/service-0-with-id
     And an external edit results in 0 instance models
     And pause until I see the text "deregistered" in "[data-notification]"
+
+  Scenario: A Service instance with a Proxy with only automatically exposed checks but no paths
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-0
+        DestinationServiceID: ~
+        Expose:
+          Checks: true
+          Paths: []
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0
+      node: another-node
+      id: service-0-with-id
+    ---
+    Then the url should be /dc1/services/service-0/another-node/service-0-with-id
+    And I see serviceChecksIsSelected on the tabs
+
+    And I don't see exposedPaths on the tabs
+
+    When I click serviceChecks on the tabs
+    And I see exposed on the serviceChecks
+
+    When I click nodeChecks on the tabs
+    And I don't see exposed on the nodeChecks
+
+  Scenario: A Service Instance with a Proxy with no automatically exposed checks
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-0
+        DestinationServiceID: ~
+        Expose:
+          Checks: false
+          Paths: []
+    ---
+    When I visit the instance page for yaml
+    ---
+      dc: dc1
+      service: service-0
+      node: another-node
+      id: service-0-with-id
+    ---
+    Then the url should be /dc1/services/service-0/another-node/service-0-with-id
+    And I see serviceChecksIsSelected on the tabs
+
+    And I don't see exposedPaths on the tabs
+
+    When I click serviceChecks on the tabs
+    And I don't see exposed on the serviceChecks
+
+    When I click nodeChecks on the tabs
+    And I don't see exposed on the nodeChecks
+
   @ignore
     Scenario: A Service Instance's proxy blocking query is closed when the instance is deregistered
     Then ok
diff --git a/ui-v2/tests/integration/components/healthcheck-output-test.js b/ui-v2/tests/integration/components/healthcheck-output-test.js
index e4d0133dfe..8d079a08a7 100644
--- a/ui-v2/tests/integration/components/healthcheck-output-test.js
+++ b/ui-v2/tests/integration/components/healthcheck-output-test.js
@@ -12,23 +12,12 @@ module('Integration | Component | healthcheck output', function(hooks) {
 
     await render(hbs`{{healthcheck-output}}`);
 
-    assert.notEqual(
-      find('*')
-        .textContent.trim()
-        .indexOf('Output'),
-      -1
-    );
+    assert.equal(find('*').textContent.trim(), '');
 
     // Template block usage:
     await render(hbs`
       {{#healthcheck-output}}{{/healthcheck-output}}
     `);
-
-    assert.notEqual(
-      find('*')
-        .textContent.trim()
-        .indexOf('Output'),
-      -1
-    );
+    assert.equal(find('*').textContent.trim(), '');
   });
 });
diff --git a/ui-v2/tests/integration/services/repository/service-test.js b/ui-v2/tests/integration/services/repository/service-test.js
index ce5998b26d..ce39339c85 100644
--- a/ui-v2/tests/integration/services/repository/service-test.js
+++ b/ui-v2/tests/integration/services/repository/service-test.js
@@ -73,7 +73,7 @@ test('findBySlug returns the correct data for item endpoint', function(assert) {
           const nodes = payload.Nodes;
           const service = payload.Nodes[0];
           service.Nodes = nodes;
-          service.Tags = payload.Nodes[0].Service.Tags;
+          service.Tags = [...new Set(payload.Nodes[0].Service.Tags)];
           service.meta = {
             cursor: undefined,
           };
diff --git a/ui-v2/tests/pages/dc/services/instance.js b/ui-v2/tests/pages/dc/services/instance.js
index 46328c0153..07289736a5 100644
--- a/ui-v2/tests/pages/dc/services/instance.js
+++ b/ui-v2/tests/pages/dc/services/instance.js
@@ -7,17 +7,25 @@ export default function(visitable, attribute, collection, text, radiogroup) {
       'node-checks',
       'addresses',
       'upstreams',
+      'exposed-paths',
       'tags',
       'meta-data',
     ]),
-    serviceChecks: collection('#service-checks [data-test-healthchecks] li', {}),
-    nodeChecks: collection('#node-checks [data-test-healthchecks] li', {}),
+    serviceChecks: collection('#service-checks [data-test-healthchecks] li', {
+      exposed: attribute('data-test-exposed', '[data-test-exposed]'),
+    }),
+    nodeChecks: collection('#node-checks [data-test-healthchecks] li', {
+      exposed: attribute('data-test-exposed', '[data-test-exposed]'),
+    }),
     upstreams: collection('#upstreams [data-test-tabular-row]', {
       name: text('[data-test-destination-name]'),
       datacenter: text('[data-test-destination-datacenter]'),
       type: text('[data-test-destination-type]'),
       address: text('[data-test-local-bind-address]'),
     }),
+    exposedPaths: collection('#exposed-paths [data-test-tabular-row]', {
+      combinedAddress: text('[data-test-combined-address]'),
+    }),
     addresses: collection('#addresses [data-test-tabular-row]', {
       address: text('[data-test-address]'),
     }),
diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock
index e6a9aa7308..3d944702f5 100644
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@@ -991,10 +991,10 @@
     faker "^4.1.0"
     js-yaml "^3.13.1"
 
-"@hashicorp/consul-api-double@^2.0.1":
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.5.0.tgz#d9540a38ee652d55ed90956850c9e5cbcde89454"
-  integrity sha512-RZcVIPQ4M4TZzFe2mWm7M5w28yOIpVgiYZI5ax+JG0Yr5TVbhJPMxhdb1es73cILuqIi9Fr+73OJ5IAospgPBw==
+"@hashicorp/consul-api-double@^2.6.2":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.8.0.tgz#d4bd0999f2ce8419112934bb66af9c4c009c503e"
+  integrity sha512-Q25JJA8KDMnSwKLvCySokumaEIccq/uI0sRpHDuLjBzOA5gZUnBqrDlQUYlTPVYr98DEeiHCJiAacAnOpRpf7Q==
 
 "@hashicorp/ember-cli-api-double@^2.0.0":
   version "2.0.0"
@@ -2173,6 +2173,10 @@ babel-plugin-transform-es2015-sticky-regex@^6.22.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
   integrity sha1-AMHNsaynERLN8M9hJsLta0V8zbw=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
 
 babel-plugin-transform-es2015-template-literals@^6.22.0:
   version "6.22.0"