luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Redesign - Service List page with Gateways (#7781) 

* Return all services except Proxies

* Add Gateway icon to the codebase

* Create and implement ConsulExternalSource component

* Fix tests to work with new mock data and add a Gateway test

* Update consul-api-double to 2.14.3
This commit is contained in:
Kenia 2020-05-05 12:29:51 -04:00 committed by John Cowen
parent 1d65f9e41a
commit 3e6e16d54f
23 changed files with 179 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-v2/app/components/consul-external-source/index.hbs
View File

@ -6,7 +6,7 @@
(component 'consul-external-source' item=item _externalSource=externalSource)
}}
{{else}}
<span data-test-external-source={{externalSource}} class="consul-external-source source-{{externalSource}}">
<span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
{{#if (eq externalSource 'aws')}}
<span>Registered via {{uppercase externalSource}}</span>
{{else}}

11
ui-v2/app/components/consul-kind/index.hbs Normal file
View File

@ -0,0 +1,11 @@
{{#if item.Kind}}
{{#if (has-block)}}
{{yield
(component 'consul-kind' item=item)
}}
{{else}}
<span data-test-kind={{item.Kind}} class="consul-kind gateway">
<span>{{titleize (humanize item.Kind)}}</span>
</span>
{{/if}}
{{/if}}

5
ui-v2/app/components/consul-kind/index.js Normal file
View File

@ -0,0 +1,5 @@
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});

5
ui-v2/app/components/consul-service-list/index.hbs
View File

@ -5,6 +5,11 @@
{{item.Name}}
</a>
<ul>
<ConsulKind @item={{item}} as |Kind|>
<li>
<Kind />
</li>
</ConsulKind>
<ConsulExternalSource @item={{item}} as |ExternalSource|>
<li>
<ExternalSource />

2
ui-v2/app/controllers/dc/services/index.js
View File

@ -21,7 +21,7 @@ export default Controller.extend(WithEventSource, WithSearching, {
}),
services: computed('items.[]', function() {
return this.items.filter(function(item) {
return typeof item.Kind === 'undefined';
return item.Kind !== 'connect-proxy';
});
}),
proxies: computed('items.[]', function() {

20
ui-v2/app/styles/base/components/pill/layout.scss
View File

@ -11,3 +11,23 @@
margin-right: 4px;
font-size: 0;
}
%reduced-pill {
background-color: $gray-100;
padding: 0 8px;
border-radius: $decor-radius-100;
height: 18px;
line-height: 0.7rem;
}
%reduced-pill > span {
font-size: 14px;
font-weight: normal;
position: relative;
color: $gray-500;
}
%reduced-pill::before {
width: 14px;
height: 14px;
margin-right: 2px;
position: relative;
top: 2px;
}

22
ui-v2/app/styles/base/components/pill/skin.scss
View File

@ -12,3 +12,25 @@
width: 10px;
height: 10px;
}
%reduced-pill::before {
@extend %as-pseudo;
}
%reduced-pill.kubernetes::before {
@extend %with-kubernetes-logo-color-icon;
}
%reduced-pill.terraform::before {
@extend %with-terraform-logo-color-icon;
}
%reduced-pill.nomad::before {
@extend %with-nomad-logo-color-icon;
}
%reduced-pill.consul::before {
@extend %with-consul-logo-color-icon;
}
%reduced-pill.aws::before {
@extend %with-logo-aws-color-icon;
}
%reduced-pill.gateway::before {
@extend %with-gateway-mask;
background-color: $gray-500;
}

1
ui-v2/app/styles/base/icons/base-variables.scss
View File

@ -61,6 +61,7 @@ $flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="
$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
$folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%231563ff"/></svg>');
$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
$gateway-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.009 19.08C20.7 14.366 19.214 3 12.045 3c-4.068 0-6.306 3.658-7.538 7.684h2.111c.477-1.412 1.073-2.675 1.806-3.652.997-1.33 2.149-2.022 3.62-2.022 1.472 0 2.624.692 3.621 2.022 1.04 1.387 1.807 3.352 2.344 5.5.53 2.12.8 4.265.936 5.898.03.35-.25.65-.602.65H5.746a.602.602 0 01-.602-.65c.097-1.164.262-2.588.541-4.077H3.642a44.169 44.169 0 00-.561 4.726c-.073 1.109.82 2.01 1.93 2.01h14.066c1.111 0 2.004-.901 1.932-2.01zm-8.152-5.695H3V11.71h9.857L9.859 8.703l1.18-1.18 5.025 5.024-5.024 5.025-1.181-1.181 2.998-3.006z" fill="%231F2124"/></svg>');
$gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.856 6.447c.29.58.643 1.1 1.062 1.553H4a2 2 0 0 0-2 2v2h9V9h2v3h9v-2a2 2 0 0 0-2-2h-2.918c.419-.453.773-.973 1.062-1.553C18.79 5.158 19 3.891 19 3V2h-1c-2.89 0-4.87 1.239-6 3.278C10.87 3.238 8.89 2 6 2H5v1c0 .891.211 2.158.856 3.447zM11 14H3v6c0 1.473.895 2 2 2h6v-8zm2 8v-8h8v6c0 1.473-.895 2-2 2h-6zm3.356-16.447c.23-.463.396-.96.504-1.464-1.567.263-2.584 1.094-3.216 2.358-.185.37-.327.763-.432 1.163l-.072.3c1.567-.262 2.584-1.093 3.216-2.357zM7.14 4.089c.108.504.273 1.001.504 1.464.632 1.264 1.648 2.095 3.216 2.358l-.072-.301a6.008 6.008 0 0 0-.432-1.163C9.724 5.183 8.708 4.352 7.14 4.09z" fill="%23000"/></svg>');
$gift-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.856 6.447c.29.58.643 1.1 1.062 1.553H4a2 2 0 0 0-2 2v4h1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h1v-4a2 2 0 0 0-2-2h-2.918c.419-.453.773-.973 1.062-1.553C18.79 5.158 19 3.891 19 3V2h-1c-2.89 0-4.87 1.239-6 3.278C10.87 3.238 8.89 2 6 2H5v1c0 .891.211 2.158.856 3.447zM13 20h6v-6h-6v6zm0-8h7v-2h-7v2zm-2-2H4v2h7v-2zm0 4v6H5v-6h6zm5.356-8.447c.23-.463.396-.96.504-1.464-1.567.263-2.584 1.094-3.216 2.358-.185.37-.327.763-.432 1.163l-.072.3c1.567-.262 2.584-1.093 3.216-2.357zM7.14 4.089c.108.504.273 1.001.504 1.464.632 1.264 1.648 2.095 3.216 2.358l-.072-.301a6.008 6.008 0 0 0-.432-1.163C9.724 5.183 8.708 4.352 7.14 4.09z" fill="%23000"/></svg>');
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543zM8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543zm0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543A1.564 1.564 0 0 1 7.03 5.571c0-.835.707-1.542 1.542-1.542zm10.286 4.114a2.562 2.562 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224z" fill="%23000"/></svg>');

10
ui-v2/app/styles/base/icons/icon-placeholders.scss
View File

@ -618,6 +618,16 @@
mask-image: $folder-outline-svg;
}
%with-gateway-icon {
@extend %with-icon;
background-image: $gateway-svg;
}
%with-gateway-mask {
@extend %with-mask;
-webkit-mask-image: $gateway-svg;
mask-image: $gateway-svg;
}
%with-gift-fill-icon {
@extend %with-icon;
background-image: $gift-fill-svg;

35
ui-v2/app/styles/components/consul-external-source.scss
View File

@ -1,35 +0,0 @@
.consul-external-source {
background-color: $gray-100;
padding: 0 8px;
border-radius: $decor-radius-100;
height: 18px;
line-height: 0.7rem;
}
.consul-external-source > span {
font-size: 14px;
font-weight: normal;
position: relative;
color: $gray-500;
}
.consul-external-source::before {
width: 14px;
height: 14px;
margin-right: 2px;
position: relative;
top: 2px;
}
.source-kubernetes::before {
@extend %with-kubernetes-logo-color-icon, %as-pseudo;
}
.source-terraform::before {
@extend %with-terraform-logo-color-icon, %as-pseudo;
}
.source-nomad::before {
@extend %with-nomad-logo-color-icon, %as-pseudo;
}
.source-consul::before {
@extend %with-consul-logo-color-icon, %as-pseudo;
}
.source-aws::before {
@extend %with-logo-aws-color-icon, %as-pseudo;
}

1
ui-v2/app/styles/components/index.scss
View File

@ -28,7 +28,6 @@
@import './discovery-chain';
@import './consul-intention-list';
@import './empty-state';
@import './consul-external-source';
@import './tabular-details';
@import './tabular-collection';
@import './list-collection';

5
ui-v2/app/styles/components/pill.scss
View File

@ -42,3 +42,8 @@ td.policy-management a::after {
@extend %with-star-icon, %as-pseudo;
margin-left: 3px;
}
.consul-external-source,
.consul-kind {
@extend %reduced-pill;
}

9
ui-v2/ember-cli-build.js
View File

@ -17,7 +17,14 @@ module.exports = function(defaults) {
includePolyfill: true,
},
'ember-cli-string-helpers': {
only: ['capitalize', 'lowercase', 'truncate', 'uppercase'],
only: [
'capitalize',
'lowercase',
'truncate',
'uppercase',
'humanize',
'titleize'
],
},
'ember-cli-math-helpers': {
only: ['div'],

12
ui-v2/tests/acceptance/components/catalog-filter.feature
View File

@ -127,29 +127,27 @@ Feature: components / catalog-filter
-------------------------------------------------
Scenario: Freetext filtering the service listing
Given 1 datacenter model with the value "dc-1"
And 6 service models from yaml
And 3 service models from yaml
---
- Name: Service-0
Tags: ['one', 'two', 'three']
ChecksPassing: 0
ChecksWarning: 0
ChecksCritical: 1
- Name: Service-0-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-1
Tags: ['two', 'three']
ChecksPassing: 0
ChecksWarning: 1
ChecksCritical: 0
- Name: Service-1-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-2
Tags: ['three']
ChecksPassing: 1
ChecksWarning: 0
ChecksCritical: 0
- Name: Service-2-proxy
Kind: 'connect-proxy'
Kind: ~
---
When I visit the services page for yaml

11
ui-v2/tests/acceptance/dc/error.feature
View File

@ -6,17 +6,14 @@ Feature: dc / error: Recovering from a dc 500 error
- dc-1
- dc-500
---
And 6 service models from yaml
And 3 service models from yaml
---
- Name: Service-0
- Name: Service-0-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-1
- Name: Service-1-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-2
- Name: Service-2-proxy
Kind: 'connect-proxy'
Kind: ~
---
And the url "/v1/internal/ui/services" responds with a 500 status
When I visit the services page for yaml

20
ui-v2/tests/acceptance/dc/nspaces/manage.feature
View File

@ -13,26 +13,20 @@ Feature: dc / nspaces / manage : Managing Namespaces
---
- dc-1
---
And 12 service models from yaml
And 6 service models from yaml
---
- Name: Service-0
- Name: Service-0-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-1
- Name: Service-1-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-2
- Name: Service-2-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-3
- Name: Service-3-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-4
- Name: Service-4-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-5
- Name: Service-5-proxy
Kind: 'connect-proxy'
Kind: ~
---
When I visit the services page for yaml

20
ui-v2/tests/acceptance/dc/services/dc-switch.feature
View File

@ -6,26 +6,20 @@ Feature: dc / services / dc-switch : Switching Datacenters
- dc-1
- dc-2
---
And 12 service models from yaml
And 6 service models from yaml
---
- Name: Service-0
- Name: Service-0-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-1
- Name: Service-1-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-2
- Name: Service-2-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-3
- Name: Service-3-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-4
- Name: Service-4-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-5
- Name: Service-5-proxy
Kind: 'connect-proxy'
Kind: ~
---
When I visit the services page for yaml

33
ui-v2/tests/acceptance/dc/services/index.feature
View File

@ -1,32 +1,37 @@
@setupApplicationTest
Feature: dc / services / index: List Services
Scenario:
Scenario: Viewing the service list page with services
Given 1 datacenter model with the value "dc-1"
And 10 service models from yaml
---
- Name: Service-0
ExternalSources:
- consul
Kind: ~
- Name: Service-0-proxy
Kind: 'connect-proxy'
- Name: Service-1
ExternalSources:
- nomad
Kind: ~
- Name: Service-1-proxy
Kind: 'connect-proxy'
- Name: Service-2
ExternalSources:
- terraform
Kind: ~
- Name: Service-2-proxy
Kind: 'connect-proxy'
- Name: Service-3
ExternalSources:
- kubernetes
Kind: ~
- Name: Service-3-proxy
Kind: 'connect-proxy'
- Name: Service-4
ExternalSources:
- aws
Kind: ~
- Name: Service-4-proxy
Kind: 'connect-proxy'
---
@ -46,4 +51,30 @@ Feature: dc / services / index: List Services
- kubernetes
- aws
---
Scenario: Viewing the service list page with gateways
Given 1 datacenter model with the value "dc-1"
And 3 service models from yaml
---
- Name: Service-0-proxy
Kind: 'connect-proxy'
- Name: Service-1-ingress-gateway
Kind: 'ingress-gateway'
- Name: Service-2-terminating-gateway
Kind: 'terminating-gateway'
---
When I visit the services page for yaml
---
dc: dc-1
---
Then the url should be /dc-1/services
And the title should be "Services - Consul"
Then I see 2 service models
And I see kind on the services like yaml
---
- ingress-gateway
- terminating-gateway
---

11
ui-v2/tests/acceptance/dc/services/list.feature
View File

@ -2,17 +2,14 @@
Feature: dc / services / list
Scenario: Listing service
Given 1 datacenter model with the value "dc-1"
And 6 service models from yaml
And 3 service models from yaml
---
- Name: Service-0
- Name: Service-0-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-1
- Name: Service-1-proxy
Kind: 'connect-proxy'
Kind: ~
- Name: Service-2
- Name: Service-2-proxy
Kind: 'connect-proxy'
Kind: ~
---
When I visit the services page for yaml
---

2
ui-v2/tests/acceptance/page-navigation.feature
View File

@ -42,7 +42,7 @@ Feature: page-navigation
Where:
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| Item | Model | URL | Endpoint | Back |
| service | services | /dc-1/services/service-0/instances | /v1/discovery-chain/service-0?dc=dc-1&ns=@namespace | /dc-1/services |
| service | services | /dc-1/services/service-0-terminating-gateway/instances | /v1/discovery-chain/service-0-terminating-gateway?dc=dc-1&ns=@namespace | /dc-1/services |
| node | nodes | /dc-1/nodes/node-0/health-checks | /v1/session/node/node-0?dc=dc-1&ns=@namespace | /dc-1/nodes |
| kv | kvs | /dc-1/kv/0-key-value/edit | /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace | /dc-1/kv |
# | acl | acls | /dc-1/acls/anonymous | /v1/acl/info/anonymous?dc=dc-1 | /dc-1/acls |

26
ui-v2/tests/integration/components/consul-kind.js Normal file
View File

@ -0,0 +1,26 @@
import { module, skip } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | consul-kind', function(hooks) {
setupRenderingTest(hooks);
skip('it renders', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });
await render(hbs`<ConsulKind />`);
assert.equal(this.element.textContent.trim(), '');
// Template block usage:
await render(hbs`
<ConsulKind>
template block text
</ConsulKind>
`);
assert.equal(this.element.textContent.trim(), 'template block text');
});
});

