open-nomad/ui/app/templates/components/job-page/parts/job-client-status-summary.hbs

111 lines
3.5 KiB
Handlebars

{{#if this.job.hasClientStatus}}
<ListAccordion
data-test-job-client-summary
@source={{array this.job}}
@key="id"
@startExpanded={{this.isExpanded}}
@onToggle={{action this.persist}} as |a|
>
{{#if (can "read client")}}
<a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
<div class="columns">
<div class="column is-minimum nowrap">
Job Status in Client
<span class="badge {{if a.isOpen "is-white" "is-light"}}">
{{this.jobClientStatus.totalNodes}}
</span>
<span
class="tooltip multiline"
aria-label="Aggreate status of job's allocations in each client."
>
{{x-icon "info-circle-outline" class="is-faded"}}
</span>
</div>
{{#unless a.isOpen}}
<div class="column">
<div class="inline-chart bumper-left">
<JobClientStatusBar
@onSliceClick={{action this.onSliceClick}}
@job={{this.job}}
@jobClientStatus={{this.jobClientStatus}}
@isNarrow={{true}}
/>
</div>
</div>
{{/unless}}
</div>
</a.head>
<a.body>
<JobClientStatusBar
@onSliceClick={{action this.onSliceClick}}
@job={{this.job}}
@jobClientStatus={{this.jobClientStatus}}
class="split-view" as |chart|
>
<ol data-test-legend class="legend">
{{#each chart.data as |datum index|}}
<li
data-test-legent-label="{{datum.className}}"
class="{{datum.className}}
{{if (eq datum.label chart.activeDatum.label) "is-active"}}
{{if (eq datum.value 0) "is-empty" "is-clickable"}}"
>
{{#if (gt datum.value 0)}}
<LinkTo
@route="jobs.job.clients"
@model={{this.job}}
@query={{datum.legendLink.queryParams}}
>
<JobPage::Parts::SummaryLegendItem
@datum={{datum}}
@index={{index}}
/>
</LinkTo>
{{else}}
<JobPage::Parts::SummaryLegendItem
@datum={{datum}}
@index={{index}}
/>
{{/if}}
</li>
{{/each}}
</ol>
</JobClientStatusBar>
</a.body>
{{else}}
<a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
<div class="columns">
<div class="column is-minimum nowrap">
Job Status in Client
<span
class="tooltip multiline"
aria-label="Aggreate status of job's allocations in each client."
>
{{x-icon "info-circle-outline" class="is-faded"}}
</span>
</div>
</div>
</a.head>
<a.body>
<div class="empty-message">
<h3 data-test-nodes-not-authorized class="empty-message-headline">
Not Authorized
</h3>
<p class="empty-message-body">
Your
<LinkTo @route="settings.tokens">
ACL token
</LinkTo>
does not provide
<code>
node:read
</code>
permission.
</p>
</div>
</a.body>
{{/if}}
</ListAccordion>
{{/if}}