merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

1 files changed, 78 insertions, 0 deletions

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 000000000..f02ed6293
--- /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>