feat(bridge): Consider abort state of sequence (#6215)

* feat(bridge): Consider abort state of sequence (#6215) Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com> * consider succeeded state of sequence Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com> * prettier and eslint fix Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com> * fixed naming of tests Signed-off-by: Klaus Strießnig <k.striessnig@gmail.com>
keptn · Dec 6, 2021 · f86f2f2 · f86f2f2
1 parent f5af13c
commit f86f2f2
Show file tree

Hide file tree

Showing 32 changed files with 1,023 additions and 102 deletions.
diff --git a/bridge/client/_variables.scss b/bridge/client/_variables.scss
@@ -4,4 +4,9 @@ $primary-color: #006bb8;
 $secondary-color: #002c66;
 $link-icon-color: #00a1b2;
 
+/* sequence and task status colors */
+$aborted-color: #b7b7b7;
+$approval-color: #2ab6f4;
+$approval-color-hover: #14a8f5;
+
 $gap-normal: 8px;
diff --git a/...pp/_components/ktb-deployment-stage-timeline/ktb-deployment-stage-timeline.component.html b/...pp/_components/ktb-deployment-stage-timeline/ktb-deployment-stage-timeline.component.html
@@ -8,7 +8,8 @@
         [isSelected]="selectedStage === stage.name"
         [success]="!stage.isFaulty() && !stage.approvalInformation && !stage.isWarning()"
         [error]="stage.isFaulty()"
-        [class.warning]="stage.isWarning()"
+        [warning]="stage.isWarning()"
+        [aborted]="stage.isAborted()"
         [highlight]="!!stage.approvalInformation"
         [fill]="!!stage.deploymentURL"
         (click)="$event.stopPropagation(); selectStage(stage.name)"

diff --git a/bridge/client/app/_components/ktb-expandable-tile/ktb-expandable-tile.component.scss b/bridge/client/app/_components/ktb-expandable-tile/ktb-expandable-tile.component.scss
@@ -75,6 +75,6 @@
   }
 
   &.ktb-tile-highlight .ktb-expandable-tile-container {
-    border-color: $blue-400;
+    border-color: $approval-color;
   }
 }
diff --git a/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.html b/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.html
@@ -6,7 +6,8 @@
       [warning]="sequence.isFinished() && sequence.isWarning()"
       [success]="sequence.isSuccessful()"
       [highlight]="sequence.hasPendingApproval()"
-      [selected]="_selectedEvent == sequence"
+      [aborted]="sequence.isAborted()"
+      [selected]="_selectedEvent === sequence"
       [attr.uitestid]="'keptn-root-events-list-' + sequence.shkeptncontext"
       *ngIf="sequence"
     >

diff --git a/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.scss b/bridge/client/app/_components/ktb-root-events-list/ktb-root-events-list.component.scss
@@ -56,11 +56,20 @@
 
     &.ktb-tile-highlight:hover .ktb-selectable-tile-container,
     &.ktb-tile-highlight .ktb-selectable-tile-container {
-      border-color: $blue-400;
+      border-color: $approval-color;
     }
 
     &.ktb-tile-selected.ktb-tile-highlight .ktb-selectable-tile-container:before {
-      background: $blue-400;
+      background: $approval-color;
+    }
+
+    &.ktb-tile-aborted:hover .ktb-selectable-tile-container,
+    &.ktb-tile-aborted .ktb-selectable-tile-container {
+      border-color: $aborted-color;
+    }
+
+    &.ktb-tile-selected.ktb-tile-aborted .ktb-selectable-tile-container:before {
+      background: $aborted-color;
     }
   }
 }
diff --git a/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.scss b/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.scss
@@ -35,6 +35,10 @@
     border-color: $cta-color;
   }
   &.ktb-tile-highlight .ktb-selectable-tile-container {
-    border-color: $blue-400;
+    border-color: $approval-color;
+  }
+
+  &.ktb-tile-aborted .ktb-selectable-tile-container {
+    border-color: $aborted-color;
   }
 }
diff --git a/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.ts b/bridge/client/app/_components/ktb-selectable-tile/ktb-selectable-tile.component.ts
@@ -21,6 +21,7 @@ export class KtbSelectableTileComponent {
   private _warning = false;
   private _success = false;
   private _highlight = false;
+  private _aborted = false;
 
   /** Whether the tile is selected. */
   @Input()
@@ -76,6 +77,19 @@ export class KtbSelectableTileComponent {
     }
   }
 
