New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

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();
+  }
+}
+