ui: Rename a model attribute to not be overwritten by ember-data (#9524)

* Rename a model attr to not be overwritten by ember-data

* Make sure we can click on the instances

* Make sure we can click back to the preevious page, not root

* Add a forwards/back/forwards navigation test for service instances

* Rename a model attr to not be overwritten by ember-data

Co-authored-by: John Cowen <jcowen@hashicorp.com>

ui/packages/consul-ui/app/models/proxy.js

@@ -13,7 +13,7 @@ export default class Proxy extends ServiceInstanceModel {
   @attr('string') Namespace;
   @attr('string') ServiceName;
   @attr('string') ServiceID;
-  @attr('string') Node;
+  @attr('string') NodeName;
   @attr('number') SyncTime;
   @attr() ServiceProxy; // {}
 }

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

@@ -21,7 +21,7 @@ export default class InstanceRoute extends Route {
       if (typeof get(proxyMeta, 'ServiceID') !== 'undefined') {
         const proxyParams = {
           id: get(proxyMeta, 'ServiceID'),
-          node: get(proxyMeta, 'Node'),
+          node: get(proxyMeta, 'NodeName'),
           name: get(proxyMeta, 'ServiceName'),
         };
         // Proxies have identical dc/nspace as their parent instance

ui/packages/consul-ui/app/serializers/proxy.js

@@ -4,4 +4,7 @@ import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/proxy';
 export default class ProxySerializer extends Serializer {
   primaryKey = PRIMARY_KEY;
   slugKey = SLUG_KEY;
+  attrs = {
+    NodeName: 'Node',
+  };
 }

ui/packages/consul-ui/app/services/repository/service-instance.js

@@ -40,6 +40,9 @@ export default class ServiceInstanceService extends RepositoryService {
   async findProxyBySlug(serviceId, node, service, dc, nspace, configuration = {}) {
     const instance = await this.findBySlug(...arguments);
     let proxy = this.store.peekRecord('proxy', instance.uid);
+    // Currently, we call the proxy endpoint before this endpoint
+    // therefore proxy is never undefined. If we ever call this endpoint
+    // first we'll need to do something like the following
     // if(typeof proxy === 'undefined') {
     //   await proxyRepo.create({})
     // }

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

@@ -35,7 +35,7 @@
       <AppView>
           <BlockSlot @name="breadcrumbs">
               <ol>
-                  <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
+                  <li><a href={{href-to 'dc.services'}}>All Services</a></li>
                   <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service.Service}})</a></li>
               </ol>
           </BlockSlot>

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

@@ -0,0 +1,58 @@
+@setupApplicationTest
+Feature: dc / services / instances / navigation
+  Background:
+    Given 1 datacenter model with the value "dc-1"
+    And 1 proxy model from yaml
+    ---
+    ServiceName: service-0-proxy
+    Node: node-0
+    ServiceID: service-a-proxy
+    ---
+    And 3 instance models from yaml
+    ---
+    - Service:
+        Name: service-0
+        ID: service-a
+      Node:
+        Node: node-0
+      Checks:
+      - Status: critical
+    - Service:
+        Name: service-0
+        ID: service-b
+      Node:
+        Node: node-0
+      Checks:
+      - Status: passing
+    # A listing of instances from 2 services would never happen in consul but
+    # this satisfies our mocking needs for the moment, until we have a 'And 1
+    # proxy on request.0 from yaml', 'And 1 proxy on request.1 from yaml' or
+    # similar
+    - Service:
+        Name: service-0-proxy
+        ID: service-a-proxy
+      Node:
+        Node: node-0
+      Checks:
+      - Status: passing
+    ---
+  Scenario: Clicking a instance in the listing and back again
+    When I visit the service page for yaml
+    ---
+      dc: dc-1
+      service: service-0
+    ---
+    And I click instances on the tabs
+    Then the url should be /dc-1/services/service-0/instances
+    Then I see 3 instance models
+    When I click instance on the instances component
+    Then a GET request was made to "/v1/catalog/connect/service-0?dc=dc-1&ns=@namespace"
+    Then a GET request was made to "/v1/health/service/service-0-proxy?dc=dc-1&ns=@namespace"
+    Then the url should be /dc-1/services/service-0/instances/node-0/service-a/health-checks
+    And I click "[data-test-back]"
+    Then the url should be /dc-1/services/service-0/topology
+    And I click instances on the tabs
+    When I click instance on the instances component
+    Then a GET request was made to "/v1/catalog/connect/service-0?dc=dc-1&ns=@namespace"
+    Then a GET request was made to "/v1/health/service/service-0-proxy?dc=dc-1&ns=@namespace"
+    Then the url should be /dc-1/services/service-0/instances/node-0/service-a/health-checks

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

@@ -161,7 +161,16 @@ export default {
     )
   ),
   service: create(
-    service(visitable, attribute, collection, text, consulIntentionList, catalogToolbar, tabgroup)
+    service(
+      visitable,
+      clickable,
+      attribute,
+      collection,
+      text,
+      consulIntentionList,
+      catalogToolbar,
+      tabgroup
+    )
   ),
   instance: create(
     instance(

ui/packages/consul-ui/tests/pages/dc/services/show.js

@@ -1,4 +1,13 @@
-export default function(visitable, attribute, collection, text, intentions, filter, tabs) {
+export default function(
+  visitable,
+  clickable,
+  attribute,
+  collection,
+  text,
+  intentions,
+  filter,
+  tabs
+) {
   const page = {
     visit: visitable('/:dc/services/:service'),
     externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
@@ -23,6 +32,7 @@ export default function(visitable, attribute, collection, text, intentions, filt
     // TODO: These need to somehow move to subpages
     instances: collection('.consul-service-instance-list > ul > li:not(:first-child)', {
       address: text('[data-test-address]'),
+      instance: clickable('a'),
     }),
     intentionList: intentions(),
   };