ui: Create Linked Services Tab for Terminating Gateways (#7858)

* Fix to bottom border not applying to the correct <li>

* Create Linked Services tab with styling and tests

* Add internal endpoint gateway-services-nodes to the codebase with tests

* Upgrade consul-api-double to version 2.15.0

ui-v2/app/adapters/gateway.js

@@ -0,0 +1,17 @@
+import Adapter from './application';
+
+export default Adapter.extend({
+  requestForQueryRecord: function(request, { dc, ns, index, id }) {
+    if (typeof id === 'undefined') {
+      throw new Error('You must specify an id');
+    }
+    return request`
+      GET /v1/internal/ui/gateway-services-nodes/${id}?${{ dc }}
+
+      ${{
+        ...this.formatNspace(ns),
+        index,
+      }}
+    `;
+  },
+});

ui-v2/app/models/gateway.js

@@ -0,0 +1,12 @@
+import Model from 'ember-data/model';
+import attr from 'ember-data/attr';
+
+export const PRIMARY_KEY = 'uid';
+export const SLUG_KEY = 'Name';
+export default Model.extend({
+  [PRIMARY_KEY]: attr('string'),
+  [SLUG_KEY]: attr('string'),
+  Datacenter: attr('string'),
+  Namespace: attr('string'),
+  Services: attr(),
+});

ui-v2/app/router.js

@@ -19,6 +19,9 @@ export const routes = {
         intentions: {
           _options: { path: '/intentions' },
         },
+        services: {
+          _options: { path: '/services' },
+        },
         routing: {
           _options: { path: '/routing' },
         },

ui-v2/app/routes/dc/services/show.js

@@ -8,6 +8,7 @@ export default Route.extend({
   intentionRepo: service('repository/intention'),
   chainRepo: service('repository/discovery-chain'),
   proxyRepo: service('repository/proxy'),
+  gatewayRepo: service('repository/gateway'),
   settings: service('settings'),
   model: function(params, transition = {}) {
     const dc = this.modelFor('dc').dc.Name;
@@ -17,32 +18,43 @@ export default Route.extend({
       urls: this.settings.findBySlug('urls'),
       dc: dc,
       proxies: [],
-    }).then(model => {
-      return ['connect-proxy', 'mesh-gateway'].includes(get(model, 'item.Service.Kind'))
-        ? model
-        : hash({
-            intentions: this.intentionRepo.findByService(params.name, dc, nspace),
-            chain: this.chainRepo.findBySlug(params.name, dc, nspace).catch(function(e) {
-              const code = get(e, 'errors.firstObject.status');
-              // Currently we are specifically catching a 500, but we return null
-              // by default, so null for all errors.
-              // The extra code here is mainly for documentation purposes
-              // and for if we need to perform different actions based on the error code
-              // in the future
-              switch (code) {
-                case '500':
-                  // connect is likely to be disabled
-                  // we just return a null to hide the tab
-                  // `Connect must be enabled in order to use this endpoint`
-                  return null;
-                default:
-                  return null;
-              }
-            }),
-            proxies: this.proxyRepo.findAllBySlug(params.name, dc, nspace),
-            ...model,
-          });
-    });
+    })
+      .then(model => {
+        return ['connect-proxy', 'mesh-gateway', 'ingress-gateway', 'terminating-gateway'].includes(
+          get(model, 'item.Service.Kind')
+        )
+          ? model
+          : hash({
+              intentions: this.intentionRepo.findByService(params.name, dc, nspace),
+              chain: this.chainRepo.findBySlug(params.name, dc, nspace).catch(function(e) {
+                const code = get(e, 'errors.firstObject.status');
+                // Currently we are specifically catching a 500, but we return null
+                // by default, so null for all errors.
+                // The extra code here is mainly for documentation purposes
+                // and for if we need to perform different actions based on the error code
+                // in the future
+                switch (code) {
+                  case '500':
+                    // connect is likely to be disabled
+                    // we just return a null to hide the tab
+                    // `Connect must be enabled in order to use this endpoint`
+                    return null;
+                  default:
+                    return null;
+                }
+              }),
+              proxies: this.proxyRepo.findAllBySlug(params.name, dc, nspace),
+              ...model,
+            });
+      })
+      .then(model => {
+        return ['ingress-gateway', 'terminating-gateway'].includes(get(model, 'item.Service.Kind'))
+          ? hash({
+              gateway: this.gatewayRepo.findBySlug(params.name, dc, nspace),
+              ...model,
+            })
+          : model;
+      });
   },
   setupController: function(controller, model) {
     controller.setProperties(model);

ui-v2/app/routes/dc/services/show/services.js

@@ -0,0 +1,14 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model: function() {
+    const parent = this.routeName
+      .split('.')
+      .slice(0, -1)
+      .join('.');
+    return this.modelFor(parent);
+  },
+  setupController: function(controller, model) {
+    controller.setProperties(model);
+  },
+});

ui-v2/app/serializers/gateway.js

@@ -0,0 +1,17 @@
+import Serializer from './application';
+import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/gateway';
+
+export default Serializer.extend({
+  primaryKey: PRIMARY_KEY,
+  slugKey: SLUG_KEY,
+  respondForQueryRecord: function(respond, query) {
+    return this._super(function(cb) {
+      return respond(function(headers, body) {
+        return cb(headers, {
+          Name: query.id,
+          Services: body,
+        });
+      });
+    }, query);
+  },
+});

ui-v2/app/services/repository/gateway.js

@@ -0,0 +1,8 @@
+import RepositoryService from 'consul-ui/services/repository';
+
+const modelName = 'gateway';
+export default RepositoryService.extend({
+  getModelName: function() {
+    return modelName;
+  },
+});

ui-v2/app/styles/components/consul-service-list.scss

@@ -1,7 +1,7 @@
 .consul-service-list > ul {
   @extend %consul-service-list;
 }
-%consul-service-list > li {
+%consul-service-list > li:not(:first-child) {
   @extend %consul-service-row;
 }
 %consul-service-row {

ui-v2/app/styles/routes/dc/services/index.scss

@@ -1,3 +1,15 @@
+// Services - Linked Services tab
+.gateway-services-list > ul {
+  @extend %gateway-services-list;
+}
+%gateway-services-list > li:not(:first-child) {
+  @extend %gateway-service-row;
+}
+%gateway-service-row {
+  @extend %composite-row, %with-composite-row-intent;
+}
+
+// Service Detail - Proxy Info tab
 .proxy-upstreams > ul {
   @extend %proxy-upstreams-list;
 }

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

@@ -17,14 +17,23 @@
       <ConsulKind @item={{item.Service}} />
   </BlockSlot>
   <BlockSlot @name="nav">
-  {{#if (not item.Service.Kind)}}
+  {{#if (or (not item.Service.Kind) (eq item.Service.Kind 'terminating-gateway'))}}
     <TabNav @items={{
       compact
           (array
-                        (hash label="Instances" href=(href-to "dc.services.show.instances") selected=(is-href "dc.services.show.instances"))
-                        (hash label="Intentions" href=(href-to "dc.services.show.intentions") selected=(is-href "dc.services.show.intentions"))
-(if (not-eq chain null) (hash label="Routing" href=(href-to "dc.services.show.routing") selected=(is-href "dc.services.show.routing")) '')
-                        (hash label="Tags" href=(href-to "dc.services.show.tags") selected=(is-href "dc.services.show.tags"))
+                (hash label="Instances" href=(href-to "dc.services.show.instances") selected=(is-href "dc.services.show.instances"))
+(if (eq item.Service.Kind 'terminating-gateway') 
+                (hash label="Linked Services" href=(href-to "dc.services.show.services") selected=(is-href "dc.services.show.services"))
+'')
+(if (not item.Service.Kind) 
+                (hash label="Intentions" href=(href-to "dc.services.show.intentions") selected=(is-href "dc.services.show.intentions"))
+'')
+(if chain 
+                (hash label="Routing" href=(href-to "dc.services.show.routing") selected=(is-href "dc.services.show.routing"))
+'')
+(if (not item.Service.Kind) 
+                (hash label="Tags" href=(href-to "dc.services.show.tags") selected=(is-href "dc.services.show.tags"))
+'')
           )
     }}/>
   {{/if}}

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

@@ -0,0 +1,34 @@
+<div id="services" class="tab-section">
+  <div role="tabpanel">
+  {{#if (gt gateway.Services.length 0)}}
+    <section>
+      <p>
+        The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our
+        <a href={{env 'CONSUL_TERMINATING_GATEWAYS_URL'}} target="_blank">step-by-step guide.</a>
+
+      </p>
+      <ListCollection @cellHeight={{73}} @items={{gateway.Services}} class="gateway-services-list" as |item index|>
+        <a data-test-service-name href={{href-to 'dc.services.show' item.Name}} class={{service/health-checks item}}>
+          {{item.Name}}
+        </a>
+        <ul>
+          {{#if (not-eq item.InstanceCount 0)}}
+            <li>
+              {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}
+            </li>
+          {{/if}}
+          <TagList @item={{item}} as |Tags|>
+            <li>
+              <Tags />
+            </li>
+          </TagList>
+        </ul>
+      </ListCollection>
+    </section>
+  {{else}}
+    <p>
+      There are no linked services.
+    </p>
+  {{/if}}
+  </div>
+</div>

ui-v2/config/environment.js

@@ -81,6 +81,8 @@ module.exports = function(environment, $ = process.env) {
     CONSUL_DOCS_LEARN_URL: 'https://learn.hashicorp.com',
     CONSUL_DOCS_API_URL: 'https://www.consul.io/api',
     CONSUL_COPYRIGHT_URL: 'https://www.hashicorp.com',
+    CONSUL_TERMINATING_GATEWAYS_URL: 'https://www.consul.io/docs/connect/terminating_gateway',
+    CONSUL_INGRESS_GATEWAYS_URL: 'https://www.consul.io/docs/connect/ingress_gateway',
   });
   const isTestLike = ['staging', 'test'].indexOf(environment) > -1;
   const isDevLike = ['development', 'staging', 'test'].indexOf(environment) > -1;

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

@@ -0,0 +1,34 @@
+@setupApplicationTest
+Feature: dc / services / gateway
+  Background:
+    Given 1 datacenter model with the value "dc1"
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: terminating-gateway-1
+        Kind: terminating-gateway
+    ---
+  Scenario: Seeing the Linked Services tab
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: terminating-gateway-1
+    ---
+    And the title should be "terminating-gateway-1 - Consul"
+    And I see linkedServices on the tabs
+    When I click linkedServices on the tabs
+    And I see linkedServicesIsSelected on the tabs
+  Scenario: Seeing the list of Linked Services
+    Given 3 service models from yaml
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: terminating-gateway-1
+    ---
+    And the title should be "terminating-gateway-1 - Consul"
+    When I click linkedServices on the tabs
+    Then I see 3 service models
+
+
+

ui-v2/tests/acceptance/steps/dc/services/show/gateway-services-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-v2/tests/integration/adapters/gateway-test.js

@@ -0,0 +1,27 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Integration | Adapter | gateway', function(hooks) {
+  setupTest(hooks);
+  const dc = 'dc-1';
+  const id = 'slug';
+  test('requestForQueryRecord returns the correct url/method', function(assert) {
+    const adapter = this.owner.lookup('adapter:gateway');
+    const client = this.owner.lookup('service:client/http');
+    const expected = `GET /v1/internal/ui/gateway-services-nodes/${id}?dc=${dc}`;
+    const actual = adapter.requestForQueryRecord(client.url, {
+      dc: dc,
+      id: id,
+    });
+    assert.equal(actual, expected);
+  });
+  test("requestForQueryRecord throws if you don't specify an id", function(assert) {
+    const adapter = this.owner.lookup('adapter:gateway');
+    const client = this.owner.lookup('service:client/http');
+    assert.throws(function() {
+      adapter.requestForQueryRecord(client.url, {
+        dc: dc,
+      });
+    });
+  });
+});

ui-v2/tests/integration/serializers/gateway-test.js

@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+import { get } from 'consul-ui/tests/helpers/api';
+import {
+  HEADERS_SYMBOL as META,
+  HEADERS_DATACENTER as DC,
+  HEADERS_NAMESPACE as NSPACE,
+} from 'consul-ui/utils/http/consul';
+
+module('Integration | Serializer | gateway', function(hooks) {
+  setupTest(hooks);
+  test('respondForQueryRecord returns the correct data for item endpoint', function(assert) {
+    const serializer = this.owner.lookup('serializer:gateway');
+    const dc = 'dc-1';
+    const id = 'slug';
+    const nspace = 'default';
+    const request = {
+      url: `/v1/internal/ui/gateway-services-nodes/${id}?dc=${dc}`,
+    };
+    return get(request.url).then(function(payload) {
+      const expected = {
+        Datacenter: dc,
+        [META]: {
+          [DC.toLowerCase()]: dc,
+          [NSPACE.toLowerCase()]: nspace,
+        },
+        uid: `["${nspace}","${dc}","${id}"]`,
+        Name: id,
+        Namespace: nspace,
+        Services: payload,
+      };
+      const actual = serializer.respondForQueryRecord(
+        function(cb) {
+          const headers = {};
+          const body = payload;
+          return cb(headers, body);
+        },
+        {
+          dc: dc,
+          id: id,
+        }
+      );
+      assert.deepEqual(actual, expected);
+    });
+  });
+});