From b6384d9ffa7dda66922c464282ea2c2587044306 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 16:49:07 +0200 Subject: [PATCH 01/56] Differentiate between dialer / receiver peer model --- ui/packages/consul-ui/app/models/peer.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/models/peer.js b/ui/packages/consul-ui/app/models/peer.js index 1923e31aab..6695253d8f 100644 --- a/ui/packages/consul-ui/app/models/peer.js +++ b/ui/packages/consul-ui/app/models/peer.js @@ -17,17 +17,34 @@ export default class Peer extends Model { @attr('string') Name; @attr('string') State; @attr('string') ID; + + // only the side that establishes will hold this property + @attr('string') PeerID; + + @attr() PeerServerAddresses; + + // StreamStatus @nullValue([]) @attr() ImportedServices; @nullValue([]) @attr() ExportedServices; @attr('date') LastHeartbeat; @attr('date') LastReceive; @attr('date') LastSend; - @attr() PeerServerAddresses; get ImportedServiceCount() { return this.ImportedServices.length; } + get ExportedServiceCount() { return this.ExportedServices.length; } + + // if we receive a PeerID we know that we are dealing with the side that + // established the peering + get isReceiver() { + return this.PeerID; + } + + get isDialer() { + return !this.isReceiver; + } } From 686e0f5ad4767ac92c069ea3c3ed0dfc483fce14 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:05:03 +0200 Subject: [PATCH 02/56] Only display regenerate token when peer is dialer Regenerating only makes sense if we are dealing with the side that created the token - i.e. the dialer. --- .../app/components/consul/peer/list/index.hbs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index d31e1fa15a..dd7b5d645a 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -41,14 +41,11 @@ as |item index|> -{{#if (can 'delete peer' item=item)}} + {{#if (can "delete peer" item=item)}} -{{#if (can "write peer" item=item)}} - + {{#if (and (can "write peer" item=item) item.isDialer)}} + Regenerate token From e2ca73ecbe3ab02ab730884f45aee8edd70d5703 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:06:55 +0200 Subject: [PATCH 03/56] Bring back edit-route for peerings --- .../vendor/consul-peerings/routes.js | 56 ++++++++++++------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js index fd2a92aca0..e5a6083bee 100644 --- a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js +++ b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js @@ -1,30 +1,46 @@ -(routes => routes({ - dc: { - peers: { - _options: { - path: '/peers' - }, - index: { +((routes) => + routes({ + dc: { + peers: { _options: { - path: '/', - queryParams: { - sortBy: 'sort', - state: 'state', - searchproperty: { - as: 'searchproperty', - empty: [['Name', 'ID']], + path: "/peers", + }, + index: { + _options: { + path: "/", + queryParams: { + sortBy: "sort", + state: "state", + searchproperty: { + as: "searchproperty", + empty: [["Name", "ID"]], + }, + search: { + as: "filter", + replace: true, + }, }, - search: { - as: 'filter', - replace: true, + }, + }, + edit: { + _options: { + path: "/:name", + }, + addresses: { + _options: { + path: "/addresses", }, }, }, }, }, - }, -}))( - (json, data = (typeof document !== 'undefined' ? document.currentScript.dataset : module.exports)) => { + }))( + ( + json, + data = typeof document !== "undefined" + ? document.currentScript.dataset + : module.exports + ) => { data[`routes`] = JSON.stringify(json); } ); From ef83c0799f3d482c907095390cfd1a62e26d08af Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:08:32 +0200 Subject: [PATCH 04/56] Add link to peers.edit to peerings list --- .../app/components/consul/peer/list/index.hbs | 107 ++++++++++-------- 1 file changed, 60 insertions(+), 47 deletions(-) diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index dd7b5d645a..a762c24c65 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -2,13 +2,21 @@ class="consul-peer-list" ...attributes @items={{@items}} -as |item index|> + as |item index| +> -

- {{item.Name}} -

+ {{#if (can "delete peer" item=item)}} + + {{item.Name}} + + {{else}} +

+ {{item.Name}} +

+ {{/if}}
@@ -16,24 +24,22 @@ as |item index|>
- {{t 'routes.dc.peers.index.detail.imported.count' + {{t + "routes.dc.peers.index.detail.imported.count" count=(format-number item.ImportedServiceCount) }}
- {{t 'routes.dc.peers.index.detail.exported.count' + {{t + "routes.dc.peers.index.detail.exported.count" count=(format-number item.ExportedServiceCount) }}
@@ -43,42 +49,49 @@ as |item index|> {{#if (can "delete peer" item=item)}} - + {{#if (and (can "write peer" item=item) item.isDialer)}} + + Regenerate token + + + {{/if}} + - Regenerate token + View -{{/if}} - - - Delete - - - - - Confirm delete - - -

- Are you sure you want to delete this peer? -

- - - - Delete - - - - - - -{{/if}} + + + Delete + + + + + Confirm delete + + +

+ Are you sure you want to delete this peer? +

+ + + + Delete + + + + + + + {{/if}} - - + \ No newline at end of file From a6e4239e7deb744a8bae8b4bc02b20fef466fec4 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:32:48 +0200 Subject: [PATCH 05/56] Handle case when this.element is undefined outlet --- ui/packages/consul-ui/app/components/outlet/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ui/packages/consul-ui/app/components/outlet/index.js b/ui/packages/consul-ui/app/components/outlet/index.js index e63ec68e21..693cdbeed6 100644 --- a/ui/packages/consul-ui/app/components/outlet/index.js +++ b/ui/packages/consul-ui/app/components/outlet/index.js @@ -79,10 +79,14 @@ export default class Outlet extends Component { this.previousState = this.state; this.state = new State('loading'); this.endTransition = this.routlet.transition(); - // if we have no transition-duration set immediately end the transition - const duration = window - .getComputedStyle(this.element) - .getPropertyValue('transition-duration'); + let duration; + if (this.element) { + // if we have no transition-duration set immediately end the transition + duration = window.getComputedStyle(this.element).getPropertyValue('transition-duration'); + } else { + duration = 0; + } + if (parseFloat(duration) === 0) { this.endTransition(); } From 552af5a4286655d05c1e658e9f69463da2a6db34 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:41:52 +0200 Subject: [PATCH 06/56] Add imported and exported routes for peers.edit --- .../app/templates/dc/peers/edit/exported.hbs | 3 +++ .../app/templates/dc/peers/edit/imported.hbs | 3 +++ .../consul-peerings/vendor/consul-peerings/routes.js | 10 ++++++++++ 3 files changed, 16 insertions(+) create mode 100644 ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs create mode 100644 ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs new file mode 100644 index 0000000000..c4f893fb9e --- /dev/null +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -0,0 +1,3 @@ + +
This is exported services
+ \ No newline at end of file diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs new file mode 100644 index 0000000000..a84ac2db3a --- /dev/null +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs @@ -0,0 +1,3 @@ + +
This is imported services
+ \ No newline at end of file diff --git a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js index e5a6083bee..b11bf8e445 100644 --- a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js +++ b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js @@ -26,6 +26,16 @@ _options: { path: "/:name", }, + imported: { + _options: { + path: "/imported-services", + }, + }, + exported: { + _options: { + path: "/exported-services", + }, + }, addresses: { _options: { path: "/addresses", From 991bc5a6cd21b04330b4afd7bd7a8db222863ad2 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:43:44 +0200 Subject: [PATCH 07/56] Add imported/exported tabs to peers.edit --- .../app/templates/dc/peers/edit.hbs | 115 ++++++++++-------- 1 file changed, 61 insertions(+), 54 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs index 32753ec3a1..fe330d13f0 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs @@ -1,8 +1,7 @@ - - + name=route.params.name ) }} - as |loader|> + as |loader| + > - + -{{#let - - route.params.dc - route.params.partition - route.params.nspace - - loader.data -as |dc partition nspace item|}} - - -
    -
  1. All Peers
    2. -
- - -

- -

- - - - - {{outlet}} - - - -{{/let}} + {{#let + route.params.dc + route.params.partition + route.params.nspace + loader.data + as |dc partition nspace item| + }} + + +
    +
  1. All Peers
    2. +
+ + +

+ +

+ + + + + {{outlet}} + + + + {{/let}} - + \ No newline at end of file From 8b962b5c30309bddca90f685727d47e399f035c4 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 12:44:26 +0200 Subject: [PATCH 08/56] Transition to exported/imported based on peer type --- .../app/controllers/dc/peers/edit/index.js | 15 +++++++++++++++ .../app/templates/dc/peers/edit/index.hbs | 9 +++------ 2 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js diff --git a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js b/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js new file mode 100644 index 0000000000..d262ef02be --- /dev/null +++ b/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js @@ -0,0 +1,15 @@ +import Controller from "@ember/controller"; +import { inject as service } from "@ember/service"; +import { action } from "@ember/object"; + +export default class DcPeersEditIndexController extends Controller { + @service router; + + @action transitionToStartSubRouteByType(peerModel) { + if (peerModel.isDialer) { + this.router.replaceWith("dc.peers.edit.exported"); + } else { + this.router.replaceWith("dc.peers.edit.imported"); + } + } +} diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs index 40663165a2..75042b4395 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs @@ -1,6 +1,3 @@ - - {{did-insert (route-action 'replaceWith' 'dc.peers.edit.addresses')}} - - + + {{did-insert (fn this.transitionToStartSubRouteByType route.model.peer)}} + \ No newline at end of file From 9c1f907ed9a57c050501bbd0983fe972ab92074c Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 14:43:54 +0200 Subject: [PATCH 09/56] Create Peerings::Provider We need a component abstraction that encapsulates creating the dynamic tabs based on peering-type. We create a `PeerTab`-abstraction that behaves like the data-structure the tab-nav expects to achieve this effect. --- .../components/peerings/provider/index.hbs | 1 + .../app/components/peerings/provider/index.js | 63 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 ui/packages/consul-ui/app/components/peerings/provider/index.hbs create mode 100644 ui/packages/consul-ui/app/components/peerings/provider/index.js diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.hbs b/ui/packages/consul-ui/app/components/peerings/provider/index.hbs new file mode 100644 index 0000000000..c55695d4db --- /dev/null +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.hbs @@ -0,0 +1 @@ +{{yield (hash data=this.data)}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js new file mode 100644 index 0000000000..445e6d3129 --- /dev/null +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js @@ -0,0 +1,63 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { hrefTo } from 'consul-ui/helpers/href-to'; +import { inject as service } from '@ember/service'; +import { getOwner } from '@ember/application'; + +class PeerTab { + @tracked route; + @tracked label; + @tracked currentRouteName; + + constructor(opts) { + const { currentRouteName, route, label, owner } = opts; + + this.currentRouteName = currentRouteName; + this.owner = owner; + this.route = route; + this.label = label; + } + + get selected() { + return this.currentRouteName === this.route; + } + + get href() { + return hrefTo(this.owner, [this.route]); + } +} + +export default class PeeringsProvider extends Component { + @service router; + + get data() { + return { + tabs: this.tabs, + }; + } + + get tabs() { + const { peer } = this.args; + const { router } = this; + const owner = getOwner(this); + + let tabs; + if (peer.isDialer) { + tabs = [ + { + label: 'Exported Services', + route: 'dc.peers.edit.exported', + }, + ]; + } else { + tabs = [ + { label: 'Imported Services', route: 'dc.peers.edit.imported' }, + { label: 'Addresses', route: 'dc.peers.edit.addresses' }, + ]; + } + + return tabs.map( + (tab) => new PeerTab({ ...tab, currentRouteName: router.currentRouteName, owner }) + ); + } +} From a8b44eb6e217e2e2a3f399501354b5cfcadc2a90 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 5 Oct 2022 14:44:28 +0200 Subject: [PATCH 10/56] Pass provider data for peering tab-nav --- .../app/templates/dc/peers/edit.hbs | 25 +++---------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs index fe330d13f0..df032ce7d8 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs @@ -36,27 +36,10 @@ - + + + + Date: Wed, 5 Oct 2022 15:14:38 +0200 Subject: [PATCH 11/56] Move javascript tab class to tab-nav --- .../app/components/peerings/provider/index.js | 30 +------- .../consul-ui/app/components/tab-nav/index.js | 70 +++++++++++++++++++ 2 files changed, 72 insertions(+), 28 deletions(-) diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js index 445e6d3129..7b00309d5e 100644 --- a/ui/packages/consul-ui/app/components/peerings/provider/index.js +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js @@ -1,31 +1,7 @@ import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { hrefTo } from 'consul-ui/helpers/href-to'; import { inject as service } from '@ember/service'; import { getOwner } from '@ember/application'; - -class PeerTab { - @tracked route; - @tracked label; - @tracked currentRouteName; - - constructor(opts) { - const { currentRouteName, route, label, owner } = opts; - - this.currentRouteName = currentRouteName; - this.owner = owner; - this.route = route; - this.label = label; - } - - get selected() { - return this.currentRouteName === this.route; - } - - get href() { - return hrefTo(this.owner, [this.route]); - } -} +import { Tab } from 'consul-ui/components/tab-nav'; export default class PeeringsProvider extends Component { @service router; @@ -56,8 +32,6 @@ export default class PeeringsProvider extends Component { ]; } - return tabs.map( - (tab) => new PeerTab({ ...tab, currentRouteName: router.currentRouteName, owner }) - ); + return tabs.map((tab) => new Tab({ ...tab, currentRouteName: router.currentRouteName, owner })); } } diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.js b/ui/packages/consul-ui/app/components/tab-nav/index.js index c2afccbdf2..af59df345d 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/index.js +++ b/ui/packages/consul-ui/app/components/tab-nav/index.js @@ -1,4 +1,74 @@ import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { hrefTo } from 'consul-ui/helpers/href-to'; + +/** + * A class that encapsulates the data abstraction that we expect the TabNav to + * be passed as `@items`. + * + * You can use this class when you want to create tab-nav from javascript. + * + * Instead of doing this in the template layer: + * + * ```handlebars + * Date: Thu, 6 Oct 2022 10:30:30 +0200 Subject: [PATCH 12/56] add external-services method to peer repo --- .../consul-ui/app/serializers/service.js | 82 +++++++++++++------ .../consul-ui/app/services/repository/peer.js | 22 +++++ 2 files changed, 79 insertions(+), 25 deletions(-) diff --git a/ui/packages/consul-ui/app/serializers/service.js b/ui/packages/consul-ui/app/serializers/service.js index 9caa9b2cdd..f8871fb189 100644 --- a/ui/packages/consul-ui/app/serializers/service.js +++ b/ui/packages/consul-ui/app/serializers/service.js @@ -1,6 +1,10 @@ import Serializer from './application'; import { PRIMARY_KEY, SLUG_KEY } from 'consul-ui/models/service'; import { get } from '@ember/object'; +import { + HEADERS_NAMESPACE as HTTP_HEADERS_NAMESPACE, + HEADERS_PARTITION as HTTP_HEADERS_PARTITION, +} from 'consul-ui/utils/http/consul'; export default class ServiceSerializer extends Serializer { primaryKey = PRIMARY_KEY; @@ -13,31 +17,7 @@ export default class ServiceSerializer extends Serializer { // Services and proxies all come together in the same list. Here we // map the proxies to their related services on a Service.Proxy // property for easy access later on - const services = {}; - body - .filter(function (item) { - return item.Kind !== 'connect-proxy'; - }) - .forEach((item) => { - services[item.Name] = item; - }); - body - .filter(function (item) { - return item.Kind === 'connect-proxy'; - }) - .forEach((item) => { - // Iterating to cover the usecase of a proxy being used by more - // than one service - if (item.ProxyFor) { - item.ProxyFor.forEach((service) => { - if (typeof services[service] !== 'undefined') { - services[service].Proxy = item; - } - }); - } - }); - - return cb(headers, body); + return cb(headers, this._transformServicesPayload(body)); }), query ); @@ -58,4 +38,56 @@ export default class ServiceSerializer extends Serializer { query ); } + + createJSONApiDocumentFromServicesPayload(headers, responseBody, dc) { + const { primaryKey, slugKey, fingerprint } = this; + + const transformedBody = this._transformServicesPayload(responseBody); + const attributes = transformedBody.map( + fingerprint( + primaryKey, + slugKey, + dc, + headers[HTTP_HEADERS_NAMESPACE], + headers[HTTP_HEADERS_PARTITION] + ) + ); + + return { + data: attributes.map((attr) => { + return { + id: attr.uid, + type: 'service', + attributes: attr, + }; + }), + }; + } + + _transformServicesPayload(body) { + const services = {}; + body + .filter(function (item) { + return item.Kind !== 'connect-proxy'; + }) + .forEach((item) => { + services[item.Name] = item; + }); + body + .filter(function (item) { + return item.Kind === 'connect-proxy'; + }) + .forEach((item) => { + // Iterating to cover the usecase of a proxy being used by more + // than one service + if (item.ProxyFor) { + item.ProxyFor.forEach((service) => { + if (typeof services[service] !== 'undefined') { + services[service].Proxy = item; + } + }); + } + }); + return body; + } } diff --git a/ui/packages/consul-ui/app/services/repository/peer.js b/ui/packages/consul-ui/app/services/repository/peer.js index b650278548..c177f2448d 100644 --- a/ui/packages/consul-ui/app/services/repository/peer.js +++ b/ui/packages/consul-ui/app/services/repository/peer.js @@ -1,5 +1,6 @@ import RepositoryService from 'consul-ui/services/repository'; import dataSource from 'consul-ui/decorators/data-source'; +import { inject as service } from '@ember/service'; function normalizePeerPayload(peerPayload, dc, partition) { const { @@ -18,10 +19,31 @@ function normalizePeerPayload(peerPayload, dc, partition) { }; } export default class PeerService extends RepositoryService { + @service store; + getModelName() { return 'peer'; } + @dataSource('/:partition/:ns/:ds/exported-services/:name') + async fetchExportedServices({ dc, ns, partition, name }, configuration, request) { + return ( + await request` + GET /v1/internal/ui/exported-services + + ${{ + peer: name, + }} + ` + )((headers, body, cache) => { + const serviceSerializer = this.store.serializerFor('service'); + + return this.store.push( + serviceSerializer.createJSONApiDocumentFromServicesPayload(headers, body, dc) + ); + }); + } + @dataSource('/:partition/:ns/:dc/peering/token-for/:name') async fetchToken({ dc, ns, partition, name }, configuration, request) { return ( From 964991ce024a728f3132368c75337caf64bf166e Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 6 Oct 2022 12:11:26 +0200 Subject: [PATCH 13/56] Configure tailwind-jit for sub-apps as well --- ui/packages/consul-ui/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/tailwind.config.js b/ui/packages/consul-ui/tailwind.config.js index d10c682315..69ae42f3e4 100644 --- a/ui/packages/consul-ui/tailwind.config.js +++ b/ui/packages/consul-ui/tailwind.config.js @@ -34,7 +34,7 @@ function colorMapFromTokens(tokensPath) { /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./app/**/*.{html,js,hbs,mdx}', './docs/**/*.{html,js,hbs,mdx}'], + content: ['../**/*.{html.js,hbs,mdx}'], theme: { colors: colorMapFromTokens( '../../node_modules/@hashicorp/design-system-tokens/dist/products/css/tokens.css' From 445356eedba2083fd9606a02700f0e29b1ee42fe Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 6 Oct 2022 12:11:56 +0200 Subject: [PATCH 14/56] Use HDS in peers.edit.exported --- .../app/templates/dc/peers/edit/exported.hbs | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs index c4f893fb9e..b7b30f9538 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -1,3 +1,34 @@ -
This is exported services
+ + {{#let + (or route.params.partition route.model.user.token.Partition "default") + api.data + as |partition items| + }} + + + + + + +
+
+ +
+
+ + + {{/let}} + \ No newline at end of file From 3b810469cf2e85477de017163e9e8409ab24f3d4 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 6 Oct 2022 16:10:32 +0200 Subject: [PATCH 15/56] Switch out ember-ref-modifier for ember-ref-bucket ember-ref-bucket is the successor of ref-modifier. We weren't using ref-modifier anywhere so switching out is not an issue. --- ui/packages/consul-ui/package.json | 2 +- ui/yarn.lock | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index da781d9928..40346d7128 100644 --- a/ui/packages/consul-ui/package.json +++ b/ui/packages/consul-ui/package.json @@ -146,7 +146,7 @@ "ember-power-select": "^4.0.5", "ember-power-select-with-create": "^0.8.0", "ember-qunit": "^5.1.1", - "ember-ref-modifier": "^1.0.0", + "ember-ref-bucket": "^4.1.0", "ember-render-helpers": "^0.2.0", "ember-resolver": "^8.0.2", "ember-route-action-helper": "^2.0.8", diff --git a/ui/yarn.lock b/ui/yarn.lock index 2b8e0eca8e..5182aec479 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -8881,7 +8881,7 @@ ember-modifier@^2.1.0, ember-modifier@^2.1.1: ember-destroyable-polyfill "^2.0.2" ember-modifier-manager-polyfill "^1.2.0" -"ember-modifier@^2.1.2 || ^3.1.0 || ^4.0.0": +"ember-modifier@^2.1.2 || ^3.1.0 || ^4.0.0", ember-modifier@^3.2.7: version "3.2.7" resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.2.7.tgz#f2d35b7c867cbfc549e1acd8d8903c5ecd02ea4b" integrity sha512-ezcPQhH8jUfcJQbbHji4/ZG/h0yyj1jRDknfYue/ypQS8fM8LrGcCMo0rjDZLzL1Vd11InjNs3BD7BdxFlzGoA== @@ -8981,12 +8981,14 @@ ember-qunit@^5.1.1: silent-error "^1.1.1" validate-peer-dependencies "^1.2.0" -ember-ref-modifier@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/ember-ref-modifier/-/ember-ref-modifier-1.0.1.tgz#aeca56798ebc0fb750f0ccd36e86d667f5b1bc44" - integrity sha512-qmEFY/4WOWWXABRWvX50jLPleH30p/LPLUXEvaSlIj41F23e3Vul91IqZ1PFdw1Rxpkb8DHWO5BRchN8vnz4+Q== +ember-ref-bucket@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/ember-ref-bucket/-/ember-ref-bucket-4.1.0.tgz#2a52e72a395a14033d034c834fab648f26d74baa" + integrity sha512-oEUU2mDtuYuMM039U9YEqrrOCVHH6rQfvbFOmh3WxOVEgubmLVyKEpGgU4P/6j0B/JxTqqTwM3ULTQyDto8dKg== dependencies: - ember-cli-babel "^7.20.5" + ember-cli-babel "^7.26.11" + ember-cli-htmlbars "^6.0.1" + ember-modifier "^3.2.7" ember-render-helpers@^0.2.0: version "0.2.0" From 5f670e404d1b0959c1633768f9a41f4eaae10018 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 6 Oct 2022 16:11:39 +0200 Subject: [PATCH 16/56] Create dimensions provider To measure the available space of an element when it should take up the "rest" of the page. This matches what `ListCollection` is doing internally but makes the mechanism available in a composable component. --- .../components/providers/dimension/index.hbs | 4 ++ .../components/providers/dimension/index.js | 53 +++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 ui/packages/consul-ui/app/components/providers/dimension/index.hbs create mode 100644 ui/packages/consul-ui/app/components/providers/dimension/index.js diff --git a/ui/packages/consul-ui/app/components/providers/dimension/index.hbs b/ui/packages/consul-ui/app/components/providers/dimension/index.hbs new file mode 100644 index 0000000000..4d36322965 --- /dev/null +++ b/ui/packages/consul-ui/app/components/providers/dimension/index.hbs @@ -0,0 +1,4 @@ +
+ {{on-window 'resize' this.handleWindowResize}} + {{yield (hash data=this.data)}} +
\ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/providers/dimension/index.js b/ui/packages/consul-ui/app/components/providers/dimension/index.js new file mode 100644 index 0000000000..ebf47545d3 --- /dev/null +++ b/ui/packages/consul-ui/app/components/providers/dimension/index.js @@ -0,0 +1,53 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import { ref } from 'ember-ref-bucket'; +import { htmlSafe } from '@ember/template'; + +export default class DimensionsProvider extends Component { + @service dom; + @ref('element') element; + + @tracked height; + + get data() { + const { height, fillRemainingHeightStyle } = this; + + return { + height, + fillRemainingHeightStyle, + }; + } + + get fillRemainingHeightStyle() { + return htmlSafe(`height: ${this.height}px;`); + } + + get bottomBoundary() { + return this.args.bottomBoundary || this.footer; + } + + get footer() { + return document.querySelector('footer[role="contentinfo"]'); + } + + get viewport() { + return this.dom.viewport(); + } + + @action measureDimensions(element) { + const { viewport, bottomBoundary } = this; + + const height = + viewport.innerHeight - (element.getBoundingClientRect().top + bottomBoundary.clientHeight); + + this.height = height; + } + + @action handleWindowResize() { + const { element } = this; + + this.measureDimensions(element); + } +} From 559fbc2ef4f91f36a915662319d29436435f23e1 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 6 Oct 2022 17:38:14 +0200 Subject: [PATCH 17/56] Pull in vertical-collection We want to use a community solution for occlusion rendering for this problem instead of using a custom abstraction. --- ui/packages/consul-ui/package.json | 1 + ui/yarn.lock | 89 ++++++++++++++++++++++-------- 2 files changed, 68 insertions(+), 22 deletions(-) diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index 40346d7128..146ff10df2 100644 --- a/ui/packages/consul-ui/package.json +++ b/ui/packages/consul-ui/package.json @@ -71,6 +71,7 @@ "@hashicorp/design-system-tokens": "^1.0.0", "@hashicorp/ember-cli-api-double": "^4.0.0", "@hashicorp/ember-flight-icons": "^2.0.12", + "@html-next/vertical-collection": "^4.0.0", "@lit/reactive-element": "^1.2.1", "@xstate/fsm": "^1.4.0", "a11y-dialog": "^6.0.1", diff --git a/ui/yarn.lock b/ui/yarn.lock index 5182aec479..c5624808dc 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -3320,6 +3320,20 @@ resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-2.10.0.tgz#24b03043bacda16e505200e6591dfef896ddacf1" integrity sha512-jYUA0M6Tz+4RAudil+GW/fHbhZPcKCiIZZAguBDviqbLneMkMgPOBgbXWCGWsEQ1fJzP2cXbUaio8L0aQZPWQw== +"@html-next/vertical-collection@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@html-next/vertical-collection/-/vertical-collection-4.0.0.tgz#b3b3d52358e15e7ed46e028d12424dab994690ed" + integrity sha512-/c4y6ASmkMwyG+rcoXH3kx50LiK2MuPX0bsktd+j9LhOD6zkJyT4wJ73m20dCEvxjgwA/nCQ8hj3lApQlHG0CQ== + dependencies: + babel6-plugin-strip-class-callcheck "^6.0.0" + broccoli-funnel "^3.0.8" + broccoli-merge-trees "^4.2.0" + broccoli-rollup "^5.0.0" + ember-cli-babel "^7.12.0" + ember-cli-htmlbars "^6.0.0" + ember-cli-version-checker "^5.1.2" + ember-raf-scheduler "^0.3.0" + "@humanwhocodes/config-array@^0.5.0": version "0.5.0" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9" @@ -3511,6 +3525,13 @@ resolved "https://registry.yarnpkg.com/@types/broccoli-plugin/-/broccoli-plugin-1.3.0.tgz#38f8462fecaebc4e09a32e4d4ed1b9808f75bbca" integrity sha512-SLk4/hFc2kGvgwNFrpn2O1juxFOllcHAywvlo7VwxfExLzoz1GGJ0oIZCwj5fwSpvHw4AWpZjJ1fUvb62PDayQ== +"@types/broccoli-plugin@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/broccoli-plugin/-/broccoli-plugin-3.0.0.tgz#290fda2270c47a568edfd0cefab8bb840d8bb7b2" + integrity sha512-f+TcsARR2PovfFRKFdCX0kfH/QoM3ZVD2h1rl2mNvrKO0fq2uBNCBsTU3JanfU4COCt5cXpTfARyUsERlC8vIw== + dependencies: + broccoli-plugin "*" + "@types/chai-as-promised@^7.1.2": version "7.1.3" resolved "https://registry.yarnpkg.com/@types/chai-as-promised/-/chai-as-promised-7.1.3.tgz#779166b90fda611963a3adbfd00b339d03b747bd" @@ -5945,6 +5966,19 @@ broccoli-persistent-filter@^3.1.2: symlink-or-copy "^1.0.1" sync-disk-cache "^2.0.0" +broccoli-plugin@*, broccoli-plugin@^4.0.5, broccoli-plugin@^4.0.7: + version "4.0.7" + resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-4.0.7.tgz#dd176a85efe915ed557d913744b181abe05047db" + integrity sha512-a4zUsWtA1uns1K7p9rExYVYG99rdKeGRymW0qOCNkvDPHQxVi3yVyJHhQbM3EZwdt2E0mnhr5e0c/bPpJ7p3Wg== + dependencies: + broccoli-node-api "^1.7.0" + broccoli-output-wrapper "^3.2.5" + fs-merger "^3.2.1" + promise-map-series "^0.3.0" + quick-temp "^0.1.8" + rimraf "^3.0.2" + symlink-or-copy "^1.3.1" + broccoli-plugin@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-1.1.0.tgz#73e2cfa05f8ea1e3fc1420c40c3d9e7dc724bf02" @@ -6001,19 +6035,6 @@ broccoli-plugin@^4.0.0, broccoli-plugin@^4.0.1, broccoli-plugin@^4.0.2, broccoli rimraf "^3.0.2" symlink-or-copy "^1.3.1" -broccoli-plugin@^4.0.5, broccoli-plugin@^4.0.7: - version "4.0.7" - resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-4.0.7.tgz#dd176a85efe915ed557d913744b181abe05047db" - integrity sha512-a4zUsWtA1uns1K7p9rExYVYG99rdKeGRymW0qOCNkvDPHQxVi3yVyJHhQbM3EZwdt2E0mnhr5e0c/bPpJ7p3Wg== - dependencies: - broccoli-node-api "^1.7.0" - broccoli-output-wrapper "^3.2.5" - fs-merger "^3.2.1" - promise-map-series "^0.3.0" - quick-temp "^0.1.8" - rimraf "^3.0.2" - symlink-or-copy "^1.3.1" - broccoli-postcss-single@^5.0.1: version "5.0.2" resolved "https://registry.yarnpkg.com/broccoli-postcss-single/-/broccoli-postcss-single-5.0.2.tgz#f23661b3011494d8a2dbd8ff39eb394e80313682" @@ -6052,6 +6073,21 @@ broccoli-rollup@^4.1.1: symlink-or-copy "^1.2.0" walk-sync "^1.1.3" +broccoli-rollup@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/broccoli-rollup/-/broccoli-rollup-5.0.0.tgz#a77b53bcef1b70e988913fee82265c0a4ca530da" + integrity sha512-QdMuXHwsdz/LOS8zu4HP91Sfi4ofimrOXoYP/lrPdRh7lJYD87Lfq4WzzUhGHsxMfzANIEvl/7qVHKD3cFJ4tA== + dependencies: + "@types/broccoli-plugin" "^3.0.0" + broccoli-plugin "^4.0.7" + fs-tree-diff "^2.0.1" + heimdalljs "^0.2.6" + node-modules-path "^1.0.1" + rollup "^2.50.0" + rollup-pluginutils "^2.8.1" + symlink-or-copy "^1.2.0" + walk-sync "^2.2.0" + broccoli-sass-source-maps@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/broccoli-sass-source-maps/-/broccoli-sass-source-maps-4.0.0.tgz#1ee4c10a810b10955b0502e28f85ab672f5961a2" @@ -7826,7 +7862,7 @@ ember-auto-import@^2.2.3, ember-auto-import@^2.4.1, ember-auto-import@^2.4.2: typescript-memoize "^1.0.0-alpha.3" walk-sync "^3.0.0" -ember-basic-dropdown@3.0.21, ember-basic-dropdown@^3.0.16: +ember-basic-dropdown@^3.0.16: version "3.0.21" resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-3.0.21.tgz#5711d071966919c9578d2d5ac2c6dcadbb5ea0e0" integrity sha512-Wu9hJWyqorKo+ZT2PMSIO1BxAeAdaiIC2IjSic0+HcKjmMU47botvG0xbxlprimOWaS9vM+nHat6Pt3xPvcB0A== @@ -7871,7 +7907,7 @@ ember-changeset-validations@~3.9.0: ember-get-config "^0.2.4" ember-validators "^2.0.0" -ember-changeset@3.10.1, ember-changeset@^3.9.1: +ember-changeset@^3.9.1: version "3.10.1" resolved "https://registry.yarnpkg.com/ember-changeset/-/ember-changeset-3.10.1.tgz#d6f06bc55f867a2c1ac7c5fd780776bd1e5a9b60" integrity sha512-4FoGKRcKxixSr+NBQ+ZoiwwbJE0/fuZRULUp9M1RIHejYhst+U8/ni47SsphrMhoRAcZCeyl+JqlBMlwR7v50g== @@ -7946,7 +7982,7 @@ ember-cli-babel@^6.0.0, ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.11.0, ember-cli-version-checker "^2.1.2" semver "^5.5.0" -ember-cli-babel@^7.13.2, ember-cli-babel@^7.26.1, ember-cli-babel@^7.26.11, ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.5, ember-cli-babel@^7.4.0: +ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.26.1, ember-cli-babel@^7.26.11, ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.5, ember-cli-babel@^7.4.0: version "7.26.11" resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.11.tgz#50da0fe4dcd99aada499843940fec75076249a9f" integrity sha512-JJYeYjiz/JTn34q7F5DSOjkkZqy8qwFOOxXfE6pe9yEJqWGu4qErKxlz8I22JoVEQ/aBUO+OcKTpmctvykM9YA== @@ -8981,6 +9017,13 @@ ember-qunit@^5.1.1: silent-error "^1.1.1" validate-peer-dependencies "^1.2.0" +ember-raf-scheduler@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/ember-raf-scheduler/-/ember-raf-scheduler-0.3.0.tgz#7657ee5c1d54f852731e61e9d0e0750a9a22f5f4" + integrity sha512-i8JWQidNCX7n5TOTIKRDR0bnsQN9aJh/GtOJKINz2Wr+I7L7sYVhli6MFqMYNGKC9j9e6iWsznfAIxddheyEow== + dependencies: + ember-cli-babel "^7.26.6" + ember-ref-bucket@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/ember-ref-bucket/-/ember-ref-bucket-4.1.0.tgz#2a52e72a395a14033d034c834fab648f26d74baa" @@ -15181,6 +15224,13 @@ rollup@^1.12.0: "@types/node" "*" acorn "^7.1.0" +rollup@^2.50.0: + version "2.79.1" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7" + integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw== + optionalDependencies: + fsevents "~2.3.2" + route-recognizer@^0.3.3: version "0.3.4" resolved "https://registry.yarnpkg.com/route-recognizer/-/route-recognizer-0.3.4.tgz#39ab1ffbce1c59e6d2bdca416f0932611e4f3ca3" @@ -17127,7 +17177,7 @@ validate-peer-dependencies@^1.2.0: resolve-package-path "^3.1.0" semver "^7.3.2" -validated-changeset@0.10.0, validated-changeset@~0.10.0: +validated-changeset@~0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/validated-changeset/-/validated-changeset-0.10.0.tgz#2e8188c089ab282c1b51fba3c289073f6bd14c8b" integrity sha512-n8NB3ol6Tbi0O7bnq1wz81m5Wd1gfHw0HUcH4MatOfqO3DyXzWZV+bUaNq6wThXn20rMFB82C8pTNFSWbgXJLA== @@ -17625,11 +17675,6 @@ xmlchars@^2.2.0: resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== -xmlhttprequest-ssl@^1.6.3: - version "1.6.3" - resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz#03b713873b01659dfa2c1c5d056065b27ddc2de6" - integrity sha512-3XfeQE/wNkvrIktn2Kf0869fC0BN6UpydVasGIeSm2B1Llihf7/0UfZM+eCkOw3P7bP4+qPgqhm7ZoxuJtFU0Q== - xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" From aebb988dafd2bd0bc5c576a2fc39b3244d6a4510 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Sat, 8 Oct 2022 13:33:55 +0200 Subject: [PATCH 18/56] Create search-provider --- .../app/components/providers/search/index.hbs | 1 + .../app/components/providers/search/index.js | 28 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 ui/packages/consul-ui/app/components/providers/search/index.hbs create mode 100644 ui/packages/consul-ui/app/components/providers/search/index.js diff --git a/ui/packages/consul-ui/app/components/providers/search/index.hbs b/ui/packages/consul-ui/app/components/providers/search/index.hbs new file mode 100644 index 0000000000..c55695d4db --- /dev/null +++ b/ui/packages/consul-ui/app/components/providers/search/index.hbs @@ -0,0 +1 @@ +{{yield (hash data=this.data)}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/providers/search/index.js b/ui/packages/consul-ui/app/components/providers/search/index.js new file mode 100644 index 0000000000..af61de4fb1 --- /dev/null +++ b/ui/packages/consul-ui/app/components/providers/search/index.js @@ -0,0 +1,28 @@ +import Component from '@glimmer/component'; + +export default class SearchProvider extends Component { + get items() { + const { items, search, searchProperties } = this.args; + + const regex = new RegExp(`${search}`, 'ig'); + + return items.filter((item) => { + const matchesInSearchProperties = searchProperties.reduce((acc, searchProperty) => { + const match = item[searchProperty].match(regex); + if (match) { + return [...acc, match]; + } else { + return acc; + } + }, []); + return matchesInSearchProperties.length > 0; + }); + } + + get data() { + const { items } = this; + return { + items, + }; + } +} From 469fe420b38a93ff0fc954015a111bc1ed9ed022 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Sat, 8 Oct 2022 13:35:25 +0200 Subject: [PATCH 19/56] Make exported-services searchable by name --- .../app/controllers/dc/peers/edit/exported.js | 17 +++ .../app/templates/dc/peers/edit/exported.hbs | 103 +++++++++++++++++- .../vendor/consul-peerings/routes.js | 6 + 3 files changed, 121 insertions(+), 5 deletions(-) create mode 100644 ui/packages/consul-peerings/app/controllers/dc/peers/edit/exported.js diff --git a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/exported.js b/ui/packages/consul-peerings/app/controllers/dc/peers/edit/exported.js new file mode 100644 index 0000000000..59e61c489c --- /dev/null +++ b/ui/packages/consul-peerings/app/controllers/dc/peers/edit/exported.js @@ -0,0 +1,17 @@ +import Controller from "@ember/controller"; +import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; + +export default class PeersEditExportedController extends Controller { + queryParams = { + search: { + as: "filter", + }, + }; + + @tracked search = ""; + + @action updateSearch(value) { + this.search = value; + } +} diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs index b7b30f9538..7c814c2775 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -22,13 +22,106 @@ -
-
- + {{#if items.length}} +
+
+ +
-
- + {{/if}} + + + {{#if p.data.height}} +
+ {{#if search.data.items.length}} + +
  • +
    {{service.Name}}
    +
    • +     + {{else}} + + +

    + No visible exported services to + {{route.model.peer.Name}} +

    +     + + {{#if items.length}} +
    + No services where found matching that search, or you + may not have access to view the services you are + searching for. +
    + {{else}} +
    + Services must be exported from one peer to another to + enable service communication across two peers. There + don't seem to be any services exported to peer-a yet, + or you may not have + services:read + permissions to access to this view. +
    + {{/if}} +     + +
  • + + Documentation on Peers + +
    • +
  • + + Take the tutorial + +
    • +     +     + {{/if}} +
    + {{/if}} +     + +     {{/let}} + \ No newline at end of file diff --git a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js index b11bf8e445..2cfc21e4e0 100644 --- a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js +++ b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js @@ -34,6 +34,12 @@ exported: { _options: { path: "/exported-services", + queryParams: { + search: { + as: "filter", + replace: true, + }, + }, }, }, addresses: { From 53c29394cd097e981a9650a542bd5bf9396866b5 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Sun, 9 Oct 2022 12:59:18 +0200 Subject: [PATCH 20/56] fix placeholder empty-state exported --- .../consul-peerings/app/templates/dc/peers/edit/exported.hbs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs index 7c814c2775..eb68d73fd0 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -82,8 +82,9 @@
    Services must be exported from one peer to another to enable service communication across two peers. There - don't seem to be any services exported to peer-a yet, - or you may not have + don't seem to be any services exported to + {{route.model.peer.Name}} + yet, or you may not have services:read permissions to access to this view.
    From 8707b6c3d3e336c53854b7be4c192304ac05134a Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Sun, 9 Oct 2022 13:00:00 +0200 Subject: [PATCH 21/56] Always display imported & exported on peer Peers are bi-directional, we need to reflect that --- .../app/components/peerings/provider/index.js | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js index 7b00309d5e..4c67c36a3f 100644 --- a/ui/packages/consul-ui/app/components/peerings/provider/index.js +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js @@ -17,19 +17,16 @@ export default class PeeringsProvider extends Component { const { router } = this; const owner = getOwner(this); - let tabs; - if (peer.isDialer) { - tabs = [ - { - label: 'Exported Services', - route: 'dc.peers.edit.exported', - }, - ]; - } else { - tabs = [ - { label: 'Imported Services', route: 'dc.peers.edit.imported' }, - { label: 'Addresses', route: 'dc.peers.edit.addresses' }, - ]; + let tabs = [ + { label: 'Imported Services', route: 'dc.peers.edit.imported' }, + { + label: 'Exported Services', + route: 'dc.peers.edit.exported', + }, + ]; + + if (!peer.isReceiver) { + tabs = [...tabs, { label: 'Addresses', route: 'dc.peers.edit.addresses' }]; } return tabs.map((tab) => new Tab({ ...tab, currentRouteName: router.currentRouteName, owner })); From 79565760191ccdddf24e156ddf75d9e44ffd6dee Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Sun, 9 Oct 2022 13:00:22 +0200 Subject: [PATCH 22/56] Return all items without search term exported --- .../app/components/providers/search/index.js | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/ui/packages/consul-ui/app/components/providers/search/index.js b/ui/packages/consul-ui/app/components/providers/search/index.js index af61de4fb1..677a7365e5 100644 --- a/ui/packages/consul-ui/app/components/providers/search/index.js +++ b/ui/packages/consul-ui/app/components/providers/search/index.js @@ -4,19 +4,23 @@ export default class SearchProvider extends Component { get items() { const { items, search, searchProperties } = this.args; - const regex = new RegExp(`${search}`, 'ig'); + if (search.length > 0) { + const regex = new RegExp(`${search}`, 'ig'); - return items.filter((item) => { - const matchesInSearchProperties = searchProperties.reduce((acc, searchProperty) => { - const match = item[searchProperty].match(regex); - if (match) { - return [...acc, match]; - } else { - return acc; - } - }, []); - return matchesInSearchProperties.length > 0; - }); + return items.filter((item) => { + const matchesInSearchProperties = searchProperties.reduce((acc, searchProperty) => { + const match = item[searchProperty].match(regex); + if (match) { + return [...acc, match]; + } else { + return acc; + } + }, []); + return matchesInSearchProperties.length > 0; + }); + } else { + return items; + } } get data() { From 312e6ff206d007a0efcf9c8f2daf23fc240479ba Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Sun, 9 Oct 2022 13:02:06 +0200 Subject: [PATCH 23/56] Display addresses when receiver peer.edit --- ui/packages/consul-ui/app/components/peerings/provider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js index 4c67c36a3f..44a76603a8 100644 --- a/ui/packages/consul-ui/app/components/peerings/provider/index.js +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js @@ -25,7 +25,7 @@ export default class PeeringsProvider extends Component { }, ]; - if (!peer.isReceiver) { + if (peer.isReceiver) { tabs = [...tabs, { label: 'Addresses', route: 'dc.peers.edit.addresses' }]; } From 20d80ed8eb6fa2b6c15be8000b3b2d60a988974b Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 09:50:00 +0200 Subject: [PATCH 24/56] Implement imported services tab peers.edit --- .../app/templates/dc/peers/edit/imported.hbs | 132 +++++++++++++++++- .../vendor/consul-peerings/routes.js | 14 ++ ui/packages/consul-ui/app/adapters/service.js | 5 +- .../app/components/providers/search/index.js | 8 +- .../app/services/repository/service.js | 5 + 5 files changed, 160 insertions(+), 4 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs index a84ac2db3a..ebed120b43 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs @@ -1,3 +1,133 @@ -
    This is imported services
    + + + + + + + + {{#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|}} + + {{/let}} + {{/if}} + + + + + + + +

    + No visible imported services from + {{route.model.peer.Name}} +

    +     + + {{#if items.length}} +
    + No services where found matching that search, or you may not + have access to view the services you are searching for. +
    + {{else}} +
    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 + service:read + permissions to access to this view.
    + {{/if}} +     + +
  • + + Documentation on Peers + +
    • +
  • + + Take the tutorial + +
    • +     +     +     +     + {{/let}} +     +     \ No newline at end of file diff --git a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js index 2cfc21e4e0..4357c60be5 100644 --- a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js +++ b/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: { diff --git a/ui/packages/consul-ui/app/adapters/service.js b/ui/packages/consul-ui/app/adapters/service.js index bc15702ada..c867dff064 100644 --- a/ui/packages/consul-ui/app/adapters/service.js +++ b/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, }} `; } diff --git a/ui/packages/consul-ui/app/components/providers/search/index.js b/ui/packages/consul-ui/app/components/providers/search/index.js index 677a7365e5..281fd6f4fc 100644 --- a/ui/packages/consul-ui/app/components/providers/search/index.js +++ b/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'); diff --git a/ui/packages/consul-ui/app/services/repository/service.js b/ui/packages/consul-ui/app/services/repository/service.js index 5ce9439b46..269e4a20b8 100644 --- a/ui/packages/consul-ui/app/services/repository/service.js +++ b/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') { From 33471be408be941c9424ec617c9d6b88e027769b Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 10:24:29 +0200 Subject: [PATCH 25/56] Show cursor peer-list --- .../consul-peerings/app/components/consul/peer/list/index.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index a762c24c65..993bd93d20 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -2,6 +2,7 @@ class="consul-peer-list" ...attributes @items={{@items}} + @linkable="linkable peers" as |item index| > From 56d83c316e4e2d3fa45e9c66bd0786d31c9c3ccb Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 10:24:45 +0200 Subject: [PATCH 26/56] Link service in exported-service list --- .../app/templates/dc/peers/edit/exported.hbs | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs index eb68d73fd0..a525b841fe 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -56,11 +56,27 @@ as |service index| >
  • -
    {{service.Name}}
    + + {{service.Name}} +
    • {{else}} From 7162005a70d9c5b20f70782ed576cdc5f88e1b77 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 11:05:59 +0200 Subject: [PATCH 27/56] Allow tabs to have tooltips --- ui/packages/consul-ui/app/components/tab-nav/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.js b/ui/packages/consul-ui/app/components/tab-nav/index.js index af59df345d..ac66f5ae45 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/index.js +++ b/ui/packages/consul-ui/app/components/tab-nav/index.js @@ -50,15 +50,17 @@ import { hrefTo } from 'consul-ui/helpers/href-to'; export class Tab { @tracked route; @tracked label; + @tracked tooltip; @tracked currentRouteName; constructor(opts) { - const { currentRouteName, route, label, owner } = opts; + const { currentRouteName, route, label, tooltip, owner } = opts; this.currentRouteName = currentRouteName; this.owner = owner; this.route = route; this.label = label; + this.tooltip = tooltip; } get selected() { From ec6d6d001f78812f3772adc91d280c38aa6ed425 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 11:06:26 +0200 Subject: [PATCH 28/56] Display tab tooltips in tab-nav --- .../app/components/tab-nav/index.hbs | 91 ++++++++++--------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.hbs b/ui/packages/consul-ui/app/components/tab-nav/index.hbs index 6b8acd7651..236f692f7f 100644 --- a/ui/packages/consul-ui/app/components/tab-nav/index.hbs +++ b/ui/packages/consul-ui/app/components/tab-nav/index.hbs @@ -1,47 +1,50 @@ -{{#let - (dom-position (set this 'style') offset=true) - "tab" -as |select name|}} - +
      + {{#each @items as |item|}} +
    • + + {{#if item.tooltip}} + {{item.label}} + {{else}} + {{item.label}} + {{/if}} + +
      • + {{/each}} +
    + {{/let}} \ No newline at end of file From 128de18ac1e761f9cba45b184a197dba67c5c71d Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 11:06:48 +0200 Subject: [PATCH 29/56] Add tooltips exported/imported tabs --- .../app/components/peerings/provider/index.js | 11 +++++++++-- ui/packages/consul-ui/translations/routes/en-us.yaml | 8 ++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js index 44a76603a8..aed351336d 100644 --- a/ui/packages/consul-ui/app/components/peerings/provider/index.js +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js @@ -5,6 +5,7 @@ import { Tab } from 'consul-ui/components/tab-nav'; export default class PeeringsProvider extends Component { @service router; + @service intl; get data() { return { @@ -17,15 +18,21 @@ export default class PeeringsProvider extends Component { const { router } = this; const owner = getOwner(this); + const { isReceiver, Name: name } = peer; let tabs = [ - { label: 'Imported Services', route: 'dc.peers.edit.imported' }, + { + label: 'Imported Services', + route: 'dc.peers.edit.imported', + tooltip: this.intl.t('routes.dc.peers.index.detail.imported.tab-tooltip', { name }), + }, { label: 'Exported Services', route: 'dc.peers.edit.exported', + tooltip: this.intl.t('routes.dc.peers.index.detail.exported.tab-tooltip', { name }), }, ]; - if (peer.isReceiver) { + if (isReceiver) { tabs = [...tabs, { label: 'Addresses', route: 'dc.peers.edit.addresses' }]; } diff --git a/ui/packages/consul-ui/translations/routes/en-us.yaml b/ui/packages/consul-ui/translations/routes/en-us.yaml index e6ed415227..f8f14fedf0 100644 --- a/ui/packages/consul-ui/translations/routes/en-us.yaml +++ b/ui/packages/consul-ui/translations/routes/en-us.yaml @@ -135,11 +135,15 @@ dc: detail: imported: count: | - {count} imported services + {count} imported services tooltip: The number of services imported from {name} + tab-tooltip: Services imported from {name} exported: count: | - {count} exported services + {count} exported services + tooltip: The number of services exported from {name} + tab-tooltip: Services exported from {name} + addresses: tooltip: The number of services exported from {name} partitions: index: From ec8c6e0c4700617b26387a358d4f7f9857dc48e3 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 11:12:50 +0200 Subject: [PATCH 30/56] Add empty state peers.edit.addresses --- .../app/templates/dc/peers/edit/addresses.hbs | 47 ++++++++++++++++--- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/addresses.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/addresses.hbs index 8e100066b5..e7892b3589 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/addresses.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/addresses.hbs @@ -1,7 +1,40 @@ - - - + + {{#if (gt route.model.items.length 0)}} + + {{else}} + + +

    + No server addresses. +

    +     + +
    + There don't seem to be any server addresses for this peer. +
    +     + +
  • + + Documentation on Peers + +
    • +
  • + + Take the tutorial + +
    • +     +     + {{/if}} +     \ No newline at end of file From ecfb17bba0088a13cff09271b9ee91c69f62e92b Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 14:56:00 +0200 Subject: [PATCH 31/56] Implement smart-date-format-helper Add a helper that knows how to format past dates in a smart way. When less than a week ago we will use relative date strings - for dates older than a week we will use a friendly human-readable format. This matches best practices we want to adhere to based on what Terraform did for date-formatting. --- .../app/helpers/smart-date-format.js | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 ui/packages/consul-ui/app/helpers/smart-date-format.js diff --git a/ui/packages/consul-ui/app/helpers/smart-date-format.js b/ui/packages/consul-ui/app/helpers/smart-date-format.js new file mode 100644 index 0000000000..c195157ad2 --- /dev/null +++ b/ui/packages/consul-ui/app/helpers/smart-date-format.js @@ -0,0 +1,48 @@ +import Helper from '@ember/component/helper'; +import { inject as service } from '@ember/service'; + +const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24; +const MILLISECONDS_IN_WEEK = MILLISECONDS_IN_DAY * 7; +/** + * A function that returns if a date is within a week of the current time + * @param {*} date - the date to check + * + */ +function isNearDate(date) { + const now = new Date(); + const aWeekAgo = now - MILLISECONDS_IN_WEEK; + const aWeekInFuture = now + MILLISECONDS_IN_WEEK; + + return date >= aWeekAgo && aWeekInFuture; +} + +export default class SmartDateFormat extends Helper { + @service temporal; + @service intl; + + compute([value], hash) { + const fallback = hash.fallback || 'None yet'; + + if (!value) { + return { + isNearDate: false, + relative: fallback, + friendly: fallback, + }; + } + + return { + isNearDate: isNearDate(value), + relative: `${this.temporal.format(value)} ago`, + friendly: this.intl.formatTime(value, { + month: 'short', + day: 'numeric', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hourCycle: 'h24', + }), + }; + } +} From 7600cb2e3113356888900624c4218e34ae981276 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 14:57:05 +0200 Subject: [PATCH 32/56] Add bento box peers.edit --- .../app/templates/dc/peers/edit.hbs | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs index df032ce7d8..06d36423d4 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs @@ -36,6 +36,74 @@     + +
    +
    +
    Status
    +
    + +
    +
    +
    +
    Latest heartbeat
    + {{#let (smart-date-format item.heartbeat) as |smartDate|}} +
    + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} +
    + {{/let}} +
    +
    +
    Latest receipt
    + {{#let (smart-date-format item.receipt) as |smartDate|}} +
    + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} +
    + {{/let}} +
    +
    +
    Latest send
    + {{#let (smart-date-format item.lastSend) as |smartDate|}} +
    + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} +
    + {{/let}} + +
    +
    +     From e8db58c56b9438ae35921a33e045dd7bc2e80cc2 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 15:08:52 +0200 Subject: [PATCH 33/56] Don't handle undefined in smart-date-format We will handle that from the outside --- .../app/templates/dc/peers/edit.hbs | 85 +++++++++++-------- .../app/helpers/smart-date-format.js | 10 --- 2 files changed, 49 insertions(+), 46 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs index 06d36423d4..a60f11ae04 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs @@ -54,52 +54,65 @@
    Latest heartbeat
    - {{#let (smart-date-format item.heartbeat) as |smartDate|}} -
    - {{#if smartDate.isNearDate}} - {{smartDate.relative}} - {{else}} - {{smartDate.friendly}} - {{/if}} -
    - {{/let}} +
    + {{#if item.heartbeat}} + {{#let (smart-date-format item.heartbeat) as |smartDate|}} + + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} + {{/let}} + {{else}} + None yet + {{/if}} +
    Latest receipt
    - {{#let (smart-date-format item.receipt) as |smartDate|}} -
    - {{#if smartDate.isNearDate}} - {{smartDate.relative}} - {{else}} - {{smartDate.friendly}} - {{/if}} -
    - {{/let}} +
    + {{#if item.receipt}} + {{#let (smart-date-format item.receipt) as |smartDate|}} + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} + {{/let}} + {{else}} + None yet + {{/if}} +
    Latest send
    - {{#let (smart-date-format item.lastSend) as |smartDate|}} -
    - {{#if smartDate.isNearDate}} - {{smartDate.relative}} - {{else}} - {{smartDate.friendly}} - {{/if}} -
    - {{/let}} +
    + {{#if item.lastSend}} + {{#let (smart-date-format item.lastSend) as |smartDate|}} + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} + {{/let}} + {{else}} + None yet + {{/if}} +
    diff --git a/ui/packages/consul-ui/app/helpers/smart-date-format.js b/ui/packages/consul-ui/app/helpers/smart-date-format.js index c195157ad2..9e0e635989 100644 --- a/ui/packages/consul-ui/app/helpers/smart-date-format.js +++ b/ui/packages/consul-ui/app/helpers/smart-date-format.js @@ -21,16 +21,6 @@ export default class SmartDateFormat extends Helper { @service intl; compute([value], hash) { - const fallback = hash.fallback || 'None yet'; - - if (!value) { - return { - isNearDate: false, - relative: fallback, - friendly: fallback, - }; - } - return { isNearDate: isNearDate(value), relative: `${this.temporal.format(value)} ago`, From 90259d73661a7d9da50ced82e5148945229fcaf5 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Mon, 10 Oct 2022 15:26:40 +0200 Subject: [PATCH 34/56] Move peering bento box into dedicated component --- .../consul/peer/bento-box/index.hbs | 71 ++++++++++++++++ .../app/templates/dc/peers/edit.hbs | 82 +------------------ 2 files changed, 72 insertions(+), 81 deletions(-) create mode 100644 ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs diff --git a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs new file mode 100644 index 0000000000..54a38b9526 --- /dev/null +++ b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs @@ -0,0 +1,71 @@ + +
    +
    +
    Status
    +
    + +
    +
    +
    +
    Latest heartbeat
    +
    + {{#if @peering.heartbeat}} + {{#let (smart-date-format @peering.heartbeat) as |smartDate|}} + + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} + {{/let}} + {{else}} + None yet + {{/if}} +
    +
    +
    +
    Latest receipt
    +
    + {{#if @peering.receipt}} + {{#let (smart-date-format @peering.receipt) as |smartDate|}} + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} + {{/let}} + {{else}} + None yet + {{/if}} +
    +
    +
    +
    Latest send
    +
    + {{#if @peering.lastSend}} + {{#let (smart-date-format @peering.lastSend) as |smartDate|}} + {{#if smartDate.isNearDate}} + {{smartDate.relative}} + {{else}} + {{smartDate.friendly}} + {{/if}} + {{/let}} + {{else}} + None yet + {{/if}} +
    + +
    +
    +     \ No newline at end of file diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs index a60f11ae04..25177b78e6 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs @@ -36,87 +36,7 @@     - -
    -
    -
    Status
    -
    - -
    -
    -
    -
    Latest heartbeat
    -
    - {{#if item.heartbeat}} - {{#let (smart-date-format item.heartbeat) as |smartDate|}} - - {{#if smartDate.isNearDate}} - {{smartDate.relative}} - {{else}} - {{smartDate.friendly}} - {{/if}} - {{/let}} - {{else}} - None yet - {{/if}} -
    -
    -
    -
    Latest receipt
    -
    - {{#if item.receipt}} - {{#let (smart-date-format item.receipt) as |smartDate|}} - {{#if smartDate.isNearDate}} - {{smartDate.relative}} - {{else}} - {{smartDate.friendly}} - {{/if}} - {{/let}} - {{else}} - None yet - {{/if}} -
    -
    -
    -
    Latest send
    -
    - {{#if item.lastSend}} - {{#let (smart-date-format item.lastSend) as |smartDate|}} - {{#if smartDate.isNearDate}} - {{smartDate.relative}} - {{else}} - {{smartDate.friendly}} - {{/if}} - {{/let}} - {{else}} - None yet - {{/if}} -
    - -
    -
    -     + From a61085258e317379b0f0e50dfcf42dfa23faee16 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 16:51:55 +0200 Subject: [PATCH 35/56] Prototype StreamStatus integration peers detail --- .../consul/peer/bento-box/index.hbs | 26 +++++++++---------- .../app/components/consul/peer/list/index.hbs | 4 +-- .../app/helpers/smart-date-format.js | 6 ++--- ui/packages/consul-ui/app/models/peer.js | 1 + .../consul-ui/app/services/repository/peer.js | 10 +++++++ 5 files changed, 29 insertions(+), 18 deletions(-) diff --git a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs index 54a38b9526..7ffe6e92d7 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs @@ -1,8 +1,8 @@ - -
    + +
    Status
    @@ -10,11 +10,11 @@
    Latest heartbeat
    - {{#if @peering.heartbeat}} - {{#let (smart-date-format @peering.heartbeat) as |smartDate|}} + {{#if @peering.LastHeartbeat}} + {{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
    Latest receipt
    - {{#if @peering.receipt}} - {{#let (smart-date-format @peering.receipt) as |smartDate|}} + {{#if @peering.LastReceive}} + {{#let (smart-date-format @peering.LastReceive) as |smartDate|}} {{#if smartDate.isNearDate}} {{smartDate.relative}} {{else}} @@ -50,11 +50,11 @@
    Latest send
    - {{#if @peering.lastSend}} - {{#let (smart-date-format @peering.lastSend) as |smartDate|}} + {{#if @peering.LastSend}} + {{#let (smart-date-format @peering.LastSend) as |smartDate|}} {{#if smartDate.isNearDate}} {{smartDate.relative}} {{else}} @@ -68,4 +68,4 @@
    - \ No newline at end of file + diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index 993bd93d20..6735fc217a 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -30,7 +30,7 @@ > {{t "routes.dc.peers.index.detail.imported.count" - count=(format-number item.ImportedServiceCount) + count=(format-number (or item.ImportedServiceCount 0)) }}
    @@ -41,7 +41,7 @@ > {{t "routes.dc.peers.index.detail.exported.count" - count=(format-number item.ExportedServiceCount) + count=(format-number (or item.ExportedServiceCount 0)) }}
    diff --git a/ui/packages/consul-ui/app/helpers/smart-date-format.js b/ui/packages/consul-ui/app/helpers/smart-date-format.js index 9e0e635989..45dce293c5 100644 --- a/ui/packages/consul-ui/app/helpers/smart-date-format.js +++ b/ui/packages/consul-ui/app/helpers/smart-date-format.js @@ -10,10 +10,10 @@ const MILLISECONDS_IN_WEEK = MILLISECONDS_IN_DAY * 7; */ function isNearDate(date) { const now = new Date(); - const aWeekAgo = now - MILLISECONDS_IN_WEEK; - const aWeekInFuture = now + MILLISECONDS_IN_WEEK; + const aWeekAgo = +now - MILLISECONDS_IN_WEEK; + const aWeekInFuture = +now + MILLISECONDS_IN_WEEK; - return date >= aWeekAgo && aWeekInFuture; + return date >= aWeekAgo && date <= aWeekInFuture; } export default class SmartDateFormat extends Helper { diff --git a/ui/packages/consul-ui/app/models/peer.js b/ui/packages/consul-ui/app/models/peer.js index 6695253d8f..245f8ea0fe 100644 --- a/ui/packages/consul-ui/app/models/peer.js +++ b/ui/packages/consul-ui/app/models/peer.js @@ -22,6 +22,7 @@ export default class Peer extends Model { @attr('string') PeerID; @attr() PeerServerAddresses; + @attr() StreamStatus; // StreamStatus @nullValue([]) @attr() ImportedServices; diff --git a/ui/packages/consul-ui/app/services/repository/peer.js b/ui/packages/consul-ui/app/services/repository/peer.js index c177f2448d..838de8fb1e 100644 --- a/ui/packages/consul-ui/app/services/repository/peer.js +++ b/ui/packages/consul-ui/app/services/repository/peer.js @@ -107,6 +107,16 @@ export default class PeerService extends RepositoryService { }} ` )((headers, body, cache) => { + const { StreamStatus } = body; + if (StreamStatus.LastHeartbeat) { + StreamStatus.LastHeartbeat = new Date(StreamStatus.LastHeartbeat); + } + if (StreamStatus.LastReceive) { + StreamStatus.LastReceive = new Date(StreamStatus.LastReceive); + } + if (StreamStatus.LastSend) { + StreamStatus.LastSend = new Date(StreamStatus.LastSend); + } return { meta: { version: 2, From 45f06149d49cc459da164ba95071fa802657aa6f Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 16:53:09 +0200 Subject: [PATCH 36/56] Always transition to imported peers.edit --- .../app/controllers/dc/peers/edit/index.js | 8 +- .../app/templates/dc/peers/edit/exported.hbs | 1 + .../app/templates/dc/peers/edit/imported.hbs | 1 + .../app/templates/dc/peers/edit/index.hbs | 2 +- .../components/consul/service/list/index.hbs | 184 ++++++++++-------- .../app/components/icon-definition/index.scss | 5 + .../consul-ui/app/services/repository/peer.js | 22 ++- 7 files changed, 123 insertions(+), 100 deletions(-) diff --git a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js b/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js index d262ef02be..0f4af5e828 100644 --- a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js +++ b/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js @@ -5,11 +5,7 @@ import { action } from "@ember/object"; export default class DcPeersEditIndexController extends Controller { @service router; - @action transitionToStartSubRouteByType(peerModel) { - if (peerModel.isDialer) { - this.router.replaceWith("dc.peers.edit.exported"); - } else { - this.router.replaceWith("dc.peers.edit.imported"); - } + @action transitionToImported() { + this.router.replaceWith("dc.peers.edit.imported"); } } diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs index a525b841fe..246097f772 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -31,6 +31,7 @@ @type="search" @value={{this.search}} placeholder="Search" + class="rounded-sm border-hds-border-faint" {{on "input" (pick "target.value" this.updateSearch)}} />
    diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs index ebed120b43..1c2d11d5ee 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs @@ -76,6 +76,7 @@ diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs index 75042b4395..25acb7e4c2 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs @@ -1,3 +1,3 @@ - {{did-insert (fn this.transitionToStartSubRouteByType route.model.peer)}} + {{did-insert this.transitionToImported}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs index a97184b984..773af36154 100644 --- a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs @@ -1,97 +1,111 @@ - -
    -
    - Health -
    -
    - - {{#if (eq 'critical' item.MeshStatus)}} - At least one health check on one instance is failing. - {{else if (eq 'warning' item.MeshStatus)}} - At least one health check on one instance has a warning. - {{else if (eq 'passing' item.MeshStatus)}} - All health checks are passing. - {{else}} - There are no health checks. - {{/if}} - -
    -
    -{{#if (gt item.InstanceCount 0)}} - + {{#let + (eq @peer.State 'FAILING') + (and @peer (eq item.InstanceCount 0)) + as |peerIsFailing peeredAndInstanceCountZero| }} - > - {{item.Name}} - -{{else}} -

    - {{item.Name}} -

    -{{/if}} +
    +
    + Health +
    +
    + + {{#if peerIsFailing}} + This peer is out of sync, so the current health statuses of its services are unknown. + {{else if peeredAndInstanceCountZero}} + This service currently has 0 instances. Check with the operator of its peer to make + sure this is expected behavior. + {{else if (eq 'critical' item.MeshStatus)}} + At least one health check on one instance is failing. + {{else if (eq 'warning' item.MeshStatus)}} + At least one health check on one instance has a warning. + {{else if (eq 'passing' item.MeshStatus)}} + All health checks are passing. + {{else}} + There are no health checks. + {{/if}} + +
    +
    + {{/let}} + {{#if (gt item.InstanceCount 0)}} + + {{item.Name}} + + {{else}} +

    + {{item.Name}} +

    + {{/if}}     - + - {{#if (and (not-eq item.InstanceCount 0) (and (not-eq item.Kind 'terminating-gateway') (not-eq item.Kind 'ingress-gateway'))) }} - - {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'instance' without-count=true}} - - {{/if}} - - {{#if (eq item.Kind 'terminating-gateway')}} - - {{format-number item.GatewayConfig.AssociatedServiceCount}} {{pluralize item.GatewayConfig.AssociatedServiceCount 'linked service' without-count=true}} - - {{else if (eq item.Kind 'ingress-gateway')}} - - {{format-number item.GatewayConfig.AssociatedServiceCount}} {{pluralize item.GatewayConfig.AssociatedServiceCount 'upstream' without-count=true}} - - {{/if}} - {{#if (or item.ConnectedWithGateway item.ConnectedWithProxy)}} -
    -
    - - This service uses a proxy for the Consul service mesh - -
    - {{#if (and item.ConnectedWithGateway item.ConnectedWithProxy )}} -
    - in service mesh with proxy and gateway -
    - {{else if item.ConnectedWithProxy}} -
    - in service mesh with proxy -
    - {{else if item.ConnectedWithGateway}} -
    - in service mesh with gateway -
    - {{/if}} -
    - {{/if}} + {{#if + (and + (not-eq item.InstanceCount 0) + (and (not-eq item.Kind 'terminating-gateway') (not-eq item.Kind 'ingress-gateway')) + ) + }} + + {{format-number item.InstanceCount}} + {{pluralize item.InstanceCount 'instance' without-count=true}} + + {{/if}} + {{#unless @peer}} + + {{/unless}} + {{#if (eq item.Kind 'terminating-gateway')}} + + {{format-number item.GatewayConfig.AssociatedServiceCount}} + {{pluralize item.GatewayConfig.AssociatedServiceCount 'linked service' without-count=true}} + + {{else if (eq item.Kind 'ingress-gateway')}} + + {{format-number item.GatewayConfig.AssociatedServiceCount}} + {{pluralize item.GatewayConfig.AssociatedServiceCount 'upstream' without-count=true}} + + {{/if}} + {{#if (or item.ConnectedWithGateway item.ConnectedWithProxy)}} +
    +
    + + This service uses a proxy for the Consul service mesh + +
    + {{#if (and item.ConnectedWithGateway item.ConnectedWithProxy)}} +
    + in service mesh with proxy and gateway +
    + {{else if item.ConnectedWithProxy}} +
    + in service mesh with proxy +
    + {{else if item.ConnectedWithGateway}} +
    + in service mesh with gateway +
    + {{/if}} +
    + {{/if}}     \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/icon-definition/index.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss index 9595850e50..d8d9dda77b 100644 --- a/ui/packages/consul-ui/app/components/icon-definition/index.scss +++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss @@ -25,6 +25,11 @@ @extend %with-minus-square-fill-mask, %as-pseudo; color: rgb(var(--tone-gray-500)); } +%icon-definition.empty dt::before, +%composite-row-header .help dd::before { + @extend %with-help-circle-outline-mask, %as-pseudo; + color: rgb(var(--tone-gray-500)); +} %composite-row-header [rel='me'] dd::before { @extend %with-check-circle-fill-mask, %as-pseudo; diff --git a/ui/packages/consul-ui/app/services/repository/peer.js b/ui/packages/consul-ui/app/services/repository/peer.js index 838de8fb1e..c39accbb51 100644 --- a/ui/packages/consul-ui/app/services/repository/peer.js +++ b/ui/packages/consul-ui/app/services/repository/peer.js @@ -107,16 +107,22 @@ export default class PeerService extends RepositoryService { }} ` )((headers, body, cache) => { + // we can't easily use fragments as we are working around the serializer + // layer const { StreamStatus } = body; - if (StreamStatus.LastHeartbeat) { - StreamStatus.LastHeartbeat = new Date(StreamStatus.LastHeartbeat); - } - if (StreamStatus.LastReceive) { - StreamStatus.LastReceive = new Date(StreamStatus.LastReceive); - } - if (StreamStatus.LastSend) { - StreamStatus.LastSend = new Date(StreamStatus.LastSend); + + if (StreamStatus) { + if (StreamStatus.LastHeartbeat) { + StreamStatus.LastHeartbeat = new Date(StreamStatus.LastHeartbeat); + } + if (StreamStatus.LastReceive) { + StreamStatus.LastReceive = new Date(StreamStatus.LastReceive); + } + if (StreamStatus.LastSend) { + StreamStatus.LastSend = new Date(StreamStatus.LastSend); + } } + return { meta: { version: 2, From 40e18c0e456b3c86c0c69e67d774263d175d1aaa Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 11:17:19 +0200 Subject: [PATCH 37/56] Add peer as a belongs-to to service Working with a peer model as a relationship is much easier than to workaround a non-relationship in imported services. This is currently only relevant for imported-services where we know the peer in advance. --- ui/packages/consul-ui/app/models/service.js | 47 ++++++++++++++++++- .../app/services/repository/service.js | 21 +++++++-- 2 files changed, 63 insertions(+), 5 deletions(-) diff --git a/ui/packages/consul-ui/app/models/service.js b/ui/packages/consul-ui/app/models/service.js index 70a753f44f..7b50315d77 100644 --- a/ui/packages/consul-ui/app/models/service.js +++ b/ui/packages/consul-ui/app/models/service.js @@ -1,4 +1,4 @@ -import Model, { attr } from '@ember-data/model'; +import Model, { attr, belongsTo } from '@ember-data/model'; import { computed } from '@ember/object'; import { tracked } from '@glimmer/tracking'; import { fragment } from 'ember-data-model-fragments/attributes'; @@ -58,6 +58,18 @@ export default class Service extends Model { @attr() meta; // {} + @belongsTo({ async: false }) peer; + + @computed('peer', 'InstanceCount') + get isZeroCountButPeered() { + return this.peer && this.InstanceCount === 0; + } + + @computed('peer.State') + get peerIsFailing() { + return this.peer && this.peer.State === 'FAILING'; + } + @computed('ChecksPassing', 'ChecksWarning', 'ChecksCritical') get ChecksTotal() { return this.ChecksPassing + this.ChecksWarning + this.ChecksCritical; @@ -79,9 +91,19 @@ export default class Service extends Model { return this.MeshEnabled || (this.Kind || '').length > 0; } - @computed('MeshChecksPassing', 'MeshChecksWarning', 'MeshChecksCritical') + @computed( + 'MeshChecksPassing', + 'MeshChecksWarning', + 'MeshChecksCritical', + 'isZeroCountButPeered', + 'peerIsFailing' + ) get MeshStatus() { switch (true) { + case this.isZeroCountButPeered: + return 'unknown'; + case this.peerIsFailing: + return 'unknown'; case this.MeshChecksCritical !== 0: return 'critical'; case this.MeshChecksWarning !== 0: @@ -93,6 +115,27 @@ export default class Service extends Model { } } + @computed('isZeroCountButPeered', 'peerIsFailing', 'MeshStatus') + get healthTooltipText() { + const { MeshStatus, isZeroCountButPeered, peerIsFailing } = this; + if (isZeroCountButPeered) { + return 'This service currently has 0 instances. Check with the operator of its peer to make sure this is expected behavior.'; + } + if (peerIsFailing) { + return 'This peer is out of sync, so the current health statuses of its services are unknown.'; + } + if (MeshStatus === 'critical') { + return 'At least one health check on one instance is failing.'; + } + if (MeshStatus === 'warning') { + return 'At least one health check on one instance has a warning.'; + } + if (MeshStatus == 'passing') { + return 'All health checks are passing.'; + } + return 'There are no health checks'; + } + @computed('ChecksPassing', 'Proxy.ChecksPassing') get MeshChecksPassing() { let proxyCount = 0; diff --git a/ui/packages/consul-ui/app/services/repository/service.js b/ui/packages/consul-ui/app/services/repository/service.js index 269e4a20b8..7219983329 100644 --- a/ui/packages/consul-ui/app/services/repository/service.js +++ b/ui/packages/consul-ui/app/services/repository/service.js @@ -1,8 +1,11 @@ import RepositoryService from 'consul-ui/services/repository'; import dataSource from 'consul-ui/decorators/data-source'; +import { inject as service } from '@ember/service'; const modelName = 'service'; export default class ServiceService extends RepositoryService { + @service store; + getModelName() { return modelName; } @@ -12,9 +15,21 @@ 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/services/:peer/:peerId') + async findAllImportedServices(params, configuration) { + // remember peer.id so that we can add it to to the service later on to setup relationship + const { peerId } = params; + + // don't send peerId with query + delete params.peerId; + + // assign the peer as a belongs-to. we don't have access to any information + // we could use to do this in the serializer so we need to do it manually here + return super.findAll(params, configuration).then((services) => { + const peer = this.store.peekRecord('peer', peerId); + services.forEach((service) => (service.peer = peer)); + return services; + }); } @dataSource('/:partition/:ns/:dc/gateways/for-service/:gateway') From ebf7c91b11f2f8df7be825e6a63a60e643a7b1f7 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 16:56:12 +0200 Subject: [PATCH 38/56] Update imported/export count on peers Api has changed we need to adjust accordingly. --- .../consul-peerings/app/components/consul/peer/list/index.hbs | 4 ++-- ui/packages/consul-ui/app/models/peer.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index 6735fc217a..993bd93d20 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -30,7 +30,7 @@ > {{t "routes.dc.peers.index.detail.imported.count" - count=(format-number (or item.ImportedServiceCount 0)) + count=(format-number item.ImportedServiceCount) }}
    @@ -41,7 +41,7 @@ > {{t "routes.dc.peers.index.detail.exported.count" - count=(format-number (or item.ExportedServiceCount 0)) + count=(format-number item.ExportedServiceCount) }}
    diff --git a/ui/packages/consul-ui/app/models/peer.js b/ui/packages/consul-ui/app/models/peer.js index 245f8ea0fe..6695253d8f 100644 --- a/ui/packages/consul-ui/app/models/peer.js +++ b/ui/packages/consul-ui/app/models/peer.js @@ -22,7 +22,6 @@ export default class Peer extends Model { @attr('string') PeerID; @attr() PeerServerAddresses; - @attr() StreamStatus; // StreamStatus @nullValue([]) @attr() ImportedServices; From 42a725bffe1a78114d5554ee16231f7340bf8fc9 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 11:20:14 +0200 Subject: [PATCH 39/56] Add `unknown`-state predicate services Based on the new peer relationship --- ui/packages/consul-ui/app/filter/predicates/service.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/packages/consul-ui/app/filter/predicates/service.js b/ui/packages/consul-ui/app/filter/predicates/service.js index 0fdeaf86c6..14bae43846 100644 --- a/ui/packages/consul-ui/app/filter/predicates/service.js +++ b/ui/packages/consul-ui/app/filter/predicates/service.js @@ -14,6 +14,7 @@ export default { warning: (item, value) => item.MeshStatus === value, critical: (item, value) => item.MeshStatus === value, empty: (item, value) => item.MeshChecksTotal === 0, + unknown: (item) => item.peerIsFailing || item.isZeroCountButPeered, }, instance: { registered: (item, value) => item.InstanceCount > 0, From 71e20c3122c393dc52fe4ec71535a7849bc249b4 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 11:24:10 +0200 Subject: [PATCH 40/56] Add filtering for 'unknown' imported services --- .../app/templates/dc/peers/edit/imported.hbs | 5 +- .../components/consul/service/list/index.hbs | 38 +- .../consul/service/search-bar/index.hbs | 345 +++++++++--------- .../consul/service/search-bar/index.js | 13 + .../app/components/icon-definition/index.scss | 4 +- .../app/components/popover-select/index.scss | 4 + 6 files changed, 209 insertions(+), 200 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/consul/service/search-bar/index.js diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs index 1c2d11d5ee..db552ef262 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs @@ -1,12 +1,13 @@ {{/let}} {{/if}} @@ -76,7 +78,6 @@ diff --git a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs index 773af36154..a8e6bba2e2 100644 --- a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs @@ -6,35 +6,12 @@ as |item index| > - {{#let - (eq @peer.State 'FAILING') - (and @peer (eq item.InstanceCount 0)) - as |peerIsFailing peeredAndInstanceCountZero| - }} -
    -
    - Health -
    -
    - - {{#if peerIsFailing}} - This peer is out of sync, so the current health statuses of its services are unknown. - {{else if peeredAndInstanceCountZero}} - This service currently has 0 instances. Check with the operator of its peer to make - sure this is expected behavior. - {{else if (eq 'critical' item.MeshStatus)}} - At least one health check on one instance is failing. - {{else if (eq 'warning' item.MeshStatus)}} - At least one health check on one instance has a warning. - {{else if (eq 'passing' item.MeshStatus)}} - All health checks are passing. - {{else}} - There are no health checks. - {{/if}} - -
    -
    - {{/let}} +
    +
    + Health +
    +
    +
    {{#if (gt item.InstanceCount 0)}} {{/if}} - {{#unless @peer}} + {{! we are displaying imported-services - don't show bucket-list }} + {{#unless item.peer}} {{/unless}} {{#if (eq item.Kind 'terminating-gateway')}} diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs index a73d0b6cad..df7abdc695 100644 --- a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs @@ -1,195 +1,208 @@ - - <:status as |search|> + + <:status as |search|> -{{#let - - (t (concat "components.consul.service.search-bar." search.status.key) - default=(array - (concat "common.search." search.status.key) - (concat "common.consul." search.status.key) + {{#let + (t + (concat 'components.consul.service.search-bar.' search.status.key) + default=(array + (concat 'common.search.' search.status.key) (concat 'common.consul.' search.status.key) + ) ) - ) - - (t (concat "components.consul.service.search-bar." search.status.value) - default=(array - (concat "common.search." search.status.value) - (concat "common.consul." search.status.value) - (concat "common.brand." search.status.value) + (t + (concat 'components.consul.service.search-bar.' search.status.value) + default=(array + (concat 'common.search.' search.status.value) + (concat 'common.consul.' search.status.value) + (concat 'common.brand.' search.status.value) + ) ) - ) - -as |key value|}} - + as |key value| + }} +
    {{key}}
    {{value}}
     -{{/let}} + {{/let}} - - <:search as |search|> - + <:search as |search|> + + - - - - {{t "common.search.searchproperty"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + {{t 'common.search.searchproperty'}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} {{#each @filter.searchproperty.default as |prop|}} {{/each}} - {{/let}} - - - - - <:filter as |search|> - - - - {{t "common.consul.status"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - {{#each (array "passing" "warning" "critical" "empty") as |state|}} - - {{/each}} - {{/let}} + {{/let}} - - - - {{t "components.consul.service.search-bar.kind"}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - + + <:filter as |search|> + + + + {{t 'common.consul.status'}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + {{#each this.healthStates as |state|}} + + {{/each}} + {{/let}} + + + + + + {{t 'components.consul.service.search-bar.kind'}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + - - {{#each (array "ingress-gateway" "terminating-gateway" "mesh-gateway") as |kind|}} - - {{/each}} + + {{#each (array 'ingress-gateway' 'terminating-gateway' 'mesh-gateway') as |kind|}} + + {{/each}} - - {{#each (array "in-mesh" "not-in-mesh") as |state|}} - - {{/each}} + + {{#each (array 'in-mesh' 'not-in-mesh') as |state|}} + + {{/each}} - {{/let}} - - - {{#if (gt @sources.length 0)}} + {{/let}} +     + + {{#if (gt @sources.length 0)}} - + as |components| + > + - {{t "common.search.source"}} + {{t 'common.search.source'}} - - {{#let components.Option as |Option|}} -{{#if (gt @sources.length 0)}} - {{#each @sources as |source|}} - - {{/each}} - -{{/if}} - {{/let}} + + {{#let components.Option as |Option|}} + {{#if (gt @sources.length 0)}} + {{#each @sources as |source|}} + + {{/each}} + + {{/if}} + {{/let}} - {{/if}} - - <:sort as |search|> - - - - {{#let (from-entries (array - (array "Name:asc" (t "common.sort.alpha.asc")) - (array "Name:desc" (t "common.sort.alpha.desc")) - (array "Status:asc" (t "common.sort.status.asc")) - (array "Status:desc" (t "common.sort.status.desc")) - )) - as |selectable| - }} - {{get selectable @sort.value}} - {{/let}} - - - - {{#let components.Optgroup components.Option as |Optgroup Option|}} - - - + {{/if}} + + <:sort as |search|> + + + + {{#let + (from-entries + (array + (array 'Name:asc' (t 'common.sort.alpha.asc')) + (array 'Name:desc' (t 'common.sort.alpha.desc')) + (array 'Status:asc' (t 'common.sort.status.asc')) + (array 'Status:desc' (t 'common.sort.status.desc')) + ) + ) + as |selectable| + }} + {{get selectable @sort.value}} + {{/let}} + + + + {{#let components.Optgroup components.Option as |Optgroup Option|}} + + + - - - + + + - {{/let}} - - - - + {{/let}} + + + + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js new file mode 100644 index 0000000000..4af97bcb53 --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js @@ -0,0 +1,13 @@ +import Component from '@glimmer/component'; + +export default class ConsulServiceSearchBar extends Component { + get healthStates() { + let states = ['passing', 'warning', 'critical', 'empty']; + + if (this.args.peer) { + states = [...states, 'unknown']; + } + + return states; + } +} diff --git a/ui/packages/consul-ui/app/components/icon-definition/index.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss index d8d9dda77b..262412ef22 100644 --- a/ui/packages/consul-ui/app/components/icon-definition/index.scss +++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss @@ -25,8 +25,8 @@ @extend %with-minus-square-fill-mask, %as-pseudo; color: rgb(var(--tone-gray-500)); } -%icon-definition.empty dt::before, -%composite-row-header .help dd::before { +%icon-definition.unknown dt::before, +%composite-row-header .unknown dd::before { @extend %with-help-circle-outline-mask, %as-pseudo; color: rgb(var(--tone-gray-500)); } diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss index 90dd0fd27f..dad07b2cdd 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.scss +++ b/ui/packages/consul-ui/app/components/popover-select/index.scss @@ -42,6 +42,10 @@ @extend %with-minus-square-fill-mask, %as-pseudo; color: rgb(var(--tone-gray-400)); } +%popover-select .value-unknown button::before { + @extend %with-help-circle-outline-mask, %as-pseudo; + color: rgb(var(--tone-gray-500)); +} %popover-select.type-source li:not(.partition) button { text-transform: capitalize; } From 9030c321646fe4038348b1ae1648e277d5fe13fa Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 13:04:33 +0200 Subject: [PATCH 41/56] Use existing freefilter to match existing design --- .../app/templates/dc/peers/edit/exported.hbs | 21 +++++++------------ .../app/components/providers/search/index.js | 4 +--- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs index 246097f772..dffbb14684 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs @@ -23,18 +23,15 @@ {{#if items.length}} -
    -
    - +
    + -
    +
    {{/if}} -
  • +
  • 0) { - const regex = new RegExp(`${search}`, 'ig'); - return items.filter((item) => { const matchesInSearchProperties = searchProperties.reduce((acc, searchProperty) => { - const match = item[searchProperty].match(regex); + const match = item[searchProperty].indexOf(search) !== -1; if (match) { return [...acc, match]; } else { From e55306e25835763da4540af864bb4f36b8e01580 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 13:13:43 +0200 Subject: [PATCH 42/56] Match design order health states imported-services --- .../app/components/consul/service/search-bar/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js index 4af97bcb53..0db51f3404 100644 --- a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js +++ b/ui/packages/consul-ui/app/components/consul/service/search-bar/index.js @@ -2,12 +2,10 @@ import Component from '@glimmer/component'; export default class ConsulServiceSearchBar extends Component { get healthStates() { - let states = ['passing', 'warning', 'critical', 'empty']; - if (this.args.peer) { - states = [...states, 'unknown']; + return ['passing', 'warning', 'critical', 'unknown', 'empty']; + } else { + return ['passing', 'warning', 'critical', 'empty']; } - - return states; } } From d6f0fe9f6e624c36ca7d0b35dbb1df2821b25765 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Tue, 11 Oct 2022 13:28:02 +0200 Subject: [PATCH 43/56] Fix bucket-list display depends on navigation We need to explicitly tell the UI to not show the bucket-list when we are displaying imported services. If we make this depend on the data we will sometimes not show it due to data-loader caching. --- .../consul-peerings/app/templates/dc/peers/edit/imported.hbs | 1 + .../consul-ui/app/components/consul/service/list/index.hbs | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs index db552ef262..d8b0e93e02 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs @@ -78,6 +78,7 @@ diff --git a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs index a8e6bba2e2..7991a11243 100644 --- a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs @@ -48,7 +48,7 @@ {{/if}} {{! we are displaying imported-services - don't show bucket-list }} - {{#unless item.peer}} + {{#unless @isPeerDetail}} {{/unless}} {{#if (eq item.Kind 'terminating-gateway')}} From 35c7cc8ec1db65364c5fbfd003b7bc09e4118d94 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 10:36:25 +0200 Subject: [PATCH 44/56] Rename `peers.edit` to `peers.show` --- .../app/components/consul/peer/list/index.hbs | 4 ++-- .../app/controllers/dc/peers/{edit => show}/exported.js | 0 .../app/controllers/dc/peers/{edit => show}/index.js | 2 +- .../app/templates/dc/peers/{edit.hbs => show.hbs} | 0 .../app/templates/dc/peers/{edit => show}/addresses.hbs | 0 .../app/templates/dc/peers/{edit => show}/exported.hbs | 0 .../app/templates/dc/peers/{edit => show}/imported.hbs | 0 .../app/templates/dc/peers/{edit => show}/index.hbs | 0 .../consul-peerings/vendor/consul-peerings/routes.js | 2 +- .../consul-ui/app/components/peerings/provider/index.js | 6 +++--- 10 files changed, 7 insertions(+), 7 deletions(-) rename ui/packages/consul-peerings/app/controllers/dc/peers/{edit => show}/exported.js (100%) rename ui/packages/consul-peerings/app/controllers/dc/peers/{edit => show}/index.js (82%) rename ui/packages/consul-peerings/app/templates/dc/peers/{edit.hbs => show.hbs} (100%) rename ui/packages/consul-peerings/app/templates/dc/peers/{edit => show}/addresses.hbs (100%) rename ui/packages/consul-peerings/app/templates/dc/peers/{edit => show}/exported.hbs (100%) rename ui/packages/consul-peerings/app/templates/dc/peers/{edit => show}/imported.hbs (100%) rename ui/packages/consul-peerings/app/templates/dc/peers/{edit => show}/index.hbs (100%) diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index 993bd93d20..886dfc8d20 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -9,7 +9,7 @@ {{#if (can "delete peer" item=item)}} {{item.Name}} @@ -60,7 +60,7 @@ {{/if}} View diff --git a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/exported.js b/ui/packages/consul-peerings/app/controllers/dc/peers/show/exported.js similarity index 100% rename from ui/packages/consul-peerings/app/controllers/dc/peers/edit/exported.js rename to ui/packages/consul-peerings/app/controllers/dc/peers/show/exported.js diff --git a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js b/ui/packages/consul-peerings/app/controllers/dc/peers/show/index.js similarity index 82% rename from ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js rename to ui/packages/consul-peerings/app/controllers/dc/peers/show/index.js index 0f4af5e828..1c63d8407d 100644 --- a/ui/packages/consul-peerings/app/controllers/dc/peers/edit/index.js +++ b/ui/packages/consul-peerings/app/controllers/dc/peers/show/index.js @@ -6,6 +6,6 @@ export default class DcPeersEditIndexController extends Controller { @service router; @action transitionToImported() { - this.router.replaceWith("dc.peers.edit.imported"); + this.router.replaceWith("dc.peers.show.imported"); } } diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show.hbs similarity index 100% rename from ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs rename to ui/packages/consul-peerings/app/templates/dc/peers/show.hbs diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/addresses.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs similarity index 100% rename from ui/packages/consul-peerings/app/templates/dc/peers/edit/addresses.hbs rename to ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs similarity index 100% rename from ui/packages/consul-peerings/app/templates/dc/peers/edit/exported.hbs rename to ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs similarity index 100% rename from ui/packages/consul-peerings/app/templates/dc/peers/edit/imported.hbs rename to ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/index.hbs similarity index 100% rename from ui/packages/consul-peerings/app/templates/dc/peers/edit/index.hbs rename to ui/packages/consul-peerings/app/templates/dc/peers/show/index.hbs diff --git a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js index 4357c60be5..1f8675c1c3 100644 --- a/ui/packages/consul-peerings/vendor/consul-peerings/routes.js +++ b/ui/packages/consul-peerings/vendor/consul-peerings/routes.js @@ -22,7 +22,7 @@ }, }, }, - edit: { + show: { _options: { path: "/:name", }, diff --git a/ui/packages/consul-ui/app/components/peerings/provider/index.js b/ui/packages/consul-ui/app/components/peerings/provider/index.js index aed351336d..23bd99d9b1 100644 --- a/ui/packages/consul-ui/app/components/peerings/provider/index.js +++ b/ui/packages/consul-ui/app/components/peerings/provider/index.js @@ -22,18 +22,18 @@ export default class PeeringsProvider extends Component { let tabs = [ { label: 'Imported Services', - route: 'dc.peers.edit.imported', + route: 'dc.peers.show.imported', tooltip: this.intl.t('routes.dc.peers.index.detail.imported.tab-tooltip', { name }), }, { label: 'Exported Services', - route: 'dc.peers.edit.exported', + route: 'dc.peers.show.exported', tooltip: this.intl.t('routes.dc.peers.index.detail.exported.tab-tooltip', { name }), }, ]; if (isReceiver) { - tabs = [...tabs, { label: 'Addresses', route: 'dc.peers.edit.addresses' }]; + tabs = [...tabs, { label: 'Addresses', route: 'dc.peers.show.addresses' }]; } return tabs.map((tab) => new Tab({ ...tab, currentRouteName: router.currentRouteName, owner })); From 0532dcc441a973f8c1e8d085c569cf64c232895f Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 12:23:15 +0200 Subject: [PATCH 45/56] Update dimension provider * simplify implementation * add docs --- ui/packages/consul-ui/.docfy-config.js | 7 +++ .../components/providers/dimension/README.mdx | 43 +++++++++++++++++++ .../components/providers/dimension/index.js | 16 ++----- ui/packages/consul-ui/app/styles/debug.scss | 5 ++- 4 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/providers/dimension/README.mdx diff --git a/ui/packages/consul-ui/.docfy-config.js b/ui/packages/consul-ui/.docfy-config.js index bd85d31ff3..bb728972bb 100644 --- a/ui/packages/consul-ui/.docfy-config.js +++ b/ui/packages/consul-ui/.docfy-config.js @@ -96,6 +96,12 @@ module.exports = { urlSchema: 'auto', urlPrefix: 'docs/consul', }, + { + root: path.resolve(__dirname, 'app/components/providers'), + pattern: '**/README.mdx', + urlSchema: 'auto', + urlPrefix: 'docs/providers', + }, { root: `${path.dirname(require.resolve('consul-acls/package.json'))}/app/components`, pattern: '**/README.mdx', @@ -129,6 +135,7 @@ module.exports = { ].concat(user.sources), labels: { consul: 'Consul Components', + providers: 'Provider Components', ...user.labels, }, }; diff --git a/ui/packages/consul-ui/app/components/providers/dimension/README.mdx b/ui/packages/consul-ui/app/components/providers/dimension/README.mdx new file mode 100644 index 0000000000..fa2fcb7066 --- /dev/null +++ b/ui/packages/consul-ui/app/components/providers/dimension/README.mdx @@ -0,0 +1,43 @@ +# Providers::Dimension + +A provider component that helps you to make a container fill the remaining space of the viewport. +Usually, you would **use flexbox** to do so but for scenarios where this isn't possible you +can use this component to make it easy to take up the remaining space. + +```hbs + +
    + Fill remaining space +
    +     +``` + +By default, this component will take up the remaining viewport space by taking the +top of itself as the top-boundary and the `footer[role="contentinfo"]` as the +bottom-boundary. In terms of Consul-UI this means _take up the entire space but +stop at the footer that holds the consul version info at the bottom of the screen_. + +You can pass a different `bottomBoundary` if need be: + +```hbs preview-template +
    +
    +
    + Boundary +
    +
    +
    + +
    + We could use flexbox here instead +
    +     +
    +
    +``` diff --git a/ui/packages/consul-ui/app/components/providers/dimension/index.js b/ui/packages/consul-ui/app/components/providers/dimension/index.js index ebf47545d3..804c76e48f 100644 --- a/ui/packages/consul-ui/app/components/providers/dimension/index.js +++ b/ui/packages/consul-ui/app/components/providers/dimension/index.js @@ -6,7 +6,6 @@ import { ref } from 'ember-ref-bucket'; import { htmlSafe } from '@ember/template'; export default class DimensionsProvider extends Component { - @service dom; @ref('element') element; @tracked height; @@ -25,24 +24,17 @@ export default class DimensionsProvider extends Component { } get bottomBoundary() { - return this.args.bottomBoundary || this.footer; + return document.querySelector(this.args.bottomBoundary) || this.footer; } get footer() { return document.querySelector('footer[role="contentinfo"]'); } - get viewport() { - return this.dom.viewport(); - } - @action measureDimensions(element) { - const { viewport, bottomBoundary } = this; - - const height = - viewport.innerHeight - (element.getBoundingClientRect().top + bottomBoundary.clientHeight); - - this.height = height; + const bb = this.bottomBoundary.getBoundingClientRect(); + const e = element.getBoundingClientRect(); + this.height = bb.top + bb.height - e.top; } @action handleWindowResize() { diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index 66cecc7ed3..04e673a5b2 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -119,7 +119,8 @@ html:not(.with-data-source) .data-source-debug { /* hi */ z-index: 100000; } -html.with-href-to [href^='console://']::before { +html.with-href-to [href^='console://']::before +{ @extend %p3; @extend %debug-box; content: attr(href); @@ -155,6 +156,7 @@ html.with-route-announcer .route-title { margin-bottom: 100px; padding-top: 0 !important; } + li.provider-components a::before, li.consul-components a::before, li.components a::before { @extend %with-logo-glimmer-color-icon, %as-pseudo; @@ -164,6 +166,7 @@ html.with-route-announcer .route-title { li.components.css-component a::before { @extend %with-logo-glimmer-color-icon, %as-pseudo; } + li.provider-components.ember-component a::before, li.consul-components.ember-component a::before, li.components.ember-component a::before { @extend %with-logo-ember-circle-color-icon, %as-pseudo; From a33feb2b41706cd4522f218f9169ccf58f5482e7 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 13:34:23 +0200 Subject: [PATCH 46/56] Use translations for empty states peers.show --- .../app/templates/dc/peers/show/addresses.hbs | 6 ++-- .../app/templates/dc/peers/show/exported.hbs | 29 ++++++--------- .../app/templates/dc/peers/show/imported.hbs | 26 ++++++-------- .../consul-ui/translations/routes/en-us.yaml | 36 ++++++++++++++++--- 4 files changed, 53 insertions(+), 44 deletions(-) diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs index e7892b3589..f3934cda50 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs @@ -5,13 +5,11 @@

    - No server addresses. + {{t "routes.dc.peers.show.addresses.empty.header"}}

    -
    - There don't seem to be any server addresses for this peer. -
    + {{t "routes.dc.peers.show.addresses.empty.body" htmlSafe=true}}
  • diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs index dffbb14684..6119c00c04 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs @@ -79,28 +79,19 @@

    - No visible exported services to - {{route.model.peer.Name}} + {{t + "routes.dc.peers.show.exported.empty.header" + name=route.model.peer.Name + }}

    - {{#if items.length}} -
    - No services where found matching that search, or you - may not have access to view the services you are - searching for. -
    - {{else}} -
    - Services must be exported from one peer to another to - enable service communication across two peers. There - don't seem to be any services exported to - {{route.model.peer.Name}} - yet, or you may not have - services:read - permissions to access to this view. -
    - {{/if}} + {{t + "routes.dc.peers.show.exported.empty.body" + items=items.length + name=route.model.peer.Name + htmlSafe=true + }}
  • diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs index d8b0e93e02..ecf1e756b5 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs @@ -85,25 +85,19 @@

    - No visible imported services from - {{route.model.peer.Name}} + {{t + "routes.dc.peers.show.imported.empty.header" + name=route.model.peer.Name + }}

    - {{#if items.length}} -
    - No services where found matching that search, or you may not - have access to view the services you are searching for. -
    - {{else}} -
    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 - service:read - permissions to access to this view.
    - {{/if}} + {{t + "routes.dc.peers.show.imported.empty.body" + items=items.length + name=route.model.peer.Name + htmlSafe=true + }}
  • diff --git a/ui/packages/consul-ui/translations/routes/en-us.yaml b/ui/packages/consul-ui/translations/routes/en-us.yaml index f8f14fedf0..4e157d9dff 100644 --- a/ui/packages/consul-ui/translations/routes/en-us.yaml +++ b/ui/packages/consul-ui/translations/routes/en-us.yaml @@ -117,10 +117,10 @@ dc: index: empty: header: | - {items, select, - 0 {Welcome to Peers} - other {No peers found} - } + {items, select, + 0 {Welcome to Peers} + other {No peers found} + } body: | {items, select, 0 {Cluster peering is the recommended way to connect services across or within Consul datacenters. Peering is a one-to-one relationship in which each peer is either a open-source Consul datacenter or a Consul enterprise admin partition. There don't seem to be any peers for this {canUsePartitions, select, @@ -145,6 +145,32 @@ dc: tab-tooltip: Services exported from {name} addresses: tooltip: The number of services exported from {name} + show: + imported: + empty: + header: No visible imported services from {name} + body: | +
    + {items, select, + 0 {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 {name} yet, or you may not have services:read permissions to access to this view.} + other {No services where found matching that search, or you may not have access to view the services you are searching for.} + } +
    + exported: + empty: + header: No visible exported services to {name} + body: | +
    + {items, select, + 0 {Services must be exported from one peer to another to enable service communication across two peers. There don't seem to be any services exported to {name} yet, or you may not have services:read permissions to access to this view.} + other {No services where found matching that search, or you may not have access to view the services you are searching for.} + } +
    + + addresses: + empty: + header: No server adddresses. + body:
    There don't seem to be any server addresses for this peer.
    partitions: index: empty: @@ -152,7 +178,7 @@ dc: {items, select, 0 {Welcome to Partitions} other {No partitions found} - } + } body: | {items, select, 0 {There don't seem to be any partitions{canUseACLs, select, From e548bbb4ffe1785048fb718086bc7d8095ca469a Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 14:52:03 +0200 Subject: [PATCH 47/56] Prettify dc.services.show template --- .../app/templates/dc/services/instance.hbs | 264 ++++++++++-------- 1 file changed, 141 insertions(+), 123 deletions(-) diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs index 884e4eb01f..4200556e46 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs @@ -1,36 +1,32 @@ - + + @src={{uri + '/${partition}/${nspace}/${dc}/service-instance/${id}/${node}/${name}/${peer}' + (hash + partition=route.params.partition + nspace=route.params.nspace + dc=route.params.dc + id=route.params.id + node=route.params.node + name=route.params.name + peer=route.params.peer + ) + }} + as |loader| + > - - + + - - {{#if (eq loader.error.status "404")}} + + {{#if (eq loader.error.status '404')}} + {{notification sticky=true}} + class='notification-update' + @type='warning' + as |notice| + > Warning! @@ -40,14 +36,8 @@ as |route|>

    - {{else if (eq loader.error.status "403")}} - + {{else if (eq loader.error.status '403')}} + Error! @@ -58,13 +48,7 @@ as |route|> {{else}} - + Warning! @@ -77,64 +61,67 @@ as |route|> {{/if}}     - -{{#let - - loader.data - -as |item|}} - {{#if item.IsOrigin}} - - {{! We only really need meta to get the correct ServiceID }} - {{! but we may as well use the NodeName and ServiceName }} - {{! from meta also, but they should be the same as the instance }} - {{! so if we can ever get ServiceID from elsewhere we could save }} - {{! a HTTP request/long poll here }} - {{#if meta.data.ServiceID}} - {{! if we have a proxy then get the additional instance information }} - {{! for the proxy itself so if the service is called `backend` }} - {{! its likely to have a proxy service called `backend-sidecar-proxy` }} - {{! and this second request get the info for that instance and saves }} - {{! it into the `proxy` variable }} - - {{/if}} - - {{/if}} - - -
      -
    1. All Services
      2. -
    2. - Service ({{item.Service.Service}}) -
      3. -
    + + {{#let loader.data as |item|}} + {{#if item.IsOrigin}} + + {{! We only really need meta to get the correct ServiceID }} + {{! but we may as well use the NodeName and ServiceName }} + {{! from meta also, but they should be the same as the instance }} + {{! so if we can ever get ServiceID from elsewhere we could save }} + {{! a HTTP request/long poll here }} + {{#if meta.data.ServiceID}} + {{! if we have a proxy then get the additional instance information }} + {{! for the proxy itself so if the service is called `backend` }} + {{! its likely to have a proxy service called `backend-sidecar-proxy` }} + {{! and this second request get the info for that instance and saves }} + {{! it into the `proxy` variable }} + + {{/if}} + + {{/if}} + + +
      +
    1. All Services
      2. +
    2. + Service ({{item.Service.Service}}) +
      3. +
    - +

    @@ -146,15 +133,20 @@ as |item|}} {{/if}}     - +
    Service Name
    -
    {{item.Service.Service}}
    +
    {{item.Service.Service}}
    {{#unless item.Node.Meta.synthetic-node}}
    Node Name
    -
    {{item.Node.Node}}
    +
    {{item.Node.Node}}
    {{/unless}} {{#if item.Service.PeerName}} @@ -164,36 +156,62 @@ as |item|}} {{/if}}     - + {{#let (or item.Service.Address item.Node.Address) as |address|}} - {{address}} + {{address}} {{/let}} - - + + @model={{assign (hash proxy=proxy meta=meta item=item) route.model}} + as |o| + > {{outlet}} -     -{{/let}} +     + {{/let}}     -     +     \ No newline at end of file From 041e7c4626e291ed4ddf837710dfd2dad3b02578 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 14:58:19 +0200 Subject: [PATCH 48/56] Link to peer.show service-instance peer-info --- .../consul-ui/app/templates/dc/services/instance.hbs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs index 4200556e46..dcbb0a3ddb 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs @@ -152,7 +152,14 @@ {{#if item.Service.PeerName}}
    Peer Name
    -
    {{item.Service.PeerName}}
    +
    {{item.Service.PeerName}}
    {{/if}} From 7178604f4a9063c1830eb88b7c5076065037aa0c Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 17:35:49 +0200 Subject: [PATCH 49/56] Don't `--focus` for dist-vercel This breaks the vercel deploy as `--focus` will try to install workspace dependency from the registry: Reference: https://github.com/yarnpkg/yarn/issues/5864 https://github.com/yarnpkg/yarn/issues/6715 --- ui/GNUmakefile | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/GNUmakefile b/ui/GNUmakefile index 290bda9aed..ab70bbc61b 100644 --- a/ui/GNUmakefile +++ b/ui/GNUmakefile @@ -38,6 +38,5 @@ deps: clean dist-vercel: clean mkdir -p dist/ui && \ cd packages/consul-ui && \ - CONSUL_UI_INSTALL_FLAGS=--focus \ $(MAKE) build-staging && \ mv dist/* ../../dist/ui From 491de531542826768611a6d1a9f352ded4508f05 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 18:14:34 +0200 Subject: [PATCH 50/56] Update yarn.lock --- ui/yarn.lock | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/yarn.lock b/ui/yarn.lock index c5624808dc..a1b3fb4c01 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -7862,7 +7862,7 @@ ember-auto-import@^2.2.3, ember-auto-import@^2.4.1, ember-auto-import@^2.4.2: typescript-memoize "^1.0.0-alpha.3" walk-sync "^3.0.0" -ember-basic-dropdown@^3.0.16: +ember-basic-dropdown@3.0.21, ember-basic-dropdown@^3.0.16: version "3.0.21" resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-3.0.21.tgz#5711d071966919c9578d2d5ac2c6dcadbb5ea0e0" integrity sha512-Wu9hJWyqorKo+ZT2PMSIO1BxAeAdaiIC2IjSic0+HcKjmMU47botvG0xbxlprimOWaS9vM+nHat6Pt3xPvcB0A== @@ -7907,7 +7907,7 @@ ember-changeset-validations@~3.9.0: ember-get-config "^0.2.4" ember-validators "^2.0.0" -ember-changeset@^3.9.1: +ember-changeset@3.10.1, ember-changeset@^3.9.1: version "3.10.1" resolved "https://registry.yarnpkg.com/ember-changeset/-/ember-changeset-3.10.1.tgz#d6f06bc55f867a2c1ac7c5fd780776bd1e5a9b60" integrity sha512-4FoGKRcKxixSr+NBQ+ZoiwwbJE0/fuZRULUp9M1RIHejYhst+U8/ni47SsphrMhoRAcZCeyl+JqlBMlwR7v50g== @@ -17177,7 +17177,7 @@ validate-peer-dependencies@^1.2.0: resolve-package-path "^3.1.0" semver "^7.3.2" -validated-changeset@~0.10.0: +validated-changeset@0.10.0, validated-changeset@~0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/validated-changeset/-/validated-changeset-0.10.0.tgz#2e8188c089ab282c1b51fba3c289073f6bd14c8b" integrity sha512-n8NB3ol6Tbi0O7bnq1wz81m5Wd1gfHw0HUcH4MatOfqO3DyXzWZV+bUaNq6wThXn20rMFB82C8pTNFSWbgXJLA== @@ -17675,6 +17675,11 @@ xmlchars@^2.2.0: resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== +xmlhttprequest-ssl@^1.6.3: + version "1.6.3" + resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz#03b713873b01659dfa2c1c5d056065b27ddc2de6" + integrity sha512-3XfeQE/wNkvrIktn2Kf0869fC0BN6UpydVasGIeSm2B1Llihf7/0UfZM+eCkOw3P7bP4+qPgqhm7ZoxuJtFU0Q== + xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" From 6b34e3e91a93b2aa156462dd63d998c183ff7d47 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 19:15:29 +0200 Subject: [PATCH 51/56] Fix peering regenerate test * only dialers will show a regenerate token action * add test that receivers won't show regenerate action --- .../acceptance/dc/peers/regenerate.feature | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ui/packages/consul-ui/tests/acceptance/dc/peers/regenerate.feature b/ui/packages/consul-ui/tests/acceptance/dc/peers/regenerate.feature index a925f7887b..ce4d2e3f7f 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/peers/regenerate.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/peers/regenerate.feature @@ -6,6 +6,8 @@ Feature: dc / peers / regenerate: Regenerate Peer Token --- Name: peer-name State: ACTIVE + # dialer does not have a PeerID + PeerID: null --- And the url "/v1/peering/token" responds with from yaml --- @@ -19,3 +21,19 @@ Feature: dc / peers / regenerate: Regenerate Peer Token And I click actions on the peers And I click regenerate on the peers Then I see the text "an-encoded-token" in ".consul-peer-form-generate code" + + Scenario: + Given 1 datacenter model with the value "datacenter" + And 1 peer model from yaml + --- + Name: peer-name + State: ACTIVE + # receiver holds a PeerID + PeerID: some-id + --- + When I visit the peers page for yaml + --- + dc: datacenter + --- + And I click actions on the peers + Then I don't see regenerate on peers From 19fbdb7a0b9bd1208fe5a460a458407f628bdbfd Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Wed, 12 Oct 2022 19:19:23 +0200 Subject: [PATCH 52/56] Fix linting error dimension service --- .../consul-ui/app/components/providers/dimension/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/packages/consul-ui/app/components/providers/dimension/index.js b/ui/packages/consul-ui/app/components/providers/dimension/index.js index 804c76e48f..7a27eb37c8 100644 --- a/ui/packages/consul-ui/app/components/providers/dimension/index.js +++ b/ui/packages/consul-ui/app/components/providers/dimension/index.js @@ -1,7 +1,6 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; -import { inject as service } from '@ember/service'; import { ref } from 'ember-ref-bucket'; import { htmlSafe } from '@ember/template'; From 0653bb57ac566465834fbf077a3ca65a487aeb1c Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 13 Oct 2022 10:36:12 +0200 Subject: [PATCH 53/56] Update peering mocks --- .../mock-api/v1/internal/ui/exported-services | 31 +++++++++++++++++++ ui/packages/consul-ui/mock-api/v1/peering/_ | 9 ++++-- ui/packages/consul-ui/mock-api/v1/peerings | 4 +-- 3 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services b/ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services new file mode 100644 index 0000000000..8bfe712541 --- /dev/null +++ b/ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services @@ -0,0 +1,31 @@ + +${[0].map( + () => { + let prevKind; + let name; + const gateways = ['mesh-gateway', 'ingress-gateway', 'terminating-gateway']; + return ` +[ + ${ + range( + env( + 'CONSUL_SERVICE_COUNT', + Math.floor( + ( + Math.random() * env('CONSUL_SERVICE_MAX', 10) + ) + parseInt(env('CONSUL_SERVICE_MIN', 1)) + ) + ) + ).map( + function(item, i) + { + return ` + { + "Name": "service-${i}" + } + `; + } + ) + } +] +`})} diff --git a/ui/packages/consul-ui/mock-api/v1/peering/_ b/ui/packages/consul-ui/mock-api/v1/peering/_ index 46c1a1af2a..306990c9c4 100644 --- a/ui/packages/consul-ui/mock-api/v1/peering/_ +++ b/ui/packages/consul-ui/mock-api/v1/peering/_ @@ -1,7 +1,5 @@ { "ID": "${fake.random.uuid()}", - "ImportedServiceCount": ${fake.random.number({min: 0, max: 4000})}, - "ExportedServiceCount": ${fake.random.number({min: 0, max: 4000})}, "Name": "${location.pathname.get(2)}", "State": "${fake.helpers.randomize([ 'ACTIVE', @@ -12,6 +10,13 @@ 'TERMINATED', 'UNDEFINED' ])}", + "StreamStatus": { + "LastHeartbeat": "${fake.date.past(10).toISOString()}", + "LastReceive": "${fake.date.past(10).toISOString()}", + "LastSend": "${fake.date.past(10).toISOString()}", + "ExportedServices": [${range(0, Math.floor(Math.random() * 10)).map((i) => `"exported-service-${i}"`)}], + "ImportedServices": [${range(0, Math.floor(Math.random() * 10)).map((i) => `"imported-service-${i}"`)}] + }, "PeerID": "${fake.random.uuid()}", "PeerServerName": "${fake.internet.domainName()}", "PeerServerAddresses": [ diff --git a/ui/packages/consul-ui/mock-api/v1/peerings b/ui/packages/consul-ui/mock-api/v1/peerings index f240e49d21..059fc83f32 100644 --- a/ui/packages/consul-ui/mock-api/v1/peerings +++ b/ui/packages/consul-ui/mock-api/v1/peerings @@ -22,8 +22,8 @@ "LastHeartbeat": "${fake.date.past(10).toISOString()}", "LastReceive": "${fake.date.past(10).toISOString()}", "LastSend": "${fake.date.past(10).toISOString()}", - "ExportedServices": ["${`export-service-${i}`}"], - "ImportedServices": ["${`import-service-${i}`}"] + "ExportedServices": [${range(0, Math.floor(Math.random() * 10)).map((i) => `"exported-service-${i}"`)}], + "ImportedServices": [${range(0, Math.floor(Math.random() * 10)).map((i) => `"imported-service-${i}"`)}] }, "PeerID": "${id}", "PeerServerName": "${fake.internet.domainName()}", From 38fed7d2b683281033dda9786ac354c599cab1d8 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 13 Oct 2022 11:44:34 +0200 Subject: [PATCH 54/56] Fix href-to persists hash Copy passed hash before manipulating it. Assigning to the same hash object will break href-to because in certain scenarios href-to-helper will not create a new object that gets passed to `fsm-with-optional`-hrefTo method. This is problematic for optional route-params, and lead to a situation where links to peered services would create the wrong url for their href-attribute. --- ui/packages/consul-ui/app/locations/fsm-with-optional.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/locations/fsm-with-optional.js b/ui/packages/consul-ui/app/locations/fsm-with-optional.js index 12657737b9..370ca47e0f 100644 --- a/ui/packages/consul-ui/app/locations/fsm-with-optional.js +++ b/ui/packages/consul-ui/app/locations/fsm-with-optional.js @@ -188,10 +188,14 @@ export default class FSMWithOptionalLocation { /** * Turns a routeName into a full URL string for anchor hrefs etc. */ - hrefTo(routeName, params, hash) { + hrefTo(routeName, params, _hash) { + // copy to always work with a new hash even when helper persists hash + const hash = { ..._hash }; + if (typeof hash.dc !== 'undefined') { delete hash.dc; } + if (typeof hash.nspace !== 'undefined') { hash.nspace = `~${hash.nspace}`; } From 54409c9ac4c141b4f26315c4a6332da102039707 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 13 Oct 2022 15:42:25 +0200 Subject: [PATCH 55/56] Add tests peers.show --- .../app/components/consul/peer/list/index.hbs | 2 +- .../consul/peer/list/test-support.js | 16 +-- .../app/templates/dc/peers/show/addresses.hbs | 2 +- .../app/templates/dc/peers/show/exported.hbs | 5 +- .../app/templates/dc/peers/show/imported.hbs | 5 +- .../tests/acceptance/dc/peers/show.feature | 136 ++++++++++++++++++ .../acceptance/steps/dc/peers/show-steps.js | 10 ++ ui/packages/consul-ui/tests/pages.js | 2 + .../consul-ui/tests/pages/dc/peers/index.js | 3 + .../consul-ui/tests/pages/dc/peers/show.js | 8 ++ .../tests/steps/interactions/visit.js | 8 ++ 11 files changed, 185 insertions(+), 12 deletions(-) create mode 100644 ui/packages/consul-ui/tests/acceptance/dc/peers/show.feature create mode 100644 ui/packages/consul-ui/tests/acceptance/steps/dc/peers/show-steps.js create mode 100644 ui/packages/consul-ui/tests/pages/dc/peers/show.js diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs index 886dfc8d20..b743baee6d 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/index.hbs @@ -59,7 +59,7 @@ {{/if}} diff --git a/ui/packages/consul-peerings/app/components/consul/peer/list/test-support.js b/ui/packages/consul-peerings/app/components/consul/peer/list/test-support.js index 126e444b9b..04507f0943 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/list/test-support.js +++ b/ui/packages/consul-peerings/app/components/consul/peer/list/test-support.js @@ -1,19 +1,19 @@ export const selectors = { - $: '.consul-peer-list', + $: ".consul-peer-list", collection: { - $: '[data-test-list-row]', + $: "[data-test-list-row]", peer: { - $: 'li', + $: "li", name: { - $: '[data-test-peer]' - } + $: "[data-test-peer]", + }, }, - } + }, }; export default (collection, isPresent, attribute, actions) => () => { return collection(`${selectors.$} ${selectors.collection.$}`, { peer: isPresent(selectors.collection.peer.$), - name: attribute('data-test-peer', selectors.collection.peer.name.$), - ...actions(['regenerate', 'delete']), + name: attribute("data-test-peer", selectors.collection.peer.name.$), + ...actions(["regenerate", "delete", "view"]), }); }; diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs index f3934cda50..4e179dc320 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/addresses.hbs @@ -2,7 +2,7 @@ {{#if (gt route.model.items.length 0)}} {{else}} - +

    {{t "routes.dc.peers.show.addresses.empty.header"}} diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs index 6119c00c04..10af30503c 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs @@ -76,7 +76,10 @@

    • {{else}} - +

    {{t diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs index ecf1e756b5..2286f0dc3d 100644 --- a/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs +++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/imported.hbs @@ -82,7 +82,10 @@ /> - +

    {{t diff --git a/ui/packages/consul-ui/tests/acceptance/dc/peers/show.feature b/ui/packages/consul-ui/tests/acceptance/dc/peers/show.feature new file mode 100644 index 0000000000..4fc7f74056 --- /dev/null +++ b/ui/packages/consul-ui/tests/acceptance/dc/peers/show.feature @@ -0,0 +1,136 @@ +@setupApplcationTest +Feature: dc / peers / show: Peers show + Scenario: Dialer side tabs + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + # dialer side + PeerID: null + --- + When I visit the peers page for yaml + --- + dc: dc-1 + --- + And I click actions on the peers + And I click view on the peers + Then the url should be /dc-1/peers/a-peer/imported-services + Then I see importedServicesIsVisible on the tabs + And I see exportedServicesIsVisible on the tabs + And I don't see addressesIsVisible on the tabs + + Scenario: Receiver side tabs + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + # receiver side + PeerID: 'some-peer' + --- + When I visit the peers page for yaml + --- + dc: dc-1 + --- + And I click actions on the peers + And I click view on the peers + Then the url should be /dc-1/peers/a-peer/imported-services + Then I see importedServicesIsVisible on the tabs + And I see exportedServicesIsVisible on the tabs + And I see addressesIsVisible on the tabs + + Scenario: Imported Services Empty + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + --- + And 0 service models + When I visit the peer page for yaml + --- + dc: dc-1 + peer: a-peer + --- + Then I see the "[data-test-imported-services-empty]" element + + Scenario: Imported Services not empty + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + --- + And 1 service models from yaml + --- + Name: 'service-for-peer-a' + --- + When I visit the peer page for yaml + --- + dc: dc-1 + peer: a-peer + --- + Then I don't see the "[data-test-imported-services-empty]" element + + Scenario: Exported Services Empty + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + --- + And 0 service models + When I visitExported the peer page for yaml + --- + dc: dc-1 + peer: a-peer + --- + Then I see the "[data-test-exported-services-empty]" element + + Scenario: Exported Services not empty + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + --- + And 1 service models from yaml + --- + Name: 'service-for-peer-a' + --- + When I visitExported the peer page for yaml + --- + dc: dc-1 + peer: a-peer + --- + Then I don't see the "[data-test-exported-services-empty]" element + + Scenario: Addresses Empty + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + PeerServerAddresses: null + --- + When I visitAddresses the peer page for yaml + --- + dc: dc-1 + peer: a-peer + --- + Then I see the "[data-test-addresses-empty]" element + + Scenario: Addresses Not Empty + And 1 datacenter model with the value "dc-1" + And 1 peer models from yaml + --- + Name: a-peer + State: ACTIVE + --- + When I visitAddresses the peer page for yaml + --- + dc: dc-1 + peer: a-peer + --- + Then I don't see the "[data-test-addresses-empty]" element \ No newline at end of file diff --git a/ui/packages/consul-ui/tests/acceptance/steps/dc/peers/show-steps.js b/ui/packages/consul-ui/tests/acceptance/steps/dc/peers/show-steps.js new file mode 100644 index 0000000000..06173e1e01 --- /dev/null +++ b/ui/packages/consul-ui/tests/acceptance/steps/dc/peers/show-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); + }); +} diff --git a/ui/packages/consul-ui/tests/pages.js b/ui/packages/consul-ui/tests/pages.js index c3ceb2af58..a14d23293c 100644 --- a/ui/packages/consul-ui/tests/pages.js +++ b/ui/packages/consul-ui/tests/pages.js @@ -75,6 +75,7 @@ import intention from 'consul-ui/tests/pages/dc/intentions/edit'; import nspaces from 'consul-ui/tests/pages/dc/nspaces/index'; import nspace from 'consul-ui/tests/pages/dc/nspaces/edit'; import peers from 'consul-ui/tests/pages/dc/peers/index'; +import peersShow from 'consul-ui/tests/pages/dc/peers/show'; // utils const deletable = createDeletable(clickable); @@ -234,6 +235,7 @@ export default { nspace(visitable, submitable, deletable, cancelable, policySelector, roleSelector) ), peers: create(peers(visitable, creatable, consulPeerList, popoverSelect)), + peer: create(peersShow(visitable)), settings: create(settings(visitable, submitable, isPresent)), routingConfig: create(routingConfig(visitable, text)), }; diff --git a/ui/packages/consul-ui/tests/pages/dc/peers/index.js b/ui/packages/consul-ui/tests/pages/dc/peers/index.js index b46701909e..d60b3e41eb 100644 --- a/ui/packages/consul-ui/tests/pages/dc/peers/index.js +++ b/ui/packages/consul-ui/tests/pages/dc/peers/index.js @@ -1,7 +1,10 @@ +import tabgroup from 'consul-ui/components/tab-nav/pageobject'; + export default function (visitable, creatable, items, popoverSelect) { return creatable({ visit: visitable('/:dc/peers'), peers: items(), sort: popoverSelect('[data-test-sort-control]'), + tabs: tabgroup('tab', ['imported-services', 'exported-services', 'addresses']), }); } diff --git a/ui/packages/consul-ui/tests/pages/dc/peers/show.js b/ui/packages/consul-ui/tests/pages/dc/peers/show.js new file mode 100644 index 0000000000..25dcbe60f2 --- /dev/null +++ b/ui/packages/consul-ui/tests/pages/dc/peers/show.js @@ -0,0 +1,8 @@ +export default function (visitable) { + return { + visit: visitable('/:dc/peers/:peer'), + visitExported: visitable('/:dc/peers/:peer/exported-services'), + visitImported: visitable('/:dc/peers/:peer/imported-services'), + visitAddresses: visitable('/:dc/peers/:peer/addresses'), + }; +} diff --git a/ui/packages/consul-ui/tests/steps/interactions/visit.js b/ui/packages/consul-ui/tests/steps/interactions/visit.js index 5a4551cf57..fc382e6c71 100644 --- a/ui/packages/consul-ui/tests/steps/interactions/visit.js +++ b/ui/packages/consul-ui/tests/steps/interactions/visit.js @@ -29,5 +29,13 @@ export default function (scenario, pages, set, reset) { // do I absolutely definitely need that all the time? return set(pages[name]).visit(data); } + ) + .when( + ['I $method the $name page for yaml\n$yaml', 'I $method the $name page for json\n$json'], + function (method, name, data) { + reset(); + + return set(pages[name])[method](data); + } ); } From ceeb823d014efda72fbb1ab767c5ff92e029dc61 Mon Sep 17 00:00:00 2001 From: Michael Klein Date: Thu, 13 Oct 2022 16:36:41 +0200 Subject: [PATCH 56/56] Add changelog for peers detail page --- .changelog/14947.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/14947.txt diff --git a/.changelog/14947.txt b/.changelog/14947.txt new file mode 100644 index 0000000000..844e2f1617 --- /dev/null +++ b/.changelog/14947.txt @@ -0,0 +1,3 @@ +```release-note:feature +ui: Create peerings detail page +```