Skip to content

Commit

Permalink
backport of commit b2d7c3c
Browse files Browse the repository at this point in the history
  • Loading branch information
@philrenaud
philrenaud committed Dec 5, 2022
1 parent fa6b235 commit 3469362
Show file tree
Hide file tree
Showing 4 changed files with 213 additions and 214 deletions.
318 changes: 159 additions & 159 deletions ui/app/components/allocation-service-sidebar.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,159 +1,159 @@
<div
class="sidebar has-subnav service-sidebar {{if this.isSideBarOpen "open"}}"
{{on-click-outside
@fns.closeSidebar
capture=true
}}
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}}
{{#if (not-eq @service.provider "consul")}}
<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>
{{/if}}
</h1>
<button
data-test-close-service-sidebar
class="button is-borderless"
type="button"
{{on "click" @fns.closeSidebar}}
>
{{x-icon "cancel"}}
</button>
</header>
{{#if @service}}
{{keyboard-commands this.keyCommands}}
<header class="detail-header">
<h1 class="title">
{{@service.name}}
{{#if (not-eq @service.provider "consul")}}
<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>
{{/if}}
</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 class="boxed-section is-small">
<div
class="boxed-section-body inline-definitions"
>
<span class="label">
Service Details
</span>

<div>
{{#if @service.connect}}
<span class="pair">
<span class="term">
Connect
</span>
<div>
{{#if @service.connect}}
<span class="pair">
<span class="term">
Connect
</span>
<span>True</span>
</span>
{{/if}}
<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 &amp; Port
</span>
<a
href="http://{{this.address}}"
target="_blank"
rel="noopener noreferrer"
>
{{this.address}}
</a>
</span>
<span class="pair">
<span class="term">
Client
</span>
<Tooltip @text={{@allocation.node.name}}>
<LinkTo
@route="clients.client"
@model={{@allocation.node}}
>
{{@allocation.node.shortId}}
</LinkTo>
</Tooltip>
</span>
{{#if @service.tags.length}}
<span class="pair is-wrappable">
<span class="term">
Tags
</span>
</span>
{{/if}}
<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 &amp; Port
</span>
<a
href="http://{{this.address}}"
target="_blank"
rel="noopener noreferrer"
>
{{this.address}}
</a>
</span>
<span class="pair">
<span class="term">
Client
</span>
<Tooltip @text={{@allocation.node.name}}>
<LinkTo
@route="clients.client"
@model={{@allocation.node}}
>
{{@allocation.node.shortId}}
</LinkTo>
</Tooltip>
</span>
{{#if @service.tags.length}}
<span class="pair is-wrappable">
<span class="term">
Tags
</span>
{{#each @service.tags as |tag|}}
<span class="tag">{{tag}}</span>
{{/each}}
{{#each @service.canary_tags as |tag|}}
<span class="tag canary is-service">{{tag}}</span>
{{/each}}
</span>
{{/if}}
</div>
</div>
</div>
{{#if this.checks.length}}
<ListTable class="health-checks" @source={{this.checks}} as |t|>
<t.head>
<th class="name">
Check Name
</th>
<th class="status">
Status
</th>
<td class="output">
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>
<tr class="service-status-indicators">
<td colspan="3">
<div>
{{#each (dedupe-by-property (filter-by "Check" row.model.Check @service.healthChecks) prop="Timestamp") as |check|}}
<ServiceStatusIndicator @check={{check}} />
{{/each}}
</div>
</td>
</tr>
</t.body>
</ListTable>
{{/if}}
{{#if (eq @service.provider "consul")}}
<table class="table is-fixed connect-info">
<tbody>
{{#each @service.canary_tags as |tag|}}
<span class="tag canary is-service">{{tag}}</span>
{{/each}}
</span>
{{/if}}
</div>
</div>
</div>
{{#if this.checks.length}}
<ListTable class="health-checks" @source={{this.checks}} as |t|>
<t.head>
<th class="name">
Check Name
</th>
<th class="status">
Status
</th>
<td class="output">
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>
<tr class="service-status-indicators">
<td colspan="3">
<div>
{{#each (dedupe-by-property (filter-by "Check" row.model.Check @service.healthChecks) prop="Timestamp") as |check|}}
<ServiceStatusIndicator @check={{check}} />
{{/each}}
</div>
</td>
</tr>
</t.body>
</ListTable>
{{/if}}
{{#if (eq @service.provider "consul")}}
<table class="table is-fixed connect-info">
<tbody>
{{#if @service.onUpdate}}
<tr>
<td><strong>On Update</strong></td>
Expand All @@ -172,15 +172,15 @@
</td>
</tr>
{{/if}}
</tbody>
</table>
{{/if}}
{{#if (and (eq @service.provider "consul") this.consulRedirectLink)}}
<div data-test-consul-link-notice class="notification is-info">
<p>
Nomad cannot read health check information from Consul services, but you can <a href={{this.consulRedirectLink}} target="_blank" rel="noopener noreferrer">view this information in your Consul UI</a>.
</p>
</div>
{{/if}}
{{/if}}
</tbody>
</table>
{{/if}}
{{#if (and (eq @service.provider "consul") this.consulRedirectLink)}}
<div data-test-consul-link-notice class="notification is-info">
<p>
Nomad cannot read health check information from Consul services, but you can <a href={{this.consulRedirectLink}} target="_blank" rel="noopener noreferrer">view this information in your Consul UI</a>.
</p>
</div>
{{/if}}
{{/if}}
</div>
18 changes: 0 additions & 18 deletions ui/app/styles/components/services.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,21 +172,3 @@ table.health-checks {
}
}
}

$tagPadding: 0.75em;

.tag {
&.canary {
overflow: hidden;
&:before {
content: "Canary";
background-color: $blue-light;
color: $black;
line-height: 1.5em;
margin-left: -$tagPadding;
margin-right: $tagPadding;
padding: 0 $tagPadding;
align-self: normal;
}
}
}
17 changes: 17 additions & 0 deletions ui/app/styles/core/tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,21 @@
height: 1rem;
width: 1rem;
}


$tagPadding: 0.75em;

&.canary {
overflow: hidden;
&:before {
content: "Canary";
background-color: $blue-light;
color: $black;
line-height: 1.5em;
margin-left: -$tagPadding;
margin-right: $tagPadding;
padding: 0 $tagPadding;
align-self: normal;
}
}
}
Loading

0 comments on commit 3469362

Please sign in to comment.