Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[ui] Adding canary_tags the web UI #15458

Merged
merged 2 commits into from
Dec 5, 2022
Merged

[ui] Adding canary_tags the web UI #15458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66f3131
Adding canary_tags to anyplace we show service tags
philrenaud Dec 2, 2022
b2d7c3c
CSS moved and tabs to spaces
philrenaud Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .changelog/15458.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: The web UI will now show canary_tags of services anyplace we would normally show tags.
```
315 changes: 159 additions & 156 deletions ui/app/components/allocation-service-sidebar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +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 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 @@ -169,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>
1 change: 1 addition & 0 deletions ui/app/models/service-fragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default class Service extends Fragment {
@attr('string') name;
@attr('string') portLabel;
@attr() tags;
@attr() canary_tags;
@attr('string') onUpdate;
@attr('string') provider;
@fragment('consul-connect') connect;
Expand Down
1 change: 1 addition & 0 deletions ui/app/models/service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export default class Service extends Model {
@attr('number') port;
@attr('string') serviceName;
@attr() tags;
@attr() canary_tags;

@alias('serviceName') name;

Expand Down
17 changes: 17 additions & 0 deletions ui/app/styles/core/tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,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;
}
}
}
3 changes: 3 additions & 0 deletions ui/app/templates/allocations/allocation/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,9 @@
{{#each row.model.tags as |tag|}}
<span class="tag is-service">{{tag}}</span>
{{/each}}
{{#each row.model.canary_tags as |tag|}}
<span class="tag canary is-service">{{tag}}</span>
{{/each}}
</td>
<td data-test-service-health class="is-2">
{{#if (eq row.model.provider "nomad")}}
Expand Down