ui: added mutable deployments support to dashboard

.changelog/1549.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Mutable deployments support on web dashboard.
+```

ui/app/components/app-item/deployment.hbs

@@ -1,17 +1,21 @@
-<li class={{if (eq @deployment.state 4) "app-item app-item--destroyed" "app-item"}}>
+<li
+ class="app-item
+ {{if (not-eq @deployment.sequence @latest.sequence) "app-item--previous"}}
+ {{if (eq @deployment.state 4) "app-item--destroyed"}}"
+>
  <LinkTo @route="workspace.projects.project.app.deployment" @models={{array @deployment.id}}>
  <p>
  <b class="badge badge--version">v{{@deployment.sequence}}</b>
  <code>{{@deployment.id}}</code>
  {{#if (eq @deployment.state 4)}}
- <b class="badge badge--destroyed">
- <Pds::Icon @type="trash" class="icon" />&nbsp;Destroyed
+ <b data-test-destroyed-badge class="badge badge--destroyed">
+ <Pds::Icon @type="trash" class="icon" />&nbsp; {{t "page.deployments.destroyed_label"}}
  </b>
  {{/if}}
  </p>
  <small>
  <Pds::Icon @type={{icon-for-component @deployment.component.name}} class="icon" />
- <span>{{if (eq @deployment.status.state 1) 'Deploying' 'Deployed'}} by
+ <span>{{t (concat "page.deployments.status_prefix." @deployment.status.state)}}
  <b>{{component-name @deployment.component.name}}</b>
  {{#if (eq @deployment.status.state 1)}}
  (Started {{date-format-distance-to-now @deployment.status.startTime.seconds }})
@@ -21,9 +25,13 @@
  </span>
  </small>
  </LinkTo>
- {{#if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
- <ExternalLink href="https://{{@deployment.preload.deployUrl}}" class="button button--secondary button--external-link">
- <span>{{lowercase @deployment.preload.deployUrl}}</span>
+ {{#if (not-eq @latest.id @deployment.id)}}
+ <small class="replacement-info">
+ {{t "page.deployments.replaced_label"}}<b class="badge badge--version">v{{@latest.sequence}}</b>
+ </small>
+ {{else if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
+ <ExternalLink data-test-external-deployment-button href="https://{{@deployment.preload.deployUrl}}" class="button button--secondary button--external-link">
+ <span>{{t "page.deployments.external_url_label"}}</span>
  <Pds::Icon @type="exit" class="icon" />
  </ExternalLink>
  {{/if}}

ui/app/controllers/workspace/projects/project/app/deployments.ts

@@ -3,21 +3,22 @@ import { tracked } from '@glimmer/tracking';
 import { Deployment } from 'waypoint-pb';
 import { action } from '@ember/object';
 export default class WorkspaceProjectsProjectAppDeployments extends Controller {
- queryParams = ['destroyed'];
+ queryParams = [
+ {
+ isShowingDestroyed: {
+ as: 'destroyed',
+ },
+ },
+ ];
 
- @tracked destroyed = false;
+ @tracked isShowingDestroyed = false;
 
  get hasMoreDeployments(): boolean {
  return this.model.filter((deployment: Deployment.AsObject) => deployment.state == 4).length > 0;
  }
 
  get deployments(): Deployment.AsObject[] {
- if (this.destroyed) {
- return this.model;
- } else {
- let deploys = this.model.filter((deployment: Deployment.AsObject) => deployment.state != 4);
- return deploys;
- }
+ return this.model;
  }
 
  get deploymentsByGeneration(): GenerationGroup[] {
@@ -40,7 +41,7 @@ export default class WorkspaceProjectsProjectAppDeployments extends Controller {
 
  @action
  showDestroyed(): void {
- this.destroyed = true;
+ this.isShowingDestroyed = true;
  }
 }
 

ui/app/styles/_app-item.scss

@@ -4,6 +4,7 @@
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
+ padding-left: scale.$sm-2;
 
  a:not(.button) {
  display: flex;
@@ -26,7 +27,7 @@
  font-size: 1rem;
  }
 
- &.app-item--destroyed code{
+ &.app-item--destroyed code {
  color: rgb(var(--text-muted));
  }
 
@@ -64,4 +65,18 @@
  text-overflow: ellipsis;
  }
  }
+
+ .replacement-info {
+ b {
+ text-transform: inherit;
+ margin-left: scale.$sm-2;
+ }
+ }
+
+ &--previous {
+ background: color.$ui-cool-gray-050;
+ background-clip: border-box;
+ margin-bottom: 0px;
+ border-top: 1rem solid color.$ui-cool-gray-050;
+ }
 }

ui/app/styles/_page.scss

@@ -186,13 +186,12 @@
  ul.list {
  li {
  padding-bottom: scale.$base;
- margin-bottom: scale.$base;
+ border-top: 1rem solid transparent;
+ margin-bottom: 0;
  border-bottom: 1px solid rgb(var(--border));
 
  &:last-child {
- padding-bottom: 0;
- margin-bottom: 0;
- border: none;
+ border-bottom: none;
  }
  }
  }

ui/app/templates/workspace/projects/project/app/deployments.hbs

@@ -2,10 +2,12 @@
  {{t "page.deployments.title"}}
 </h3>
 
-<ul data-test-deployment-list=true class="list">
+<ul data-test-deployment-list class="list">
  {{#each this.deploymentsByGeneration key="generationID" as |group|}}
  {{#each group.deployments key="id" as |deployment|}}
- <AppItem::Deployment @deployment={{deployment}} />
+ {{#if (or this.isShowingDestroyed (not-eq deployment.state 4))}}
+ <AppItem::Deployment @deployment={{deployment}} @latest={{group.deployments.[0]}} />
+ {{/if}}
  {{/each}}
  {{else}}
  <EmptyState>
@@ -17,20 +19,20 @@
  from the CLI</p>
  </EmptyState>
  {{/each}}
- {{#if (and this.hasMoreDeployments (not this.destroyed))}}
- <div class="destroyed-deployments-filter">
- <Pds::HelpText>
- Some deployments have been destroyed and are hidden.
- <Pds::Button
- @compact={{true}}
- @variant="ghost"
- {{on "click" this.showDestroyed}}>
- Display destroyed deployments
- </Pds::Button>
- </Pds::HelpText>
- </div>
- {{/if}}
-
 </ul>
+{{#if (and this.hasMoreDeployments (not this.isShowingDestroyed))}}
+ <div class="destroyed-deployments-filter">
+ <Pds::HelpText>
+ {{t "page.deployments.destroyed_and_hidden_state"}}
+ <Pds::Button
+ data-test-display-destroyed-button
+ @compact={{true}}
+ @variant="ghost"
+ {{on "click" this.showDestroyed}}>
+ {{t "page.deployments.display_destroyed"}}
+ </Pds::Button>
+ </Pds::HelpText>
+ </div>
+{{/if}}
 
 {{outlet}}

ui/mirage/factories/project.ts

@@ -129,6 +129,7 @@ export default Factory.extend({
  generation: generations[0],
  build: builds[1],
  sequence: 2,
+ state: 'DESTROYED',
  }),
  server.create('deployment', 'random', 'nomad-jobspec', 'hours-old-success', {
  application,
@@ -139,25 +140,25 @@ export default Factory.extend({
  server.create('deployment', 'random', 'nomad-jobspec', 'hours-old-success', {
  application,
  generation: generations[1],
- build: builds[2],
+ build: builds[3],
  sequence: 4,
  }),
  server.create('deployment', 'random', 'nomad-jobspec', 'minutes-old-success', {
  application,
  generation: generations[1],
- build: builds[2],
+ build: builds[4],
  sequence: 5,
  }),
  server.create('deployment', 'random', 'nomad-jobspec', 'minutes-old-success', {
  application,
  generation: generations[1],
- build: builds[2],
+ build: builds[5],
  sequence: 6,
  }),
  server.create('deployment', 'random', 'nomad-jobspec', 'seconds-old-success', {
  application,
  generation: generations[1],
- build: builds[2],
+ build: builds[6],
  sequence: 7,
  }),
  ];

ui/tests/acceptance/deployments-list-test.ts

@@ -2,14 +2,18 @@ import { module, test } from 'qunit';
 import { currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
-import { visitable, create, collection } from 'ember-cli-page-object';
+import { visitable, create, collection, clickable } from 'ember-cli-page-object';
 import login from 'waypoint/tests/helpers/login';
+import { isEqual } from 'date-fns';
 
 const url = '/default/microchip/app/wp-bandwidth/deployments';
 
 const page = create({
  visit: visitable(url),
  list: collection('[data-test-deployment-list] li'),
+ deploymentLinks: collection('[data-test-external-deployment-button]'),
+ destroyedBadges: collection('[data-test-destroyed-badge]'),
+ showDestroyed: clickable('[data-test-display-destroyed-button]'),
 });
 
 module('Acceptance | deployments list', function (hooks) {
@@ -27,4 +31,58 @@ module('Acceptance | deployments list', function (hooks) {
  assert.equal(page.list.length, 3);
  assert.equal(currentURL(), url);
  });
+
+ test('visiting deployments page with mutable deployments', async function (assert) {
+ let project = this.server.create('project', { name: 'microchip' });
+ let application = this.server.create('application', { name: 'wp-bandwidth', project });
+
+ let generations = [
+ this.server.create('generation', {
+ id: 'job-v1',
+ initialSequence: 1,
+ }),
+ this.server.create('generation', {
+ id: 'job-v2',
+ initialSequence: 4,
+ }),
+ ];
+
+ this.server.create('deployment', 'random', 'nomad-jobspec', 'days-old-success', {
+ application,
+ generation: generations[0],
+ sequence: 1,
+ });
+ this.server.create('deployment', 'random', 'nomad-jobspec', 'days-old-success', {
+ application,
+ generation: generations[0],
+ sequence: 2,
+ state: 'DESTROYED',
+ });
+ this.server.create('deployment', 'random', 'nomad-jobspec', 'hours-old-success', {
+ application,
+ generation: generations[1],
+ sequence: 3,
+ });
+ this.server.create('deployment', 'random', 'nomad-jobspec', 'minutes-old-success', {
+ application,
+ generation: generations[1],
+ sequence: 4,
+ });
+ this.server.create('deployment', 'random', 'nomad-jobspec', 'seconds-old-success', {
+ application,
+ generation: generations[1],
+ sequence: 5,
+ });
+
+ await page.visit();
+
+ assert.equal(page.list.length, 4);
+ assert.equal(page.deploymentLinks.length, 1);
+
+ await page.showDestroyed();
+
+ assert.equal(page.list.length, 5);
+ assert.equal(page.deploymentLinks.length, 1);
+ assert.equal(page.destroyedBadges.length, 1);
+ });
 });

ui/translations/en-us.yaml

@@ -21,6 +21,16 @@ page:
  title: 'Builds'
  deployments:
  title: 'Deployments'
+ destroyed_label: 'Destroyed'
+ external_url_label: 'Visit Deployment'
+ replaced_label: 'Replaced by '
+ destroyed_and_hidden_state: 'Some deployments have been destroyed and are hidden'
+ display_destroyed: 'Display destroyed deployments'
+ status_prefix:
+ 0: 'Deploying by ' # UNKNOWN
+ 1: 'Deploying by ' # RUNNING
+ 2: 'Deployed by ' # SUCCESS
+ 3: 'Failed to deploy by ' # ERROR
  releases:
  title: 'Releases'