From 57d3bf59ee924ee3ed5e73139d5f95a1ccbf55c3 Mon Sep 17 00:00:00 2001 From: kenia Date: Thu, 8 Apr 2021 14:08:57 -0400 Subject: [PATCH 01/13] Update service-topology mock data with new attributes: TransparentProxy, DefaultAllow, WildcardIntention, and Source --- ui/packages/consul-ui/app/models/topology.js | 3 +++ .../mock-api/v1/internal/ui/service-topology/_ | 18 ++++++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/ui/packages/consul-ui/app/models/topology.js b/ui/packages/consul-ui/app/models/topology.js index 9c06acd5eb..1c1984a151 100644 --- a/ui/packages/consul-ui/app/models/topology.js +++ b/ui/packages/consul-ui/app/models/topology.js @@ -11,6 +11,9 @@ export default class Topology extends Model { @attr('string') Namespace; @attr('string') Protocol; @attr('boolean') FilteredByACLs; + @attr('boolean') TransparentProxy; + @attr('boolean') DefaultAllow; + @attr('boolean') WildcardIntention; @attr() Upstreams; // Service[] @attr() Downstreams; // Service[], @attr() meta; // {} diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ b/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ index 339adee51e..d4f6ade68b 100644 --- a/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ +++ b/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ @@ -52,10 +52,18 @@ ${ } fake.seed(index); + + // Randomly make permissive intentions + const defaultAllow = fake.random.boolean(); + const wildcardIntention = defaultAllow ? false : fake.random.boolean(); + return ` { "Protocol": "${serviceProto}", "FilteredByACLs": ${fake.random.boolean()}, + "TransparentProxy": ${fake.random.boolean()}, + "DefaultAllow": ${defaultAllow}, + "WildcardIntention": ${wildcardIntention}, "Upstreams": [ ${ upstreams.map((item, i) => { @@ -70,11 +78,14 @@ ${ "ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})}, "ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})}, "ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})}, + "Source": "${fake.helpers.randomize(['proxy-registration', 'default-allow', 'wildcard-intention'])}", + "TransparentProxy": ${fake.random.boolean()}, "Intention": { "Allowed": ${allowed}, "HasPermissions": ${hasPerms}, "ExternalSource": "${fake.helpers.randomize(['nomad', 'kubernetes', ''])}", - "HasExact": ${fake.random.boolean()} + "HasExact": ${fake.random.boolean()}, + "DefaultAllow": ${fake.random.boolean()} } } `})} @@ -93,11 +104,14 @@ ${ "ChecksPassing":${fake.random.number({min: 1, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})}, "ChecksWarning":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})}, "ChecksCritical":${fake.random.number({min: 0, max: env('CONSUL_CHECK_COUNT', fake.random.number(10))})}, + "Source": "${fake.helpers.randomize(['proxy-registration', 'specific-intention', 'default-allow', 'wildcard-intention'])}", + "TransparentProxy": ${fake.random.boolean()}, "Intention": { "Allowed": ${allowed}, "HasPermissions": ${hasPerms}, "ExternalSource": "${fake.helpers.randomize(['nomad', 'kubernetes', ''])}", - "HasExact": ${fake.random.boolean()} + "HasExact": ${fake.random.boolean()}, + "DefaultAllow": ${fake.random.boolean()} } } `})} From cdf77e32f2e9ff059f498017c0dc1a0d9397f9fc Mon Sep 17 00:00:00 2001 From: kenia Date: Thu, 8 Apr 2021 14:09:57 -0400 Subject: [PATCH 02/13] Create warning banners for permissive default-allow and wildcard-intention --- .../topology-metrics/notice/default-allow.hbs | 23 +++++++++++++++++++ .../notice/wildcard-intention.hbs | 23 +++++++++++++++++++ .../templates/dc/services/show/topology.hbs | 6 +++++ 3 files changed, 52 insertions(+) create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs new file mode 100644 index 0000000000..b3bf908645 --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs @@ -0,0 +1,23 @@ + + +

+ {{t "components.consul.topology-metrics.notice.default-allow.header"}} +

+ + +

+ {{t "components.consul.topology-metrics.notice.default-allow.body"}} +

+ + +

+ + {{t "components.consul.topology-metrics.notice.default-allow.footer"}} + +

+ + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs new file mode 100644 index 0000000000..90bd65778d --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs @@ -0,0 +1,23 @@ + + +

+ {{t "components.consul.topology-metrics.notice.wildcard-intention.header"}} +

+ + +

+ {{t "components.consul.topology-metrics.notice.wildcard-intention.body"}} +

+ + +

+ + {{t "components.consul.topology-metrics.notice.wildcard-intention.footer"}} + +

+ + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs index d9650f24a4..2bc9bfa3d3 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs @@ -25,6 +25,12 @@ as |route|> {{#if topology.FilteredByACLs}} {{/if}} + {{#if topology.DefaultAllow}} + + {{/if}} + {{#if topology.WildcardIntention}} + + {{/if}} Date: Thu, 8 Apr 2021 15:14:53 -0400 Subject: [PATCH 03/13] Refactor Topology Metrics Card component --- .../{card.hbs => card/index.hbs} | 5 +- .../topology-metrics/card/index.scss | 78 +++++++++++++++++++ .../app/components/topology-metrics/index.js | 6 +- .../components/topology-metrics/layout.scss | 38 --------- .../app/components/topology-metrics/skin.scss | 49 ------------ 5 files changed, 86 insertions(+), 90 deletions(-) rename ui/packages/consul-ui/app/components/topology-metrics/{card.hbs => card/index.hbs} (91%) create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/card/index.scss diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs similarity index 91% rename from ui/packages/consul-ui/app/components/topology-metrics/card.hbs rename to ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs index ed392e5f58..c65439e066 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs @@ -1,4 +1,4 @@ - {{@item.Name}}

+ {{#if (eq @item.Source 'proxy-registration')}} + + {{/if}}
{{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss new file mode 100644 index 0000000000..8e61da3c3c --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss @@ -0,0 +1,78 @@ +#upstream-container .topology-metrics-card:not(:last-child), +#downstream-container .topology-metrics-card:not(:last-child) { + margin-bottom: 8px; +} +#upstream-container .topology-metrics-card, +#downstream-container .topology-metrics-card { + display: block; + color: $gray-700; + overflow: hidden; + background-color: $white; + border-radius: $decor-radius-100; + border: 1px solid $gray-200; + p { + padding: 12px 12px 0 12px; + font-size: $typo-size-500; + font-weight: $typo-weight-semibold; + margin-bottom: 0 !important; + } + div { + display: inline-flex; + dl { + display: inline-flex; + margin-right: 8px; + } + dd { + color: $gray-700; + } + span { + margin-right: 8px; + } + span::before, + dt::before { + margin-right: 4px; + } + .nspace dt::before, + .health dt::before { + margin-top: 2px; + } + .nspace dt::before { + @extend %with-folder-outline-mask, %as-pseudo; + } + .health dt::before { + @extend %with-help-circle-outline-mask, %as-pseudo; + } + .nspace dt::before { + @extend %with-folder-outline-mask, %as-pseudo; + } + .health dt::before { + @extend %with-help-circle-outline-mask, %as-pseudo; + } + .nspace dt::before, + .health dt::before { + background-color: $gray-500; + } + .passing::before { + @extend %with-check-circle-fill-color-mask, %as-pseudo; + background-color: $green-500; + } + .warning::before { + @extend %with-alert-triangle-color-mask, %as-pseudo; + background-color: $orange-500; + } + .critical::before { + @extend %with-cancel-square-fill-color-mask, %as-pseudo; + background-color: $red-500; + } + .empty::before { + @extend %with-minus-square-fill-mask, %as-pseudo; + color: $gray-500; + } + } + .details { + padding: 0 12px 12px 12px; + } + div.stats { + border-top: 1px solid $gray-200; + } +} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js index 3704342e57..31e6eae935 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js @@ -92,9 +92,11 @@ export default class TopologyMetrics extends Component { this.upView = document.getElementById('upstream-lines').getBoundingClientRect(); // Get Card elements positions - const downCards = [...document.querySelectorAll('#downstream-container .card')]; + const downCards = [ + ...document.querySelectorAll('#downstream-container .topology-metrics-card'), + ]; const grafanaCard = document.querySelector('.metrics-header'); - const upCards = [...document.querySelectorAll('#upstream-column .card')]; + const upCards = [...document.querySelectorAll('#upstream-column .topology-metrics-card')]; // Set center positioning points this.centerDimensions = grafanaCard.getBoundingClientRect(); diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss index 1bd386dac6..8a20647099 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss @@ -49,44 +49,6 @@ #upstream-column #upstream-container:not(:last-child) { margin-bottom: 8px; } -#upstream-container .card:not(:last-child), -#downstream-container .card:not(:last-child) { - margin-bottom: 8px; -} -#upstream-container .card, -#downstream-container .card { - display: block; - color: $gray-700; - overflow: hidden; - p { - padding: 12px 12px 0 12px; - font-size: 16px; - font-weight: 600; - margin-bottom: 0 !important; - } - div { - display: inline-flex; - dl { - display: inline-flex; - margin-right: 8px; - } - span { - margin-right: 8px; - } - span::before, - dt::before { - margin-right: 4px; - } - .nspace dt::before, - .health dt::before { - margin-top: 2px; - } - } - .details { - padding: 0 12px 12px 12px; - } - -} // Metrics Container #metrics-container { diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss index 12a1f144e1..bdf3159b7e 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss @@ -20,52 +20,6 @@ background-color: $gray-500; } } -#upstream-container .card, -#downstream-container .card { - background-color: $white; - border-radius: $decor-radius-100; - border: 1px solid $gray-200; - div { - dd { - color: $gray-700; - } - .nspace dt::before { - @extend %with-folder-outline-mask, %as-pseudo; - } - .health dt::before { - @extend %with-help-circle-outline-mask, %as-pseudo; - } - .nspace dt::before { - @extend %with-folder-outline-mask, %as-pseudo; - } - .health dt::before { - @extend %with-help-circle-outline-mask, %as-pseudo; - } - .nspace dt::before, - .health dt::before { - background-color: $gray-500; - } - .passing::before { - @extend %with-check-circle-fill-color-mask, %as-pseudo; - background-color: $green-500; - } - .warning::before { - @extend %with-alert-triangle-color-mask, %as-pseudo; - background-color: $orange-500; - } - .critical::before { - @extend %with-cancel-square-fill-color-mask, %as-pseudo; - background-color: $red-500; - } - .empty::before { - @extend %with-minus-square-fill-mask, %as-pseudo; - color: $gray-500; - } - } - div:nth-child(3) { - border-top: 1px solid $gray-200; - } -} // Metrics Container #metrics-container { @@ -90,9 +44,6 @@ @extend %with-docs-mask, %as-pseudo; } } - div:nth-child(3) { - border-top: 1px solid $gray-200; - } } // SVG Line styling From fc40212823d6875fb02e1fc20bd6b161d57dd602 Mon Sep 17 00:00:00 2001 From: kenia Date: Thu, 8 Apr 2021 15:15:19 -0400 Subject: [PATCH 04/13] Create Topology Metrics Source Type to be in each Card --- .../app/components/topology-metrics/source-type/index.hbs | 6 ++++++ .../app/components/topology-metrics/source-type/index.scss | 4 ++++ ui/packages/consul-ui/app/styles/components.scss | 2 ++ ui/packages/consul-ui/app/styles/components/pill.scss | 3 ++- 4 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/source-type/index.hbs create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss diff --git a/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.hbs new file mode 100644 index 0000000000..6ffec49aa2 --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.hbs @@ -0,0 +1,6 @@ + + {{t "components.consul.topology-metrics.source-type.text"}} + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss new file mode 100644 index 0000000000..578c0c1bed --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss @@ -0,0 +1,4 @@ +.topology-metrics-source-type { + margin: 6px 0 6px 12px; + display: table; +} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index ada90c9026..8436a0be40 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -79,6 +79,8 @@ @import 'consul-ui/components/role-selector'; @import 'consul-ui/components/topology-metrics'; +@import 'consul-ui/components/topology-metrics/card'; +@import 'consul-ui/components/topology-metrics/source-type'; @import 'consul-ui/components/topology-metrics/popover'; @import 'consul-ui/components/topology-metrics/series'; @import 'consul-ui/components/topology-metrics/stats'; diff --git a/ui/packages/consul-ui/app/styles/components/pill.scss b/ui/packages/consul-ui/app/styles/components/pill.scss index 707b41c8d2..9ecbdb2fde 100644 --- a/ui/packages/consul-ui/app/styles/components/pill.scss +++ b/ui/packages/consul-ui/app/styles/components/pill.scss @@ -1,7 +1,8 @@ span.policy-service-identity, span.policy-node-identity, .leader, -.consul-auth-method-type { +.consul-auth-method-type, +.topology-metrics-source-type { @extend %pill-200, %frame-gray-600; } span.policy-service-identity::before, From 52e88bbf658a52497a2472fff39852bf40563733 Mon Sep 17 00:00:00 2001 From: kenia Date: Thu, 8 Apr 2021 17:03:25 -0400 Subject: [PATCH 05/13] Create TransparentProxy mode label for service instance page --- .../app/components/consul/transparent-proxy/index.hbs | 3 +++ ui/packages/consul-ui/app/styles/components/pill.scss | 3 ++- ui/packages/consul-ui/app/templates/dc/services/instance.hbs | 3 +++ ui/packages/consul-ui/mock-api/v1/catalog/connect/_ | 1 + 4 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs diff --git a/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs b/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs new file mode 100644 index 0000000000..0475d964fb --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs @@ -0,0 +1,3 @@ + + {{t "components.consul.transparent-proxy"}} + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/styles/components/pill.scss b/ui/packages/consul-ui/app/styles/components/pill.scss index 9ecbdb2fde..20c6988b7d 100644 --- a/ui/packages/consul-ui/app/styles/components/pill.scss +++ b/ui/packages/consul-ui/app/styles/components/pill.scss @@ -2,7 +2,8 @@ span.policy-service-identity, span.policy-node-identity, .leader, .consul-auth-method-type, -.topology-metrics-source-type { +.topology-metrics-source-type, +.consul-transparent-proxy { @extend %pill-200, %frame-gray-600; } span.policy-service-identity::before, 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 d42586c88c..8e58a1f9f2 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs @@ -58,6 +58,9 @@ as |route|> + {{#if proxy.ServiceProxy.Mode}} + + {{/if}}
diff --git a/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ b/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ index e15b696944..2af98f0958 100644 --- a/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ +++ b/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ @@ -49,6 +49,7 @@ ${range(env('CONSUL_EXPOSED_COUNT', 3)).map((i) => ` `)} ] }, + "Mode": ${fake.random.boolean()}, "DestinationServiceName": "${location.pathname.slice(4)}" ${ location.pathname.slice(4) === "service-0" ? ` , From f5849fd5002d0c6bbf72df58aef49abab4ae612d Mon Sep 17 00:00:00 2001 From: kenia Date: Mon, 12 Apr 2021 09:19:49 -0400 Subject: [PATCH 06/13] Create not explicitly defined intentions banner --- .../notice/undefined-intention.hbs | 23 +++++++++++++++++++ ui/packages/consul-ui/app/models/topology.js | 21 +++++++++++++++++ .../templates/dc/services/show/topology.hbs | 3 +++ 3 files changed, 47 insertions(+) create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs new file mode 100644 index 0000000000..21ab999d73 --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs @@ -0,0 +1,23 @@ + + +

+ {{t "components.consul.topology-metrics.notice.undefined-intention.header"}} +

+ + +

+ {{t "components.consul.topology-metrics.notice.undefined-intention.body"}} +

+ + +

+ + {{t "components.consul.topology-metrics.notice.undefined-intention.footer"}} + +

+ + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/models/topology.js b/ui/packages/consul-ui/app/models/topology.js index 1c1984a151..29bfb448e0 100644 --- a/ui/packages/consul-ui/app/models/topology.js +++ b/ui/packages/consul-ui/app/models/topology.js @@ -1,4 +1,5 @@ import Model, { attr } from '@ember-data/model'; +import { computed } from '@ember/object'; export const PRIMARY_KEY = 'uid'; export const SLUG_KEY = 'ServiceName'; @@ -17,4 +18,24 @@ export default class Topology extends Model { @attr() Upstreams; // Service[] @attr() Downstreams; // Service[], @attr() meta; // {} + + @computed('Upstreams', 'Downstreams') + get undefinedIntention() { + let undefinedUpstream = false; + let undefinedDownstream = false; + + undefinedUpstream = + this.Upstreams.filter( + item => + item.Source === 'specific-intention' && !item.TransparentProxy && item.Intention.Allowed + ).length !== 0; + + undefinedDownstream = + this.Downstreams.filter( + item => + item.Source === 'specific-intention' && !item.TransparentProxy && item.Intention.Allowed + ).length !== 0; + + return undefinedUpstream || undefinedDownstream; + } } diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs index 2bc9bfa3d3..9bf72cf3d8 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs @@ -31,6 +31,9 @@ as |route|> {{#if topology.WildcardIntention}} {{/if}} + {{#if topology.undefinedIntention}} + + {{/if}} Date: Mon, 12 Apr 2021 14:57:56 -0400 Subject: [PATCH 07/13] Create icon and dashed line for intention not explictly defined --- .../components/informed-action/layout.scss | 3 + .../topology-metrics/down-lines/index.hbs | 7 +++ .../topology-metrics/popover/index.hbs | 60 +++++++++++++------ .../topology-metrics/popover/index.scss | 5 ++ .../app/components/topology-metrics/skin.scss | 3 + .../helpers/service/intention-permissions.js | 3 + 6 files changed, 64 insertions(+), 17 deletions(-) diff --git a/ui/packages/consul-ui/app/components/informed-action/layout.scss b/ui/packages/consul-ui/app/components/informed-action/layout.scss index 726eb31e45..b90fc61114 100644 --- a/ui/packages/consul-ui/app/components/informed-action/layout.scss +++ b/ui/packages/consul-ui/app/components/informed-action/layout.scss @@ -2,6 +2,9 @@ & { min-width: 190px; } + &.documentation { + min-width: 270px; + } > div { padding: 1rem; } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs index 681e799a85..2d246e18a9 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs @@ -90,6 +90,13 @@ @item={{item}} @oncreate={{action @oncreate item @service}} /> + {{else if (and item.Intention.Allowed (not item.TransparentProxy) (eq item.Source 'specific-intention'))}} + {{/if}} {{/each}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs index 3c11d0fdce..9e5d374a45 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs @@ -4,22 +4,21 @@ > {{#if (eq @type 'deny')}} - <:header>

- Connection Denied + {{t "components.consul.topology-metrics.popover.deny.header"}}

<:body>

{{#if @item.Intention.HasExact}} - Change the action of this intention to allow. + {{t "components.consul.topology-metrics.popover.deny.body.isExact"}} {{else}} - Add an intention that allows these two services to connect. + {{t "components.consul.topology-metrics.popover.deny.body.notExact"}} {{/if}}

@@ -31,9 +30,9 @@ type="button" > {{#if @item.Intention.HasExact}} - Allow + {{t "components.consul.topology-metrics.popover.deny.action.isExact"}} {{else}} - Create + {{t "components.consul.topology-metrics.popover.deny.action.notExact"}} {{/if}} @@ -48,29 +47,57 @@ - -{{else}} - +{{else if (eq @type 'notDefined')}} <:header>

- Layer 7 permissions + {{t "components.consul.topology-metrics.popover.notDefined.header"}}

<:body>

- Certain HTTP request info must be identified. + {{t "components.consul.topology-metrics.popover.notDefined.body"}}

<:actions as |Actions|> - - View + + {{t "components.consul.topology-metrics.popover.notDefined.action"}} + + + + + + + +{{else}} + + <:header> +

+ {{t "components.consul.topology-metrics.popover.l7.header"}} +

+ + <:body> +

+ {{t "components.consul.topology-metrics.popover.l7.body"}} +

+ + <:actions as |Actions|> + + + {{t "components.consul.topology-metrics.popover.l7.action"}} @@ -84,7 +111,6 @@ - {{/if}}
-{{#if (gt @topology.Upstreams.length 0)}} +{{#if (gt this.upstreams.length 0)}}
- {{#each-in (group-by "Datacenter" @topology.Upstreams) as |dc upstreams|}} + {{#each-in (group-by "Datacenter" this.upstreams) as |dc upstreams|}}
+ {{#if dc}}

{{dc}}

+ {{/if}} {{#each upstreams as |item|}}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js index 31e6eae935..cffbfd63a8 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js @@ -1,6 +1,6 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; +import { action, get } from '@ember/object'; export default class TopologyMetrics extends Component { // =attributes @@ -66,6 +66,24 @@ export default class TopologyMetrics extends Component { }); } + get upstreams() { + const upstreams = get(this.args.topology, 'Upstreams') || []; + const items = [...upstreams]; + const defaultAllow = get(this.args.topology, 'DefaultAllow'); + const wildcardIntention = get(this.args.topology, 'WildcardIntention'); + if (defaultAllow || wildcardIntention) { + items.push({ + Name: '*(All Services)', + Datacenter: '', + Namespace: '', + Intention: { + Allowed: true, + }, + }); + } + return items; + } + // =actions @action setHeight(el, item) { @@ -89,7 +107,15 @@ export default class TopologyMetrics extends Component { // Calculate viewBox dimensions this.downView = document.getElementById('downstream-lines').getBoundingClientRect(); - this.upView = document.getElementById('upstream-lines').getBoundingClientRect(); + const upstreamLines = document.getElementById('upstream-lines').getBoundingClientRect(); + const upstreamColumn = document.getElementById('upstream-column').getBoundingClientRect(); + + this.upView = { + x: upstreamLines.x, + y: upstreamLines.y, + width: upstreamLines.width, + height: upstreamColumn.height, + }; // Get Card elements positions const downCards = [ From 876d03a81b14fdac4c4dc983dcc41ce6d7425e4d Mon Sep 17 00:00:00 2001 From: kenia Date: Tue, 13 Apr 2021 15:21:19 -0400 Subject: [PATCH 10/13] Refactor TopologyMetrics Notices --- .../topology-metrics/notice/default-allow.hbs | 23 -------------- .../topology-metrics/notice/index.hbs | 31 +++++++++++++++++++ .../notice/limited-access.hbs | 16 ---------- .../notice/undefined-intention.hbs | 23 -------------- .../notice/wildcard-intention.hbs | 23 -------------- .../templates/dc/services/show/topology.hbs | 28 ++++++++++++++--- 6 files changed, 55 insertions(+), 89 deletions(-) delete mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs create mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/limited-access.hbs delete mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs delete mode 100644 ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs deleted file mode 100644 index b3bf908645..0000000000 --- a/ui/packages/consul-ui/app/components/topology-metrics/notice/default-allow.hbs +++ /dev/null @@ -1,23 +0,0 @@ - - -

- {{t "components.consul.topology-metrics.notice.default-allow.header"}} -

- - -

- {{t "components.consul.topology-metrics.notice.default-allow.body"}} -

- - -

- - {{t "components.consul.topology-metrics.notice.default-allow.footer"}} - -

- - \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/index.hbs new file mode 100644 index 0000000000..00d164be25 --- /dev/null +++ b/ui/packages/consul-ui/app/components/topology-metrics/notice/index.hbs @@ -0,0 +1,31 @@ + + +

+ {{t (concat "components.consul.topology-metrics.notice." @for ".header")}} +

+ + +

+ {{t (concat "components.consul.topology-metrics.notice." @for ".body")}} +

+ +{{#if @action}} + +

+ {{#if @internal}} + + {{t (concat "components.consul.topology-metrics.notice." @for ".footer.name")}} + + {{else}} + + {{t (concat "components.consul.topology-metrics.notice." @for ".footer")}} + + {{/if}} +

+ +{{/if}} + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/limited-access.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/limited-access.hbs deleted file mode 100644 index 87c50ff044..0000000000 --- a/ui/packages/consul-ui/app/components/topology-metrics/notice/limited-access.hbs +++ /dev/null @@ -1,16 +0,0 @@ - - -

- {{t "components.consul.topology-metrics.notice.limited-access.header"}} -

- - -

- {{t "components.consul.topology-metrics.notice.limited-access.body"}} -

- - \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs deleted file mode 100644 index 21ab999d73..0000000000 --- a/ui/packages/consul-ui/app/components/topology-metrics/notice/undefined-intention.hbs +++ /dev/null @@ -1,23 +0,0 @@ - - -

- {{t "components.consul.topology-metrics.notice.undefined-intention.header"}} -

- - -

- {{t "components.consul.topology-metrics.notice.undefined-intention.body"}} -

- - -

- - {{t "components.consul.topology-metrics.notice.undefined-intention.footer"}} - -

- - \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs b/ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs deleted file mode 100644 index 90bd65778d..0000000000 --- a/ui/packages/consul-ui/app/components/topology-metrics/notice/wildcard-intention.hbs +++ /dev/null @@ -1,23 +0,0 @@ - - -

- {{t "components.consul.topology-metrics.notice.wildcard-intention.header"}} -

- - -

- {{t "components.consul.topology-metrics.notice.wildcard-intention.body"}} -

- - -

- - {{t "components.consul.topology-metrics.notice.wildcard-intention.footer"}} - -

- - \ No newline at end of file diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs index 9bf72cf3d8..f1ddf5676c 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs @@ -23,16 +23,36 @@ as |route|> {{else}} {{#if topology.FilteredByACLs}} - + {{/if}} {{#if topology.DefaultAllow}} - + {{/if}} {{#if topology.WildcardIntention}} - + {{/if}} {{#if topology.undefinedIntention}} - + {{/if}} Date: Tue, 13 Apr 2021 15:41:39 -0400 Subject: [PATCH 11/13] Add changelog --- .changelog/10002.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/10002.txt diff --git a/.changelog/10002.txt b/.changelog/10002.txt new file mode 100644 index 0000000000..207daf005c --- /dev/null +++ b/.changelog/10002.txt @@ -0,0 +1,3 @@ +```ui:enhancement +Transparent Proxy - Service mesh visualization updates +``` From 53a0fc56e928df393c4d2731f5202677d71551be Mon Sep 17 00:00:00 2001 From: kenia Date: Wed, 14 Apr 2021 17:45:52 -0400 Subject: [PATCH 12/13] Update catalog mock data for Mode attr --- ui/packages/consul-ui/app/templates/dc/services/instance.hbs | 2 +- ui/packages/consul-ui/mock-api/v1/catalog/connect/_ | 2 +- 2 files changed, 2 insertions(+), 2 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 8e58a1f9f2..50668d09d0 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs @@ -58,7 +58,7 @@ as |route|> - {{#if proxy.ServiceProxy.Mode}} + {{#if (eq proxy.ServiceProxy.Mode 'transparent')}} {{/if}} diff --git a/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ b/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ index 2af98f0958..f25031c005 100644 --- a/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ +++ b/ui/packages/consul-ui/mock-api/v1/catalog/connect/_ @@ -49,7 +49,7 @@ ${range(env('CONSUL_EXPOSED_COUNT', 3)).map((i) => ` `)} ] }, - "Mode": ${fake.random.boolean()}, + "Mode": "${fake.helpers.randomize(['', 'direct', 'transparent'])}", "DestinationServiceName": "${location.pathname.slice(4)}" ${ location.pathname.slice(4) === "service-0" ? ` , From 703869603eaca91e60d2ca9cad70372216caccd0 Mon Sep 17 00:00:00 2001 From: kenia Date: Wed, 14 Apr 2021 18:52:41 -0400 Subject: [PATCH 13/13] review note fixes --- .../app/components/topology-metrics/card/index.hbs | 2 +- .../app/components/topology-metrics/down-lines/index.hbs | 2 +- .../consul-ui/app/components/topology-metrics/index.js | 2 +- .../app/components/topology-metrics/notice/index.hbs | 2 +- .../app/components/topology-metrics/popover/index.hbs | 8 ++++---- .../app/components/topology-metrics/popover/index.scss | 4 ++-- .../consul-ui/app/components/topology-metrics/skin.scss | 2 +- .../app/helpers/service/intention-permissions.js | 2 +- ui/packages/consul-ui/translations/en-us.yaml | 5 ++--- 9 files changed, 14 insertions(+), 15 deletions(-) diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs index ce64ce59b7..aaae528ad9 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs @@ -1,4 +1,4 @@ -{{#if (eq @item.Name '*(All Services)')}} +{{#if (eq @item.Name '* (All Services)')}}

{{@item.Name}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs index 2d246e18a9..e5ee6a80e8 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs @@ -92,7 +92,7 @@ /> {{else if (and item.Intention.Allowed (not item.TransparentProxy) (eq item.Source 'specific-intention'))}}

diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs index 9e5d374a45..04e3316e90 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs @@ -47,25 +47,25 @@ -{{else if (eq @type 'notDefined')}} +{{else if (eq @type 'not-defined')}} <:header>

- {{t "components.consul.topology-metrics.popover.notDefined.header"}} + {{t "components.consul.topology-metrics.popover.not-defined.header"}}

<:body>

- {{t "components.consul.topology-metrics.popover.notDefined.body"}} + {{t "components.consul.topology-metrics.popover.not-defined.body"}}

<:actions as |Actions|> - {{t "components.consul.topology-metrics.popover.notDefined.action"}} + {{t "components.consul.topology-metrics.popover.not-defined.action"}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss index deff458978..39d2aa9ae3 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss @@ -27,8 +27,8 @@ @extend %with-layers-mask, %as-pseudo; background-color: $gray-300; } - &.notDefined > button::before, - &.notDefined .tippy-arrow::after { + &.not-defined > button::before, + &.not-defined .tippy-arrow::after { @extend %with-alert-triangle-mask, %as-pseudo; color: $yellow-500; } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss index f529124cdc..32b82ac737 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss @@ -65,7 +65,7 @@ stroke: $gray-300; stroke-width: 2; } - path[data-permission='notDefined'] { + path[data-permission='not-defined'] { stroke-dasharray: 4; } path[data-permission='deny'] { diff --git a/ui/packages/consul-ui/app/helpers/service/intention-permissions.js b/ui/packages/consul-ui/app/helpers/service/intention-permissions.js index 15fc5afd74..b882fa53f9 100644 --- a/ui/packages/consul-ui/app/helpers/service/intention-permissions.js +++ b/ui/packages/consul-ui/app/helpers/service/intention-permissions.js @@ -11,7 +11,7 @@ export default helper(function serviceIntentionPermissions([params] /*, hash*/) case !allowed && !hasPermissions: return 'deny'; case allowed && notExplicitlyDefined: - return 'notDefined'; + return 'not-defined'; default: return 'allow'; } diff --git a/ui/packages/consul-ui/translations/en-us.yaml b/ui/packages/consul-ui/translations/en-us.yaml index 6afb19ed4b..021539dc91 100644 --- a/ui/packages/consul-ui/translations/en-us.yaml +++ b/ui/packages/consul-ui/translations/en-us.yaml @@ -202,8 +202,7 @@ components: not-defined-intention: header: Connections are not explicitly defined body: There appears to be an Intention defining traffic, but the services are unable to communicate until that connection is explicitly defined as a downstream or Transparent Proxy mode is turned on. - footer: - name: Read the documentation + footer: Read the documentation wildcard-intention: header: Permissive Intention body: One or more of your Intentions are set to allow traffic to and/or from all other services in a namespace. This Topology view will show all of those connections if that remains unchanged. We recommend setting more specific Intentions for upstream and downstream services to make this vizualization more useful. @@ -223,7 +222,7 @@ components: action: isExact: Allow notExact: Create - undefined: + not-defined: header: No traffic body: Add the current service as an explicit upstream or turn on Transparent Proxy mode to initiate traffic. action: Documentation