mirror of https://github.com/hashicorp/consul
Browse Source
* Create and use collapsible notices * Refactor collapsible-notices * Split up the topology acceptance tests * Add acceptance tests for tproxy notices * Add component file * Adds additional TProxy notices tests * Adds conditional to only show collapsable if more than 2 notices are present * Adds changelog * Refactorting the conditonal for collapsing the notices * Renaming undefinedIntention to be notDefinedIntention * Refactor testspull/10270/head
Kenia
4 years ago
committed by
GitHub
17 changed files with 419 additions and 68 deletions
@ -0,0 +1,3 @@
|
||||
```release-note:feature |
||||
ui: Create a collapsible notices component for the Topology tab |
||||
``` |
||||
@ -0,0 +1,66 @@
|
||||
# CollapsibleNotices |
||||
|
||||
Used as a wrapper to collapse the details of `<Notices/>`. |
||||
|
||||
```hbs preview-template |
||||
<CollapsibleNotices> |
||||
<Notice |
||||
@type="error" |
||||
role="alert" |
||||
as |notice|> |
||||
<notice.Header> |
||||
<h3>Header</h3> |
||||
</notice.Header> |
||||
<notice.Body> |
||||
<p> |
||||
Body |
||||
</p> |
||||
</notice.Body> |
||||
</Notice> |
||||
<Notice |
||||
@type="info" |
||||
as |notice|> |
||||
<notice.Header> |
||||
<h3>Header</h3> |
||||
</notice.Header> |
||||
<notice.Body> |
||||
<p> |
||||
Body |
||||
</p> |
||||
</notice.Body> |
||||
<notice.Footer> |
||||
<p> |
||||
Footer |
||||
</p> |
||||
</notice.Footer> |
||||
</Notice> |
||||
<Notice |
||||
@type="warning" |
||||
as |notice|> |
||||
<notice.Header> |
||||
<h3>Header</h3> |
||||
</notice.Header> |
||||
<notice.Body> |
||||
<p> |
||||
Body |
||||
</p> |
||||
</notice.Body> |
||||
<notice.Footer> |
||||
<p> |
||||
Footer |
||||
</p> |
||||
</notice.Footer> |
||||
</Notice> |
||||
</CollapsibleNotices> |
||||
|
||||
``` |
||||
|
||||
## Arguments |
||||
|
||||
No arguments required. Wrap this component around the needed notices. |
||||
|
||||
## See |
||||
|
||||
- [Template Source Code](./index.hbs) |
||||
|
||||
--- |
||||
@ -0,0 +1,10 @@
|
||||
<div class="collapsible-notices {{if this.collapsed 'collapsed'}}"> |
||||
<div class="notices"> |
||||
{{yield}} |
||||
</div> |
||||
{{#if this.collapsed}} |
||||
<button type="button" class="expand" {{on 'click' (set this 'collapsed' false)}}>{{t "components.app.collapsible-notices.expand"}}</button> |
||||
{{else}} |
||||
<button type="button" class="collapse" {{on 'click' (set this 'collapsed' true)}}>{{t "components.app.collapsible-notices.collapse"}}</button> |
||||
{{/if}} |
||||
</div> |
||||
@ -0,0 +1,3 @@
|
||||
import Component from '@glimmer/component'; |
||||
|
||||
export default class CollapsibleNotices extends Component {} |
||||
@ -0,0 +1,31 @@
|
||||
.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: $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; |
||||
} |
||||
} |
||||
@ -0,0 +1,50 @@
|
||||
@setupApplicationTest |
||||
Feature: dc / services / show / topology / metrics |
||||
Background: |
||||
Given 1 datacenter model with the value "datacenter" |
||||
And the local datacenter is "datacenter" |
||||
And 1 intention model from yaml |
||||
--- |
||||
SourceNS: default |
||||
SourceName: web |
||||
DestinationNS: default |
||||
DestinationName: db |
||||
ID: intention-id |
||||
--- |
||||
And 1 node model |
||||
And 1 service model from yaml |
||||
--- |
||||
- Service: |
||||
Name: web |
||||
Kind: ~ |
||||
--- |
||||
And 1 topology model from yaml |
||||
--- |
||||
Downstreams: [] |
||||
Upstreams: |
||||
- Name: db |
||||
Namespace: default |
||||
Datacenter: datacenter |
||||
Intention: {} |
||||
--- |
||||
Scenario: Metrics is not enabled with prometheus provider |
||||
When I visit the service page for yaml |
||||
--- |
||||
dc: datacenter |
||||
service: web |
||||
--- |
||||
And I don't see the "[data-test-sparkline]" element |
||||
Scenario: Metrics is enabled with prometheus provider |
||||
Given 1 datacenter model with the value "datacenter" |
||||
And the local datacenter is "datacenter" |
||||
And ui_config from yaml |
||||
--- |
||||
metrics_proxy_enabled: true |
||||
metrics_provider: 'prometheus' |
||||
--- |
||||
When I visit the service page for yaml |
||||
--- |
||||
dc: datacenter |
||||
service: web |
||||
--- |
||||
And I see the "[data-test-sparkline]" element |
||||
@ -0,0 +1,101 @@
|
||||
@setupApplicationTest |
||||
Feature: dc / services / show / topology / tproxy |
||||
Background: |
||||
Given 1 datacenter model with the value "datacenter" |
||||
And the local datacenter is "datacenter" |
||||
And 1 intention model from yaml |
||||
--- |
||||
SourceNS: default |
||||
SourceName: web |
||||
DestinationNS: default |
||||
DestinationName: db |
||||
ID: intention-id |
||||
--- |
||||
And 1 node model |
||||
And 1 service model from yaml |
||||
--- |
||||
- Service: |
||||
Name: web |
||||
Kind: ~ |
||||
--- |
||||
Scenario: Deafult allow is set to true |
||||
Given 1 topology model from yaml |
||||
--- |
||||
FilteredByACLs: false |
||||
TransparentProxy: false |
||||
DefaultAllow: true |
||||
WildcardIntention: false |
||||
--- |
||||
When I visit the service page for yaml |
||||
--- |
||||
dc: datacenter |
||||
service: web |
||||
--- |
||||
Then the url should be /datacenter/services/web/topology |
||||
And I see the tabs.topologyTab.defaultAllowNotice object |
||||
Scenario: WildcardIntetions and FilteredByACLs are set to true |
||||
Given 1 topology model from yaml |
||||
--- |
||||
FilteredByACLs: true |
||||
TransparentProxy: false |
||||
DefaultAllow: false |
||||
WildcardIntention: true |
||||
--- |
||||
When I visit the service page for yaml |
||||
--- |
||||
dc: datacenter |
||||
service: web |
||||
--- |
||||
Then the url should be /datacenter/services/web/topology |
||||
And I see the tabs.topologyTab.filteredByACLs object |
||||
And I see the tabs.topologyTab.wildcardIntention object |
||||
Scenario: TProxy for a downstream is set to false |
||||
Given 1 topology model from yaml |
||||
--- |
||||
FilteredByACLs: false |
||||
TransparentProxy: false |
||||
DefaultAllow: false |
||||
WildcardIntention: false |
||||
Downstreams: |
||||
- Name: db |
||||
Namespace: default |
||||
Datacenter: datacenter |
||||
Intention: |
||||
Allowed: true |
||||
Source: specific-intention |
||||
TransparentProxy: false |
||||
--- |
||||
When I visit the service page for yaml |
||||
--- |
||||
dc: datacenter |
||||
service: web |
||||
--- |
||||
Then the url should be /datacenter/services/web/topology |
||||
And I see the tabs.topologyTab.notDefinedIntention object |
||||
Scenario: TProxy for a downstream is set to true |
||||
Given 1 topology model from yaml |
||||
--- |
||||
FilteredByACLs: false |
||||
TransparentProxy: false |
||||
DefaultAllow: false |
||||
WildcardIntention: false |
||||
Downstreams: |
||||
- Name: db |
||||
Namespace: default |
||||
Datacenter: datacenter |
||||
Intention: |
||||
Allowed: true |
||||
Source: specific-intention |
||||
TransparentProxy: true |
||||
--- |
||||
When I visit the service page for yaml |
||||
--- |
||||
dc: datacenter |
||||
service: web |
||||
--- |
||||
Then the url should be /datacenter/services/web/topology |
||||
And I don't see the tabs.topologyTab.notDefinedIntention object |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import steps from '../../../steps'; |
||||
import steps from '../../../../steps'; |
||||
|
||||
// step definitions that are shared between features should be moved to the
|
||||
// tests/acceptance/steps/steps.js file
|
||||
@ -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); |
||||
}); |
||||
} |
||||
@ -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); |
||||
}); |
||||
} |
||||
Loading…
Reference in new issue