Create stage-overview component

[ermin-muratovic]

The project-board component has a lot of content in it and could be extracted into smaller components. The stage overview in the environment tab might be improved and should be extraced into a separate component to increase maintainability.

keptn/bridge/client/app/project-board/project-board.component.html

Lines 46 to 89 in 1e01da9

	<dt-info-group>
	<dt-info-group-title>
	<p><span [textContent]="project.stages.length"></span> Stages</p>
	</dt-info-group-title>
	<div class="mr-minus-15" fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="15px" fxLayoutAlign="start">
	<ktb-selectable-tile *ngFor="let stage of project.stages; trackBy:trackStage"
	fxFlex="0 1 calc(33.3% - 15px)" fxFlex.lt-md="0 1 calc(50% - 15px)" fxFlex.lt-sm="100%"
	(click)="selectStage($event, stage);" [selected]="selectedStage == stage">
	<h2 class="m-0 mt-1 mb-1" [textContent]="stage.stageName"></h2>
	<div class="stage-state" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
	<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px"
	*ngIf="project.getLatestProblemEvents(stage) as problemEvents"
	(click)="problemEvents.length > 0 && selectStage($event, stage, 'problem')">
	<dt-icon class="stage-state-icon event-icon" name="criticalevent" [class.error]="problemEvents.length > 0"></dt-icon>
	<span [textContent]="problemEvents.length"></span>
	</div>
	<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px"
	*ngIf="project.getLatestFailedRootEvents(stage) as failedRootEvents"
	(click)="failedRootEvents.length > 0 && selectStage($event, stage, 'evaluation')">
	<dt-icon class="stage-state-icon event-icon" name="traffic-light" [class.error]="failedRootEvents.length > 0"></dt-icon>
	<span [textContent]="failedRootEvents.length"></span>
	</div>
	<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px"
	*ngIf="openApprovals$ | async as openApprovals"
	(click)="countOpenApprovals(openApprovals, project, stage) > 0 && selectStage($event, stage, 'approval')">
	<dt-icon class="stage-state-icon" name="deploy" [class.out-of-sync-service]="countOpenApprovals(openApprovals, project, stage) > 0"></dt-icon>
	<span [textContent]="countOpenApprovals(openApprovals, project, stage)"></span>
	</div>
	</div>
	<ng-container *ngIf="stage.services && stage.services.length > 0; else noService">
	<ng-container *ngIf="openApprovals$ | async as openApprovals">
	<dt-tag-list aria-label="services">
	<dt-tag *ngFor="let service of stage.services" [class.out-of-sync-service]="countOpenApprovals(openApprovals, project, stage, service) > 0" [class.error]="findProblemEvent(project.getLatestProblemEvents(stage), service)">
	<span *ngIf="service.deployedImage; else noDeploymentOfServiceTag" [textContent]="service.getShortImageName()"></span>
	<ng-template #noDeploymentOfServiceTag>
	<span class="no-deployment" [textContent]="service.serviceName"></span>
	</ng-template>
	</dt-tag>
	</dt-tag-list>
	</ng-container>
	</ng-container>
	</ktb-selectable-tile>
	</div>
	</dt-info-group>

See also #2939