+  @Input()
+  @HostBinding('attr.aria-aborted')
+  @HostBinding('class.ktb-tile-aborted')
+  get aborted(): boolean {
+    return this._aborted;
+  }
+
+  set aborted(value: boolean) {
+    if (this._aborted !== value) {
+      this._aborted = value;
+    }
+  }
+
   @Input()
   @HostBinding('attr.aria-success')
   @HostBinding('class.ktb-tile-success')

diff --git a/bridge/client/app/_components/ktb-sequence-controls/ktb-sequence-controls.component.html b/bridge/client/app/_components/ktb-sequence-controls/ktb-sequence-controls.component.html
@@ -7,7 +7,7 @@
       variant="nested"
       title="Pause sequence"
       (click)="$event.stopPropagation(); triggerPauseSequence(sequence)"
-      [disabled]="sequence.isFinished() || sequence?.isUnkownState()"
+      [disabled]="sequence.isFinished() || sequence?.isUnknownState()"
       uitestid="sequencePauseButton"
     >
       <dt-icon name="pause"></dt-icon>
@@ -19,7 +19,7 @@
       variant="nested"
       title="Resume sequence"
       (click)="$event.stopPropagation(); triggerResumeSequence(sequence)"
-      [disabled]="sequence.isFinished() || sequence?.isUnkownState()"
+      [disabled]="sequence.isFinished() || sequence?.isUnknownState()"
       uitestid="sequenceResumeButton"
     >
       <dt-icon name="resume"></dt-icon>
@@ -30,7 +30,7 @@
       variant="nested"
       title="Abort sequence"
       (click)="$event.stopPropagation(); triggerAbortSequence(sequence)"
-      [disabled]="sequence?.isFinished() || sequence?.isUnkownState()"
+      [disabled]="sequence?.isFinished() || sequence?.isUnknownState()"
       uitestid="sequenceAbortButton"
     >
       <dt-icon name="abort"></dt-icon>
@@ -44,7 +44,7 @@
       variant="nested"
       title="Pause sequence"
       (click)="$event.stopPropagation(); triggerPauseSequence(sequence)"
-      [disabled]="sequence.isFinished() || sequence?.isUnkownState()"
+      [disabled]="sequence.isFinished() || sequence?.isUnknownState()"
       uitestid="sequencePauseButton"
     >
       <dt-icon name="pause"></dt-icon> Pause
@@ -56,7 +56,7 @@
       variant="nested"
       title="Resume sequence"
       (click)="$event.stopPropagation(); triggerResumeSequence(sequence)"
-      [disabled]="sequence.isFinished() || sequence?.isUnkownState()"
+      [disabled]="sequence.isFinished() || sequence?.isUnknownState()"
       uitestid="sequenceResumeButton"
     >
       <dt-icon name="resume"></dt-icon> Resume
@@ -67,7 +67,7 @@
       variant="nested"
       title="Abort sequence"
       (click)="$event.stopPropagation(); triggerAbortSequence(sequence)"
-      [disabled]="sequence?.isFinished() || sequence?.isUnkownState()"
+      [disabled]="sequence?.isFinished() || sequence?.isUnknownState()"
       uitestid="sequenceAbortButton"
     >
       <dt-icon name="abort"></dt-icon> Abort

diff --git a/bridge/client/app/_components/ktb-sequence-state-info/ktb-sequence-state-info.component.html b/bridge/client/app/_components/ktb-sequence-state-info/ktb-sequence-state-info.component.html
@@ -8,6 +8,7 @@
       [class.warning]="sequence.isWarning()"
       [class.error]="sequence.isFaulty()"
       [class.highlight]="sequence.hasPendingApproval()"
+      [class.aborted]="sequence.isAborted()"
     ></dt-icon>
     <ng-template #showLoading>
       <button class="m-0 p-0" dt-button disabled variant="nested" *ngIf="sequence.isLoading() && !sequence.isWaiting()">
@@ -47,8 +48,9 @@
         [evaluationResult]="sequence.getEvaluation(stage)"
         [success]="sequence.isSuccessful(stage)"
         [error]="sequence.isFaulty(stage)"
-        [class.warning]="sequence.isWarning(stage)"
+        [warning]="sequence.isWarning(stage)"
         [highlight]="sequence.hasPendingApproval(stage)"
