From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../auditInfoModal/auditInfoModal.component.html | 84 +++++++++++ .../auditInfoModal/auditInfoModal.component.scss | 159 +++++++++++++++++++++ .../auditInfoModal.component.service.ts | 0 .../auditInfoModal/auditInfoModal.component.ts | 83 +++++++++++ 4 files changed, 326 insertions(+) create mode 100644 vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.html create mode 100644 vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.scss create mode 100644 vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.service.ts create mode 100644 vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.ts (limited to 'vid-webpack-master/src/app/instantiationStatus/auditInfoModal') 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 @@ + 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 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 = new Subject(); + @ViewChild('auditInfoModal') public auditInfoModal: ModalDirective; + title: string = Constants.AuditInfoModal.TITLE; + modelInfoItems: Array = []; + serviceModel: ServiceModel; + serviceModelName: string; + vidInfoData: Array = []; + msoInfoData: Array = []; + 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>) => { + this.vidInfoData = res[0]; + this.msoInfoData = res[1]; + this.isLoading = false; + }); + } + + createModelInformationItems(serviceModel: ServiceInfoModel): Array { + 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(); + } +} + -- cgit 1.2.3-korg