-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ui] Service Discovery: Allocation Service fly-out (#14389)
* Bones of a new flyout section * Basic sidebar behaviour and style edits * Concept of a refID for service fragments to disambiguate task and group * A11y audit etc * Moves health check aggregation to serviceFragment model and retains history * Has to be a getter * flyout populated * Sidebar styling * Sidebar table and details added * Mirage fixture * Active status and table styles * Unit test mock updated * Acceptance tests for alloc services table and flyout * Chart styles closer to mock * Without a paused test * Consul and Nomad icons in services table * Alloc services test updates in light of new column changes * without using an inherited scenario
- Loading branch information
1 parent
9f0d9c9
commit e68f07e
Showing
15 changed files
with
785 additions
and
325 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
<div | ||
class="sidebar has-subnav service-sidebar {{if this.isSideBarOpen "open"}}" | ||
{{on-click-outside | ||
@fns.closeSidebar | ||
capture=true | ||
}} | ||
> | ||
{{#if @service}} | ||
{{keyboard-commands this.keyCommands}} | ||
<header class="detail-header"> | ||
<h1 class="title"> | ||
{{@service.name}} | ||
<span class="aggregate-status"> | ||
{{#if (eq this.aggregateStatus 'Unhealthy')}} | ||
<FlightIcon @name="x-square-fill" @color="#c84034" /> | ||
Unhealthy | ||
{{else}} | ||
<FlightIcon @name="check-square-fill" @color="#25ba81" /> | ||
Healthy | ||
{{/if}} | ||
</span> | ||
</h1> | ||
<button | ||
data-test-close-service-sidebar | ||
class="button is-borderless" | ||
type="button" | ||
{{on "click" @fns.closeSidebar}} | ||
> | ||
{{x-icon "cancel"}} | ||
</button> | ||
</header> | ||
|
||
<div class="boxed-section is-small"> | ||
<div | ||
class="boxed-section-body inline-definitions" | ||
> | ||
<span class="label"> | ||
Service Details | ||
</span> | ||
|
||
<div> | ||
<span class="pair"> | ||
<span class="term"> | ||
Allocation | ||
</span> | ||
<LinkTo | ||
@route="allocations.allocation" | ||
@model={{@allocation}} | ||
@query={{hash service=""}} | ||
> | ||
{{@allocation.shortId}} | ||
</LinkTo> | ||
</span> | ||
<span class="pair"> | ||
<span class="term"> | ||
IP Address & Port | ||
</span> | ||
<a | ||
href="http://{{this.address}}" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
{{this.address}} | ||
</a> | ||
</span> | ||
{{#if @service.tags.length}} | ||
<span class="pair"> | ||
<span class="term"> | ||
Tags | ||
</span> | ||
{{join ", " @service.tags}} | ||
</span> | ||
{{/if}} | ||
<span class="pair"> | ||
<span class="term"> | ||
Client | ||
</span> | ||
<LinkTo | ||
@route="clients.client" | ||
@model={{@allocation.node}} | ||
> | ||
{{@allocation.node.shortId}} | ||
</LinkTo> | ||
</span> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
{{#if @service.mostRecentChecks.length}} | ||
<ListTable class="health-checks" @source={{@service.mostRecentChecks}} as |t|> | ||
<t.head> | ||
<th> | ||
Name | ||
</th> | ||
<th> | ||
Status | ||
</th> | ||
<td> | ||
Output | ||
</td> | ||
</t.head> | ||
<t.body as |row|> | ||
<tr data-service-health={{row.model.Status}}> | ||
<td class="name"> | ||
<span title={{row.model.Check}}>{{row.model.Check}}</span> | ||
</td> | ||
<td class="status"> | ||
<span> | ||
{{#if (eq row.model.Status "success")}} | ||
<FlightIcon @name="check-square-fill" @color="#25ba81" /> | ||
Healthy | ||
{{else if (eq row.model.Status "failure")}} | ||
<FlightIcon @name="x-square-fill" @color="#c84034" /> | ||
Unhealthy | ||
{{else if (eq row.model.Status "pending")}} | ||
Pending | ||
{{/if}} | ||
</span> | ||
</td> | ||
<td class="service-output"> | ||
<code> | ||
{{row.model.Output}} | ||
</code> | ||
</td> | ||
</tr> | ||
</t.body> | ||
</ListTable> | ||
{{/if}} | ||
{{/if}} | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import Component from '@glimmer/component'; | ||
import { inject as service } from '@ember/service'; | ||
|
||
export default class AllocationServiceSidebarComponent extends Component { | ||
@service store; | ||
|
||
get isSideBarOpen() { | ||
return !!this.args.service; | ||
} | ||
keyCommands = [ | ||
{ | ||
label: 'Close Evaluations Sidebar', | ||
pattern: ['Escape'], | ||
action: () => this.args.fns.closeSidebar(), | ||
}, | ||
]; | ||
|
||
get service() { | ||
return this.store.query('service-fragment', { refID: this.args.serviceID }); | ||
} | ||
|
||
get address() { | ||
const port = this.args.allocation?.allocatedResources?.ports?.findBy( | ||
'label', | ||
this.args.service.portLabel | ||
); | ||
if (port) { | ||
return `${port.hostIp}:${port.value}`; | ||
} else { | ||
return null; | ||
} | ||
} | ||
|
||
get aggregateStatus() { | ||
return this.args.service?.mostRecentChecks?.any( | ||
(check) => check.Status === 'failure' | ||
) | ||
? 'Unhealthy' | ||
: 'Healthy'; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.