+        [aborted]="sequence.isAborted(stage)"
         (click)="$event.stopPropagation(); stageClick(sequence, stage)"
       ></ktb-stage-badge>
     </ng-container>

diff --git a/bridge/client/app/_components/ktb-sequence-timeline/ktb-sequence-timeline.component.html b/bridge/client/app/_components/ktb-sequence-timeline/ktb-sequence-timeline.component.html
@@ -20,6 +20,7 @@
             [class.success]="currentSequence.isSuccessful(stage)"
             [class.highlight]="currentSequence.hasPendingApproval(stage)"
             [class.warning]="currentSequence.isWarning(stage)"
+            [class.aborted]="currentSequence.isAborted(stage)"
           ></dt-icon>
           <ng-template #showLoading>
             <button
@@ -39,6 +40,7 @@
             [class.success]="!currentSequence.hasPendingApproval(stage) && !currentSequence.isFaulty(stage)"
             [class.highlight]="currentSequence.hasPendingApproval(stage)"
             [class.warning]="currentSequence.isWarning(stage)"
+            [class.aborted]="currentSequence.isAborted(stage)"
             [class.focused]="stage === selectedStage"
             [textContent]="stage"
           ></span>

diff --git a/bridge/client/app/_components/ktb-sequence-timeline/ktb-sequence-timeline.component.scss b/bridge/client/app/_components/ktb-sequence-timeline/ktb-sequence-timeline.component.scss
@@ -47,10 +47,13 @@
       background-color: $cta-color-active;
     }
     &.highlight {
-      background-color: $blue-400;
+      background-color: $approval-color;
     }
     &.warning {
       background-color: $warning-color;
     }
+    &.aborted {
+      background-color: $aborted-color;
+    }
   }
 }
diff --git a/bridge/client/app/_components/ktb-services-list/ktb-services-list.component.html b/bridge/client/app/_components/ktb-services-list/ktb-services-list.component.html
@@ -21,6 +21,7 @@
                 [class.success]="currentSequence.isSuccessful(service.stage)"
                 [class.warning]="currentSequence.isWarning(service.stage)"
                 [class.highlight]="currentSequence.hasPendingApproval(service.stage)"
+                [class.aborted]="currentSequence.isAborted(service.stage)"
               ></dt-icon>
               <ng-template #showLoading>
                 <button class="m-0 p-0" dt-button disabled variant="nested">

diff --git a/bridge/client/app/_components/ktb-stage-badge/ktb-stage-badge.component.html b/bridge/client/app/_components/ktb-stage-badge/ktb-stage-badge.component.html
@@ -4,6 +4,7 @@
   [class.ktb-stage-badge-warning]="warning"
   [class.ktb-stage-badge-success]="success"
   [class.ktb-stage-badge-highlight]="highlight"
+  [class.ktb-stage-badge-aborted]="aborted"
   fxLayout="row"
   fxLayoutAlign="start center"
 >

diff --git a/bridge/client/app/_components/ktb-stage-badge/ktb-stage-badge.component.scss b/bridge/client/app/_components/ktb-stage-badge/ktb-stage-badge.component.scss
@@ -54,11 +54,21 @@
 
   &.ktb-stage-badge-highlight {
     .dt-tag {
-      border-color: $blue-400;
+      border-color: $approval-color;
     }
     .timeline-item:hover,
     .focused {
-      background-color: $blue-400;
+      background-color: $approval-color;
+    }
+  }
+
+  &.ktb-stage-badge-aborted {
+    .dt-tag {
+      border-color: $aborted-color;
+    }
+    .timeline-item:hover,
+    .focused {
+      background-color: $aborted-color;
     }
   }
 }

diff --git a/bridge/client/app/_components/ktb-stage-badge/ktb-stage-badge.component.ts b/bridge/client/app/_components/ktb-stage-badge/ktb-stage-badge.component.ts
@@ -17,4 +17,5 @@ export class KtbStageBadgeComponent {
   @Input() public warning = false;
   @Input() public success = false;
   @Input() public highlight = false;
+  @Input() public aborted = false;
 }
