Implement imported services tab peers.edit

ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs

@@ -1,3 +1,133 @@
 <Route @name={{routeName}} as |route|>
-  <div>This is imported services</div>
+  <DataLoader
+    @src={{uri
+      "/${partition}/${nspace}/${dc}/services/${peer}"
+      (hash
+        partition=route.params.partition
+        nspace=route.params.nspace
+        dc=route.params.dc
+        peer=route.model.peer.Name
+      )
+    }}
+    as |api|
+  >
+
+    <BlockSlot @name="error">
+      <AppError @error={{api.error}} @login={{route.model.app.login.open}} />
+    </BlockSlot>
+
+    <BlockSlot @name="loaded">
+      {{#let
+        (hash
+          value=(or sortBy "Status:asc")
+          change=(action (mut sortBy) value="target.selected")
+        )
+        (hash
+          status=(hash
+            value=(if status (split status ",") undefined)
+            change=(action (mut status) value="target.selectedItems")
+          )
+          kind=(hash
+            value=(if kind (split kind ",") undefined)
+            change=(action (mut kind) value="target.selectedItems")
+          )
+          source=(hash
+            value=(if source (split source ",") undefined)
+            change=(action (mut source) value="target.selectedItems")
+          )
+          searchproperty=(hash
+            value=(if
+              (not-eq searchproperty undefined)
+              (split searchproperty ",")
+              this.searchProperties
+            )
+            change=(action (mut searchproperty) value="target.selectedItems")
+            default=this.searchProperties
+          )
+        )
+        (reject-by "Kind" "connect-proxy" api.data)
+        (or route.params.partition route.model.user.token.Partition "default")
+        (or route.params.nspace route.model.user.token.Namespace "default")
+        as |sort filters items partition nspace|
+      }}
+
+        {{#if (gt items.length 0)}}
+          {{#let (collection items) as |items|}}
+            <Consul::Service::SearchBar
+              @sources={{get items "ExternalSources"}}
+              @partitions={{get items "Partitions"}}
+              @partition={{partition}}
+              @search={{search}}
+              @onsearch={{action (mut search) value="target.value"}}
+              @sort={{sort}}
+              @filter={{filters}}
+            />
+          {{/let}}
+        {{/if}}
+        <DataCollection
+          @type="service"
+          @sort={{sort.value}}
+          @filters={{filters}}
+          @search={{search}}
+          @items={{items}}
+          as |collection|
+        >
+          <collection.Collection>
+            <Consul::Service::List
+              @items={{collection.items}}
+              @partition={{partition}}
+            />
+          </collection.Collection>
+          <collection.Empty>
+            <EmptyState @login={{route.model.app.login.open}}>
+              <BlockSlot @name="header">
+                <h2>
+                  No visible imported services from
+                  {{route.model.peer.Name}}
+                </h2>
+              </BlockSlot>
+              <BlockSlot @name="body">
+                {{#if items.length}}
+                  <div>
+                    No services where found matching that search, or you may not
+                    have access to view the services you are searching for.
+                  </div>
+                {{else}}
+                  <div>Services must be exported from one peer to another to
+                    enable service communication across two peers. There don't
+                    seem to be any services imported from
+                    {{route.model.peer.Name}}
+                    yet, or you may not have
+                    <code>service:read</code>
+                    permissions to access to this view.</div>
+                {{/if}}
+              </BlockSlot>
+              <BlockSlot @name="actions">
+                <li class="docs-link">
+                  <a
+                    href="{{env 'CONSUL_DOCS_URL'}}/connect/cluster-peering"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Documentation on Peers
+                  </a>
+                </li>
+                <li class="learn-link">
+                  <a
+                    href="{{env
+                      'CONSUL_DOCS_URL'
+                    }}/connect/cluster-peering/create-manage-peering"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Take the tutorial
+                  </a>
+                </li>
+              </BlockSlot>
+            </EmptyState>
+          </collection.Empty>
+        </DataCollection>
+      {{/let}}
+    </BlockSlot>
+  </DataLoader>
 </Route>

ui/packages/consul-peerings/vendor/consul-peerings/routes.js

@@ -29,6 +29,20 @@
           imported: {
             _options: {
               path: "/imported-services",
+              queryParams: {
+                sortBy: "sort",
+                status: "status",
+                source: "source",
+                kind: "kind",
+                searchproperty: {
+                  as: "searchproperty",
+                  empty: [["Name", "Tags"]],
+                },
+                search: {
+                  as: "filter",
+                  replace: true,
+                },
+              },
             },
           },
           exported: {

ui/packages/consul-ui/app/adapters/service.js

@@ -1,7 +1,7 @@
 import Adapter from './application';
 
 export default class ServiceAdapter extends Adapter {
-  requestForQuery(request, { dc, ns, partition, index, gateway, uri }) {
+  requestForQuery(request, { dc, ns, partition, index, gateway, uri, peer }) {
     if (typeof gateway !== 'undefined') {
       return request`
         GET /v1/internal/ui/gateway-services-nodes/${gateway}?${{ dc }}
@@ -16,13 +16,14 @@ export default class ServiceAdapter extends Adapter {
       `;
     } else {
       return request`
-        GET /v1/internal/ui/services?${{ dc }}
+        GET /v1/internal/ui/services?${{ dc, peer }}
         X-Request-ID: ${uri}
 
         ${{
           ns,
           partition,
           index,
+          peer,
         }}
     `;
     }

ui/packages/consul-ui/app/components/providers/search/index.js

@@ -1,8 +1,14 @@
 import Component from '@glimmer/component';
 
 export default class SearchProvider extends Component {
+  // custom base route / router abstraction is doing weird things
+  get _search() {
+    return this.args.search || '';
+  }
+
   get items() {
-    const { items, search, searchProperties } = this.args;
+    const { items, searchProperties } = this.args;
+    const { _search: search } = this;
 
     if (search.length > 0) {
       const regex = new RegExp(`${search}`, 'ig');

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

@@ -12,6 +12,11 @@ export default class ServiceService extends RepositoryService {
     return super.findAll(...arguments);
   }
 
+  @dataSource('/:partition/:ns/:dc/services/:peer')
+  async findAllImportedServices() {
+    return super.findAll(...arguments);
+  }
+
   @dataSource('/:partition/:ns/:dc/gateways/for-service/:gateway')
   findGatewayBySlug(params, configuration = {}) {
     if (typeof configuration.cursor !== 'undefined') {