ktb-sequence-state-info.component.html

<ng-container *ngIf="sequence">
  <div *ngIf="createSequenceStateInfo(sequence) as info" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
    <dt-icon
      *ngIf="info.steady; else showLoading"
      class="event-icon"
      [name]="info.icon"
      [class.success]="info.successful"
      [class.warning]="info.warning"
      [class.error]="info.faulty"
      [class.highlight]="info.pendingApproval"
      [class.aborted]="info.aborted"
    ></dt-icon>
    <ng-template #showLoading>
      <button class="m-0 p-0" dt-button disabled variant="nested" *ngIf="info.loading && !info.waiting">
        <ktb-loading-spinner aria-label="Task is running..."></ktb-loading-spinner>
      </button>
      <dt-icon *ngIf="info.waiting" class="event-icon" name="idle"></dt-icon>
    </ng-template>
    <p class="m-0 smaller">
      <a
        class="m-0 bold"
        uitestid="keptn-sequence-info-sequenceName"
        [routerLink]="getSequenceLink(sequence)"
        [class.error]="info.faulty"
        [textContent]="sequence.name"
      ></a>
      of
      <a
        class="m-0 mr-1 bold nobreak"
        uitestid="keptn-sequence-info-serviceName"
        [routerLink]="getServiceLink(sequence)"
        [textContent]="sequence.service"
      ></a>
      <span [textContent]="info.statusText" uitestid="keptn-sequence-info-status"></span>
    </p>
  </div>
  <div
    *ngIf="showStages"
    class="mt-2 stages-list"
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayoutGap="5px"
    uitestid="keptn-sequence-info-stageDetails"
  >
    <ng-container *ngFor="let stageName of getStageNames(sequence)">
      <ktb-stage-badge
        *ngIf="createSequenceStateInfo(sequence, stageName) as badgeInfo"
        [stage]="stageName"
        [evaluationResult]="badgeInfo.evaluation"
        [success]="badgeInfo.successful"
        [error]="badgeInfo.faulty"
        [warning]="badgeInfo.warning"
        [highlight]="badgeInfo.pendingApproval"
        [aborted]="badgeInfo.aborted"
        (click)="$event.stopPropagation(); stageClick(sequence, stageName)"
      ></ktb-stage-badge>
    </ng-container>
  </div>
</ng-container>