From 81edceb2de8ef19956212c55662a7da3f6c7756a Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Mon, 26 Jun 2023 12:18:12 -0400 Subject: [PATCH] [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 --- .changelog/16134.txt | 3 ++ .../components/job-status/panel/deploying.hbs | 16 +++++----- ui/app/components/job-status/panel/steady.hbs | 6 ++-- .../components/job-status/update-params.hbs | 2 +- .../styles/components/job-status-panel.scss | 31 +++++++++++++------ ui/tests/acceptance/allocation-detail-test.js | 4 +++ 6 files changed, 40 insertions(+), 22 deletions(-) create mode 100644 .changelog/16134.txt diff --git a/.changelog/16134.txt b/.changelog/16134.txt new file mode 100644 index 000000000..f0a8309fe --- /dev/null +++ b/.changelog/16134.txt @@ -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 +``` diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs index 14f09360e..95bdca403 100644 --- a/ui/app/components/job-status/panel/deploying.hbs +++ b/ui/app/components/job-status/panel/deploying.hbs @@ -76,9 +76,9 @@
  • {{#if (eq versionObj.version "unknown")}} - + {{else}} - + {{/if}} @@ -94,11 +94,11 @@ - {{get this.oldRunningHealthyAllocBlocks "length"}} Running + {{get this.oldRunningHealthyAllocBlocks "length"}} Running - {{get this.oldCompleteHealthyAllocBlocks "length"}} Complete + {{get this.oldCompleteHealthyAllocBlocks "length"}} Complete @@ -108,7 +108,7 @@

    New allocations: {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}} running and healthy - +

    @@ -131,7 +131,7 @@ @label="View {{status}} allocations" > - {{count}} {{capitalize status}} + {{count}} {{capitalize status}} {{/each-in}} @@ -148,7 +148,7 @@ {{/if}} - {{count}} {{humanize health}} + {{count}} {{humanize health}} {{/each-in}} @@ -156,7 +156,7 @@ - {{this.newAllocsByCanary.canary}} Canary + {{this.newAllocsByCanary.canary}} Canary diff --git a/ui/app/components/job-status/panel/steady.hbs b/ui/app/components/job-status/panel/steady.hbs index 4ac134844..cd65fc31e 100644 --- a/ui/app/components/job-status/panel/steady.hbs +++ b/ui/app/components/job-status/panel/steady.hbs @@ -59,7 +59,7 @@ @label="View {{type.label}} allocations" > - {{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}} + {{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}} {{/each}} @@ -79,9 +79,9 @@
  • {{#if (eq versionObj.version "unknown")}} - + {{else}} - + {{/if}} diff --git a/ui/app/components/job-status/update-params.hbs b/ui/app/components/job-status/update-params.hbs index 3d1c1c3e3..99472d0d9 100644 --- a/ui/app/components/job-status/update-params.hbs +++ b/ui/app/components/job-status/update-params.hbs @@ -7,7 +7,7 @@ {{did-insert trigger.fns.do}}
    -

    Update Params

    +

    Update Params

    {{#if (and trigger.data.isSuccess (not trigger.data.isError))}} diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss index 1c4c81900..f2525bc6d 100644 --- a/ui/app/styles/components/job-status-panel.scss +++ b/ui/app/styles/components/job-status-panel.scss @@ -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; diff --git a/ui/tests/acceptance/allocation-detail-test.js b/ui/tests/acceptance/allocation-detail-test.js index 9b79bdf2c..ead79edb9 100644 --- a/ui/tests/acceptance/allocation-detail-test.js +++ b/ui/tests/acceptance/allocation-detail-test.js @@ -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 });