diff options
Diffstat (limited to 'vid-webpack-master/src/app/instantiationStatus/auditInfoModal')
4 files changed, 326 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.html b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.html new file mode 100644 index 000000000..9386af347 --- /dev/null +++ b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.html @@ -0,0 +1,84 @@ +<div class="modal fade" bsModal #auditInfoModal="bs-modal" [config]="{backdrop: 'static'}" + tabindex="-1" role="dialog" aria-labelledby="dialog-static-name"> + <div id="audit-info-modal" class=""> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" (click)="onCancelClick()">×</button> + <span [attr.data-tests-id]="'audit-info-title'" class="modal-title">{{title}}</span> + </div> + <div class="modal-body row"> + <div class="col-md-4 left-panel"> + <div id="service-model-name" class="row">SERVICE MODEL: {{serviceModelName}}</div> + <div class="row service-model"> + <model-information [modelInformationItems]="modelInfoItems"></model-information> + </div> + </div> + <div class="col-md-8 right-panel"> + <div class="row"><span class="table-title">VID status</span></div> + <div class="row"> + <table id="service-instantiation-audit-info-vid" class="table table-bordered"> + <thead class="thead-dark"> + <tr class="row"> + <th class="col-md-4" scope="col">Status</th> + <th class="col-md-4" scope="col">Status time</th> + <th class="col-md-4" scope="col">Final</th> + </tr> + </thead> + <tbody> + <tr class="row" *ngFor="let data of vidInfoData"> + <td class="col-md-4" id="vidJobStatus" [attr.data-tests-id]="'vidJobStatus'"> + <custom-ellipsis [id]="data?.jobStatus" [value]="data?.jobStatus | capitalizeAndFormat"></custom-ellipsis> + </td> + <td class="col-md-4" id="vidStatusTime"> + <custom-ellipsis [id]="data?.vidCreated" + [value]="data?.createdDate | date:'MMM dd, yyyy HH:mm'"></custom-ellipsis> + </td> + <td class="col-md-4" id="vidFinalStatus"> + <custom-ellipsis [id]="data?.final" + [value]="data?.final ? 'Yes' : 'No'"></custom-ellipsis> + </td> + </tr> + </tbody> + </table> + <div class="no-result" *ngIf="!isLoading && vidInfoData?.length == 0">There is no data.</div> + </div> + + <div class="row"><span class="table-title">MSO status</span></div> + <table id="service-instantiation-audit-info-mso" class="table table-bordered"> + <thead class="thead-dark row"> + <tr class="row"> + <th class="col-md-3" scope="col">Request ID</th> + <th class="col-md-3" scope="col">Status</th> + <th class="col-md-3" scope="col">Status time</th> + <th class="col-md-3" scope="col">Additional info</th> + </tr> + </thead> + <tbody> + <tr class="row" *ngFor="let data of msoInfoData"> + <td class="col-md-3" id="msoRequestId"> + <custom-ellipsis [id]="data?.requestId" [value]="data?.requestId"></custom-ellipsis> + </td> + <td class="col-md-3" id="msoJobStatus"> + <custom-ellipsis [id]="data?.jobStatus" [value]="data?.jobStatus | capitalizeAndFormat"></custom-ellipsis> + </td> + <td class="col-md-3" id="msoStatusTime"> + <custom-ellipsis [id]="data?.vidCreated" + [value]="data?.createdDate | date:'MMM dd, yyyy HH:mm'"></custom-ellipsis> + </td> + <td class="col-md-3" id="msoAdditionalInfo"> + <custom-ellipsis [id]="data?.additionalInfo" [value]="data?.additionalInfo"></custom-ellipsis> + </td> + </tr> + </tbody> + </table> + <div class="no-result" *ngIf="!isLoading && msoInfoData?.length == 0">There is no data.</div> + </div> + </div> + <div class="modal-footer row"> + <button id="cancelButton" type="button" class="btn btn-default cancel" (click)="onCancelClick()"> + Close + </button> + </div> + </div> + </div> +</div> diff --git a/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.scss b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.scss new file mode 100644 index 000000000..27b271496 --- /dev/null +++ b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.scss @@ -0,0 +1,159 @@ +.templatebody.modal-open{ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000; + opacity: 0.5; +} +.modal{ + + #audit-info-modal { + + .modal-content{ + border-radius: 0px; + border: none; + .modal-header{ + background: #009FDB; + font-size: 24px; + color: #ffffff; + .close{ + font-size: 32px; + font-weight: 200; + color: #ffffff; + text-shadow: none; + filter: none; + opacity: 1; + &:hover{ + color: #d2d2d2; + } + } + .modal-title{ + + } + } + .modal-body{ + padding: 0px; + margin: 0px; + display: flex; + .left-panel{ + background: #f2f2f2; + border-right: 1px solid #D2D2D2; + padding-right: 0px; + .row:first-child{ + border-bottom: 1px solid #D2D2D2; + height: 50px; + font-size: 12px; + line-height: 50px; + padding-left: 30px; + font-weight: 700; + margin-right: 0px; + } + .service-model{ + padding-left: 30px; + padding-top: 15px; + } + } + .right-panel{ + padding: 30px 30px 15px 30px; + .row{ + margin: 0px; + } + .table-title{ + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + } + .no-result{ + margin-bottom: 20px; + text-align: center; + border: 1px solid #d2d2d2; + padding: 20px; + margin-top: -23px; + } + + .table-bordered{ + width: 100%; + margin-top: 10px; + font-family: OpenSans-Semibold; + font-size: 12px; + overflow-x: auto; + display: block; + color: #5A5A5A; + + thead { + position: sticky; + top: 0; + z-index: 100; + display: block; + background: rgb(242, 242, 242); + border-bottom: 1px solid #d2d2d2; + tr { + display: flex; + th { + flex-grow: 1; + border-right: 1px solid #d2d2d2; + &:last-child{ + border-right: none; + } + } + } + } + + tbody { + border: none !important; + max-height: 152px; + display: block; + + tr { + display: flex; + border-bottom: 1px solid #d2d2d2; + &:last-child{ + border-bottom: none; + } + td { + border: none; + border-right: 1px solid #d2d2d2; + &:last-child{ + border-right: none; + } + } + } + } + + th { + background: #f2f2f2; + font-family: OpenSans-Semibold; + color: #000000; + font-weight: bold; + border: none; + } + + tr.odd { + background-color: rgb(242, 242, 242); + } + + tr:hover { + background: #e1e1e1; + } + } + } + } + .modal-footer{ + margin: 0px; + .cancel{ + width: 120px; + height: 36px; + background: #009fdb; + border-radius: 2px; + font-family: OpenSans-Regular; + font-size: 14px; + color: #ffffff; + line-height: 16px; + } + } + } + } +} diff --git a/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.service.ts b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.service.ts new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.service.ts diff --git a/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.ts b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.ts new file mode 100644 index 000000000..1cff97f5b --- /dev/null +++ b/vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.ts @@ -0,0 +1,83 @@ +import {Component, ViewChild} from '@angular/core'; +import {Subject} from 'rxjs/Subject'; +import {ModalDirective} from 'ngx-bootstrap' +import {Constants} from '../../shared/utils/constants'; +import {ModelInformationItem} from '../../shared/components/model-information/model-information.component'; +import {ServiceModel} from '../../shared/models/serviceModel'; +import {ServiceInfoService} from '../../shared/server/serviceInfo/serviceInfo.service'; +import {ServiceInfoModel} from '../../shared/server/serviceInfo/serviceInfo.model'; +import {AuditStatus} from '../../shared/server/serviceInfo/AuditStatus.model'; +import {IframeService} from "../../shared/utils/iframe.service"; + +@Component({ + selector: 'audit-info-modal', + templateUrl: './auditInfoModal.component.html', + styleUrls: ['./auditInfoModal.component.scss'] +}) +export class AuditInfoModalComponent { + static openModal: Subject<ServiceInfoModel> = new Subject<ServiceInfoModel>(); + @ViewChild('auditInfoModal') public auditInfoModal: ModalDirective; + title: string = Constants.AuditInfoModal.TITLE; + modelInfoItems: Array<ModelInformationItem> = []; + serviceModel: ServiceModel; + serviceModelName: string; + vidInfoData: Array<AuditStatus> = []; + msoInfoData: Array<AuditStatus> = []; + parentElementClassName = 'content'; + isLoading = true; + + constructor(private _serviceInfoService: ServiceInfoService, private _iframeService : IframeService) { + AuditInfoModalComponent.openModal.subscribe((jobData: ServiceInfoModel) => { + this.initializeProperties(); + if (jobData) { + this.openAuditInfoModal(jobData); + _iframeService.addClassOpenModal(this.parentElementClassName); + this.serviceModelName = jobData.serviceModelName ? jobData.serviceModelName : ''; + this.auditInfoModal.show(); + } else { + _iframeService.removeClassCloseModal(this.parentElementClassName); + this.auditInfoModal.hide(); + } + }) + } + + initializeProperties() : void { + this.modelInfoItems = null; + this.vidInfoData = []; + this.msoInfoData = []; + this.isLoading = true; + } + + openAuditInfoModal(jobData: ServiceInfoModel): void { + this.modelInfoItems = this.createModelInformationItems(jobData); + this.initAuditInfoData(jobData['jobId']); + this.auditInfoModal.show(); + } + + initAuditInfoData(jobId: string) { + this._serviceInfoService.getJobAuditStatus(jobId) + .subscribe((res: Array<Array<AuditStatus>>) => { + this.vidInfoData = res[0]; + this.msoInfoData = res[1]; + this.isLoading = false; + }); + } + + createModelInformationItems(serviceModel: ServiceInfoModel): Array<ModelInformationItem> { + return [ + new ModelInformationItem('Subscriber name', 'subscriberName', [serviceModel.subscriberName]), + new ModelInformationItem('Service type', 'serviceType', [serviceModel.serviceType]), + new ModelInformationItem('Service model version', 'serviceModelVersion', [serviceModel.serviceModelVersion]), + new ModelInformationItem('Service instance name', 'serviceInstanceName', [serviceModel.serviceInstanceName], '', true), + new ModelInformationItem('Service instance ID', 'serviceInstanceId', [serviceModel.serviceInstanceId]), + new ModelInformationItem('Requestor User ID', 'userId', [serviceModel.userId]), + ]; + } + + onCancelClick() { + this._iframeService.removeClassCloseModal(this.parentElementClassName); + this.initializeProperties(); + this.auditInfoModal.hide(); + } +} + |