1
ui-v2/tests/pages/dc/services/index.js
View File

@ -3,6 +3,7 @@ export default function(visitable, clickable, text, attribute, collection, page,
name: text('a span:nth-child(2)'),
service: clickable('a'),
externalSource: attribute('data-test-external-source', '[data-test-external-source]'),
kind: attribute('data-test-kind', '[data-test-kind]'),
};
return {
visit: visitable('/:dc/services'),

6
ui-v2/yarn.lock
View File

@ -1211,9 +1211,9 @@
js-yaml "^3.13.1"
"@hashicorp/consul-api-double@^2.6.2":
version "2.14.1"
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.14.1.tgz#c4beefa853368319324a6092fc4eb4371f9f8ffc"
integrity sha512-ZJtjkAuFHqcLTRjVaqx4NYnkZ17v5/DjaDhjH/kRVBx0gXcyKUEeMe34g69PfqgRo6ZYMVYMbSDq0JHTGcIShQ==
version "2.14.3"
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.14.3.tgz#57974cd877cd457d660f1168abdfd0b3fc79ea1b"
integrity sha512-3E7aBFbeWWdCk3f07x5z3puGfV3DEyxrpElWD/J4NWxZIgJ92iYV2LKkLZ5u19UGAI5lVdhT3wYaBOqmC725pA==
"@hashicorp/ember-cli-api-double@^3.0.2":
version "3.0.2"