summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/instantiationStatus/auditInfoModal
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/instantiationStatus/auditInfoModal
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/instantiationStatus/auditInfoModal')
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.html84
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.scss159
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.service.ts0
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/auditInfoModal/auditInfoModal.component.ts83
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()">&times;</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();
+ }
+}
+