diff --git a/bridge/client/app/_components/ktb-stage-details/ktb-stage-details.component.scss b/bridge/client/app/_components/ktb-stage-details/ktb-stage-details.component.scss
@@ -1,3 +1,4 @@
+@import '../../../variables';
 @import '~@dynatrace/barista-components/style/main';
 
 .dt-toggle-button-group {
@@ -42,23 +43,23 @@
 
     &.highlight:not(.dt-toggle-button-item-disabled) {
       .dt-toggle-button-item-icon {
-        background-color: $blue-400;
+        background-color: $approval-color;
       }
       &.dt-toggle-button-item-selected {
-        border-color: $blue-400;
+        border-color: $approval-color;
         .dt-toggle-button-item-icon {
-          background-color: $blue-400;
+          background-color: $approval-color;
         }
       }
     }
     &.highlight:not(.dt-toggle-button-item-disabled):hover {
       .dt-toggle-button-item-icon {
-        background-color: $blue-500;
+        background-color: $approval-color-hover;
       }
       &.dt-toggle-button-item-selected {
-        border-color: $blue-500;
+        border-color: $approval-color-hover;
         .dt-toggle-button-item-icon {
-          background-color: $blue-500;
+          background-color: $approval-color-hover;
         }
       }
     }

diff --git a/bridge/client/app/_models/deployment.spec.ts b/bridge/client/app/_models/deployment.spec.ts
@@ -19,6 +19,7 @@ import {
   SubSequencesWarningMock,
   UpdatedDeploymentMock,
 } from '../_services/_mockData/deployments.mock';
+import { SequenceState } from '../../../shared/models/sequence';
 
 describe('Deployment', () => {
   it('should correctly create new class', () => {
@@ -37,6 +38,16 @@ describe('Deployment', () => {
     expect(deployment).toEqual(expectedDeployment);
   });
 
+  it('should be finished', () => {
+    const deployment = Deployment.fromJSON(ExpectedDeploymentMock);
+    expect(deployment.isFinished()).toBe(true);
+  });
+
+  it('should not be finished', () => {
+    const deployment = Deployment.fromJSON(ServiceDeploymentWithApprovalMock);
+    expect(deployment.isFinished()).toBe(false);
+  });
+
   it('should assign subSequences', () => {
     const stageDeployment = StageDeployment.fromJSON(StageDeploymentEmptyMock);
     const newStageDeployment = StageDeployment.fromJSON(StageDeploymentDeliveryFinishedPassMock);
@@ -138,6 +149,17 @@ describe('Deployment', () => {
     expect(stageDeployment.isWarning()).toBe(true);
   });
 
+  it('should be aborted', () => {
+    const stageDeployment = getStageDeployment();
+    stageDeployment.state = SequenceState.ABORTED;
+    expect(stageDeployment.isAborted()).toBe(true);
+  });
+
+  it('should not be aborted', () => {
+    const stageDeployment = getStageDeployment();
+    expect(stageDeployment.isAborted()).toBe(false);
+  });
+
   function getStageDeployment(): StageDeployment {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore

diff --git a/bridge/client/app/_models/deployment.ts b/bridge/client/app/_models/deployment.ts
@@ -8,6 +8,7 @@ import { ServiceRemediationInformation } from './service-remediation-information
 
 export class StageDeployment implements IStageDeployment {
   name!: string;
+  state!: SequenceState;
   deploymentURL?: string;
   hasEvaluation!: boolean;
   lastTimeUpdated!: string;
@@ -45,6 +46,10 @@ export class StageDeployment implements IStageDeployment {
     return this.subSequences.some((seq) => seq.result === ResultTypes.FAILED);
   }
 
+  public isAborted(): boolean {
+    return this.state === SequenceState.ABORTED;
+  }
+
   public removeApproval(): void {
     this.approvalInformation = undefined;
     for (const subSequence of this.subSequences) {
@@ -59,6 +64,7 @@ export class StageDeployment implements IStageDeployment {
     this.openRemediations = stage.openRemediations;
     this.deploymentURL ??= stage.deploymentURL;
     this.evaluationResult ??= stage.evaluationResult;
+    this.state = stage.state;
 
     if ((stage.hasEvaluation && !this.hasEvaluation) || !this.latestEvaluation) {
       this.latestEvaluation = stage.latestEvaluation;
@@ -104,6 +110,10 @@ export class Deployment implements dp {
     return deployment;
   }
 
+  public isFinished(): boolean {
+    return Sequence.isFinished(this.state);
+  }
+
   public getStage(stageName: string): StageDeployment | undefined {
     return this.stages.find((stage) => stage.name === stageName);
   }