diff --git a/.changelog/12305.txt b/.changelog/12305.txt new file mode 100644 index 000000000..a81fbd9ed --- /dev/null +++ b/.changelog/12305.txt @@ -0,0 +1,3 @@ +```release-note:enhancement +ui: Improve usability of Topology warning/information panels +``` diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/README.mdx b/ui/packages/consul-ui/app/components/collapsible-notices/README.mdx deleted file mode 100644 index c6cc7f06e..000000000 --- a/ui/packages/consul-ui/app/components/collapsible-notices/README.mdx +++ /dev/null @@ -1,66 +0,0 @@ -# CollapsibleNotices - -Used as a wrapper to collapse the details of ``. - -```hbs preview-template - - - -

Header

-
- -

- Body -

-
-
- - -

Header

-
- -

- Body -

-
- -

- Footer -

-
-
- - -

Header

-
- -

- Body -

-
- -

- Footer -

-
-
-
- -``` - -## Arguments - -No arguments required. Wrap this component around the needed notices. - -## See - -- [Template Source Code](./index.hbs) - ---- \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/index.hbs b/ui/packages/consul-ui/app/components/collapsible-notices/index.hbs deleted file mode 100644 index 6d643d4ff..000000000 --- a/ui/packages/consul-ui/app/components/collapsible-notices/index.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{#if @collapsible}} -
-
- {{yield}} -
- {{#if this.collapsed}} - - {{else}} - - {{/if}} -
-{{else}} - {{yield}} -{{/if}} diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/index.js b/ui/packages/consul-ui/app/components/collapsible-notices/index.js deleted file mode 100644 index 8b246f27e..000000000 --- a/ui/packages/consul-ui/app/components/collapsible-notices/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Component from '@glimmer/component'; - -export default class CollapsibleNotices extends Component {} diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss deleted file mode 100644 index 672904fce..000000000 --- a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss +++ /dev/null @@ -1,31 +0,0 @@ -.collapsible-notices { - display: grid; - grid-template-columns: auto 168px; - grid-template-rows: auto 55px; - grid-template-areas: - 'notices notices' - '. toggle-button'; - &.collapsed p { - display: none; - } - .notices { - grid-area: notices; - :last-child { - margin-bottom: 0; - } - } - button { - @extend %button; - color: rgb(var(--color-action)); - float: right; - grid-area: toggle-button; - margin-top: 1em; - margin-bottom: 2em; - } - button.expand::before { - @extend %with-chevron-down-mask, %as-pseudo; - } - button.collapse::before { - @extend %with-chevron-up-mask, %as-pseudo; - } -} diff --git a/ui/packages/consul-ui/app/components/route/index.hbs b/ui/packages/consul-ui/app/components/route/index.hbs index 783e62db5..7af35e58f 100644 --- a/ui/packages/consul-ui/app/components/route/index.hbs +++ b/ui/packages/consul-ui/app/components/route/index.hbs @@ -6,6 +6,7 @@ currentName=this.router.currentRoute.name refresh=this.refresh + t=this.t Title=(component "route/title") Announcer=(component "route/announcer") diff --git a/ui/packages/consul-ui/app/components/route/index.js b/ui/packages/consul-ui/app/components/route/index.js index d484560c1..999ae7fd6 100644 --- a/ui/packages/consul-ui/app/components/route/index.js +++ b/ui/packages/consul-ui/app/components/route/index.js @@ -3,18 +3,26 @@ import { inject as service } from '@ember/service'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; +const templateRe = /\${([A-Za-z.0-9_-]+)}/g; export default class RouteComponent extends Component { @service('routlet') routlet; @service('router') router; + @service('intl') intl; + @service('encoder') encoder; @tracked _model; + constructor() { + super(...arguments); + this.intlKey = this.encoder.createRegExpEncoder(templateRe, _ => _); + } + get params() { return this.routlet.paramsFor(this.args.name); } get model() { - if(this._model) { + if (this._model) { return this._model; } if (this.args.name) { @@ -23,6 +31,13 @@ export default class RouteComponent extends Component { } return undefined; } + @action + t(str, options) { + if (str.includes('${')) { + str = this.intlKey(str, options); + } + return this.intl.t(`routes.${this.args.name}.${str}`, options); + } @action connect() { 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 215efad41..e62a58884 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss @@ -1,3 +1,11 @@ +.topology-notices { + display: flow-root; + button { + float: right; + margin-top: 16px; + margin-bottom: 32px; + } +} .topology-container { display: grid; height: 100%; 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 deleted file mode 100644 index db8ac82bb..000000000 --- a/ui/packages/consul-ui/app/components/topology-metrics/notice/index.hbs +++ /dev/null @@ -1,31 +0,0 @@ - - -

- {{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/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss index 06fe49588..fc819a630 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss @@ -1,3 +1,16 @@ +.topology-notices { + button { + @extend %button; + color: rgb(var(--tone-blue-500)); + } + button::before { + @extend %as-pseudo; + @extend %with-chevron-down-mask; + } + button[aria-expanded='true']::before { + @extend %with-chevron-up-mask; + } +} .topology-container { color: rgb(var(--tone-gray-700)); } diff --git a/ui/packages/consul-ui/app/helpers/collapsible-notices.js b/ui/packages/consul-ui/app/helpers/collapsible-notices.js deleted file mode 100644 index e9e8925e2..000000000 --- a/ui/packages/consul-ui/app/helpers/collapsible-notices.js +++ /dev/null @@ -1,9 +0,0 @@ -import { helper } from '@ember/component/helper'; - -export function collapsibleNotices(params, hash) { - // This filter will only return truthy items - const noticesCount = params.filter(Boolean).length; - return noticesCount > 2; -} - -export default helper(collapsibleNotices); diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index f90d8fe29..d6f33f533 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -92,7 +92,6 @@ @import 'consul-ui/components/consul/auth-method'; @import 'consul-ui/components/role-selector'; -@import 'consul-ui/components/collapsible-notices'; @import 'consul-ui/components/topology-metrics'; @import 'consul-ui/components/topology-metrics/card'; @import 'consul-ui/components/topology-metrics/source-type'; 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 a8df87e41..6c950a255 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 @@ -27,66 +27,107 @@ as |route|> loader.data as |nspace dc items topology|}}
- {{#let (collapsible-notices topology.FilteredByACLs (eq dc.DefaultACLPolicy 'allow') topology.wildcardIntention topology.notDefinedIntention) as |collapsible| }} - - {{#if topology.FilteredByACLs}} - - {{/if}} - {{#if (eq dc.DefaultACLPolicy 'allow')}} - - {{/if}} - {{#if topology.wildcardIntention}} - - {{/if}} - {{#if topology.notDefinedIntention}} - - {{/if}} - {{#if (and topology.noDependencies (can 'use acls'))}} - - {{/if}} - {{#if (and topology.noDependencies (not (can 'use acls')))}} - - {{/if}} - - {{/let}} + +
+ + {{! Make a map of key=enabled to tell us which notices are enabled }} + {{! The `false` here is so we can easily open all the notices up by changing to `true` }} + {{#let + (from-entries (array + (array 'filtered-by-acls' (or false topology.FilteredByACLs)) + (array 'default-allow' (or false (eq dc.DefaultACLPolicy 'allow'))) + (array 'wildcard-intention' (or false topology.wildcardIntention)) + (array 'not-defined-intention' (or false topology.notDefinedIntention)) + (array 'no-dependencies' (or false (and topology.noDependencies (can 'use acls')))) + (array 'acls-disabled' (or false (and topology.noDependencies (not (can 'use acls'))))) + )) + as |notices|}} + + {{! Make an array only of truthy values to we know how many notices are enabled }} + {{#let (without false + (values notices) + ) as |noticesEnabled|}} + + {{! Render any enabled notices }} + {{#each-in notices as |prop enabled|}} + {{#if enabled}} + + + +

+ {{compute (fn route.t 'notice.${prop}.header' + (hash + prop=prop + ) + )}} +

+
+ {{#if disclosure.expanded}} + +

+ {{compute (fn route.t 'notice.${prop}.body' + (hash + prop=prop + ) + )}} +

+
+ {{/if}} + {{#let + (compute (fn route.t 'notice.${prop}.footer' + (hash + route_intentions=(href-to 'dc.services.show.intentions') + prop=prop + htmlSafe=true + ) + )) + as |footer|}} + {{#if (and disclosure.expanded (not-eq prop 'filtered-by-acls'))}} + + {{footer}} + + {{/if}} + {{/let}} +
+
+ {{/if}} + {{/each-in}} + + {{! If more than 2 notices are enabled let the user close them }} + {{#if (gt noticesEnabled.length 2)}} + + {{compute (fn route.t 'notices.${expanded}' + (hash + expanded=(if disclosure.expanded 'close' 'open') + ) + )}} + + {{/if}} + + {{/let}} + {{/let}} +
+ +
+ + {{#if config.data}} + + {{/if}}
diff --git a/ui/packages/consul-ui/translations/components/consul/en-us.yaml b/ui/packages/consul-ui/translations/components/consul/en-us.yaml index 03f3cd84c..48975d53d 100644 --- a/ui/packages/consul-ui/translations/components/consul/en-us.yaml +++ b/ui/packages/consul-ui/translations/components/consul/en-us.yaml @@ -123,34 +123,6 @@ topology-metrics: routing-config: tooltip: This is not a registered Consul service. It’s a routing configuration that routes traffic to real services in Consul. text: Routing configuration - notice: - limited-access: - header: Limited Access - body: This service may have dependencies you won’t see because you don’t have access to them. - default-allow: - header: Intentions are set to default allow - body: Your Intention settings are currently set to default allow. This means that this view will show connections to every service in your cluster. We recommend changing your Intention settings to default deny and creating specific Intentions for upstream and downstream services for this view to be useful. - footer: - name: Edit intentions - URL: dc.services.show.intentions - not-defined-intention: - header: Connections are not explicitly defined - body: There appears to be an Intention allowing traffic, but the services are unable to communicate until that connection is enabled by defining an explicit upstream or proxies are set to 'transparent' mode. - 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. - footer: - name: Edit intentions - URL: dc.services.show.intentions - no-dependencies: - header: No dependencies - body: The service you are viewing currently has no dependencies. You will only see metrics for the current service until dependencies are added. - footer: Read the documentation - acls-disabled: - header: Enable ACLs - body: This connect-native service may have dependencies, but Consul isn't aware of them when ACLs are disabled. Enable ACLs to make this view more useful. - footer: Read the documentation popover: l7: header: Layer 7 permissions diff --git a/ui/packages/consul-ui/translations/routes/en-us.yaml b/ui/packages/consul-ui/translations/routes/en-us.yaml index 47462dc2a..ffa2a2c94 100644 --- a/ui/packages/consul-ui/translations/routes/en-us.yaml +++ b/ui/packages/consul-ui/translations/routes/en-us.yaml @@ -17,6 +17,49 @@ dc:

services: show: + topology: + notices: + open: Expand Banners + close: Collapse Banners + notice: + filtered-by-acls: + header: Limited Access + body: This service may have dependencies you won’t see because you don’t have access to them. + default-allow: + header: Intentions are set to default allow + body: Your Intention settings are currently set to default allow. This means that this view will show connections to every service in your cluster. We recommend changing your Intention settings to default deny and creating specific Intentions for upstream and downstream services for this view to be useful. + footer: | +

+ Edit Intentions +

+ 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. + footer: | +

+ Edit Intentions +

+ not-defined-intention: + header: Connections are not explicitly defined + body: There appears to be an Intention allowing traffic, but the services are unable to communicate until that connection is enabled by defining an explicit upstream or proxies are set to 'transparent' mode. + footer: | +

+ Read the documentation +

+ no-dependencies: + header: No dependencies + body: The service you are viewing currently has no dependencies. You will only see metrics for the current service until dependencies are added. + footer: | +

+ Read the documentation +

+ acls-disabled: + header: Enable ACLs + body: This connect-native service may have dependencies, but Consul isn't aware of them when ACLs are disabled. Enable ACLs to make this view more useful. + footer: | +

+ Read the documentation +

upstreams: intro: |