Show Service.ID's throughout the app, allow searching by Service.ID

1. In the Services > Services detail page for both healthy and unhealthy
nodes, also add searching by Service.ID here
2. In the Nodes > Node detail > [Services] tab only if its different
from the Service name, add searching by Service.ID here
This commit is contained in:
John Cowen 2018-07-12 13:36:47 +01:00
parent 9b88a25a81
commit 2e2e942f3f
9 changed files with 39 additions and 10 deletions

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++;
}

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()

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))
);
},
});

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;
}

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 {

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>

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}}

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

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