Merge pull request #4252 from hashicorp/feature/ui-node-ports-for-service

Add port the service is running on for each node in the service view

ui-v2/app/templates/dc/services/show.hbs

@@ -26,7 +26,7 @@
         </dl>
 {{/if}}
 {{#if (gt unhealthy.length 0) }}
-        <div class="unhealthy">
+        <div data-test-unhealthy class="unhealthy">
             <h2>Unhealthy Nodes</h2>
             <div>
                 <ul>
@@ -36,7 +36,7 @@
                         data-test-node=item.Node.Node
                         href=(href-to 'dc.nodes.show' item.Node.Node)
                         name=item.Node.Node
-                        address=item.Node.Address
+                        address=(concat item.Node.Address ':' item.Service.Port)
                         checks=item.Checks
                     }}
     {{/each}}
@@ -45,7 +45,7 @@
         </div>
 {{/if}}
 {{#if (gt healthy.length 0) }}
-        <div class="healthy">
+        <div data-test-healthy class="healthy">
             <h2>Healthy Nodes</h2>
             {{#list-collection
                 items=healthy
@@ -55,7 +55,7 @@
                     href=(href-to 'dc.nodes.show' item.Node.Node)
                     data-test-node=item.Node.Node
                     name=item.Node.Node
-                    address=item.Node.Address
+                    address=(concat item.Node.Address ':' item.Service.Port)
                     checks=item.Checks
                     status=item.Checks.[0].Status
                 }}

ui-v2/tests/acceptance/dc/services/show.feature

@@ -1,6 +1,6 @@
 @setupApplicationTest
 Feature: dc / services / show: Show Service
-  Scenario: Given various service with various tags, all tags are displayed
+  Scenario: Given various services with various tags, all tags are displayed
     Given 1 datacenter model with the value "dc1"
     And 3 node models
     And 1 service model from yaml
@@ -20,4 +20,37 @@ Feature: dc / services / show: Show Service
     Then I see the text "Tag1" in "[data-test-tags] span:nth-child(1)"
     Then I see the text "Tag2" in "[data-test-tags] span:nth-child(2)"
     Then I see the text "Tag3" in "[data-test-tags] span:nth-child(3)"
-
+  Scenario: Given various services the various ports on their nodes are displayed
+    Given 1 datacenter model with the value "dc1"
+    And 3 node models
+    And 1 service model from yaml
+    ---
+    - Checks:
+        - Status: passing
+      Service:
+        Port: 8080
+      Node:
+        Address: 1.1.1.1
+    - Service:
+        Port: 8000
+      Node:
+        Address: 2.2.2.2
+    - Service:
+        Port: 8888
+      Node:
+        Address: 3.3.3.3
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    Then I see address on the healthy like yaml
+    ---
+      - "1.1.1.1:8080"
+    ---
+    Then I see address on the unhealthy like yaml
+    ---
+      - "2.2.2.2:8000"
+      - "3.3.3.3:8888"
+    ---

ui-v2/tests/pages/dc/services/show.js

@@ -1,4 +1,4 @@
-import { create, visitable, collection, attribute } from 'ember-cli-page-object';
+import { create, visitable, collection, attribute, text } from 'ember-cli-page-object';
 import filter from 'consul-ui/tests/pages/components/catalog-filter';
 
 export default create({
@@ -6,5 +6,13 @@ export default create({
   nodes: collection('[data-test-node]', {
     name: attribute('data-test-node'),
   }),
+  healthy: collection('[data-test-healthy] [data-test-node]', {
+    name: attribute('data-test-node'),
+    address: text('header strong'),
+  }),
+  unhealthy: collection('[data-test-unhealthy] [data-test-node]', {
+    name: attribute('data-test-node'),
+    address: text('header strong'),
+  }),
   filter: filter,
 });

ui-v2/tests/steps.js

@@ -245,6 +245,7 @@ export default function(assert) {
           `Expected ${num} ${model}s with ${property} set to "${value}", saw ${len}`
         );
       })
+      // TODO: Make this accept a 'contains' word so you can search for text containing also
       .then('I have settings like yaml\n$yaml', function(data) {
         // TODO: Inject this
         const settings = window.localStorage;

ui-v2/yarn.lock

@@ -86,13 +86,14 @@
   resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.1.0.tgz#658f9e89208fa23f251ca66c66aeb7241a13f23f"
 
 "@hashicorp/ember-cli-api-double@^1.0.2":
-  version "1.0.2"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@hashicorp/ember-cli-api-double/-/ember-cli-api-double-1.0.2.tgz#684d418cc2a981254cc23035ceb452c86f0cd934"
+  resolved "https://registry.yarnpkg.com/@hashicorp/ember-cli-api-double/-/ember-cli-api-double-1.1.1.tgz#9380fdcf404f30f9d2e2a6422bfd83fe0dbe413f"
   dependencies:
     "@hashicorp/api-double" "^1.1.0"
     array-range "^1.0.1"
     ember-cli-babel "^6.6.0"
     js-yaml "^3.11.0"
+    merge-options "^1.0.1"
     pretender "^2.0.0"
 
 "@sinonjs/formatio@^2.0.0":
@@ -5483,6 +5484,10 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-obj@^1.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -6544,6 +6549,12 @@ merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
 
+merge-options@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-1.0.1.tgz#2a64b24457becd4e4dc608283247e94ce589aa32"
+  dependencies:
+    is-plain-obj "^1.1"
+
 merge-trees@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-trees/-/merge-trees-1.0.1.tgz#ccbe674569787f9def17fd46e6525f5700bbd23e"