-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ui: add service health viz to table #14369
Changes from 9 commits
d29ab35
a3fc2fa
377af02
034c8a1
19c601e
4af0774
4002b40
3b82250
7cbbf8c
30b0dfe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { computed } from '@ember/object'; | ||
import DistributionBar from './distribution-bar'; | ||
import { attributeBindings } from '@ember-decorators/component'; | ||
import classic from 'ember-classic-decorator'; | ||
|
||
@classic | ||
@attributeBindings('data-test-service-status-bar') | ||
export default class ServiceStatusBar extends DistributionBar { | ||
layoutName = 'components/distribution-bar'; | ||
|
||
services = null; | ||
name = null; | ||
|
||
'data-test-service-status-bar' = true; | ||
|
||
@computed('services.{}', 'name') | ||
get data() { | ||
const service = this.services && this.services.get(this.name); | ||
|
||
if (!service) { | ||
return []; | ||
} | ||
|
||
const pending = service.pending || 0; | ||
const failing = service.failure || 0; | ||
const success = service.success || 0; | ||
|
||
const [grey, red, green] = ['queued', 'failed', 'complete']; | ||
|
||
return [ | ||
{ | ||
label: 'Pending', | ||
value: pending, | ||
className: grey, | ||
}, | ||
{ | ||
label: 'Failing', | ||
value: failing, | ||
className: red, | ||
}, | ||
{ | ||
label: 'Success', | ||
value: success, | ||
className: green, | ||
}, | ||
]; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -276,6 +276,9 @@ | |
<td> | ||
Upstreams | ||
</td> | ||
<td> | ||
Health Check Status | ||
</td> | ||
</t.head> | ||
<t.body as |row|> | ||
<tr data-test-service> | ||
|
@@ -301,6 +304,13 @@ | |
{{upstream.destinationName}}:{{upstream.localBindPort}} | ||
{{/each}} | ||
</td> | ||
<td data-test-service-health> | ||
{{#if (not row.model.connect)}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead, you probably want to do an |
||
<div class="inline-chart"> | ||
<ServiceStatusBar @services={{this.serviceHealthStatuses}} @name={{row.model.name}} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Drop an There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good catch! I should've read the component API better next time. |
||
</div> | ||
{{/if}} | ||
</td> | ||
</tr> | ||
</t.body> | ||
</ListTable> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { A } from '@ember/array'; | ||
import EmberObject from '@ember/object'; | ||
import { findAll, render } from '@ember/test-helpers'; | ||
import { setupRenderingTest } from 'ember-qunit'; | ||
import hbs from 'htmlbars-inline-precompile'; | ||
import { module, test } from 'qunit'; | ||
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; | ||
|
||
module('Integration | Component | Service Status Bar', function (hooks) { | ||
setupRenderingTest(hooks); | ||
|
||
test('Visualizes aggregate status of a service', async function (assert) { | ||
assert.expect(2); | ||
const component = this; | ||
await componentA11yAudit(component, assert); | ||
|
||
const healthyService = EmberObject.create({ | ||
id: '1', | ||
status: 'success', | ||
}); | ||
|
||
const failingService = EmberObject.create({ | ||
id: '2', | ||
status: 'failing', | ||
}); | ||
|
||
const pendingService = EmberObject.create({ | ||
id: '3', | ||
status: 'pending', | ||
}); | ||
|
||
const services = A([healthyService, failingService, pendingService]); | ||
this.set('services', services); | ||
|
||
await render(hbs` | ||
<div class="inline-chart"> | ||
<ServiceStatusBar | ||
@services={{this.services}} | ||
/> | ||
</div> | ||
`); | ||
|
||
const bars = findAll('g > g').length; | ||
|
||
assert.equal(bars, 3, 'It visualizes services by status'); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Considering filtering these by
provider === "nomad"
. We won't need to make health checks if we only have consul services and could save some network bandwidth for users.