vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html

<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: 7px;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'"
            [ngClass]="{'tag-status-value' :serviceOrchStatus?.toLowerCase()!= 'active'}"
            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
      *ngIf = "isUpgrade || isDeleted || isResume"
      [ngClass] = "isDeleted===true ? 'action-status-type-header delete' : 'action-status-type-header resume'"
      [attr.data-tests-id]="determineDataTestId()">
      {{getAction()}}
    </span>
    <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)="onDeleteUndoDeleteClick()">
          <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>
        <ng-template *ngIf="drawingBoardHeaderService?.showResumeService(serviceModelId)" contextMenuItem
                     (execute)="onResumeUndoResumeClick()">
          <div [attr.data-tests-id]="'context-menu-header-resume-item'"><span class="icon-trash"></span>{{isResume ? 'Undo resume': 'Resume'}}</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>