This repository has been archived by the owner on Jan 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 327
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: build and release tabs tables view (#2852)
* ui: initial build/release tables * ui: added tests for build and release tables and table row component * ui: added changelog * ui: updated tests and cleaned up styling of table views * ui: added link to deployments column
- Loading branch information
Showing
14 changed files
with
418 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| ```release-note:feature | ||
| ui: Update UI of builds and releases tab | ||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,68 @@ | ||
| <li class="app-item" data-test-app-item-build> | ||
| <LinkTo @route="workspace.projects.project.app.build" @models={{array @build.sequence}}> | ||
| <b class="badge badge--version">v{{@build.sequence}}</b> | ||
| <small class="app-item__meta__secondary"> | ||
| {{#let (or @build.pushedArtifact @build) as |operation|}} | ||
| <OperationStatusIndicator::Build @operation={{operation}} @isDetailed={{true}}/> | ||
| {{/let}} | ||
| </small> | ||
| </LinkTo> | ||
|
|
||
| {{#if (and (eq @build.status.state 2) (eq @build.pushedArtifact.status.state 2))}} | ||
| <b class="badge badge--info"> | ||
| <FlightIcon @name="clock" class="icon" /> | ||
| <span> | ||
| {{t "app_item_build.built_in" | ||
| duration=(date-format-distance | ||
| @build.status.startTime.seconds | ||
| @build.status.completeTime.seconds | ||
| ) | ||
| <tr> | ||
| <th data-test-id-column scope="row" class="table__id-column"> | ||
| <LinkTo title={{ concat (t "page.build.title") " v" @build.sequence}} | ||
| @route="workspace.projects.project.app.build" | ||
| @models={{array @build.sequence}} | ||
| > | ||
| <b data-test-version-badge class="badge badge--version">v{{@build.sequence}}</b> | ||
| {{@build.id}} | ||
| </LinkTo> | ||
| </th> | ||
| {{#let (or @build.pushedArtifact @build) as |operation|}} | ||
| <td> | ||
| <span data-test-status class="table__icon-text-cell-span"> | ||
| {{#if operation.status}} | ||
| <FlightIcon | ||
| data-test-status-icon | ||
| @name={{or | ||
| (and (eq operation.status.state 1) "delay") | ||
| (and (eq operation.status.state 2) "check-circle") | ||
| (and (eq operation.status.state 3) "x-circle") | ||
| (and (eq operation.status.state 0) "delay") | ||
| }} | ||
| @size="16" | ||
| /> | ||
| {{t | ||
| (concat | ||
| "app_item_build.status" | ||
| ".state-" operation.status.state | ||
| ) | ||
| }} | ||
| {{else}} | ||
| <FlightIcon | ||
| data-test-status-icon | ||
| @name="x-circle" | ||
| @size="16" | ||
| /> | ||
| {{t "app_item_build.status.state-unavailable"}} | ||
| {{/if}} | ||
| </span> | ||
| </td> | ||
| <td data-test-matching-deployment class="table__deployment-info-cell"> | ||
| {{!-- TODO: add popover here --}} | ||
| {{#if @matchingDeployment}} | ||
| <LinkTo | ||
| title={{concat (t "page.deployment.title") " v" @matchingDeployment}} | ||
| @route="workspace.projects.project.app.deployment.deployment-seq" | ||
| @models={{array @matchingDeployment}} | ||
| > | ||
| Deployment <b class="badge badge--version">v{{@matchingDeployment}}</b> | ||
| </LinkTo> | ||
| {{else}} | ||
| {{t | ||
| "app_item_build.not_deployed" | ||
| }} | ||
| {{/if}} | ||
| </td> | ||
| <td data-test-provider> | ||
| <span class="table__icon-text-cell-span"> | ||
| <FlightIcon | ||
| data-test-icon-type={{icon-for-component operation.component.name}} | ||
| @name={{icon-for-component operation.component.name}} | ||
| @size="16" | ||
| /> | ||
| {{component-name operation.component.name}} | ||
| </span> | ||
| </b> | ||
| {{/if}} | ||
| </li> | ||
| </td> | ||
| {{/let}} | ||
| </tr> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,69 @@ | ||
| <li class="app-item"> | ||
| <LinkTo @route="workspace.projects.project.app.release" @models={{array @release.sequence}}> | ||
| <p> | ||
| <b class="badge badge--version">v{{@release.sequence}}</b> | ||
| </p> | ||
| <small class="app-item__meta__secondary"> | ||
| <OperationStatusIndicator::Release @operation={{@release}} /> | ||
| </small> | ||
| </LinkTo> | ||
|
|
||
| {{#if (and (not-eq @release.state 4) @release.statusReport)}} | ||
| <small> | ||
| <StatusReportIndicator @statusReport={{@release.statusReport}} /> | ||
| </small> | ||
| {{/if}} | ||
|
|
||
| {{#if (and @isLatest @release.url)}} | ||
| <ExternalLink | ||
| href={{enforce-protocol @release.url}} | ||
| class="button button--primary button--external-link"> | ||
| <span>{{@release.url}}</span> | ||
| <FlightIcon @name="external-link" class="icon" /> | ||
| </ExternalLink> | ||
| {{/if}} | ||
| </li> | ||
| <tr> | ||
| <th data-test-id-column scope="row" class="table__id-column"> | ||
| <LinkTo | ||
| title={{ concat (t "page.release.title") " v" @build.sequence}} | ||
| @route="workspace.projects.project.app.release" | ||
| @models={{array @release.sequence}} | ||
| > | ||
| <b data-test-version-badge class="badge badge--version">v{{@release.sequence}}</b> | ||
| {{@release.id}} | ||
| </LinkTo> | ||
| </th> | ||
| {{#let (or @release.pushedArtifact @release) as |operation|}} | ||
| <td> | ||
| <span data-test-status class="table__icon-text-cell-span"> | ||
| {{#if operation.status}} | ||
| <FlightIcon | ||
| data-test-status-icon | ||
| @name={{or | ||
| (and (eq operation.status.state 1) "delay") | ||
| (and (eq operation.status.state 2) "check-circle") | ||
| (and (eq operation.status.state 3) "x-circle") | ||
| (and (eq operation.status.state 0) "delay") | ||
| }} | ||
| @size="16" | ||
| /> | ||
| {{t | ||
| (concat | ||
| "app_item_release.status" | ||
| ".state-" operation.status.state | ||
| ) | ||
| }} | ||
| {{else}} | ||
| <FlightIcon | ||
| data-test-status-icon | ||
| @name="x-circle" | ||
| @size="16" | ||
| /> | ||
| {{t "app_item_release.status.state-unavailable"}} | ||
| {{/if}} | ||
| </span> | ||
| </td> | ||
| <td data-test-matching-deployment> | ||
| {{!-- TODO: add popover here --}} | ||
| {{#if @matchingDeployment}} | ||
| <LinkTo | ||
| title={{concat (t "page.deployment.title") " v" @matchingDeployment}} | ||
| @route="workspace.projects.project.app.deployment.deployment-seq" | ||
| @models={{array @matchingDeployment}} | ||
| > | ||
| Deployment <b class="badge badge--version">v{{@matchingDeployment}}</b> | ||
| </LinkTo> | ||
| {{else}} | ||
| {{t | ||
| "app_item_build.not_deployed" | ||
| }} | ||
| {{/if}} | ||
| </td> | ||
| <td data-test-provider> | ||
| <span class="table__icon-text-cell-span"> | ||
| <FlightIcon | ||
| data-test-icon-type={{icon-for-component operation.component.name}} | ||
| @name={{icon-for-component operation.component.name}} | ||
| @size="16" | ||
| /> | ||
| {{component-name operation.component.name}} | ||
| </span> | ||
| </td> | ||
| {{/let}} | ||
| </tr> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,31 @@ | ||
| import Route from '@ember/routing/route'; | ||
| import { Model as AppRouteModel } from '../app'; | ||
|
|
||
| type Model = AppRouteModel['builds']; | ||
| type Model = { | ||
| builds: AppRouteModel['builds']; | ||
| buildDeploymentPairs: Record<number, number>; | ||
| }; | ||
|
|
||
| export default class Builds extends Route { | ||
| async model(): Promise<Model> { | ||
| let app = this.modelFor('workspace.projects.project.app') as AppRouteModel; | ||
| return app.builds; | ||
| let bdPairs = {}; | ||
| for (let build of app.builds) { | ||
| let matchingDeployment = app.deployments.find((obj) => { | ||
| if (obj.preload && obj.preload.artifact) { | ||
| return obj.preload.artifact.id === build.pushedArtifact?.id; | ||
| } | ||
| return obj.artifactId === build.pushedArtifact?.id; | ||
| }); | ||
|
|
||
| if (matchingDeployment) { | ||
| bdPairs[build.sequence] = matchingDeployment.sequence; | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| builds: app.builds, | ||
| buildDeploymentPairs: bdPairs, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,25 @@ | ||
| import Route from '@ember/routing/route'; | ||
| import { Model as AppRouteModel } from '../app'; | ||
|
|
||
| type Model = AppRouteModel['releases']; | ||
| type Model = { | ||
| releases: AppRouteModel['releases']; | ||
| releaseDeploymentPairs: Record<number, number>; | ||
| }; | ||
|
|
||
| export default class Releases extends Route { | ||
| async model(): Promise<Model> { | ||
| let app = this.modelFor('workspace.projects.project.app') as AppRouteModel; | ||
| return app.releases; | ||
| let rdPairs = {}; | ||
| for (let release of app.releases) { | ||
| let matchingDeployment = app.deployments.find((obj) => obj.id === release?.deploymentId); | ||
| if (matchingDeployment) { | ||
| rdPairs[release.sequence] = matchingDeployment.sequence; | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| releases: app.releases, | ||
| releaseDeploymentPairs: rdPairs, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 32 additions & 17 deletions
49
ui/app/templates/workspace/projects/project/app/builds.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,35 @@ | ||
| {{page-title (concat @model.application.application "Builds")}} | ||
|
|
||
| <h2 class="list-heading">{{t "page.builds.title"}}</h2> | ||
|
|
||
| <ul data-test-build-list class="list"> | ||
| {{#each @model key="id" as |build|}} | ||
| <AppItem::Build @build={{build}} /> | ||
| {{else}} | ||
| <EmptyState> | ||
| <p>There are no builds to display for this app yet</p> | ||
| <p>To create your first build, you can run | ||
| <CopyableCode @ref="empty-build" @inline="true"> | ||
| <code id="empty-build">waypoint build</code> | ||
| </CopyableCode> | ||
| from the CLI</p> | ||
| </EmptyState> | ||
| {{/each}} | ||
| </ul> | ||
| {{#if @model.builds}} | ||
| <Table class="table--artifact-list"> | ||
| <colgroup> | ||
| <col class="w-2/5"> | ||
| <col class="w-1/5"> | ||
| <col class="w-1/5"> | ||
| <col class="w-1/5"> | ||
| </colgroup> | ||
| <thead> | ||
| <tr> | ||
| <th>{{t 'page.builds.table.row-header'}}</th> | ||
| <th>{{t 'page.builds.table.status'}}</th> | ||
| <th>{{t 'page.builds.table.deployment'}}</th> | ||
| <th>{{t 'page.builds.table.provider'}}</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody data-test-build-list> | ||
| {{#each @model.builds key="id" as |build|}} | ||
| <AppItem::Build @build={{build}} @matchingDeployment={{get @model.buildDeploymentPairs build.sequence}} /> | ||
| {{/each}} | ||
| </tbody> | ||
| </Table> | ||
| {{else}} | ||
| <EmptyState> | ||
| <p>{{t 'page.builds.table.empty-state.line-1'}}</p> | ||
| <p>{{t 'page.builds.table.empty-state.line-2'}} | ||
| <CopyableCode @ref="empty-build" @inline="true"> | ||
| <code id="empty-build">waypoint build</code> | ||
| </CopyableCode> | ||
| {{t 'page.builds.table.empty-state.line-3'}}</p> | ||
| </EmptyState> | ||
| {{/if}} | ||
|
|
||
| {{outlet}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.