vid-webpack-master/src/app/components/service-popup/service-instance-details/service-instance-details.html

   1
   2 <div id="service-instance-details">
   3   <form id="serviceForm" #serviceForm="ngForm" (ngSubmit)="onSubmit(serviceForm.value)" [formGroup]="serviceInstanceDetailsFormGroup">
   4     <!--We can't use [hidden] since bootstrap.css label has display: inline-block. -->
   5     <!--see https://stackoverflow.com/questions/34650410/angular-2-hidden-does-not-seem-to-be-working-->
   6     <label id="notification-area" *ngIf="isShowingNotificationArea()">Data entered will apply to all service instances</label>
   7
   8     <div class="details-item" *ngIf="serviceInstanceDetailsFormGroup.get('instanceName')">
   9       <label class="required">Instance name:</label>
  10       <input patternInput
  11              pattern="^[a-zA-Z0-9_]*$"
  12              [attr.data-tests-id]="'instanceName'"
  13              id="instance-name"
  14              name="instance-name"
  15              [ngClass]="{'error-style' :(serviceInstance?.instanceName != '' && serviceInstanceDetailsFormGroup.controls['instanceName']?.touched && serviceInstanceDetailsFormGroup.controls['instanceName']?.errors?.pattern !== null)}"
  16              [formControlName]="'instanceName'"
  17              class="form-control input-text"
  18              placeholder="Type Instance Name"
  19              type="text"
  20              [(ngModel)]="serviceInstance.instanceName" required>
  21       <form-control-error
  22         *ngIf="serviceInstance?.instanceName != '' && serviceInstanceDetailsFormGroup.controls['instanceName']?.touched && serviceInstanceDetailsFormGroup.controls['instanceName']?.errors?.pattern !== null"
  23         [message]="'Instance name may include only alphanumeric characters and underscore.'"></form-control-error>
  24
  25     </div>
  26
  27     <div class="details-item">
  28       <label class="required">Subscriber name:</label>
  29       <select class="subscriber form-control input-text" id="subscriber-name-select" data-tests-id="subscriberName"
  30               name="subscriber-name-select" [formControlName]="'globalSubscriberId'"
  31               [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('globalSubscriberId',servicePopupDataModel?.subscribers, serviceInstanceDetailsFormGroup)}"
  32               [(ngModel)]="serviceInstance.globalSubscriberId"
  33               required>
  34         <option [value]="undefined" disabled>Select Subscriber Name</option>
  35         <option class="subscriberNameOption" *ngFor="let subscriber of servicePopupDataModel.subscribers"
  36                 [value]="subscriber.id" [disabled]="!subscriber.isPermitted">{{subscriber.name}}</option>
  37       </select>
  38       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('globalSubscriberId',servicePopupDataModel?.subscribers, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
  39
  40     </div>
  41
  42     <div class="details-item">
  43       <label class="required">Service type:</label>
  44       <select class="form-control input-text"
  45               [(ngModel)]="serviceInstance.subscriptionServiceType"
  46               [formControlName]="'subscriptionServiceType'"
  47               [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('subscriptionServiceType',servicePopupDataModel?.serviceTypes, serviceInstanceDetailsFormGroup)}"
  48               data-tests-id="serviceType" id="service-type-select"
  49               name="service-type" required>
  50         <option [value]="undefined" disabled>Select Service Type</option>
  51         <option *ngFor="let serviceType of servicePopupDataModel.serviceTypes" class="serviceTypeOption" [value]="serviceType.name" [disabled]="!serviceType.isPermitted">{{serviceType.name}}</option>
  52       </select>
  53       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('subscriptionServiceType',servicePopupDataModel?.serviceTypes, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
  54     </div>
  55
  56     <div class="details-item">
  57       <label class="required">Product family:</label>
  58       <select class="form-control input-text"
  59               data-tests-id="productFamily"
  60               id="product-family-select"
  61               [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('productFamilyId',productFamilies, serviceInstanceDetailsFormGroup)}"
  62               [formControlName]="'productFamilyId'"
  63               [(ngModel)]="serviceInstance.productFamilyId"
  64               name="product-family-select" required>
  65         <option [value]="undefined" disabled>Select Product Family</option>
  66         <option *ngFor="let productFamily of productFamilies | async" [value]="productFamily.id"
  67                 [disabled]="!productFamily.isPermitted">{{productFamily.name}}</option>
  68       </select>
  69       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('productFamilyId',productFamilies, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
  70     </div>
  71
  72     <div class="details-item">
  73       <label class="required">LCP region:</label>
  74       <select
  75         class="form-control input-text"
  76         [formControlName]="'lcpCloudRegionId'"
  77         [(ngModel)]="serviceInstance.lcpCloudRegionId"
  78         [ngClass]="{'error-style ' : serviceInstanceDetailsService.hasApiError('lcpCloudRegionId', servicePopupDataModel?.lcpRegions, serviceInstanceDetailsFormGroup)}"
  79         name="lcpRegion"
  80         id="lcpRegion-select"
  81         data-tests-id="lcpRegion"
  82         required>
  83         <option [value]="undefined" disabled>Select LCP Region</option>
  84         <option *ngFor="let lcpRegion of servicePopupDataModel.lcpRegions" [value]="lcpRegion.id" [disabled]="!lcpRegion.isPermitted" class="lcpRegionOption">{{lcpRegion.id}}</option>
  85       </select>
  86       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('lcpCloudRegionId', servicePopupDataModel?.lcpRegions, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
  87     </div>
  88
  89     <div class="details-item">
  90       <label class="required">Tenant:</label>
  91       <select class="form-control input-text"
  92               [formControlName]="'tenantId'"
  93               [(ngModel)]="serviceInstance.tenantId"
  94               name="tenant" id="tenant-select"
  95               [ngClass]="{'error-style ' : serviceInstanceDetailsService.hasApiError('tenantId',servicePopupDataModel?.tenants ,serviceInstanceDetailsFormGroup)}"
  96               data-tests-id="tenant" required>
  97         <option [value]="undefined" disabled>Select Tenant</option>
  98         <option *ngFor="let tenant of servicePopupDataModel.tenants" [value]="tenant.id" [disabled]="!tenant.isPermitted">{{tenant.name}}</option>
  99       </select>
 100       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('tenantId',servicePopupDataModel?.tenants ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
 101     </div>
 102
 103     <div class="details-item">
 104       <label>AIC Zone:</label>
 105       <select
 106         class="form-control input-text"
 107         name="aicZone" id="aicZone-select"
 108         data-tests-id="aic_zone"
 109         [formControlName]="'aicZoneId'"
 110         [ngClass]="{'error-style ' : servicePopupDataModel?.aicZones?.length == 0 && serviceInstanceDetailsFormGroup.controls['aicZoneId'].disabled == false}"
 111         [(ngModel)]="serviceInstance.aicZoneId" >
 112         <option [value]="undefined" disabled>Select AIC Zone</option>
 113         <option class="aicZoneOption" *ngFor="let aicZone of servicePopupDataModel.aicZones" [value]="aicZone.id">{{aicZone.name}}</option>
 114       </select>
 115       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('aicZoneId',servicePopupDataModel?.aicZones ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
 116
 117     </div>
 118
 119     <div class="details-item">
 120       <label>Project:</label>
 121       <select
 122         [attr.data-tests-id]="'project'"
 123         class="form-control input-text"
 124         [ngClass]="{'error-style ' : servicePopupDataModel?.projects?.length == 0 && serviceInstanceDetailsFormGroup.controls['projectName'].disabled == false}"
 125         name="project" id="project"
 126         [formControlName]="'projectName'"
 127         [(ngModel)]="serviceInstance.projectName" >
 128         <option [value]="undefined" disabled>Select Project</option>
 129         <option *ngFor="let project of servicePopupDataModel.projects" [value]="project.id">{{project.name}}</option>
 130       </select>
 131       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('projectName',servicePopupDataModel?.projects ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
 132
 133     </div>
 134
 135     <div class="details-item">
 136       <label class="required">Owning entity:</label>
 137       <select [attr.data-tests-id]="'owningEntity'"
 138               class="form-control input-text"
 139               [formControlName]="'owningEntityId'"
 140               [(ngModel)]="serviceInstance.owningEntityId"
 141               name="owningEntity" id="owningEntity"
 142               [ngClass]="{'error-style ' : servicePopupDataModel?.owningEntities?.length == 0 && serviceInstanceDetailsFormGroup.controls['owningEntityId'].disabled == false}"
 143               required>
 144         <option [value]="undefined" disabled>Select Owning Entity</option>
 145         <option *ngFor="let owningEntity of servicePopupDataModel.owningEntities" [value]="owningEntity.id">{{owningEntity.name}}</option>
 146       </select>
 147       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('owningEntityId',servicePopupDataModel?.owningEntities ,serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
 148     </div>
 149     <div class="details-item">
 150       <label class="required">Rollback On Failure:</label>
 151       <select [attr.data-tests-id]="'rollback'"
 152               [ngClass]="{'error-style' :serviceInstanceDetailsService.hasApiError('rollbackOnFailure',servicePopupDataModel?.rollbackOnFailure, serviceInstanceDetailsFormGroup)}"
 153               class="form-control input-text"
 154               [(ngModel)]="serviceInstance.rollbackOnFailure"
 155               [formControlName]="'rollbackOnFailure'" name="rollbackOnFailure" id="rollbackOnFailure">
 156         <option *ngFor="let option of servicePopupDataModel.rollbackOnFailure" [value]="option.id">{{option.name}}</option>
 157       </select>
 158       <form-control-error *ngIf="serviceInstanceDetailsService.hasApiError('rollbackOnFailure',servicePopupDataModel?.rollbackOnFailure, serviceInstanceDetailsFormGroup)" [message]="'No results for this request. Please change criteria.'"></form-control-error>
 159     </div>
 160     <div class="details-item" *ngIf="serviceInstanceDetailsFormGroup.get('pause')">
 161       <input  #pause id="pause" [formControlName]="'pause'" [(ngModel)]="serviceInstance.pause" type="checkbox" name="pause" data-toggle="toggle">
 162       <label class="checkbox-label" for="pause">Pause on pause points:</label>
 163     </div>
 164
 165
 166     <dynamic-inputs *ngIf="dynamicInputs != undefined && dynamicInputs.length>0" [group]="serviceInstanceDetailsFormGroup" [list]="dynamicInputs"></dynamic-inputs>
 167   </form>
 168 </div>