open-nomad/ui/app/components/allocation-service-sidebar.hbs

<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}}
				{{#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>
					{{#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>
              {{#each @service.tags as |tag|}}
                <span class="tag">{{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>
            <td>{{@service.onUpdate}}</td>
          </tr>
        {{/if}}
        {{#if @service.connect.sidecarService.proxy.upstreams}}
          <tr>
            <td><strong>Upstreams</strong></td>
            <td>
                {{#each
                  @service.connect.sidecarService.proxy.upstreams as |upstream|
                }}
                  <span class="tag">{{upstream.destinationName}}:{{upstream.localBindPort}}</span>
                {{/each}}
            </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}}
</div>