merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

6 files changed, 945 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.html b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.html
new file mode 100644
index 000000000..1dad32376
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.html
@@ -0,0 +1,92 @@
+<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">{{type | uppercase}} MODEL: <span>{{serviceModelName}}</span></div>
+          <div class="row service-model">
+            <model-information [modelInformationItems]="modelInfoItems"></model-information>
+          </div>
+        </div>
+        <div class="col-md-8 right-panel">
+            <div class="row" *ngIf="showVidStatus"><span class="table-title">VID status</span></div>
+            <div class="row" *ngIf="showVidStatus">
+              <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">
+              <div class="col-md-6 leftColumn"><span class="table-title">MSO status</span></div>
+              <div class="col-md-6 rightColumn"><span><a id="glossary_link" target="_blank" href="#" (click)="onNavigate()">Building Block (BB) glossary</a></span></div>
+            </div>
+            <table id="service-instantiation-audit-info-mso" class="table table-bordered">
+              <thead class="thead-dark row">
+              <tr class="row">
+                <th scope="col" class="request-id">Request ID</th>
+                <th *ngIf="isAlaCarte&&isALaCarteFlagOn" id="instanceName" class="col-md-2" scope="col">Instance Name</th>
+                <th class="col-md-2" scope="col">Status</th>
+                <th class="col-md-2" scope="col">Status time</th>
+                <th class="col-md-2" scope="col">Additional info</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr class="row" *ngFor="let data of msoInfoData">
+                <td id="msoRequestId" class="request-id">
+                  <custom-ellipsis [id]="data?.requestId" [value]="data?.requestId"></custom-ellipsis>
+                </td>
+                <td *ngIf="isAlaCarte && isALaCarteFlagOn" class="msoInstanceName col-md-2">
+                  <custom-ellipsis [id]="data?.instanceName" [value]="data?.instanceType + ': ' + data?.instanceName"></custom-ellipsis>
+                </td>
+                <td class="col-md-2" id="msoJobStatus">
+                  <custom-ellipsis [id]="data?.jobStatus" [value]="data?.jobStatus | capitalizeAndFormat"></custom-ellipsis>
+                </td>
+                <td class="col-md-2" id="msoStatusTime">
+                  <custom-ellipsis [id]="data?.vidCreated"
+                                   [value]="data?.createdDate  | date:'MMM dd, yyyy HH:mm'"></custom-ellipsis>
+                </td>
+                <td class="col-md-2" 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 style= "font-size: 12px" 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/shared/components/auditInfoModal/auditInfoModal.component.scss b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.scss
new file mode 100644
index 000000000..f36b8b41d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.scss
@@ -0,0 +1,175 @@
+.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 {
+    .leftColumn {
+      padding-left: 0;
+    }
+
+    .rightColumn {
+      padding-right: 0;
+      text-align: right;
+    }
+    .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;
+            .request-id {
+              width: 85px;
+            }
+            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;
+                  }
+                  &.request-id {
+                    flex-grow: 0;
+                  }
+                }
+              }
+            }
+
+            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;
+                  flex-grow: 1;
+                  &:last-child{
+                    border-right: none;
+                  }
+                  &.request-id {
+                    flex-grow: 0;
+                  }
+                }
+              }
+            }
+
+            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/shared/components/auditInfoModal/auditInfoModal.component.service.spec.ts b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.service.spec.ts
new file mode 100644
index 000000000..35b5fbfe5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.service.spec.ts
@@ -0,0 +1,274 @@
+
+import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {NgRedux} from "@angular-redux/store";
+import {AuditInfoModalComponentService} from "./auditInfoModal.component.service";
+import {ModelInformationItem} from "../model-information/model-information.component";
+
+class MockAppStore<T> {
+  getState() {
+    return {
+      "service": {
+        "serviceInstance": {
+          "6e59c5de-f052-46fa-aa7e-2fca9d674c44": {
+            "instanceParams": [],
+            "bulkSize": 1,
+            "action": "None",
+            "instanceName": "PQijmEmzhVma4zujr",
+            "instanceId": "service-instance-id",
+            "orchStatus": "GARBAGE DATA",
+            "productFamilyId": null,
+            "lcpCloudRegionId": null,
+            "tenantId": null,
+            "modelInfo": {
+              "modelInvariantId": "d27e42cf-087e-4d31-88ac-6c4b7585f800",
+              "modelVersionId": "6e59c5de-f052-46fa-aa7e-2fca9d674c44",
+              "modelName": "vf_vEPDG",
+              "modelType": "service",
+              "modelVersion": "5.0"
+            },
+            "globalSubscriberId": "global-customer-id",
+            "subscriptionServiceType": "service-instance-type",
+            "owningEntityId": null,
+            "owningEntityName": null,
+            "tenantName": null,
+            "aicZoneId": null,
+            "aicZoneName": null,
+            "projectName": null,
+            "rollbackOnFailure": null,
+            "isALaCarte": false
+          }
+        },
+        "subscribers": [
+          {
+            "id": "CAR_2020_ER",
+            "name": "CAR_2020_ER",
+            "isPermitted": true
+          },
+          {
+            "id": "21014aa2-526b-11e6-beb8-9e71128cae77",
+            "name": "JULIO ERICKSON",
+            "isPermitted": false
+          },
+          {
+            "id": "global-customer-id",
+            "name": "DALE BRIDGES",
+            "isPermitted": false
+          },
+          {
+            "id": "DHV1707-TestSubscriber-1",
+            "name": "LLOYD BRIDGES",
+            "isPermitted": false
+          },
+          {
+            "id": "jimmy-example",
+            "name": "JimmyExampleCust-20161102",
+            "isPermitted": false
+          },
+          {
+            "id": "jimmy-example2",
+            "name": "JimmyExampleCust-20161103",
+            "isPermitted": false
+          },
+          {
+            "id": "ERICA5779-TestSub-PWT-102",
+            "name": "ERICA5779-TestSub-PWT-102",
+            "isPermitted": false
+          },
+          {
+            "id": "ERICA5779-TestSub-PWT-101",
+            "name": "ERICA5779-TestSub-PWT-101",
+            "isPermitted": false
+          },
+          {
+            "id": "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+            "name": "Emanuel",
+            "isPermitted": false
+          },
+          {
+            "id": "ERICA5779-Subscriber-4",
+            "name": "ERICA5779-Subscriber-5",
+            "isPermitted": false
+          },
+          {
+            "id": "ERICA5779-TestSub-PWT-103",
+            "name": "ERICA5779-TestSub-PWT-103",
+            "isPermitted": false
+          },
+          {
+            "id": "ERICA5779-Subscriber-2",
+            "name": "ERICA5779-Subscriber-2",
+            "isPermitted": false
+          },
+          {
+            "id": "e433710f-9217-458d-a79d-1c7aff376d89",
+            "name": "SILVIA ROBBINS",
+            "isPermitted": true
+          },
+          {
+            "id": "ERICA5779-Subscriber-3",
+            "name": "ERICA5779-Subscriber-3",
+            "isPermitted": false
+          },
+          {
+            "id": "31739f3e-526b-11e6-beb8-9e71128cae77",
+            "name": "CRAIG/ROBERTS",
+            "isPermitted": false
+          }
+        ]
+      }
+    }
+  }
+}
+
+describe("Audit info modal component service", () => {
+  let injector;
+  let httpMock: HttpTestingController;
+  let auditInfoModalComponentService: AuditInfoModalComponentService;
+
+
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        AuditInfoModalComponentService,
+        {provide: NgRedux, useClass: MockAppStore}
+      ]
+    });
+    await TestBed.compileComponents();
+
+    injector = getTestBed();
+    httpMock = injector.get(HttpTestingController);
+    auditInfoModalComponentService = injector.get(AuditInfoModalComponentService);
+
+  })().then(done).catch(done.fail));
+
+
+  test('auditInfoModalComponentService service should be defined', () => {
+    expect(auditInfoModalComponentService).toBeDefined();
+  });
+
+  test('getModelInfo: VNF information from existing instance with model', () => {
+    const model = getVNFModel();
+    const instance = getVNFInstance();
+    const results: ModelInformationItem[] = auditInfoModalComponentService.getModelInfo(model, instance, "6e59c5de-f052-46fa-aa7e-2fca9d674c44");
+    expect(results.find((item) => item.label === 'Model customization ID').values[0]).toEqual("91415b44-753d-494c-926a-456a9172bbb9");
+    expect(results.find((item) => item.label === 'Model version').values[0]).toEqual("2.0");
+    expect(results.find((item) => item.label === 'Model name').values[0]).toEqual("VF_vMee");
+    expect(results.find((item) => item.label === 'Instance name').values[0]).toEqual("4O61SmpFAdCm1oVEs");
+    expect(results.find((item) => item.label === 'Instance ID').values[0]).toEqual("66cbb3b5-c823-470c-9520-4e0b85112250");
+    expect(results.find((item) => item.label === 'Subscriber name').values[0]).toEqual("DALE BRIDGES"); // TODO should call subscriber
+    expect(results.find((item) => item.label === 'Service type').values[0]).toEqual("service-instance-type");
+  });
+
+  test('getModelInfo: Network information from existing instance without model', () => {
+    const model = getNetworkModel();
+    const instance = getNetworkInstance();
+    const results: ModelInformationItem[] = auditInfoModalComponentService.getModelInfo(model, instance, "6e59c5de-f052-46fa-aa7e-2fca9d674c44");
+    expect(results.find((item) => item.label === 'Instance name').values[0]).toEqual("KADmyK6e3sVWNfGbA");
+    expect(results.find((item) => item.label === 'Instance ID').values[0]).toEqual("712cad2d-fc1c-40c7-aaff-d2d6e17ac2b6");
+    expect(results.find((item) => item.label === 'Subscriber name').values[0]).toEqual("DALE BRIDGES"); // TODO should call subscriber
+    expect(results.find((item) => item.label === 'Service type').values[0]).toEqual("service-instance-type");
+  });
+
+  test('getModelInfo: VFModule information from existing instance with model', () => {
+    const model = getVFModule();
+    const instance = getVFModuleInstance();
+    const results: ModelInformationItem[] = auditInfoModalComponentService.getModelInfo(model, instance, "6e59c5de-f052-46fa-aa7e-2fca9d674c44");
+    expect(results.find((item) => item.label === 'Model customization ID').values[0]).toEqual("55b1be94-671a-403e-a26c-667e9c47d091");
+    expect(results.find((item) => item.label === 'Model version').values[0]).toEqual("2");
+    expect(results.find((item) => item.label === 'Model name').values[0]).toEqual("VfVmee..vmme_vlc..module-1");
+    expect(results.find((item) => item.label === 'Instance name').values[0]).toEqual("ss820f_0918_db");
+    expect(results.find((item) => item.label === 'Instance ID').values[0]).toEqual("2c1ca484-cbc2-408b-ab86-25a2c15ce280");
+    expect(results.find((item) => item.label === 'Subscriber name').values[0]).toEqual("DALE BRIDGES"); // TODO should call subscriber
+    expect(results.find((item) => item.label === 'Service type').values[0]).toEqual("service-instance-type");
+  });
+
+  test('getModelInfo: VNFGroup information from existing instance with model', () => {
+    const model = getVNFGroupModel();
+    const instance = getVNFGroupInstance();
+    const results: ModelInformationItem[] = auditInfoModalComponentService.getModelInfo(model, instance, "6e59c5de-f052-46fa-aa7e-2fca9d674c44");
+    expect(results.find((item) => item.label === 'Model version').values[0]).toEqual("1");
+    expect(results.find((item) => item.label === 'Model name').values[0]).toEqual("groupingservicefortest..ResourceInstanceGroup..0");
+    expect(results.find((item) => item.label === 'Instance name').values[0]).toEqual("VNF_GROUP1_INSTANCE_NAME");
+    expect(results.find((item) => item.label === 'Instance ID').values[0]).toEqual("VNF_GROUP1_INSTANCE_ID");
+    expect(results.find((item) => item.label === 'Subscriber name').values[0]).toEqual("DALE BRIDGES"); // TODO should call subscriber
+    expect(results.find((item) => item.label === 'Service type').values[0]).toEqual("service-instance-type");
+  });
+
+
+  test('setModalTitlesType:  should return modal title', () => {
+    expect(AuditInfoModalComponentService.setModalTitle('VNF')).toEqual('VNF Instantiation Information');
+    expect(AuditInfoModalComponentService.setModalTitle('VFMODULE')).toEqual('VfModule Instantiation Information');
+    expect(AuditInfoModalComponentService.setModalTitle('NETWORK')).toEqual('Network Instantiation Information');
+    expect(AuditInfoModalComponentService.setModalTitle('VNFGROUP')).toEqual('Vnf Group Instantiation Information');
+  });
+
+  test('setModalTitlesType:  should return modal title type', () => {
+    expect(AuditInfoModalComponentService.setModalTitlesType('VNF')).toEqual('VNF');
+    expect(AuditInfoModalComponentService.setModalTitlesType('VFMODULE')).toEqual('VfModule');
+    expect(AuditInfoModalComponentService.setModalTitlesType('NETWORK')).toEqual('Network');
+    expect(AuditInfoModalComponentService.setModalTitlesType('VNFGROUP')).toEqual('Vnf Group');
+  });
+
+  test('getInstanceModelName:  should return model name if exist', () => {
+    expect(AuditInfoModalComponentService.getInstanceModelName({name : 'some name'})).toEqual('some name');
+    expect(AuditInfoModalComponentService.getInstanceModelName(null)).toEqual('');
+  });
+
+  test('createModelInformationItemsJob:  should return job information', () => {
+    let service = {
+      "uuid": "6e59c5de-f052-46fa-aa7e-2fca9d674c44",
+      "invariantUuid": "cfef8302-d90f-475f-87cc-3f49a62ef14c",
+      "name": "ComplexService",
+      "version": "1.0",
+      "toscaModelURL": null,
+      "category": "Emanuel",
+      "serviceType": "",
+      "serviceRole": "",
+      "description": "ComplexService",
+      "serviceEcompNaming": "true",
+      "instantiationType": "Macro",
+      "inputs": {},
+      "vidNotions": {
+        "instantiationUI": "legacy",
+        "modelCategory": "other",
+        "viewEditUI": "legacy"
+      }
+    };
+    const results = AuditInfoModalComponentService.createModelInformationItemsJob(<any>service);
+  });
+
+
+  function getVNFModel(){
+    return {"name":"VF_vMee","version":"2.0","description":"VSP_vMee","uuid":"d6557200-ecf2-4641-8094-5393ae3aae60","invariantUuid":"4160458e-f648-4b30-a176-43881ffffe9e","max":1,"min":0,"customizationUuid":"91415b44-753d-494c-926a-456a9172bbb9","isEcompGeneratedNaming":true,"type":"VF","modelCustomizationName":"VF_vMee 0","vfcInstanceGroups":{},"properties":{"gpb2_Internal2_mac":"00:11:22:EF:AC:DF","sctp-a-ipv6-egress_rule_application":"any","sctp-b-ipv6-egress_src_start_port":"0","Internal2_allow_transit":"true","sctp-b-IPv6_ethertype":"IPv6","ncb2_Internal1_mac":"00:11:22:EF:AC:DF","sctp-b-ingress_rule_protocol":"icmp","sctp-b-ingress_action":"pass","sctp-a-egress_rule_application":"any","sctp-b-ipv6-ingress-src_start_port":"0.0","ncb1_Internal2_mac":"00:11:22:EF:AC:DF","sctp-b-egress_src_addresses":"local","fsb_volume_size_0":"320.0","sctp-a-ipv6-ingress-dst_start_port":"0","sctp-a-ipv6-ingress_ethertype":"IPv4","sctp-b-ipv6-ingress_rule_application":"any","domain_name":"default-domain","sctp-a-egress_src_addresses":"local","sctp-b-egress-src_start_port":"0.0","sctp-a-ingress_rule_protocol":"icmp","sctp-b-display_name":"epc-sctp-b-ipv4v6-sec-group","sctp-b-ipv6-ingress-dst_end_port":"65535","sctp-a-ingress_ethertype":"IPv4","sctp-a-egress-src_start_port":"0.0","sctp-b-dst_subnet_prefix_v6":"::","nf_naming":"{ecomp_generated_naming=true}","sctp-a-ipv6-ingress_src_subnet_prefix":"0.0.0.0","sctp-b-egress-dst_start_port":"0.0","ncb_flavor_name":"nv.c20r64d1","sctp-b-egress_dst_subnet_prefix_len":"0.0","gpb1_Internal1_mac":"00:11:22:EF:AC:DF","Internal2_net_cidr":"10.0.0.10","sctp-a-ingress-dst_start_port":"0.0","fsb1_Internal2_mac":"00:11:22:EF:AC:DF","sctp-a-egress-dst_start_port":"0.0","sctp-a-egress_ethertype":"IPv4","vlc_st_service_mode":"in-network-nat","sctp-a-ipv6-egress_ethertype":"IPv4","sctp-a-egress-src_end_port":"65535.0","sctp-b-egress_action":"pass","sctp-b-ipv6-egress_rule_application":"any","sctp-a-ingress-src_subnet_prefix_len":"0.0","sctp-b-ipv6-ingress-src_end_port":"65535.0","sctp-a-ipv6-ingress-src_start_port":"0.0","fsb2_Internal1_mac":"00:11:22:EF:AC:DF","sctp-b-name":"epc-sctp-b-ipv4v6-sec-group","sctp-b-ipv6-egress_ethertype":"IPv4","Internal1_net_cidr":"10.0.0.10","sctp-a-egress_dst_subnet_prefix":"0.0.0.0","fsb_flavor_name":"nv.c20r64d1","sctp_rule_protocol":"132","sctp-a-ipv6-ingress_rule_application":"any","sctp-b-ipv6-ingress_src_subnet_prefix_len":"0","ecomp_generated_naming":"true","sctp-a-IPv6_ethertype":"IPv6","vlc_st_virtualization_type":"virtual-machine","vlc2_Internal1_mac":"00:11:22:EF:AC:DF","sctp-b-ingress-dst_end_port":"65535.0","sctp-b-ingress-dst_start_port":"0.0","sctp-a-ipv6-ingress-src_end_port":"65535.0","sctp-a-display_name":"epc-sctp-a-ipv4v6-sec-group","sctp-b-ingress_rule_application":"any","vlc_flavor_name":"nd.c16r64d1","int2_sec_group_name":"int2-sec-group","sctp-b-ipv6-egress_src_addresses":"local","vlc_st_interface_type_int1":"other1","vlc_st_interface_type_int2":"other2","sctp-a-ipv6-egress-dst_start_port":"0","sctp-b-egress-src_end_port":"65535.0","sctp-a-ipv6-egress_dst_subnet_prefix_len":"0","Internal2_shared":"false","sctp-a-ipv6-egress_rule_protocol":"any","Internal2_rpf":"disable","vlc1_Internal1_mac":"00:11:22:EF:AC:DF","sctp-b-ipv6-egress_src_end_port":"65535","sctp-a-ipv6-egress_src_addresses":"local","sctp-a-ingress-dst_end_port":"65535.0","sctp-a-ipv6-egress_src_end_port":"65535","Internal1_forwarding_mode":"l2","Internal2_dhcp":"false","sctp-a-dst_subnet_prefix_v6":"::","pxe_image_name":"MME_PXE-Boot_16ACP04_GA.qcow2","vlc_st_interface_type_gtp":"other0","ncb1_Internal1_mac":"00:11:22:EF:AC:DF","sctp-b-src_subnet_prefix_v6":"::","sctp-a-egress_dst_subnet_prefix_len":"0.0","int1_sec_group_name":"int1-sec-group","Internal1_dhcp":"false","fsb2_Internal2_mac":"00:11:22:EF:AC:DF","Internal2_forwarding_mode":"l2","sctp-a-ipv6-egress_dst_end_port":"65535","sctp-b-egress_dst_subnet_prefix":"0.0.0.0","Internal1_net_cidr_len":"17","gpb2_Internal1_mac":"00:11:22:EF:AC:DF","sctp-a-ingress_dst_addresses":"local","sctp-b-ingress-src_subnet_prefix_len":"0.0","sctp-a-egress_action":"pass","fsb_volume_type_0":"SF-Default-SSD","ncb2_Internal2_mac":"00:11:22:EF:AC:DF","vlc_st_interface_type_sctp_a":"left","vlc_st_version":"2","sctp-a-src_subnet_prefix_v6":"::","vlc_st_interface_type_sctp_b":"right","sctp-a-ingress_rule_application":"any","sctp-b-egress_ethertype":"IPv4","sctp-a-ipv6-egress_src_start_port":"0","instance_ip_family_v6":"v6","gpb1_Internal2_mac":"00:11:22:EF:AC:DF","sctp-b-ingress-src_start_port":"0.0","fsb1_Internal1_mac":"00:11:22:EF:AC:DF","sctp-b-ingress_dst_addresses":"local","vlc_st_interface_type_oam":"management","multi_stage_design":"false","oam_sec_group_name":"oam-sec-group","Internal2_net_gateway":"10.0.0.10","sctp-a-ipv6-ingress-dst_end_port":"65535","Internal1_net_gateway":"10.0.0.10","sctp-b-ipv6-egress-dst_start_port":"0","sctp-b-ipv6-egress_rule_protocol":"any","gtp_sec_group_name":"gtp-sec-group","sctp-a-ipv6-egress_dst_subnet_prefix":"0.0.0.0","sctp-a-ipv6-ingress_dst_addresses":"local","sctp-b-ipv6-egress_dst_subnet_prefix_len":"0","sctp-b-ipv6-egress_action":"pass","sctp-a-egress_rule_protocol":"icmp","sctp-a-ipv6-egress_action":"pass","Internal1_shared":"false","sctp-b-ipv6-ingress_rule_protocol":"any","Internal2_net_cidr_len":"17","sctp-a-name":"epc-sctp-a-ipv4v6-sec-group","sctp-a-ingress-src_end_port":"65535.0","sctp-b-ipv6-ingress_src_subnet_prefix":"0.0.0.0","sctp-a-egress-dst_end_port":"65535.0","sctp-b-egress_rule_protocol":"icmp","sctp-a-ingress_action":"pass","sctp-b-ipv6-ingress_action":"pass","vlc_st_service_type":"firewall","sctp-b-ipv6-egress_dst_end_port":"65535","vlc2_Internal2_mac":"00:11:22:EF:AC:DF","sctp-b-ipv6-ingress-dst_start_port":"0","vlc_st_availability_zone":"true","sctp-b-ingress-src_subnet_prefix":"0.0.0.0","fsb_volume_image_name_1":"MME_FSB2_16ACP04_GA.qcow2","sctp-a-ipv6-ingress_src_subnet_prefix_len":"0","gpb_flavor_name":"nv.c20r64d1","Internal1_allow_transit":"true","availability_zone_max_count":"1","fsb_volume_image_name_0":"MME_FSB1_16ACP04_GA.qcow2","sctp-b-ipv6-ingress_dst_addresses":"local","sctp-b-ipv6-ingress_ethertype":"IPv4","sctp-b-ipv6-egress_dst_subnet_prefix":"0.0.0.0","sctp-a-ingress-src_subnet_prefix":"0.0.0.0","vlc1_Internal2_mac":"00:11:22:EF:AC:DF","sctp-a-ipv6-ingress_action":"pass","Internal1_rpf":"disable","sctp-b-ingress_ethertype":"IPv4","sctp-b-ingress-src_end_port":"65535.0","sctp-b-egress_rule_application":"any","sctp-a-ipv6-ingress_rule_protocol":"any","sctp-a-ingress-src_start_port":"0.0","sctp-b-egress-dst_end_port":"65535.0"}};
+  }
+
+  function getVNFInstance(){
+    return {"action":"None","instanceName":"4O61SmpFAdCm1oVEs","instanceId":"66cbb3b5-c823-470c-9520-4e0b85112250","orchStatus":null,"productFamilyId":null,"lcpCloudRegionId":null,"tenantId":null,"modelInfo":{"modelCustomizationName":"VF_vMee 0","modelInvariantId":"vnf-instance-model-invariant-id","modelVersionId":"d6557200-ecf2-4641-8094-5393ae3aae60","modelType":"vnf"},"instanceType":"7538ifdSoTccmbEkr","provStatus":null,"inMaint":true,"uuid":"d6557200-ecf2-4641-8094-5393ae3aae60","originalName":"VF_vMee 0","legacyRegion":null,"lineOfBusiness":null,"platformName":null,"trackById":"VF_vMee 0:004","vfModules":{"vf_vmee0..VfVmee..vmme_vlc..module-1":{"vf_vmee0..VfVmee..vmme_vlc..module-1:008":{"action":"None","instanceName":"ss820f_0918_db","instanceId":"2c1ca484-cbc2-408b-ab86-25a2c15ce280","orchStatus":"deleted","productFamilyId":null,"lcpCloudRegionId":null,"tenantId":null,"modelInfo":{"modelCustomizationName":"VfVmee..vmme_vlc..module-1","modelCustomizationId":"b200727a-1bf9-4e7c-bd06-b5f4c9d920b9","modelInvariantId":"09edc9ef-85d0-4b26-80de-1f569d49e750","modelVersionId":"522159d5-d6e0-4c2a-aa44-5a542a12a830","modelType":"vfModule"},"instanceType":null,"provStatus":null,"inMaint":true,"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","originalName":"VfVmee..vmme_vlc..module-1","legacyRegion":null,"lineOfBusiness":null,"platformName":null,"trackById":"vf_vmee0..VfVmee..vmme_vlc..module-1:008","isBase":false,"volumeGroupName":null}},"dc229cd8-c132-4455-8517-5c1787c18b14":{"dc229cd8-c132-4455-8517-5c1787c18b14:009":{"action":"None","instanceName":"ss820f_0918_base","instanceId":"3ef042c4-259f-45e0-9aba-0989bd8d1cc5","orchStatus":"Assigned","productFamilyId":null,"lcpCloudRegionId":null,"tenantId":null,"modelInfo":{"modelCustomizationId":"8ad8670b-0541-4499-8101-275bbd0e8b6a","modelInvariantId":"1e463c9c-404d-4056-ba56-28fd102608de","modelVersionId":"dc229cd8-c132-4455-8517-5c1787c18b14","modelType":"vfModule"},"instanceType":null,"provStatus":null,"inMaint":false,"uuid":"dc229cd8-c132-4455-8517-5c1787c18b14","originalName":null,"legacyRegion":null,"lineOfBusiness":null,"platformName":null,"trackById":"dc229cd8-c132-4455-8517-5c1787c18b14:009","isBase":true,"volumeGroupName":null}}},"networks":{}};
+  }
+
+  function getVFModule(){
+    return {"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","invariantUuid":"98a7c88b-b577-476a-90e4-e25a5871e02b","customizationUuid":"55b1be94-671a-403e-a26c-667e9c47d091","description":null,"name":"VfVmee..vmme_vlc..module-1","version":"2","modelCustomizationName":"VfVmee..vmme_vlc..module-1","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_vlc","baseModule":false},"inputs":{},"volumeGroupAllowed":false};
+  }
+
+  function getVFModuleInstance() {
+    return{"action":"None","instanceName":"ss820f_0918_db","instanceId":"2c1ca484-cbc2-408b-ab86-25a2c15ce280","orchStatus":"deleted","productFamilyId":null,"lcpCloudRegionId":null,"tenantId":null,"modelInfo":{"modelCustomizationName":"VfVmee..vmme_vlc..module-1","modelCustomizationId":"b200727a-1bf9-4e7c-bd06-b5f4c9d920b9","modelInvariantId":"09edc9ef-85d0-4b26-80de-1f569d49e750","modelVersionId":"522159d5-d6e0-4c2a-aa44-5a542a12a830","modelType":"vfModule"},"instanceType":null,"provStatus":null,"inMaint":true,"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","originalName":"VfVmee..vmme_vlc..module-1","legacyRegion":null,"lineOfBusiness":null,"platformName":null,"trackById":"vf_vmee0..VfVmee..vmme_vlc..module-1:008","isBase":false,"volumeGroupName":null};
+  }
+
+  function getNetworkModel(){
+    return null;
+  }
+
+  function getNetworkInstance(){
+      return {"action":"None","instanceName":"KADmyK6e3sVWNfGbA","instanceId":"712cad2d-fc1c-40c7-aaff-d2d6e17ac2b6","orchStatus":"Assigned","productFamilyId":null,"lcpCloudRegionId":null,"tenantId":null,"modelInfo":{"modelInvariantId":"network-instance-model-invariant-id","modelVersionId":"ddc3f20c-08b5-40fd-af72-c6d14636b986","modelType":"network"},"instanceType":"CONTRAIL30_BASIC","provStatus":"nvtprov","inMaint":false,"uuid":"ddc3f20c-08b5-40fd-af72-c6d14636b986","originalName":null,"legacyRegion":null,"lineOfBusiness":null,"platformName":null,"trackById":"ddc3f20c-08b5-40fd-af72-c6d14636b986:001"};
+  }
+
+  function getVNFGroupModel(){
+    return {"name":"groupingservicefortest..ResourceInstanceGroup..0","version":"1","uuid":"daeb6568-cef8-417f-9075-ed259ce59f48","invariantUuid":"4bb2e27e-ddab-4790-9c6d-1f731bc14a45","max":1,"min":0,"isEcompGeneratedNaming":true,"type":"VnfGroup","modelCustomizationName":"groupingservicefortest..ResourceInstanceGroup..0","properties":{"contained_resource_type":"VF","role":"SERVICE-ACCESS","function":"DATA","description":"DDD0","type":"LOAD-GROUP","ecomp_generated_naming":"true"},"members":{"vdbe_svc_vprs_proxy 0":{"uuid":"65fadfa8-a0d9-443f-95ad-836cd044e26c","invariantUuid":"f4baae0c-b3a5-4ca1-a777-afbffe7010bc","description":"A Proxy for Service vDBE_Svc_vPRS","name":"vDBE_Svc_vPRS Service Proxy","version":"1.0","customizationUuid":"bdb63d23-e132-4ce7-af2c-a493b4cafac9","inputs":{},"commands":{},"properties":{"ecomp_generated_naming":"false"},"type":"Service Proxy","sourceModelUuid":"da7827a2-366d-4be6-8c68-a69153c61274","sourceModelInvariant":"24632e6b-584b-4f45-80d4-fefd75fd9f14","sourceModelName":"vDBE_Svc_vPRS"}}};
+  }
+
+  function getVNFGroupInstance(){
+    return {"originalName":"groupingservicefortest..ResourceInstanceGroup..0","trackById":"groupingservicefortest..ResourceInstanceGroup..0:001","instanceName":"VNF_GROUP1_INSTANCE_NAME","action":"None","instanceId":"VNF_GROUP1_INSTANCE_ID","instanceType":"VNF_GROUP1_INSTANCE_TYPE","orchStatus":"Active","provStatus":null,"inMaint":false,"modelInfo":{"modelType":"instanceGroup","modelCustomizationName":"groupingservicefortest..ResourceInstanceGroup..0","modelInvariantId":"4bb2e27e-ddab-4790-9c6d-1f731bc14a45","modelVersionId":"daeb6568-cef8-417f-9075-ed259ce59f48"},"uuid":"daeb6568-cef8-417f-9075-ed259ce59f48","vnfs":{}};
+  }
+});
diff --git a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.service.ts b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.service.ts
new file mode 100644
index 000000000..cd36ece25
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.service.ts
@@ -0,0 +1,79 @@
+import {Injectable} from "@angular/core";
+import {ModelInformationItem} from "../model-information/model-information.component";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import {Subscriber} from "../../models/subscriber";
+import {ServiceInfoModel} from "../../server/serviceInfo/serviceInfo.model";
+import * as _ from 'lodash';
+
+@Injectable()
+export class AuditInfoModalComponentService {
+  constructor(private _store: NgRedux<AppState>){}
+
+  getModelInfo(model, instance, serviceModelId: string): ModelInformationItem[] {
+    const serviceInstance = this._store.getState().service.serviceInstance[serviceModelId];
+    const modelInformation = !_.isNil(model) ? [
+      new ModelInformationItem('Model name', 'model_name', [model.name]),
+      new ModelInformationItem('Model version', 'model_version', [model.version]),
+      new ModelInformationItem('Model customization ID', 'model_customization_ID', [model.customizationUuid]),
+      new ModelInformationItem('Base module', 'base_module', [!_.isNil(model.properties) ? model.properties.baseModule : null])
+    ] : [];
+
+    const instanceInfo = !_.isNil(instance) ? [
+      new ModelInformationItem('Instance name', 'instance_name', [instance.instanceName]),
+      new ModelInformationItem('Instance ID', 'instance_ID', [instance.instanceId])
+    ] : [];
+
+    const serviceInfo = !_.isNil(serviceInstance) ? [
+      new ModelInformationItem("Subscriber name", "subscriberName", [this.extractSubscriberNameBySubscriberId(serviceInstance.globalSubscriberId, this._store)]),
+      new ModelInformationItem('Service type', 'service_type', [serviceInstance.subscriptionServiceType])
+    ] : [];
+
+    const result = [modelInformation, instanceInfo, serviceInfo];
+    return _.uniq(_.flatten(result));
+  }
+
+  static createModelInformationItemsJob(serviceModel: ServiceInfoModel): 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 || 'Automatically generated'], '', true),
+      new ModelInformationItem('Service instance ID', 'serviceInstanceId', [serviceModel.serviceInstanceId]),
+      new ModelInformationItem('Requestor User ID', 'userId', [serviceModel.userId]),
+    ];
+  }
+
+  static getInstanceModelName(model) : string {
+    return !_.isNil(model) && model.name ? model.name : '';
+  }
+
+  static setModalTitlesType(type : string) : string {
+    return !_.isNil(type) ? AuditInfoModalComponentService.getTypeMap()[type] : 'Service' ;
+  }
+
+  static getTypeMap(){
+    return {
+      SERVICE : 'Service',
+      VNFGROUP : 'Vnf Group',
+      NETWORK : 'Network',
+      VFMODULE : 'VfModule',
+      VNF : 'VNF'
+    };
+  }
+
+  static setModalTitle(type : string) : string {
+    return !_.isNil(type) ? (AuditInfoModalComponentService.getTypeMap()[type] + " Instantiation Information") : 'Service Instantiation Information';
+  }
+
+  extractSubscriberNameBySubscriberId(subscriberId: string, store: NgRedux<AppState>) {
+    let result: string = null;
+    let filteredArray: any = _.filter(store.getState().service.subscribers, function (o: Subscriber) {
+      return o.id === subscriberId
+    });
+    if (filteredArray.length > 0) {
+      result = filteredArray[0].name;
+    }
+    return result;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.spec.ts b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.spec.ts
new file mode 100644
index 000000000..ecce68daf
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.spec.ts
@@ -0,0 +1,203 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ContextMenuModule, ContextMenuService} from 'ngx-contextmenu';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {AuditInfoModalComponent} from "./auditInfoModal.component";
+import {NgRedux} from "@angular-redux/store";
+import {FeatureFlagsService} from "../../services/featureFlag/feature-flags.service";
+import {AaiService} from "../../services/aaiService/aai.service";
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {ScrollToModule} from "@nicky-lenaers/ngx-scroll-to";
+import {RouterTestingModule} from "@angular/router/testing";
+import {ModalModule} from "ngx-bootstrap";
+import {CapitalizeAndFormatPipe} from "../../pipes/capitalize/capitalize-and-format.pipe";
+import {ServiceInfoService} from "../../server/serviceInfo/serviceInfo.service";
+import {IframeService} from "../../utils/iframe.service";
+import {AuditInfoModalComponentService} from "./auditInfoModal.component.service";
+import {ServiceInfoModel} from "../../server/serviceInfo/serviceInfo.model";
+import {HttpClient} from '@angular/common/http';
+import {getTestBed} from "@angular/core/testing";
+import {of} from 'rxjs';
+
+class MockAppStore<T> {
+  getState() {
+    return {
+      global: {
+        flags: {
+          'FLAG_1902_NEW_VIEW_EDIT': true
+        }
+      },
+      service: {
+        serviceInstance: {}
+      }
+    }
+  }
+
+  dispatch() {
+
+  }
+}
+
+
+describe('Audit Info Modal Component_serviceInfoService', () => {
+  let component: AuditInfoModalComponent;
+  let fixture: ComponentFixture<AuditInfoModalComponent>;
+  let _serviceInfoService: ServiceInfoService;
+  let injector;
+  beforeAll(done => (async () => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        ContextMenuModule,
+        ScrollToModule.forRoot(),
+        RouterTestingModule,
+        ModalModule.forRoot()
+      ],
+      providers: [
+        ServiceInfoService,
+        AaiService,
+        IframeService,
+        AuditInfoModalComponentService,
+        ContextMenuService,
+        FeatureFlagsService,
+        {provide: NgRedux, useClass: MockAppStore}
+      ],
+      declarations: [AuditInfoModalComponent, CapitalizeAndFormatPipe],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+    await TestBed.compileComponents();
+
+    injector = getTestBed();
+    _serviceInfoService = injector.get(ServiceInfoService);
+    fixture = TestBed.createComponent(AuditInfoModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  })().then(done).catch(done.fail));
+
+
+  test('component should be defined', () => {
+    expect(component).toBeDefined();
+  });
+
+  test('setModalTitles should set modal title according to type', () => {
+    component.setModalTitles('VNF');
+    expect(component.type).toEqual('VNF');
+    expect(component.title).toEqual('VNF Instantiation Information');
+  });
+
+  test('initializeProperties should init some component properties', () => {
+    component.initializeProperties();
+    expect(component.modelInfoItems).toBeNull();
+    expect(component.vidInfoData).toEqual([]);
+    expect(component.msoInfoData).toEqual([]);
+    expect(component.isLoading).toEqual(true);
+  });
+
+  test('openAuditInfoModal', () => {
+    const jobData: ServiceInfoModel = new ServiceInfoModel();
+    spyOn(AuditInfoModalComponentService, 'createModelInformationItemsJob');
+    spyOn(component, 'initAuditInfoData');
+    spyOn(component.auditInfoModal, 'show');
+    component.openAuditInfoModal(jobData);
+
+    expect(AuditInfoModalComponentService.createModelInformationItemsJob).toHaveBeenCalledWith(jobData);
+    expect(component.initAuditInfoData).toHaveBeenCalledWith(jobData);
+    expect(component.auditInfoModal.show).toHaveBeenCalled();
+  });
+
+  test('onCancelClick', () => {
+    spyOn(component, 'initializeProperties');
+    spyOn(component.auditInfoModal, 'hide');
+    component.onCancelClick();
+
+    expect(component.initializeProperties).toHaveBeenCalledWith();
+    expect(component.auditInfoModal.hide).toHaveBeenCalled();
+  });
+
+  test('openInstanceAuditInfoModal calls to getAuditStatusForRetry function', () => {
+    spyOn(component.auditInfoModalComponentService, 'getModelInfo').and.returnValue([]);
+    spyOn(component, 'initializeProperties');
+    spyOn(component, 'setModalTitles');
+    spyOn(component.auditInfoModal, 'show');
+    spyOn(_serviceInfoService, 'getAuditStatusForRetry');
+    jest.spyOn(_serviceInfoService, 'getAuditStatusForRetry').mockReturnValue(of([]))
+
+    spyOn(AuditInfoModalComponentService, 'getInstanceModelName');
+    const instanceId: string = "instanceID";
+    const type: string = 'VNF';
+    const model = {};
+    const instance = {};
+    const isInstanceFailed: boolean = true;
+    const trackById = "trackById";
+
+    AuditInfoModalComponent.openInstanceAuditInfoModal.next({
+      instanceId: instanceId,
+      type: type,
+      model: model,
+      instance: instance,
+      isInstanceFailed: isInstanceFailed,
+      trackById: trackById
+    });
+
+    expect(component.showVidStatus).toEqual(false);
+    expect(component.initializeProperties).toHaveBeenCalled();
+    expect(component.setModalTitles).toHaveBeenCalled();
+    expect(_serviceInfoService.getAuditStatusForRetry).toHaveBeenCalledWith(trackById);
+    expect(component.auditInfoModal.show).toHaveBeenCalled();
+    expect(AuditInfoModalComponentService.getInstanceModelName).toHaveBeenCalledWith(model);
+  });
+
+  test('openInstanceAuditInfoModal calls to getInstanceAuditStatus function', () => {
+    spyOn(component.auditInfoModalComponentService, 'getModelInfo').and.returnValue([]);
+    spyOn(component, 'initializeProperties');
+    spyOn(component, 'setModalTitles');
+    spyOn(component.auditInfoModal, 'show');
+    spyOn(_serviceInfoService, 'getAuditStatusForRetry');
+    jest.spyOn(_serviceInfoService, 'getInstanceAuditStatus').mockReturnValue(of([]))
+
+    spyOn(AuditInfoModalComponentService, 'getInstanceModelName');
+    const instanceId: string = "instanceID";
+    const type: string = 'VNF';
+    const model = {};
+    const instance = {};
+    const isInstanceFailed: boolean = false;
+    const trackById = "trackById";
+
+    AuditInfoModalComponent.openInstanceAuditInfoModal.next({
+      instanceId: instanceId,
+      type: type,
+      model: model,
+      instance: instance,
+      isInstanceFailed: isInstanceFailed,
+      trackById: trackById
+    });
+
+    expect(component.showVidStatus).toEqual(false);
+    expect(component.initializeProperties).toHaveBeenCalled();
+    expect(component.setModalTitles).toHaveBeenCalled();
+    expect(_serviceInfoService.getInstanceAuditStatus).toHaveBeenCalledWith(instanceId, type);
+    expect(component.auditInfoModal.show).toHaveBeenCalled();
+    expect(AuditInfoModalComponentService.getInstanceModelName).toHaveBeenCalledWith(model);
+  });
+
+  test('openInstanceAuditInfoModal : openModal : with job data', () => {
+    spyOn(component.auditInfoModalComponentService, 'getModelInfo').and.returnValue([]);
+    spyOn(component, 'initializeProperties');
+    spyOn(component.auditInfoModal, 'show');
+    spyOn(AuditInfoModalComponentService, 'getInstanceModelName');
+    const jobData: ServiceInfoModel = new ServiceInfoModel();
+    jobData.aLaCarte = true;
+    AuditInfoModalComponent.openModal.next(jobData);
+
+    expect(component.showVidStatus).toEqual(true);
+    expect(component.initializeProperties).toHaveBeenCalled();
+    expect(component.auditInfoModal.show).toHaveBeenCalled();
+  });
+
+  test('openInstanceAuditInfoModal : openModal : without job data', () => {
+    spyOn(component.auditInfoModal, 'hide');
+    const jobData: ServiceInfoModel = null;
+    AuditInfoModalComponent.openModal.next(jobData);
+    expect(component.auditInfoModal.hide).toHaveBeenCalled();
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
new file mode 100644
index 000000000..cf385d767
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
@@ -0,0 +1,122 @@
+import {Component, ViewChild} from '@angular/core';
+import {Subject} from 'rxjs/Subject';
+import {ModalDirective} from 'ngx-bootstrap'
+import {ModelInformationItem} from '../model-information/model-information.component';
+import {ServiceModel} from '../../models/serviceModel';
+import {ServiceInfoService} from '../../server/serviceInfo/serviceInfo.service';
+import {ServiceInfoModel} from '../../server/serviceInfo/serviceInfo.model';
+import {AuditStatus} from '../../server/serviceInfo/AuditStatus.model';
+import {IframeService} from "../../utils/iframe.service";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import {AuditInfoModalComponentService} from "./auditInfoModal.component.service";
+
+@Component({
+  selector: 'audit-info-modal',
+  templateUrl: './auditInfoModal.component.html',
+  styleUrls: ['./auditInfoModal.component.scss']
+})
+export class AuditInfoModalComponent {
+  static openModal: Subject<ServiceInfoModel> = new Subject<ServiceInfoModel>();
+  static openInstanceAuditInfoModal: Subject<{instanceId , type, model, instance, isInstanceFailed?, trackById?}> = new Subject<{instanceId , type, model, instance, isInstanceFailed, trackById}>();
+  @ViewChild('auditInfoModal') public auditInfoModal: ModalDirective;
+  title: string = 'Service Instantiation Information';
+  modelInfoItems: ModelInformationItem[] = [];
+  serviceModel: ServiceModel;
+  serviceModelName: string;
+  vidInfoData: AuditStatus[] = [];
+  msoInfoData: AuditStatus[] = [];
+  isAlaCarte: boolean;
+  parentElementClassName = 'content';
+  isLoading = true;
+  model: any;
+  instanceId: string;
+  isALaCarteFlagOn: boolean;
+  type : string = "Service";
+  showVidStatus : boolean = true;
+  auditInfoModalComponentService : AuditInfoModalComponentService;
+  constructor(private _serviceInfoService: ServiceInfoService, private _iframeService : IframeService,
+              private _auditInfoModalComponentService : AuditInfoModalComponentService,
+              private store: NgRedux<AppState>) {
+    this.auditInfoModalComponentService = this._auditInfoModalComponentService;
+    AuditInfoModalComponent.openModal.subscribe((jobData: ServiceInfoModel) => {
+      this.isALaCarteFlagOn = this.store.getState().global.flags['FLAG_A_LA_CARTE_AUDIT_INFO'];
+      this.initializeProperties();
+      this.showVidStatus = true;
+      if (jobData) {
+        this.isAlaCarte = jobData.aLaCarte;
+        this.openAuditInfoModal(jobData);
+        _iframeService.addClassOpenModal(this.parentElementClassName);
+        this.serviceModelName = jobData.serviceModelName ? jobData.serviceModelName : '';
+        this.auditInfoModal.show();
+      } else {
+        _iframeService.removeClassCloseModal(this.parentElementClassName);
+        this.auditInfoModal.hide();
+      }
+    });
+
+    AuditInfoModalComponent.openInstanceAuditInfoModal.subscribe(({instanceId  , type ,  model, instance, isInstanceFailed, trackById}) => {
+      this.showVidStatus = false;
+      this.initializeProperties();
+      this.setModalTitles(type);
+      this.serviceModelName = AuditInfoModalComponentService.getInstanceModelName(model);
+
+      if (isInstanceFailed) {
+        this._serviceInfoService.getAuditStatusForRetry(trackById).subscribe((res: AuditStatus) => {
+          this.msoInfoData = [res];
+        });
+      }else{
+        this._serviceInfoService.getInstanceAuditStatus(instanceId, type).subscribe((res : AuditStatus[]) =>{
+          this.msoInfoData = res;
+       });
+      }
+      this.modelInfoItems = this.auditInfoModalComponentService.getModelInfo(model, instance, instanceId);
+      _iframeService.addClassOpenModal(this.parentElementClassName);
+      this.auditInfoModal.show();
+    });
+  }
+
+
+  setModalTitles(type : string) : void{
+    this.type = AuditInfoModalComponentService.setModalTitlesType(type) ;
+    this.title = AuditInfoModalComponentService.setModalTitle(type);
+  }
+
+  initializeProperties() : void {
+    this.modelInfoItems = null;
+    this.vidInfoData = [];
+    this.msoInfoData = [];
+    this.isLoading = true;
+  }
+
+  openAuditInfoModal(jobData: ServiceInfoModel): void {
+    this.modelInfoItems = AuditInfoModalComponentService.createModelInformationItemsJob(jobData);
+    this.initAuditInfoData(jobData);
+    this.auditInfoModal.onHide.subscribe(()=>{
+      this._iframeService.removeClassCloseModal(this.parentElementClassName);
+      this.initializeProperties();
+    });
+    this.auditInfoModal.show();
+  }
+
+  initAuditInfoData(jobData: ServiceInfoModel) {
+    this._serviceInfoService.getJobAuditStatus(jobData)
+      .subscribe((res: AuditStatus[][]) => {
+        this.vidInfoData = res[0];
+        this.msoInfoData = res[1];
+        this.isLoading = false;
+      });
+  }
+
+  onCancelClick() {
+    this._iframeService.removeClassCloseModal(this.parentElementClassName);
+    this.initializeProperties();
+    this.auditInfoModal.hide();
+  }
+
+
+  onNavigate(){
+    window.open("https://wiki.onap.org/display/DW/SO+Building+blocks", "_blank");
+  }
+}
+