merge from ecomp a88f0072 - Modern UI
Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
new file mode 100644
index 0000000..f02ed62
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
@@ -0,0 +1,78 @@
+<div class="drawing-board-header">
+ <div class="left-header">
+ <span class="vid-logo-small"></span>
+ <span class="icon-back">
+ <svg-icon
+ (click)="closePage()"
+ [testId]="'backBtn'"
+ [size]="'large'"
+ [name]="'navigation-arrow-back'">
+ </svg-icon>
+ </span>
+
+ <div class="header-col middleDetails" style="padding-top: 5px;padding-left: 13px;line-height: 100%;" *ngIf="isServiceFailed">
+ <custom-popover class="failed-popover-wrap" [value]= "serviceStatusMessage" [placement]="'bottom'" [popoverType]="'error'">
+ <span [attr.data-tests-id]="'service-failed-msg'" class="failed-msg labelPosition" >Failed</span>
+ </custom-popover>
+ </div>
+ <div class="header-col middleDetails" style="padding-top: 0px;padding-left: 13px;line-height: 100%;padding-right: 50px;">
+ <span [attr.data-tests-id]="'serviceInstance'" class="service-instance-label labelPosition">Service instance:</span>
+ <span [attr.data-tests-id]="'serviceName'" [ngClass]="{'deleted' : isDeleted}" class="service-instance-name">{{serviceName}}</span>
+ </div>
+ <div class="header-col middleDetails notShowOnCreateMode"
+ style="padding-top: 0px;padding-left: 13px;line-height: 100%;">
+ <span [attr.data-tests-id]="'orchStatusLabel'" class="service-instance-label labelPosition">Orch Status:</span>
+ <span [attr.data-tests-id]="'orchStatusValue'" class="orch-status-value">{{serviceOrchStatus}}</span>
+ </div>
+ <div class="quantity-container header-col middleDetails"
+ style="padding-top: 0px;padding-left: 13px;line-height: 100%;"
+ tooltip="Number of services to instantiate including all their objects as defined below">
+ <span [attr.data-tests-id]="'quantityLabel'" class="quantity-instance-label labelPosition">Scale Times:</span>
+ <span [attr.data-tests-id]="'servicesQuantity'" class="scale-value"
+ style="font-family: OpenSans-Semibold;font-size: 13px;"> {{numServicesToDeploy}} </span>
+ </div>
+
+ <span [attr.data-tests-id]="'serviceStatus'" class="status" tooltip="{{status}}"></span>
+ <span [attr.data-tests-id]="'isViewOnly-status-test'" class="service-instance-label purple">{{getModeName()}}</span>
+ </div>
+
+
+ <div class="right-header">
+ <span class="menu-container notShowOnViewMode notShowOnRetryMode">
+ <span [attr.data-tests-id]="'openMenuBtn'" class="icon-browse" (click)="onContextMenu($event)"></span>
+ <context-menu>
+ <ng-template *ngIf="drawingBoardHeaderService?.showEditService(mode, serviceModelId)" contextMenuItem (execute)="editService()">
+ <div [attr.data-tests-id]="'context-menu-header-edit-item'">
+ <span class="icon-edit"></span>Edit</div>
+ </ng-template>
+ <ng-template *ngIf="mode === 'EDIT'" contextMenuItem
+ (execute)="isDeleted=!isDeleted; drawingBoardHeaderService.deleteService(serviceModelId,isDeleted)">
+ <div [attr.data-tests-id]="'context-menu-header-delete-item'"><span class="icon-trash"></span>{{isDeleted ? 'Undo delete': 'Delete'}}</div>
+ </ng-template>
+ <ng-template *ngIf="mode !== 'CREATE'" contextMenuItem
+ (execute)="drawingBoardHeaderService.showAuditInfo(serviceModelId)">
+ <div [attr.data-tests-id]="'context-menu-header-audit-item'" style="float: left;margin-top: 8px;">
+ <svg-icon
+ [ngClass]="'eye-o'"
+ class="eye-o"
+ [size]="'small'"
+ [name]="'eye-o'">
+ </svg-icon></div>
+ <div style="padding-left: 12px;">Show Audit Info</div>
+ </ng-template>
+ </context-menu>
+ </span>
+ <button [disabled]="drawingBoardHeaderService?.deployShouldBeDisabled(serviceModelId, mode)"
+ *ngIf="mode !== 'VIEW' && mode !== 'RETRY'; else viewEditButton"
+ [attr.data-tests-id]="'deployBtn'"
+ (click)="deployService()"
+ class="deploy-btn">{{drawingBoardHeaderService?.getModeButton(mode)}}</button>
+ <ng-template #viewEditButton>
+ <button [disabled]="!isPermitted()"
+ [attr.data-tests-id]="'editBtn'"
+ (click)="editViewEdit()"
+ class="deploy-btn">{{drawingBoardHeaderService?.getButtonText(mode)}}
+ </button>
+ </ng-template>
+ </div>
+</div>