luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

[ui] alignment and spacing for job status panel (#17708) 

* CSS alignment and spacing for job status panel

* Only fade the count, not the legend icon, when count is 0

* Unrounded version corners

* changelog

* css has to only remove border radius when count is present

* Seed stabilization for services test

* Try consolidating the testfixes from before

* Total test isolation and bonus logs

* Drop the isolation but keep the logs

* Remove bonus logging
This commit is contained in:
Phil Renaud 2023-06-26 12:18:12 -04:00 committed by GitHub
parent e901340c3f
commit 81edceb2de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/16134.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Added a new Job Status Panel that helps show allocation status throughout a deployment and in steady state
```

16
ui/app/components/job-status/panel/deploying.hbs
View File

@ -76,9 +76,9 @@
<li>
<LinkTo data-version={{versionObj.version}} @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' versionObj.version ']') status=(concat '["running", "pending", "failed"]') }}>
{{#if (eq versionObj.version "unknown")}}
<Hds::Badge @text="unknown" class="version-label" />
<Hds::Badge @text="unknown" class="version-label" @type="inverted" />
{{else}}
<Hds::Badge @text={{concat "v" versionObj.version}} class="version-label" />
<Hds::Badge @text={{concat "v" versionObj.version}} class="version-label" @type="inverted" />
{{/if}}
<Hds::Badge @text={{versionObj.allocations.length}} class="version-count" />
</LinkTo>
@ -94,11 +94,11 @@
<legend>
<span class="legend-item {{if (eq (get this.oldRunningHealthyAllocBlocks "length") 0) "faded"}}">
<span class="represented-allocation running"></span>
{{get this.oldRunningHealthyAllocBlocks "length"}} Running
<span class="count">{{get this.oldRunningHealthyAllocBlocks "length"}} Running</span>
</span>
<span class="legend-item {{if (eq (get this.oldCompleteHealthyAllocBlocks "length") 0) "faded"}}">
<span class="represented-allocation complete"></span>
{{get this.oldCompleteHealthyAllocBlocks "length"}} Complete
<span class="count">{{get this.oldCompleteHealthyAllocBlocks "length"}} Complete</span>
</span>
</legend>
</div>
@ -108,7 +108,7 @@
<h4 class="title is-5" data-test-new-allocation-tally><span>New allocations: {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}} running and healthy</span>
<span class="versions">
<LinkTo data-version={{@job.version}} @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' @job.version ']')}}>
<Hds::Badge @text={{concat "v" @job.version}} class="version-label" />
<Hds::Badge @text={{concat "v" @job.version}} @type="inverted" class="version-label" />
</LinkTo>
</span>
</h4>
@ -131,7 +131,7 @@
@label="View {{status}} allocations"
>
<span class="represented-allocation {{status}}"></span>
{{count}} {{capitalize status}}
<span class="count">{{count}} {{capitalize status}}</span>
</ConditionalLinkTo>
{{/each-in}}
@ -148,7 +148,7 @@
{{/if}}
</span>
</span>
{{count}} {{humanize health}}
<span class="count">{{count}} {{humanize health}}</span>
</span>
{{/each-in}}
@ -156,7 +156,7 @@
<span class="represented-allocation legend-example canary">
<span class="alloc-canary-indicator" />
</span>
{{this.newAllocsByCanary.canary}} Canary
<span class="count">{{this.newAllocsByCanary.canary}} Canary</span>
</span>
</legend>

6
ui/app/components/job-status/panel/steady.hbs
View File

@ -59,7 +59,7 @@
@label="View {{type.label}} allocations"
>
<span class="represented-allocation {{type.label}}"></span>
{{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}}
<span class="count">{{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}}</span>
</ConditionalLinkTo>
{{/each}}
</legend>
@ -79,9 +79,9 @@
<li>
<LinkTo data-version={{versionObj.version}} @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' versionObj.version ']') status=(concat '["running", "pending", "failed"]') }}>
{{#if (eq versionObj.version "unknown")}}
<Hds::Badge @text="unknown" @type="filled" class="version-label" />
<Hds::Badge @text="unknown" @type="inverted" class="version-label" />
{{else}}
<Hds::Badge @text={{concat "v" versionObj.version}} @type="filled" class="version-label" />
<Hds::Badge @text={{concat "v" versionObj.version}} @type="inverted" class="version-label" />
{{/if}}
<Hds::Badge @text={{versionObj.allocations.length}} @type="filled" class="version-count" />
</LinkTo>

2
ui/app/components/job-status/update-params.hbs
View File

@ -7,7 +7,7 @@
{{did-insert trigger.fns.do}}
<div class="update-parameters">
<h4 class="title is-5">Update Params</h4>
<h4 class="title is-4">Update Params</h4>
<code>
{{#if (and trigger.data.isSuccess (not trigger.data.isError))}}

31
ui/app/styles/components/job-status-panel.scss
View File

@ -89,6 +89,7 @@
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
margin-top: 1rem;
& > .versions > ul {
grid-template-columns: unset;
@ -106,10 +107,14 @@
.versions {
& > ul {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-columns: repeat(auto-fit, 65px);
gap: 0.5rem;
& > li {
white-space: nowrap;
&:has(.version-count) .version-label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
a {
text-decoration: none;
@ -128,7 +133,6 @@
z-index: 1;
left: -1rem;
padding-left: 1rem;
background-color: var(--token-color-surface-faint);
}
}
@ -150,9 +154,9 @@
legend {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: max-content;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem;
grid-template-rows: min-content;
}
.latest-deployment {
h4 svg {
@ -405,16 +409,14 @@
animation: none;
}
& > .boxed-section-body > .deployment-allocations {
margin-bottom: 1rem;
}
.legend-item {
display: grid;
gap: 0.5rem;
grid-template-columns: auto 1fr;
white-space: nowrap;
flex: 1 0 auto;
&.faded {
&.faded .count {
opacity: 0.5;
}
@ -433,7 +435,12 @@
display: grid;
grid-template-columns: 70% auto;
gap: 1rem;
margin-top: 1rem;
margin-top: 2rem;
& > .deployment-history,
& > .update-parameters {
display: grid;
grid-template-rows: 50px auto;
}
}
&.steady-state .history-and-params {
@ -521,6 +528,10 @@
overflow-y: auto;
display: block;
}
& > .title {
display: grid;
align-content: center;
}
ul,
span.notification {
display: block;

4
ui/tests/acceptance/allocation-detail-test.js
View File

@ -16,6 +16,7 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
import Allocation from 'nomad-ui/tests/pages/allocations/detail';
import moment from 'moment';
import formatHost from 'nomad-ui/utils/format-host';
import faker from 'nomad-ui/mirage/faker';
let job;
let node;
@ -687,6 +688,7 @@ module('Acceptance | allocation detail (services)', function (hooks) {
const runningAlloc = server.create('allocation', {
jobId: job.id,
forceRunningClientStatus: true,
clientStatus: 'running',
});
const otherAlloc = server.db.allocations.reject((j) => j.jobId !== job.id);
@ -735,8 +737,10 @@ module('Acceptance | allocation detail (services)', function (hooks) {
});
test('Allocation has a list of services with active checks', async function (assert) {
faker.seed(1);
const runningAlloc = server.db.allocations.findBy({
jobId: 'service-haver',
forceRunningClientStatus: true,
clientStatus: 'running',
});
await Allocation.visit({ id: runningAlloc.id });