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

Merge pull request #4387 from hashicorp/feature/ui-service-ids 

UI - Show/search by service ids
This commit is contained in:
John Cowen 2018-07-13 09:38:35 +01:00 committed by GitHub
parent 5de7879e1d f4c566b8af
commit d6a5d2b9df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 90 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui-v2/app/components/healthchecked-resource.js
View File

@ -15,6 +15,9 @@ export default Component.extend({
}),
gridRowEnd: computed('UnhealthyChecks', function() {
let spans = 3;
if (get(this, 'service')) {
spans++;
}
if (get(this, 'healthy.length') > 0) {
spans++;
}

3
ui-v2/app/controllers/dc/nodes/show.js
View File

@ -23,6 +23,9 @@ export default Controller.extend(WithFiltering, {
get(item, 'Service')
.toLowerCase()
.indexOf(term) !== -1 ||
get(item, 'ID')
.toLowerCase()
.indexOf(term) !== -1 ||
get(item, 'Port')
.toString()
.toLowerCase()

8
ui-v2/app/controllers/dc/services/show.js
View File

@ -20,10 +20,16 @@ export default Controller.extend(WithHealthFiltering, {
});
}),
filter: function(item, { s = '', status = '' }) {
const term = s.toLowerCase();
return (
get(item, 'Node.Node')
.toLowerCase()
.indexOf(s.toLowerCase()) !== -1 && hasStatus(get(item, 'Checks'), status)
.indexOf(term) !== -1 ||
(get(item, 'Service.ID')
.toLowerCase()
.indexOf(term) !== -1 &&
hasStatus(get(item, 'Checks'), status))
);
},
});

19
ui-v2/app/styles/components/healthchecked-resource.scss
View File

