ui: feature-flagged peering mvp (#13425)

* add peers route

* add peers to nav

* use regular app ui patterns peers template

* use empty state in peers UI

* mock `v1/peerings` request

* implement custom adapter/serializer for `peers`-model

* index request for peerings on peers route

* update peers list to show as proper list

* Use tailwind for easier styling

* Unique ids in peerings response mock-api

* Add styling peerings list

* Allow creating empty tooltip

To make it easier to iterate over a set of items where some items
should not display a tooltip and others should.

* Add tooltip Peerings:Badge

* Add undefined peering state badge

* Remove imported/exported services count peering

This won't be included in the initial version of the API response

* Implement Peerings::Search

* Make it possible to filter peerings by name

* Install ember-keyboard

For idiomatic handling of key-presses.

* Clear peering search input when pressing `Escape`

* use peers.index instead of peers for peerings listing

* Allow to include peered services in services-query

* update services mock to add peerName

* add Consul::Peer component

To surface peering information on a resource

* add PeerName as attribute to service model

* surface peering information in service list

* Add tooltip to Consul::Peer

* Make services searchable by peer-name

* Allow passing optional query-params to href-to

* Add peer query-param to dc.services.show

* Pass peer as query-param services listing

* support option peer route-param

* set peer-name undefined in services serializer when empty

* update peer route-param when navigating to peered service

* request sercice with peer-name if need be

* make sure to reset peer route-param when leaving service.show

* componentize services.peer-info

* surface peer info services.show

* make sure to reset peer route-param in main nav

* fix services breadcrumb services.intentions

we need to reset peer route-param here to not break the app

* surface peer when querying for it on service api call

* query for peer info service-instance api calls

* surface peer info service-instance.show

* Camelize peer attributes to match rest of app

* Refactor peers.index to reflect camelized attributes for peer

* Remove unused query-params services.show

* make logo href reset peer route-param

* Cleanup optional peer param query service-instance

* Use replace decorator instead of serializer for empty peerName

* make sure to only send peer info when correct qp is passed

* Always send qp for querying peers services request

* rename with-imports to with-peers

* Use css for peer-icon

* Refactor bucket-list component to surface peer-info

* Remove Consul::Peer component

This info is now displayed via the bucket-list component

* Fix bucket-list component to surface service again

* Update bucket-list docs to reflect peer-info addition

* Remove tailwind related styles

* Remove consul-tailwind package

We won't be using tailwind for now

* Fix typo badge scss

* Add with-import handling mock-api nodes

* Add peerName to node attributes

* include peers when querying nodes

* reflect api updates node list mock

* Create consul::node::peer-info component

* Surface peer-info in nodes list

* Mock peer response for node request

* Make it possible to add peer-name to node request

* Update peer route-param when linking to node

* Reset peers route-param when leaving nodes.show

We need to reset the route-param to not introduce a bug - otherwise
subsequent node show request would request with the old peer query-param

* Add sourcePeer intentions api mock

* add SourcePeer attr to intentions model

* Surface peering info on intentions list

* Request peered intentions differently intentions.edit

* Handle peer info in intentions/exact mock

* Surface peering info intention view

* Add randomized peer data topology mock

* Surface peer info topology view

* fix service/peer-info styling

We aren't using tailwind anymore - we need to create a custom scss file

* Update peerings api mocks

* Update peerings::badge with updated styling

* cleanup intentions/exact mock

* Create watcher component to declaratively register polling

* Poll peers in background when on peers route

* use existing colors for peering-badge

* Add test for requesting service with `with-peers`-query

* add imported/exported count to peers model

* update mock-api to surface exported/imported count on peers

* Show exported/imported peers count on peers list

* Use translations for service import/export UI peers

* Make sure to ask for nodes with peers

* Add match-url step for easier url testing of service urls

* Add test for peer-name on peered services

* Add test for service navigation peered service

* Implement feature-flag handling

* Enable peering feature in test and development

* Redirect peers to services.index when feature-flag is disabled

* Only query for peers when feature is enabled

* Only show peers in nav when feature is enabled

* Componentize peering service count detail

* Handle non-state Peerings::Badge

* Use Peerings::ServiceCount in peerings list

* Only send peer query for peered service-instances.

* Add step to visit url directly

* add test for accessing peered service directly

* Remove unused service import peers.index

* Only query for peer when peer provided node-adapter

* fix tests

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

@@ -36,16 +36,40 @@ export default class IntentionAdapter extends Adapter {
 
     // get the information we need from the id, which has been previously
     // encoded
-    const [
-      SourcePartition,
-      SourceNS,
-      SourceName,
-      DestinationPartition,
-      DestinationNS,
-      DestinationName,
-    ] = id.split(':').map(decodeURIComponent);
+    if (id.match(/^peer:/)) {
+      // id indicates we are dealing with a peered intention - handle this with
+      // different query-param for source - we need to prepend the peer
+      const [
+        peerIdentifier,
+        SourcePeer,
+        SourceNS,
+        SourceName,
+        DestinationPartition,
+        DestinationNS,
+        DestinationName,
+      ] = id.split(':').map(decodeURIComponent);
 
-    return request`
+      return request`
+      GET /v1/connect/intentions/exact?${{
+        source: `${peerIdentifier}:${SourcePeer}/${SourceNS}/${SourceName}`,
+        destination: `${DestinationPartition}/${DestinationNS}/${DestinationName}`,
+        dc: dc,
+      }}
+      Cache-Control: no-store
+
+      ${{ index }}
+    `;
+    } else {
+      const [
+        SourcePartition,
+        SourceNS,
+        SourceName,
+        DestinationPartition,
+        DestinationNS,
+        DestinationName,
+      ] = id.split(':').map(decodeURIComponent);
+
+      return request`
       GET /v1/connect/intentions/exact?${{
         source: `${SourcePartition}/${SourceNS}/${SourceName}`,
         destination: `${DestinationPartition}/${DestinationNS}/${DestinationName}`,
@@ -55,6 +79,7 @@ export default class IntentionAdapter extends Adapter {
 
       ${{ index }}
     `;
+    }
   }
 
   requestForCreateRecord(request, serialized, data) {

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

@@ -1,4 +1,5 @@
 import Adapter from './application';
+import { inject as service } from '@ember/service';
 
 // TODO: Update to use this.formatDatacenter()
 
@@ -10,6 +11,18 @@ import Adapter from './application';
 // to the node.
 
 export default class NodeAdapter extends Adapter {
+  @service features;
+
+  get peeringQuery() {
+    const query = {};
+
+    if (this.features.isEnabled('peering')) {
+      query['with-peers'] = true;
+    }
+
+    return query;
+  }
+
   requestForQuery(request, { dc, ns, partition, index, id, uri }) {
     return request`
       GET /v1/internal/ui/nodes?${{ dc }}
@@ -19,23 +32,32 @@ export default class NodeAdapter extends Adapter {
         ns,
         partition,
         index,
+        ...this.peeringQuery,
       }}
     `;
   }
 
-  requestForQueryRecord(request, { dc, ns, partition, index, id, uri }) {
+  requestForQueryRecord(request, { dc, ns, partition, index, id, uri, peer }) {
     if (typeof id === 'undefined') {
       throw new Error('You must specify an id');
     }
+    let options = {
+      ns,
+      partition,
+      index,
+    };
+
+    if (peer) {
+      options = {
+        ...options,
+        peer,
+      };
+    }
     return request`
       GET /v1/internal/ui/node/${id}?${{ dc }}
       X-Request-ID: ${uri}
 
-      ${{
-        ns,
-        partition,
-        index,
-      }}
+      ${options}
     `;
   }
 

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

@@ -0,0 +1,9 @@
+import JSONAPIAdapter from '@ember-data/adapter/json-api';
+
+export default class PeerAdapter extends JSONAPIAdapter {
+  namespace = 'v1';
+
+  pathForType(_modelName) {
+    return 'peerings';
+  }
+}

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

@@ -2,20 +2,30 @@ import Adapter from './application';
 
 // TODO: Update to use this.formatDatacenter()
 export default class ServiceInstanceAdapter extends Adapter {
-  requestForQuery(request, { dc, ns, partition, index, id, uri }) {
+  requestForQuery(request, { dc, ns, partition, index, id, uri, peer }) {
     if (typeof id === 'undefined') {
       throw new Error('You must specify an id');
     }
+
+    let options = {
+      ns,
+      partition,
+      index,
+    };
+
+    if (peer) {
+      options = {
+        ...options,
+        peer,
+      };
+    }
+
     return request`
       GET /v1/health/service/${id}?${{ dc }}
       X-Request-ID: ${uri}
       X-Range: ${id}
 
-      ${{
-        ns,
-        partition,
-        index,
-      }}
+      ${options}
     `;
   }
 

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

@@ -1,6 +1,19 @@
 import Adapter from './application';
+import { inject as service } from '@ember/service';
 
 export default class ServiceAdapter extends Adapter {
+  @service features;
+
+  get peeringQuery() {
+    const query = {};
+
+    if (this.features.isEnabled('peering')) {
+      query['with-peers'] = true;
+    }
+
+    return query;
+  }
+
   requestForQuery(request, { dc, ns, partition, index, gateway, uri }) {
     if (typeof gateway !== 'undefined') {
       return request`
@@ -23,6 +36,7 @@ export default class ServiceAdapter extends Adapter {
           ns,
           partition,
           index,
+          ...this.peeringQuery,
         }}
     `;
     }

ui/packages/consul-ui/app/components/consul/bucket/list/README.mdx

@@ -22,6 +22,20 @@ At the time of writing, this is not currently used across the entire UI
 ```hbs preview-template
   <figure>
     <figcaption>Show everything</figcaption>
+    <Consul::Bucket::List
+      @item={{hash
+        Namespace="different-nspace"
+        Partition="different-partition"
+        Service="service-name"
+        PeerName="billing-app"
+      }}
+      @nspace={{'nspace'}}
+      @partition={{'partition'}}
+      @service={{true}}
+    />
+  </figure>
+  <figure>
+    <figcaption>Show everything without peer</figcaption>
     <Consul::Bucket::List
       @item={{hash
         Namespace="different-nspace"
@@ -46,6 +60,29 @@ At the time of writing, this is not currently used across the entire UI
     />
   </figure>
 
+  <figure>
+    <figcaption>Show only peer-info</figcaption>
+    <Consul::Bucket::List
+      @item={{hash
+        Namespace="default"
+        PeerName="billing-app"
+      }}
+      @nspace={{'nspace'}}
+    />
+  </figure>
+
+  <figure>
+    <figcaption>Don't surface anything - no relevant info to show</figcaption>
+    <Consul::Bucket::List
+      @item={{hash
+        Namespace="default"
+        Partition="default"
+      }}
+      @nspace={{'default'}}
+      @partition={{'default'}}
+    />
+  </figure>
+
 ```
 
 ## Arguments

ui/packages/consul-ui/app/components/consul/bucket/list/index.hbs

@@ -1,60 +1,12 @@
-{{#if (and @partition (can 'use partitions'))}}
-  {{#if (not-eq @item.Partition @partition)}}
-    <dl class="consul-bucket-list">
-      <dt
-        class="partition"
-        {{tooltip}}
-      >
-        Admin Partition
+{{#if this.itemsToDisplay.length}}
+  <dl class="consul-bucket-list">
+    {{#each this.itemsToDisplay as |item|}}
+      <dt class={{item.type}} {{tooltip}}>
+        {{item.label}}
       </dt>
-      <dd>
-        {{@item.Partition}}
+      <dd data-test-bucket-item={{item.type}}>
+        {{item.item}}
       </dd>
-      <dt
-        class="nspace"
-        {{tooltip}}
-      >
-        Namespace
-      </dt>
-      <dd>
-        {{@item.Namespace}}
-      </dd>
-
-{{#if (and @service @item.Service)}}
-      <dt
-        class="service"
-      >
-        Service
-      </dt>
-      <dd>
-        {{@item.Service}}
-      </dd>
-{{/if}}
-
-    </dl>
-  {{/if}}
-{{else if (and @nspace (can 'use nspace'))}}
-  {{#if (not-eq @item.Namespace @nspace)}}
-    <dl class="consul-bucket-list">
-      <dt
-        class="nspace"
-        {{tooltip}}
-      >
-        Namespace
-      </dt>
-      <dd>
-        {{@item.Namespace}}
-      </dd>
-{{#if (and @service @item.Service)}}
-      <dt
-        class="service"
-      >
-        Service
-      </dt>
-      <dd>
-        {{@item.Service}}
-      </dd>
-{{/if}}
-    </dl>
-  {{/if}}
+    {{/each}}
+  </dl>
 {{/if}}