-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
114 additions
and
132 deletions.
There are no files selected for viewing
79 changes: 12 additions & 67 deletions
79
.../src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
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,70 +1,15 @@ | ||
| @switch (state()) { | ||
| @case ('SUCCESS') { | ||
| <!-- Success State --> | ||
| <p-tag severity="success" [rounded]="true" [pTooltip]="'Latest Deployment Successful'"> | ||
| <i-tabler name="check" class="!size-5"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('WAITING') { | ||
| <!-- In Progress State --> | ||
| <p-tag severity="warn" [rounded]="true" [pTooltip]="'Waiting deployment'"> | ||
| <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('PENDING') { | ||
| <!-- Pending State --> | ||
| <p-tag severity="warn" [rounded]="true" [pTooltip]="'Deployment pending'"> | ||
| <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('IN_PROGRESS') { | ||
| <!-- In Progress State --> | ||
| <p-tag severity="info" [rounded]="true" [pTooltip]="'Deployment in progress'"> | ||
| <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('QUEUED') { | ||
| <!-- Queued State --> | ||
| <p-tag severity="info" [rounded]="true" [pTooltip]="'Deployment queued'"> | ||
| <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('ERROR') { | ||
| <!-- Error State --> | ||
| <p-tag severity="danger" [rounded]="true" [pTooltip]="'Latest deployment failed'"> | ||
| <i-tabler name="exclamation-circle" class="!size-5"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('FAILURE') { | ||
| <!-- Failure State --> | ||
| <p-tag severity="danger" [rounded]="true" [pTooltip]="'Latest deployment failed'"> | ||
| <i-tabler name="exclamation-mark" class="!size-5"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('INACTIVE') { | ||
| <!-- Inactive State --> | ||
| <p-tag severity="secondary" [rounded]="true" [pTooltip]="'Deployment inactive'"> | ||
| <i-tabler name="time-duration-off" class="!size-5"></i-tabler> | ||
| </p-tag> | ||
| } | ||
|
|
||
| @case ('UNKNOWN') { | ||
| <!-- Unknown State --> | ||
| <p-tag severity="secondary" [rounded]="true" [pTooltip]="'Deployment state unknown'"> | ||
| <i-tabler name="question-mark" class="!size-5"></i-tabler> | ||
| </p-tag> | ||
| } | ||
| <div class="flex items-center gap-1"> | ||
| <p-tag [severity]="getSeverity()" [rounded]="rounded()" [pTooltip]="!verbose() ? getTooltip() : undefined" [value]="verbose() ? getValue() : undefined"> | ||
| <div class="flex items-center gap-2"> | ||
| <i-tabler [name]="getIcon()" [class]="getIconClass()"></i-tabler> | ||
| </div> | ||
| </p-tag> | ||
|
|
||
| @default { | ||
| <p-tag severity="secondary" [rounded]="true" [pTooltip]="'Unrecognized State'"> | ||
| <i-tabler name="question-mark" class="!size-5"></i-tabler> | ||
| @if (showLatestDeployment() && latestDeployment()) { | ||
| <span>now at</span> | ||
| <p-tag class="text-xs"> | ||
| <i-tabler name="git-branch" class="!size-4" /> | ||
| {{ latestDeployment()?.releaseCandidateName ?? latestDeployment()?.ref }} | ||
| </p-tag> | ||
| } | ||
| } | ||
| </div> |
92 changes: 88 additions & 4 deletions
92
...nt/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.ts
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,14 +1,98 @@ | ||
| import { Component, input } from '@angular/core'; | ||
| import { IconsModule } from 'icons.module'; | ||
| // deployment-state-tag.component.ts | ||
| import { Component, computed, input } from '@angular/core'; | ||
| import { TagModule } from 'primeng/tag'; | ||
| import { IconsModule } from 'icons.module'; | ||
| import { TooltipModule } from 'primeng/tooltip'; | ||
|
|
||
| type DeploymentState = 'SUCCESS' | 'WAITING' | 'PENDING' | 'IN_PROGRESS' | 'QUEUED' | 'ERROR' | 'FAILURE' | 'INACTIVE' | 'UNKNOWN' | 'NEVER_DEPLOYED' | 'REPLACED'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-deployment-state-tag', | ||
| standalone: true, | ||
| imports: [TagModule, IconsModule, TooltipModule], | ||
| providers: [], | ||
| templateUrl: './deployment-state-tag.component.html', | ||
| }) | ||
| export class DeploymentStateTagComponent { | ||
| state = input.required<string | undefined>(); | ||
| state = input.required<DeploymentState | undefined>(); | ||
| verbose = input(false); | ||
| showLatestDeployment = input(false); | ||
| latestDeployment = input<{ releaseCandidateName?: string; ref?: string } | null | undefined>(null); | ||
|
|
||
| rounded = computed(() => !this.verbose()); | ||
| internalState = computed(() => this.state() || 'UNKNOWN'); | ||
|
|
||
| getSeverity() { | ||
| const severityMap: Record<DeploymentState, Severity> = { | ||
| SUCCESS: 'success', | ||
| WAITING: 'warn', | ||
| PENDING: 'warn', | ||
| IN_PROGRESS: 'info', | ||
| QUEUED: 'info', | ||
| ERROR: 'danger', | ||
| FAILURE: 'danger', | ||
| INACTIVE: 'secondary', | ||
| UNKNOWN: 'secondary', | ||
| NEVER_DEPLOYED: 'secondary', | ||
| REPLACED: 'contrast', | ||
| }; | ||
| return severityMap[this.internalState()]; | ||
| } | ||
|
|
||
| getIcon() { | ||
| const iconMap: Record<DeploymentState, string> = { | ||
| SUCCESS: 'check', | ||
| WAITING: 'progress', | ||
| PENDING: 'progress', | ||
| IN_PROGRESS: 'progress', | ||
| QUEUED: 'progress', | ||
| ERROR: 'exclamation-circle', | ||
| FAILURE: 'exclamation-mark', | ||
| INACTIVE: 'time-duration-off', | ||
| UNKNOWN: 'question-mark', | ||
| NEVER_DEPLOYED: 'question-mark', | ||
| REPLACED: 'repeat', | ||
| }; | ||
| return iconMap[this.internalState()]; | ||
| } | ||
|
|
||
| getIconClass() { | ||
| const spinStates: DeploymentState[] = ['WAITING', 'PENDING', 'IN_PROGRESS', 'QUEUED']; | ||
| return `!size-5 ${spinStates.includes(this.internalState()) ? 'animate-spin' : ''}`; | ||
| } | ||
|
|
||
| getValue() { | ||
| const valueMap: Record<DeploymentState, string> = { | ||
| SUCCESS: 'success', | ||
| WAITING: 'waiting', | ||
| PENDING: 'pending', | ||
| IN_PROGRESS: 'in progress', | ||
| QUEUED: 'queued', | ||
| ERROR: 'failed', | ||
| FAILURE: 'failed', | ||
| INACTIVE: 'inactive', | ||
| UNKNOWN: 'unknown', | ||
| NEVER_DEPLOYED: 'never deployed', | ||
| REPLACED: 'replaced', | ||
| }; | ||
| return valueMap[this.internalState()]; | ||
| } | ||
|
|
||
| getTooltip() { | ||
| const tooltipMap: Record<DeploymentState, string> = { | ||
| SUCCESS: 'Latest Deployment Successful', | ||
| WAITING: 'Waiting deployment', | ||
| PENDING: 'Deployment pending', | ||
| IN_PROGRESS: 'Deployment in progress', | ||
| QUEUED: 'Deployment queued', | ||
| ERROR: 'Latest deployment failed', | ||
| FAILURE: 'Latest deployment failed', | ||
| INACTIVE: 'Deployment inactive', | ||
| UNKNOWN: 'Deployment state unknown', | ||
| NEVER_DEPLOYED: 'Never deployed', | ||
| REPLACED: 'Deployment was replaced', | ||
| }; | ||
| return tooltipMap[this.internalState()]; | ||
| } | ||
| } | ||
|
|
||
| type Severity = 'success' | 'secondary' | 'info' | 'warn' | 'danger' | 'contrast' | undefined; |
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
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
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