Skip to content
This repository has been archived by the owner on Jan 8, 2024. It is now read-only.

ui: mutable deployments #1549

Merged
merged 3 commits into from
Jun 3, 2021
Merged

ui: mutable deployments #1549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df53e84
ui/mirage: sort builds/deployments/releases
jgwhite May 27, 2021
f1c1f3a
ui/deployments: auto-fix controller linting issues
jgwhite May 27, 2021
76e5eff
ui: added mutable deployments support to dashboard
May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .changelog/1549.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:feature
ui: Mutable deployments support on web dashboard.
```
22 changes: 15 additions & 7 deletions ui/app/components/app-item/deployment.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }})
Expand All @@ -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}}
Expand Down
49 changes: 37 additions & 12 deletions ui/app/controllers/workspace/projects/project/app/deployments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,50 @@ 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() {
return this.model.filter((deployment: Deployment.AsObject) => deployment.state == 4).length > 0
get hasMoreDeployments(): boolean {
return this.model.filter((deployment: Deployment.AsObject) => deployment.state == 4).length > 0;
}

get deployments() {
if (this.destroyed) {
return this.model
} else {
const deploys = this.model.filter((deployment: Deployment.AsObject) => deployment.state != 4)
return deploys;
get deployments(): Deployment.AsObject[] {
return this.model;
}

get deploymentsByGeneration(): GenerationGroup[] {
let result: GenerationGroup[] = [];

for (let deployment of this.deployments) {
let id = deployment.generation?.id ?? deployment.id;
let group = result.find((group) => group.generationID === id);

if (!group) {
group = new GenerationGroup(id);
result.push(group);
}

group.deployments.push(deployment);
}

return result;
}

@action
showDestroyed() {
this.destroyed = true;
showDestroyed(): void {
this.isShowingDestroyed = true;
}
}

class GenerationGroup {
deployments: Deployment.AsObject[] = [];

constructor(public generationID: string) {}
}
1 change: 1 addition & 0 deletions ui/app/helpers/icon-for-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export function iconForComponent([component]: [string]): string {
case 'kubernetes':
return 'logo-kubernetes-color-alt';
case 'nomad':
case 'nomad-jobspec':
return 'logo-nomad-color';
case 'pack':
return 'logo-pack-color';
Expand Down
17 changes: 16 additions & 1 deletion ui/app/styles/_app-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding-left: scale.$sm-2;

a:not(.button) {
display: flex;
Expand All @@ -26,7 +27,7 @@
font-size: 1rem;
}

&.app-item--destroyed code{
&.app-item--destroyed code {
color: rgb(var(--text-muted));
}

Expand Down Expand Up @@ -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;
}
}
7 changes: 3 additions & 4 deletions ui/app/styles/_page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down
38 changes: 21 additions & 17 deletions ui/app/templates/workspace/projects/project/app/deployments.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@
{{t "page.deployments.title"}}
</h3>

<ul data-test-deployment-list=true class="list">
{{#each this.deployments as |deployment|}}
<AppItem::Deployment @deployment={{deployment}} />
<ul data-test-deployment-list class="list">
{{#each this.deploymentsByGeneration key="generationID" as |group|}}
{{#each group.deployments key="id" as |deployment|}}
{{#if (or this.isShowingDestroyed (not-eq deployment.state 4))}}
<AppItem::Deployment @deployment={{deployment}} @latest={{group.deployments.[0]}} />
{{/if}}
{{/each}}
{{else}}
<EmptyState>
<p>There are no deployments to display for this app yet</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this text be in the translations/ file?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I started moving some of the text in this deployments.hbs file to the translations files, but @jgwhite said the checklist item about it on this PR was meant for the single deployment item template, not this overarching deployments template.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the other text to the translation file. Jamie and I discussed this specific block of text yesterday and agreed the paragraph breaks make it a bit more of a complex situation. It's a little out of scope for this PR, so we can add this text to the localization texts some other time.

Expand All @@ -15,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}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very glad to see this move outside of the <ul>.


{{outlet}}
13 changes: 11 additions & 2 deletions ui/mirage/factories/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { Factory, trait, association } from 'ember-cli-mirage';
import { fakeId } from '../utils';

export default Factory.extend({
id: () => fakeId(),
sequence: (i) => i + 1,

afterCreate(build, server) {
if (!build.workspace) {
let workspace =
Expand All @@ -11,8 +14,6 @@ export default Factory.extend({
},

random: trait({
id: () => fakeId(),
sequence: (i) => i + 1,
labels: () => ({
'common/vcs-ref': '0d56a9f8456b088dd0e4a7b689b842876fd47352',
'common/vcs-ref-path': 'https://github.com/hashicorp/waypoint/commit/',
Expand All @@ -21,6 +22,14 @@ export default Factory.extend({
status: association('random'),
}),

docker: trait({
component: association('builder', 'docker'),
}),

pack: trait({
component: association('builder', 'pack'),
}),

'seconds-old-success': trait({
status: association('random', 'success', 'seconds-old'),
}),
Expand Down
20 changes: 20 additions & 0 deletions ui/mirage/factories/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,26 @@ export default Factory.extend({
type: 'RELEASEMANAGER',
}),

docker: trait({
name: 'docker',
}),

pack: trait({
name: 'pack',
}),

nomad: trait({
name: 'nomad',
}),

'nomad-jobspec': trait({
name: 'nomad-jobspec',
}),

kubernetes: trait({
name: 'kubernetes',
}),

'with-random-name': trait({
afterCreate(component) {
component.update('name', randomNameForType(component.type));
Expand Down
21 changes: 19 additions & 2 deletions ui/mirage/factories/deployment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { Factory, trait, association } from 'ember-cli-mirage';
import { fakeId } from '../utils';

export default Factory.extend({
id: () => fakeId(),
sequence: (i) => i + 1,

afterCreate(deployment, server) {
if (!deployment.workspace) {
let workspace =
Expand All @@ -11,9 +14,7 @@ export default Factory.extend({
},

random: trait({
id: () => fakeId(),
component: association('platform', 'with-random-name'),
sequence: (i) => i + 1,
status: association('random'),
state: 'CREATED',
labels: () => ({
Expand All @@ -27,6 +28,22 @@ export default Factory.extend({
},
}),

docker: trait({
component: association('platform', 'docker'),
}),

nomad: trait({
component: association('platform', 'nomad'),
}),

'nomad-jobspec': trait({
component: association('platform', 'nomad-jobspec'),
}),

kubernetes: trait({
component: association('platform', 'kubernetes'),
}),

'seconds-old-success': trait({
status: association('random', 'success', 'seconds-old'),
}),
Expand Down
Loading