status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Accessibility scan improvements (#9485) 

* ui: Remove all vestiges of role=tabpanel

* Switch out tablist role for a label, default to Secondary

* Move healthcheckout-output headers to h2, ideally these would be outside the component

* Add aria-label for empty button

* Fix up non-unique ids in topology component

* Temporarily fixup h2 in KV > LockSession

* Fixup dl with no dt

* h3 > h2

* Fix up page objects that were reliant on ids
This commit is contained in:
John Cowen 2021-01-05 10:05:59 +00:00 committed by GitHub
parent d0ebb2b774
commit 17438020f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 213 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
View File

@ -7,7 +7,7 @@
<li class={{concat 'health-check-output ' item.Status}}> <li class={{concat 'health-check-output ' item.Status}}>
<div> <div>
<header> <header>
<h3>{{item.Name}}</h3> <h2>{{item.Name}}</h2>
</header> </header>
<dl> <dl>
{{#if (eq item.Kind "node")}} {{#if (eq item.Kind "node")}}

4
ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
View File

@ -14,6 +14,10 @@
margin-right: 8px; margin-right: 8px;
} }
} }
%healthcheck-output header > * {
@extend %h3;
font-size: $typo-header-300;
}
%healthcheck-output dd em { %healthcheck-output dd em {
@extend %pill; @extend %pill;
background-color: $gray-100; background-color: $gray-100;

6
ui/packages/consul-ui/app/components/consul/lock-session/form/index.hbs
View File

@ -7,7 +7,11 @@
as |api| as |api|
> >
<BlockSlot @name="form"> <BlockSlot @name="form">
<div class="definition-table" data-test-session={{api.data.ID}}> <div
class="consul-lock-session-form definition-table"
data-test-session={{api.data.ID}}
...attributes
>
<h2> <h2>
<a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html#session-design" rel="help noopener noreferrer" target="_blank">Lock Session</a> <a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html#session-design" rel="help noopener noreferrer" target="_blank">Lock Session</a>
</h2> </h2>

8
ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss Normal file
View File

@ -0,0 +1,8 @@
.consul-lock-session-form {
h2 {
border-bottom: $decor-border-200;
border-color: $gray-200;
padding-bottom: .2em;
margin-bottom: .5em;
}
}

5
ui/packages/consul-ui/app/components/consul/policy/list/index.hbs
View File

@ -5,8 +5,9 @@ as |item|>
<BlockSlot @name="header"> <BlockSlot @name="header">
{{#if (eq (policy/typeof item) 'policy-management')}} {{#if (eq (policy/typeof item) 'policy-management')}}
<dl class="policy-management"> <dl class="policy-management">
<dt>Type</dt>
<dd> <dd>
<Tooltip @position="top-start"> <Tooltip>
Global Management Policy Global Management Policy
</Tooltip> </Tooltip>
</dd> </dd>
@ -17,7 +18,7 @@ as |item|>
<BlockSlot @name="details"> <BlockSlot @name="details">
<dl class="datacenter"> <dl class="datacenter">
<dt> <dt>
<Tooltip @position="top-start">Datacenters</Tooltip> <Tooltip>Datacenters</Tooltip>
</dt> </dt>
<dd> <dd>
{{join ', ' (policy/datacenters item)}} {{join ', ' (policy/datacenters item)}}

4
ui/packages/consul-ui/app/components/notice/skin.scss
View File

@ -6,6 +6,10 @@
%notice::before { %notice::before {
@extend %as-pseudo; @extend %as-pseudo;
} }
%notice header > * {
@extend %h3;
font-size: $typo-header-300;
}
%notice footer * { %notice footer * {
@extend %p3; @extend %p3;
font-weight: $typo-weight-bold; font-weight: $typo-weight-bold;

6
ui/packages/consul-ui/app/components/tab-nav/index.hbs
View File

@ -7,9 +7,11 @@
) )
undefined undefined
}}} }}}
role="tablist" aria-label="Secondary"
class={{concat 'tab-nav' (if isAnimatable ' animatable' '')}} class={{concat 'tab-nav' (if isAnimatable ' animatable' '')}}
id={{guid}}> id={{guid}}
...attributes
>
<ul> <ul>
{{#each items as |item|}} {{#each items as |item|}}
<li <li

59
ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
View File

@ -8,46 +8,75 @@
preserveAspectRatio="none" preserveAspectRatio="none"
> >
<defs> <defs>
<marker id="allow-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6"> <marker
id={{concat this.guid '-allow-dot'}}
class="allow-dot"
viewBox="-2 -2 15 15"
refX="6"
refY="6"
markerWidth="6"
markerHeight="6"
>
<circle <circle
cx="6" cx="6"
cy="6" cy="6"
r="6" r="6"
/> />
</marker> </marker>
<marker id="allow-arrow" viewBox="-1 -1 12 12" refX="5" refY="5" <marker
markerWidth="6" markerHeight="6" id={{concat this.guid '-allow-arrow'}}
orient="auto-start-reverse"> class="allow-arrow"
viewBox="-1 -1 12 12"
refX="5"
refY="5"
markerWidth="6" markerHeight="6"
orient="auto-start-reverse"
>
<polygon points="0 0 10 5 0 10" /> <polygon points="0 0 10 5 0 10" />
</marker> </marker>
<marker id="deny-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6"> <marker
id={{concat this.guid '-deny-dot'}}
class="deny-dot"
viewBox="-2 -2 15 15"
refX="6"
refY="6"
markerWidth="6"
markerHeight="6"
>
<circle <circle
cx="6" cx="6"
cy="6" cy="6"
r="6" r="6"
/> />
</marker> </marker>
<marker id="deny-arrow" viewBox="-1 -1 12 12" refX="5" refY="5" <marker
markerWidth="6" markerHeight="6" id={{concat this.guid '-deny-arrow'}}
orient="auto-start-reverse"> class="deny-arrow"
viewBox="-1 -1 12 12"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
>
<polygon points="0 0 10 5 0 10" /> <polygon points="0 0 10 5 0 10" />
</marker> </marker>
</defs> </defs>
{{#each @lines as |line|}} {{#each @lines as |line|}}
{{#if (eq line.permission 'deny')}} {{#if (eq line.permission 'deny')}}
<path <path
id={{line.id}} id={{concat this.guid line.id}}
d={{svg-curve line.dest src=line.src}} d={{svg-curve line.dest src=line.src}}
marker-start="url(#deny-dot)" marker-start={{concat 'url(#' this.guid '-deny-dot)'}}
marker-end="url(#deny-arrow)" marker-end={{concat 'url(#' this.guid '-deny-arrow)'}}
data-permission={{line.permission}} data-permission={{line.permission}}
/> />
{{else}} {{else}}
<path <path
id={{line.id}} id={{concat this.guid line.id}}
d={{svg-curve line.dest src=line.src}} d={{svg-curve line.dest src=line.src}}
marker-start="url(#allow-dot)" marker-start={{concat 'url(#' this.guid '-allow-dot)'}}
marker-end="url(#allow-arrow)" marker-end={{concat 'url(#' this.guid '-allow-arrow)'}}
data-permission={{line.permission}} data-permission={{line.permission}}
/> />
{{/if}} {{/if}}
@ -59,7 +88,7 @@
{{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}} {{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}}
<TopologyMetrics::Popover <TopologyMetrics::Popover
@type={{if item.Intention.HasPermissions 'l7' 'deny'}} @type={{if item.Intention.HasPermissions 'l7' 'deny'}}
@position={{find-by 'id' (concat item.Namespace item.Name) this.iconPositions}} @position={{find-by 'id' (concat this.guid item.Namespace item.Name) this.iconPositions}}
@item={{item}} @item={{item}}
@oncreate={{action @oncreate item @service}} @oncreate={{action @oncreate item @service}}
/> />

6
ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js
View File

@ -1,9 +1,15 @@
import Component from '@glimmer/component'; import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking'; import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object'; import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class TopoloyMetricsDownLines extends Component { export default class TopoloyMetricsDownLines extends Component {
@tracked iconPositions; @tracked iconPositions;
@service('dom') dom;
get guid() {
return this.dom.guid(this);
}
@action @action
getIconPositions() { getIconPositions() {

1
ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs
View File

@ -89,6 +89,7 @@
type="button" type="button"
{{on 'click' (fn (optional this.popoverController.show))}} {{on 'click' (fn (optional this.popoverController.show))}}
style={{{concat 'top:' @position.y 'px;left:' @position.x 'px;'}}} style={{{concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
aria-label={{if (eq @type 'deny') 'Add intention' 'View intention'}}
> >
</button> </button>
</div> </div>

10
ui/packages/consul-ui/app/components/topology-metrics/skin.scss
View File

@ -104,24 +104,24 @@
circle { circle {
fill: $white; fill: $white;
} }
#allow-arrow { .allow-arrow {
fill: $gray-300; fill: $gray-300;
stroke-linejoin: round; stroke-linejoin: round;
} }
path, path,
#allow-dot, .allow-dot,
#allow-arrow { .allow-arrow {
stroke: $gray-300; stroke: $gray-300;
stroke-width: 2; stroke-width: 2;
} }
path[data-permission='deny'] { path[data-permission='deny'] {
stroke: $red-500; stroke: $red-500;
} }
#deny-dot { .deny-dot {
stroke: $red-500; stroke: $red-500;
stroke-width: 2; stroke-width: 2;
} }
#deny-arrow { .deny-arrow {
fill: $red-500; fill: $red-500;
stroke: $red-500; stroke: $red-500;
stroke-linejoin: round; stroke-linejoin: round;

60
ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
View File

@ -8,46 +8,76 @@
preserveAspectRatio="none" preserveAspectRatio="none"
> >
<defs> <defs>
<marker id="allow-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6"> <marker
id={{concat this.guid '-allow-dot'}}
class="allow-dot"
viewBox="-2 -2 15 15"
refX="6"
refY="6"
markerWidth="6"
markerHeight="6"
>
<circle <circle
cx="6" cx="6"
cy="6" cy="6"
r="6" r="6"
/> />
</marker> </marker>
<marker id="allow-arrow" viewBox="-1 -1 12 12" refX="5" refY="5" <marker
markerWidth="6" markerHeight="6" id={{concat this.guid '-allow-arrow'}}
orient="auto-start-reverse"> class="allow-arrow"
viewBox="-1 -1 12 12"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
>
<polygon points="0 0 10 5 0 10" /> <polygon points="0 0 10 5 0 10" />
</marker> </marker>
<marker id="deny-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6"> <marker
id={{concat this.guid '-deny-dot'}}
class="deny-dot"
viewBox="-2 -2 15 15"
refX="6"
refY="6"
markerWidth="6"
markerHeight="6"
>
<circle <circle
cx="6" cx="6"
cy="6" cy="6"
r="6" r="6"
/> />
</marker> </marker>
<marker id="deny-arrow" viewBox="-1 -1 12 12" refX="5" refY="5" <marker
markerWidth="6" markerHeight="6" id={{concat this.guid '-deny-arrow'}}
orient="auto-start-reverse"> class="deny-arrow"
viewBox="-1 -1 12 12"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
>
<polygon points="0 0 10 5 0 10" /> <polygon points="0 0 10 5 0 10" />
</marker> </marker>
</defs> </defs>
{{#each @lines as |line|}} {{#each @lines as |line|}}
{{#if (eq line.permission 'deny')}} {{#if (eq line.permission 'deny')}}
<path <path
id={{line.id}} id={{concat this.guid line.id}}
d={{svg-curve line.dest src=line.src}} d={{svg-curve line.dest src=line.src}}
marker-start="url(#deny-dot)" marker-start={{concat 'url(#' this.guid '-deny-dot)'}}
marker-end="url(#deny-arrow)" marker-end={{concat 'url(#' this.guid '-deny-arrow)'}}
data-permission={{line.permission}} data-permission={{line.permission}}
/> />
{{else}} {{else}}
<path <path
id={{line.id}} id={{concat this.guid line.id}}
d={{svg-curve line.dest src=line.src}} d={{svg-curve line.dest src=line.src}}
marker-start="url(#allow-dot)" marker-start={{concat 'url(#' this.guid '-allow-dot)'}}
marker-end="url(#allow-arrow)" marker-end={{concat 'url(#' this.guid '-allow-arrow)'}}
data-permission={{line.permission}} data-permission={{line.permission}}
/> />
{{/if}} {{/if}}
@ -59,7 +89,7 @@
{{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}} {{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}}
<TopologyMetrics::Popover <TopologyMetrics::Popover
@type={{if item.Intention.HasPermissions 'l7' 'deny'}} @type={{if item.Intention.HasPermissions 'l7' 'deny'}}
@position={{find-by 'id' (concat item.Namespace item.Name) this.iconPositions}} @position={{find-by 'id' (concat this.guid item.Namespace item.Name) this.iconPositions}}
@item={{item}} @item={{item}}
@oncreate={{action @oncreate @service item}} @oncreate={{action @oncreate @service item}}
/> />

6
ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js
View File

@ -1,9 +1,15 @@
import Component from '@glimmer/component'; import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking'; import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object'; import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class TopologyMetricsUpLines extends Component { export default class TopologyMetricsUpLines extends Component {
@tracked iconPositions; @tracked iconPositions;
@service('dom') dom;
get guid() {
return this.dom.guid(this);
}
@action @action
getIconPositions() { getIconPositions() {

1
ui/packages/consul-ui/app/styles/components.scss
View File

@ -62,6 +62,7 @@
@import 'consul-ui/components/consul/external-source'; @import 'consul-ui/components/consul/external-source';
@import 'consul-ui/components/consul/kind'; @import 'consul-ui/components/consul/kind';
@import 'consul-ui/components/consul/intention'; @import 'consul-ui/components/consul/intention';
@import 'consul-ui/components/consul/lock-session/form';
@import 'consul-ui/components/role-selector'; @import 'consul-ui/components/role-selector';
@import 'consul-ui/components/topology-metrics'; @import 'consul-ui/components/topology-metrics';

2
ui/packages/consul-ui/app/styles/components/anchors.scss
View File

@ -18,7 +18,7 @@ a[rel*='external']::after {
margin-left: 0.2em; margin-left: 0.2em;
} }
[role='tabpanel'] > p:only-child [rel*='help']::after { .tab-section > p:only-child [rel*='help']::after {
content: none; content: none;
} }
%main-content p a, %main-content p a,

4
ui/packages/consul-ui/app/styles/components/app-view/layout.scss
View File

@ -26,10 +26,6 @@
} }
/* content */ /* content */
%app-view-content h2 {
padding-bottom: 0.2em;
margin-bottom: 0.5em;
}
%app-view-content-empty { %app-view-content-empty {
margin-top: 0 !important; margin-top: 0 !important;
padding: 50px; padding: 50px;

5
ui/packages/consul-ui/app/styles/components/app-view/skin.scss
View File

@ -4,13 +4,9 @@
%app-view-title { %app-view-title {
border-bottom: $decor-border-100; border-bottom: $decor-border-100;
} }
%app-view-content h2,
%app-view-content form:not(.filter-bar) fieldset { %app-view-content form:not(.filter-bar) fieldset {
border-bottom: $decor-border-200; border-bottom: $decor-border-200;
} }
%app-view-content fieldset h2 {
border-bottom: none;
}
%app-view-header h1 > em { %app-view-header h1 > em {
color: $gray-600; color: $gray-600;
} }
@ -21,7 +17,6 @@
color: $gray-400; color: $gray-400;
} }
%app-view-title, %app-view-title,
%app-view-content h2,
%app-view-content form:not(.filter-bar) fieldset { %app-view-content form:not(.filter-bar) fieldset {
border-color: $gray-200; border-color: $gray-200;
} }

6
ui/packages/consul-ui/app/styles/layout.scss
View File

@ -17,9 +17,9 @@ html[data-route$='edit'] .app-view > header + div > *:first-child {
/* most tabs have margin after the tab bar, unless the tab has a filter bar */ /* most tabs have margin after the tab bar, unless the tab has a filter bar */
/* if it is a filter bar and the thing after the filter bar is a p then it also */ /* if it is a filter bar and the thing after the filter bar is a p then it also */
/* needs a top margun :S */ /* needs a top margun :S */
%app-view-content [role='tabpanel'] > *:first-child:not(.filter-bar):not(table), %app-view-content .tab-section > *:first-child:not(.filter-bar):not(table),
%app-view-content [role='tabpanel'] > .filter-bar + p, %app-view-content .tab-section > .filter-bar + p,
%app-view-content [role='tabpanel'] .consul-health-check-list { %app-view-content .tab-section .consul-health-check-list {
margin-top: 1.25em; margin-top: 1.25em;
} }
.consul-upstream-instance-list, .consul-upstream-instance-list,

6
ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
View File

@ -8,11 +8,11 @@ html[data-route^='dc.services.instance'] .app-view > header dl {
html[data-route^='dc.services.instance'] .app-view > header dt { html[data-route^='dc.services.instance'] .app-view > header dt {
font-weight: $typo-weight-bold; font-weight: $typo-weight-bold;
} }
html[data-route^='dc.services.instance'] [role='tabpanel'] section:not(:last-child) { html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
padding-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid $gray-200; border-bottom: 1px solid $gray-200;
} }
html[data-route^='dc.services.instance.metadata'] [role='tabpanel'] section h3, html[data-route^='dc.services.instance.metadata'] .tab-section section h3,
html[data-route^='dc.services.instance.proxy'] [role='tabpanel'] section h3 { html[data-route^='dc.services.instance.proxy'] .tab-section section h3 {
margin: 24px 0 12px 0; margin: 24px 0 12px 0;
} }

2
ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs
View File

@ -64,7 +64,7 @@
@type="info" @type="info"
as |notice|> as |notice|>
<notice.Header> <notice.Header>
<h3>Update</h3> <h2>Update</h2>
</notice.Header> </notice.Header>
<notice.Body> <notice.Body>
<p> <p>

2
ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs
View File

@ -60,7 +60,7 @@
@type="info" @type="info"
as |notice|> as |notice|>
<notice.Header> <notice.Header>
<h3>Update</h3> <h2>Update</h2>
</notice.Header> </notice.Header>
<notice.Body> <notice.Body>
<p data-test-notification-update>We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p> <p data-test-notification-update>We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>

2
ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs
View File

@ -9,7 +9,6 @@
) as |filters|}} ) as |filters|}}
{{#let (or sortBy "Status:asc") as |sort|}} {{#let (or sortBy "Status:asc") as |sort|}}
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#if (gt item.Checks.length 0) }} {{#if (gt item.Checks.length 0) }}
<input type="checkbox" id="toolbar-toggle" /> <input type="checkbox" id="toolbar-toggle" />
<Consul::HealthCheck::SearchBar <Consul::HealthCheck::SearchBar
@ -52,7 +51,6 @@
</EmptyState> </EmptyState>
</collection.Empty> </collection.Empty>
</DataCollection> </DataCollection>
</div>
</div> </div>
{{/let}} {{/let}}
{{/let}} {{/let}}

4
ui/packages/consul-ui/app/templates/dc/nodes/show/metadata.hbs
View File

@ -1,5 +1,4 @@
<div id="metadata" class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#if item.Meta}} {{#if item.Meta}}
<Consul::Metadata::List @items={{entries item.Meta}} /> <Consul::Metadata::List @items={{entries item.Meta}} />
{{else}} {{else}}
@ -11,5 +10,4 @@
</BlockSlot> </BlockSlot>
</EmptyState> </EmptyState>
{{/if}} {{/if}}
</div>
</div> </div>

48
ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs
View File

@ -1,28 +1,26 @@
<div id="round-trip-time" class="tab-section"> <div class="tab-section">
<div role="tabpanel"> <div class="definition-table">
<div class="definition-table"> <dl>
<dl> <dt>
<dt> Minimum
Minimum </dt>
</dt> <dd>
<dd> {{format-number tomography.min maximumFractionDigits=2}}ms
{{format-number tomography.min maximumFractionDigits=2}}ms </dd>
</dd> <dt>
<dt> Median
Median </dt>
</dt> <dd>
<dd> {{format-number tomography.median maximumFractionDigits=2}}ms
{{format-number tomography.median maximumFractionDigits=2}}ms </dd>
</dd> <dt>
<dt> Maximum
Maximum </dt>
</dt> <dd>
<dd> {{format-number tomography.max maximumFractionDigits=2}}ms
{{format-number tomography.max maximumFractionDigits=2}}ms </dd>
</dd> </dl>
</dl>
</div>
<Consul::Tomography::Graph @distances={{tomography.distances}} />
</div> </div>
<Consul::Tomography::Graph @distances={{tomography.distances}} />
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs
View File

@ -9,7 +9,6 @@
{{#let (or sortBy "Status:asc") as |sort|}} {{#let (or sortBy "Status:asc") as |sort|}}
{{#let (reject-by 'Service.Kind' 'connect-proxy' item.Services) as |items|}} {{#let (reject-by 'Service.Kind' 'connect-proxy' item.Services) as |items|}}
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#if (gt items.length 0) }} {{#if (gt items.length 0) }}
<input type="checkbox" id="toolbar-toggle" /> <input type="checkbox" id="toolbar-toggle" />
<Consul::ServiceInstance::SearchBar <Consul::ServiceInstance::SearchBar
@ -55,7 +54,6 @@
</EmptyState> </EmptyState>
</collection.Empty> </collection.Empty>
</DataCollection> </DataCollection>
</div>
</div> </div>
{{/let}} {{/let}}
{{/let}} {{/let}}

4
ui/packages/consul-ui/app/templates/dc/nodes/show/sessions.hbs
View File

@ -1,6 +1,5 @@
<EventSource @src={{sessions}} /> <EventSource @src={{sessions}} />
<div id="lock-sessions" class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#if (gt sessions.length 0)}} {{#if (gt sessions.length 0)}}
<Consul::LockSession::List @items={{sessions}} @onInvalidate={{action send 'invalidateSession'}}/> <Consul::LockSession::List @items={{sessions}} @onInvalidate={{action send 'invalidateSession'}}/>
{{else}} {{else}}
@ -12,5 +11,4 @@
</BlockSlot> </BlockSlot>
</EmptyState> </EmptyState>
{{/if}} {{/if}}
</div>
</div> </div>

55
ui/packages/consul-ui/app/templates/dc/services/instance/addresses.hbs
View File

@ -1,29 +1,28 @@
<div id="addresses" class="tab-section"> <div class="tab-section">
<div role="tabpanel"> {{#if item.Service.TaggedAddresses }}
{{#if item.Service.TaggedAddresses }} <TabularCollection
<TabularCollection data-test-addresses
data-test-addresses class="consul-tagged-addresses"
@items={{entries item.Service.TaggedAddresses}} as |taggedAddress index| @items={{entries item.Service.TaggedAddresses}} as |taggedAddress index|
> >
<BlockSlot @name="header"> <BlockSlot @name="header">
<th>Tag</th> <th>Tag</th>
<th>Address</th> <th>Address</th>
</BlockSlot> </BlockSlot>
<BlockSlot @name="row"> <BlockSlot @name="row">
{{#with (object-at 1 taggedAddress) as |address|}} {{#with (object-at 1 taggedAddress) as |address|}}
<td> <td>
{{object-at 0 taggedAddress}}{{#if (and (eq address.Address item.Address) (eq address.Port item.Port))}}&nbsp;<em data-test-address-default>(default)</em>{{/if}} {{object-at 0 taggedAddress}}{{#if (and (eq address.Address item.Address) (eq address.Port item.Port))}}&nbsp;<em data-test-address-default>(default)</em>{{/if}}
</td> </td>
<td data-test-address> <td data-test-address>
{{address.Address}}:{{address.Port}} {{address.Address}}:{{address.Port}}
</td> </td>
{{/with}} {{/with}}
</BlockSlot> </BlockSlot>
</TabularCollection> </TabularCollection>
{{else}} {{else}}
<p> <p>
There are no additional addresses. There are no additional addresses.
</p> </p>
{{/if}} {{/if}}
</div>
</div> </div>

14
ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs
View File

@ -1,10 +1,8 @@
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel"> {{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}}
{{#if (gt proxy.Service.Proxy.Expose.Paths.length 0)}} <p>
<p> The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation.
The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation. </p>
</p> <Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} />
<Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} /> {{/if}}
{{/if}}
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs
View File

@ -9,7 +9,6 @@
) as |filters|}} ) as |filters|}}
{{#let (or sortBy "Status:asc") as |sort|}} {{#let (or sortBy "Status:asc") as |sort|}}
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#if (gt item.MeshChecks.length 0) }} {{#if (gt item.MeshChecks.length 0) }}
<input type="checkbox" id="toolbar-toggle" /> <input type="checkbox" id="toolbar-toggle" />
@ -54,7 +53,6 @@
</collection.Empty> </collection.Empty>
</DataCollection> </DataCollection>
</div>
</div> </div>
{{/let}} {{/let}}
{{/let}} {{/let}}

4
ui/packages/consul-ui/app/templates/dc/services/instance/metadata.hbs
View File

@ -1,5 +1,4 @@
<div id="meta" class="tab-section"> <div class="tab-section">
<div role="tabpanel">
<section class="tags"> <section class="tags">
<h3>Tags</h3> <h3>Tags</h3>
{{#if (gt item.Tags.length 0) }} {{#if (gt item.Tags.length 0) }}
@ -28,5 +27,4 @@
</EmptyState> </EmptyState>
{{/if}} {{/if}}
</section> </section>
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/instance/upstreams.hbs
View File

@ -1,5 +1,4 @@
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#let (hash {{#let (hash
searchproperties=(if (not-eq searchproperty undefined) searchproperties=(if (not-eq searchproperty undefined)
(split searchproperty ',') (split searchproperty ',')
@ -49,5 +48,4 @@
</DataCollection> </DataCollection>
{{/let}} {{/let}}
{{/let}} {{/let}}
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs
View File

@ -1,5 +1,4 @@
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#let (hash {{#let (hash
statuses=(if status (split status ',') undefined) statuses=(if status (split status ',') undefined)
sources=(if source (split source ',') undefined) sources=(if source (split source ',') undefined)
@ -54,5 +53,4 @@
</DataCollection> </DataCollection>
{{/let}} {{/let}}
{{/let}} {{/let}}
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs
View File

@ -22,7 +22,6 @@ as |api|>
) as |filters|}} ) as |filters|}}
{{#let (or sortBy "Action:asc") as |sort|}} {{#let (or sortBy "Action:asc") as |sort|}}
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
<Portal @target="app-view-actions"> <Portal @target="app-view-actions">
<a data-test-create href={{href-to 'dc.services.show.intentions.create'}} class="type-create">Create</a> <a data-test-create href={{href-to 'dc.services.show.intentions.create'}} class="type-create">Create</a>
</Portal> </Portal>
@ -78,7 +77,6 @@ as |api|>
</DataCollection> </DataCollection>
</BlockSlot> </BlockSlot>
</DataWriter> </DataWriter>
</div>
</div> </div>
{{/let}} {{/let}}
{{/let}} {{/let}}

10
ui/packages/consul-ui/app/templates/dc/services/show/routing.hbs
View File

@ -1,9 +1,7 @@
<EventSource @src={{chain}} /> <EventSource @src={{chain}} />
<div id="routing" class="tab-section"> <div class="tab-section">
<div role="tabpanel"> <Consul::DiscoveryChain
<Consul::DiscoveryChain @chain={{chain.Chain}}
@chain={{chain.Chain}} />
/>
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/show/services.hbs
View File

@ -1,6 +1,5 @@
<EventSource @src={{gatewayServices}} /> <EventSource @src={{gatewayServices}} />
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#let (hash {{#let (hash
instances=(if instance (split instance ',') undefined) instances=(if instance (split instance ',') undefined)
searchproperties=(if (not-eq searchproperty undefined) searchproperties=(if (not-eq searchproperty undefined)
@ -55,5 +54,4 @@
</DataCollection> </DataCollection>
{{/let}} {{/let}}
{{/let}} {{/let}}
</div>
</div> </div>

4
ui/packages/consul-ui/app/templates/dc/services/show/tags.hbs
View File

@ -1,5 +1,4 @@
<div id="tags" class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#let (flatten (map-by "Tags" items)) as |tags|}} {{#let (flatten (map-by "Tags" items)) as |tags|}}
{{#if (gt tags.length 0) }} {{#if (gt tags.length 0) }}
<TagList @item={{hash Tags=tags}} /> <TagList @item={{hash Tags=tags}} />
@ -13,5 +12,4 @@
</EmptyState> </EmptyState>
{{/if}} {{/if}}
{{/let}} {{/let}}
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
View File

@ -1,6 +1,5 @@
<EventSource @src={{topology}} /> <EventSource @src={{topology}} />
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#if (and (eq topology.Upstreams.length 0) (eq topology.Downstreams.length 0))}} {{#if (and (eq topology.Upstreams.length 0) (eq topology.Downstreams.length 0))}}
<EmptyState> <EmptyState>
<BlockSlot @name="header"> <BlockSlot @name="header">
@ -37,5 +36,4 @@
@oncreate={{route-action 'createIntention'}} @oncreate={{route-action 'createIntention'}}
/> />
{{/if}} {{/if}}
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs
View File

@ -1,6 +1,5 @@
<EventSource @src={{gatewayServices}} /> <EventSource @src={{gatewayServices}} />
<div class="tab-section"> <div class="tab-section">
<div role="tabpanel">
{{#let (hash {{#let (hash
instances=(if instance (split instance ',') undefined) instances=(if instance (split instance ',') undefined)
searchproperties=(if (not-eq searchproperty undefined) searchproperties=(if (not-eq searchproperty undefined)
@ -55,5 +54,4 @@
</DataCollection> </DataCollection>
{{/let}} {{/let}}
{{/let}} {{/let}}
</div>
</div> </div>

2
ui/packages/consul-ui/app/templates/settings.hbs
View File

@ -10,7 +10,7 @@
@type="info" @type="info"
as |notice|> as |notice|>
<notice.Header> <notice.Header>
<h3>Local Storage</h3> <h2>Local Storage</h2>
</notice.Header> </notice.Header>
<notice.Body> <notice.Body>
<p> <p>

2
ui/packages/consul-ui/tests/pages/dc/nodes/show.js
View File

@ -29,6 +29,6 @@ export default function(
actions: clickable('label'), actions: clickable('label'),
...deletable(), ...deletable(),
}), }),
metadata: collection('#metadata [data-test-tabular-row]', {}), metadata: collection('.consul-metadata-list [data-test-tabular-row]', {}),
}; };
} }

2
ui/packages/consul-ui/tests/pages/dc/services/instance.js
View File

@ -21,7 +21,7 @@ export default function(
exposedPaths: collection('[data-test-proxy-exposed-paths] > tbody tr', { exposedPaths: collection('[data-test-proxy-exposed-paths] > tbody tr', {
combinedAddress: text('[data-test-combined-address]'), combinedAddress: text('[data-test-combined-address]'),
}), }),
addresses: collection('#addresses [data-test-tabular-row]', { addresses: collection('.consul-tagged-addresses [data-test-tabular-row]', {
address: text('[data-test-address]'), address: text('[data-test-address]'),
}), }),
metadata: collection('.metadata [data-test-tabular-row]', {}), metadata: collection('.metadata [data-test-tabular-row]', {}),