@ -14,6 +14,7 @@
border-top: 1px solid;
}
%healthchecked-resource header span,
%healthchecked-resource header em,
%healthchecked-resource li:not(:last-child) span {
overflow: hidden;
display: inline-block;
@ -34,14 +35,11 @@
border-radius: $radius-small;
}
%healthchecked-resource header {
margin-bottom: 2em;
position: relative;
}
%healthchecked-resource header strong {
position: absolute;
bottom: -0.6em;
left: 15px;
}
%healthchecked-resource a,
%healthchecked-resource header a > * {
@ -85,12 +83,25 @@
.healthy .healthchecked-resource li a {
padding-left: 0;
}
%healthchecked-resource header strong {
top: 2.8em;
left: 15px;
}
%healthchecked-resource header span {
margin-bottom: 1.75em;
}
%healthchecked-resource header a {
padding: 12px 15px;
}
.unhealthy .healthchecked-resource header a {
padding-bottom: 15px;
}
.unhealthy .healthchecked-resource header.with-service a {
padding-bottom: 25px;
}
%healthchecked-resource li a {
padding: 3px 15px;
padding-top: 5px;
padding-top: 4px;
padding-left: 39px;
height: 31px;
}

5
ui-v2/app/styles/core/typography.scss
View File

@ -41,10 +41,13 @@ th,
font-weight: $weight-medium;
}
main label a[rel*='help'],
td:first-child em,
%healthchecked-resource strong {
font-weight: $weight-normal;
}
%form-element > em {
%form-element > em,
td:first-child em,
%healthchecked-resource header em {
font-style: normal;
}
%form-element > span {

3
ui-v2/app/templates/components/healthchecked-resource.hbs
View File

@ -1,7 +1,8 @@
<header>
<header class={{if service 'with-service' }}>
<strong>{{address}}</strong>
<a href={{href}}>
<span>{{name}}</span>
<em>{{service}}</em>
</a>
</header>
<ul>

2
ui-v2/app/templates/dc/nodes/-services.hbs
View File

@ -15,7 +15,7 @@
{{/block-slot}}
{{#block-slot 'row'}}
<td data-test-service-name="{{item.Service}}">
<a href={{href-to 'dc.services.show' item.Service }}>{{item.Service}}</a>
<a href={{href-to 'dc.services.show' item.Service }}>{{item.Service}}{{#if (not-eq item.ID item.Service) }} <em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}</a>
</td>
<td data-test-service-port="{{item.Port}}" class="port">
{{item.Port}}

2
ui-v2/app/templates/dc/nodes/index.hbs
View File

@ -35,7 +35,7 @@
<h2>Healthy Nodes</h2>
{{#list-collection
items=healthy
cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index|
cell-layout=(percentage-columns-layout healthy.length columns 92) as |item index|
}}
{{healthchecked-resource
data-test-node=item.Node

4
ui-v2/app/templates/dc/services/show.hbs
View File

@ -36,6 +36,7 @@
data-test-node=item.Node.Node
href=(href-to 'dc.nodes.show' item.Node.Node)
name=item.Node.Node
service=item.Service.ID
address=(concat item.Node.Address ':' item.Service.Port)
checks=item.Checks
}}
@ -49,12 +50,13 @@
<h2>Healthy Nodes</h2>
{{#list-collection
items=healthy
cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index|
cell-layout=(percentage-columns-layout healthy.length columns 113) as |item index|
}}
{{healthchecked-resource
href=(href-to 'dc.nodes.show' item.Node.Node)
data-test-node=item.Node.Node
name=item.Node.Node
service=item.Service.ID
address=(concat item.Node.Address ':' item.Service.Port)
checks=item.Checks
status=item.Checks.[0].Status

2
ui-v2/package.json
View File

@ -30,7 +30,7 @@
]
},
"devDependencies": {
"@hashicorp/consul-api-double": "^1.2.0",
"@hashicorp/consul-api-double": "^1.4.0",
"@hashicorp/ember-cli-api-double": "^1.3.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"base64-js": "^1.3.0",

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

@ -65,7 +65,7 @@ Feature: components / catalog-filter
---
- ID: node-0
---
When I visit the node page for yaml
When I visit the [Page] page for yaml
---
dc: dc1
node: node-0
@ -81,8 +81,39 @@ Feature: components / catalog-filter
---
And I see 1 [Model] model
And I see 1 [Model] model with the port "65535"
Then I fill in with yaml
---
s: service-0-with-id
---
And I see 1 [Model] model
And I see 1 [Model] model with the id "service-0-with-id"
Where:
-------------------------------------------------
| Model | Page | Url |
| service | node | /dc-1/nodes/node-0 |
-------------------------------------------------
Scenario: Filtering [Model] in [Page]
Given 1 datacenter model with the value "dc1"
And 2 [Model] models from yaml
---
- ID: node-0
---
When I visit the [Page] page for yaml
---
dc: dc1
service: service-0
---
Then I fill in with yaml
---
s: service-0-with-id
---
And I see 1 [Model] model
Then I see id on the unhealthy like yaml
---
- service-0-with-id
---
Where:
-------------------------------------------------
| Model | Page | Url |
| nodes | service | /dc-1/services/service-0 |
-------------------------------------------------

12
ui-v2/tests/acceptance/dc/services/show.feature
View File

@ -28,14 +28,17 @@ Feature: dc / services / show: Show Service
- Checks:
- Status: passing
Service:
ID: passing-service-8080
Port: 8080
Node:
Address: 1.1.1.1
- Service:
ID: service-8000
Port: 8000
Node:
Address: 2.2.2.2
- Service:
ID: service-8888
Port: 8888
Node:
Address: 3.3.3.3
@ -54,3 +57,12 @@ Feature: dc / services / show: Show Service
- "2.2.2.2:8000"
- "3.3.3.3:8888"
---
Then I see id on the healthy like yaml
---
- "passing-service-8080"
---
Then I see id on the unhealthy like yaml
---
- "service-8000"
- "service-8888"
---

1
ui-v2/tests/pages/dc/nodes/show.js
View File

@ -6,6 +6,7 @@ export default function(visitable, deletable, clickable, attribute, collection,
name: attribute('data-test-node-healthcheck'),
}),
services: collection('#services [data-test-tabular-row]', {
id: attribute('data-test-service-id', '[data-test-service-id]'),
port: attribute('data-test-service-port', '.port'),
}),
sessions: collection(

2
ui-v2/tests/pages/dc/services/show.js
View File

@ -7,10 +7,12 @@ export default function(visitable, attribute, collection, text, filter) {
healthy: collection('[data-test-healthy] [data-test-node]', {
name: attribute('data-test-node'),
address: text('header strong'),
id: text('header em'),
}),
unhealthy: collection('[data-test-unhealthy] [data-test-node]', {
name: attribute('data-test-node'),
address: text('header strong'),
id: text('header em'),
}),
filter: filter,
};

6
ui-v2/yarn.lock
View File

@ -81,9 +81,9 @@
faker "^4.1.0"
js-yaml "^3.10.0"
"@hashicorp/consul-api-double@^1.2.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.3.0.tgz#fded48ca4db1e63c66e39b4433b2169b6add69ed"
"@hashicorp/consul-api-double@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.4.0.tgz#6b5222263f2acf1539d0e375c1a935d50217b9ab"
"@hashicorp/ember-cli-api-double@^1.3.0":
version "1.3.0"