New audit info screen changes7.0.0

Audit screen css changes and export mso status to external file

Change-Id: I71d577121e18090eab7a388ed01707823e45ac82
Issue-ID: VID-901
Signed-off-by: rachitha.ramappa@att.com

4 files changed, 162 insertions, 97 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
index 086669091..038477d25 100644
--- a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.html
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.html
@@ -1,93 +1,95 @@
 <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 style="width: 100%; height: 100%" id="audit-info-modal" class=""
+       [ngStyle]="style" mwlResizable [enableGhostResize]="true"
+       [resizeEdges]="{ bottom: true, right: true, top: true, left: true }" (resizeEnd)="onResizeEnd($event)"
+       [validateResize]="validate">
     <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>
+        <br>
+        <span style="font-size: 16px;">
+          <!-- ServiceInstanceName(ServiceModelName/ServiceModelId) -->
+          <span title="Service Instance name">{{serviceInstanceName }}</span><span title="Service Model name"> ({{serviceModelName}}/</span>
+          <span title="Service Model version">{{serviceModelVersion}})</span>
+        </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="modal-body row" style="height: 515px">
+
         <div class="col-md-8 right-panel">
-          <div class="row" *ngIf="showVidStatus">
-            <div class="col-md-6 leftColumn"><span class="table-title">VID status</span></div>
-            <div class="col-md-6 rightColumn"><span *ngIf="showMoreAuditInfoLink">
-                <a id="full_screen_link" target="_parent" title="Full-screen audit info" [href]="readOnlyRetryUrl()">
+
+          <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>
+              &nbsp;
+              <span>
+                <a id="full_screen_link" target="_parent" title="Go to drawing board" [href]="readOnlyRetryUrl()">
                   <i class="fa fa-external-link"></i>
                 </a>
-            </span></div>
+            </span>
+            </div>
           </div>
-          <div class="row" *ngIf="showVidStatus">
-            <table id="service-instantiation-audit-info-vid"  class="table table-bordered">
-              <thead class="thead-dark">
+          <div style="max-height: 90%;overflow-y: scroll; max-width: 100%;overflow-x: scroll;">
+            <table id="service-instantiation-audit-info-mso" class="table table-bordered"  style="min-width: 950px;overflow-x: auto;">
+              <thead class="thead-dark row">
               <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>
+                <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>Model Type</th>
+                <th>Request Type</th>
+                <th>Start Time</th>
+                <th>Finish Time</th>
+                <th scope="col">Request Status</th>
+                <th class="col-md-2" scope="col">Additional info</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>
+              <tr class="row" *ngFor="let data of msoInfoData">
+                <td id="msoRequestId" class="col-md-2" style="width: 22%">
+                  <custom-ellipsis [id]="data?.requestId" [value]="data?.requestId" [attr.data-tests-id]="'requestId'"></custom-ellipsis>
+                </td>
+                <td *ngIf="isAlaCarte && isALaCarteFlagOn" class="msoInstanceName col-md-2" style="width: 10%">
+                  <custom-ellipsis [id]="data?.instanceName" [value]="data?.instanceName"></custom-ellipsis>
+                </td>
+                <td id="msoModelType" style="width: 7%">
+                  <custom-ellipsis [value]="data?.modelType"></custom-ellipsis>
+                </td>
+                <td id="msoInstanceType" style="width: 10%">
+                  <custom-ellipsis [value]="data?.instanceType"></custom-ellipsis>
+                </td>
+                <td id="msostartTime" style="width: 10%">
+                  <custom-ellipsis [value]="data?.startTime"></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 id="msoFinishTime" style="width: 10%">
+                  <custom-ellipsis [value]="data?.finishTime"></custom-ellipsis>
+                </td >
+                <td id="msoJobStatus" style="width: 8%">
+                  <custom-ellipsis [id]="data?.jobStatus" [value]="data?.jobStatus | capitalizeAndFormat" [attr.data-tests-id]="'jobStatus'"></custom-ellipsis>
                 </td>
-                <td class="col-md-4" id="vidFinalStatus">
-                  <custom-ellipsis [id]="data?.final"
-                                   [value]="data?.final ? 'Yes' : 'No'"></custom-ellipsis>
+                <td class="col-md-2" id="msoAdditionalInfo" style="width: 33%">
+                  <custom-ellipsis [id]="data?.additionalInfo" [value]="data?.additionalInfo" [attr.data-tests-id]="'additionalInfo'"></custom-ellipsis>
                 </td>
               </tr>
               </tbody>
             </table>
-            <div class="no-result" *ngIf="!isLoading && vidInfoData?.length == 0">There is no data.</div>
+            <div class="no-result" *ngIf="!isLoading && msoInfoData?.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" style="min-width: 275px;max-width: 275px;">Request ID</th>
-              <th scope="col" style="min-width: 100px;max-width: 100px;">Status</th>
-              <th *ngIf="isAlaCarte&&isALaCarteFlagOn" id="instanceName" class="col-md-2" scope="col" style="max-width: 350px;">Instance Name</th>
-
-              <th class="col-md-2" scope="col" style="min-width: 300px;max-width: 300px;">Additional info</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr class="row" *ngFor="let data of msoInfoData">
-              <td id="msoRequestId" class="request-id" style="min-width: 275px;max-width: 275px;">
-                <custom-ellipsis [id]="data?.requestId" [value]="data?.requestId" [attr.data-tests-id]="'requestId'"></custom-ellipsis>
-              </td>
-              <td id="msoJobStatus" style="min-width: 100px;max-width: 100px;">
-                <custom-ellipsis [id]="data?.jobStatus" [value]="data?.jobStatus | capitalizeAndFormat" [attr.data-tests-id]="'jobStatus'"></custom-ellipsis>
-              </td>
-              <td *ngIf="isAlaCarte && isALaCarteFlagOn" class="msoInstanceName col-md-2" style="max-width: 350px;">
-                <custom-ellipsis [id]="data?.instanceName" [value]="data?.instanceType + ': ' + data?.instanceName"></custom-ellipsis>
-              </td>
-
-              <td class="col-md-2" id="msoAdditionalInfo" style="min-width: 300px;max-width: 300px;">
-                <custom-ellipsis [id]="data?.additionalInfo" [value]="data?.additionalInfo" [attr.data-tests-id]="'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 *ngIf="exportMSOStatusFeatureEnabled" style= "font-size: 12px" id="exportButton" type="button" class="btn btn-default cancel"
+                (click)="exportMsoStatusTable()" [attr.data-tests-id]="'export-button'">
+          Export
+        </button>
+        <button style= "font-size: 12px" id="refreshButton" type="button" class="btn btn-default cancel"
+                 [attr.data-tests-id]="'refresh-button'"
+                 [ngClass]="{'spin' : !dataIsReady}" (click)="refreshData();">
+          Refresh
+        </button>
         <button style= "font-size: 12px" id="cancelButton" type="button" class="btn btn-default cancel" (click)="onCancelClick()" [attr.data-tests-id]="'close-button'">
           Close
         </button>
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
index f36b8b41d..6b1a70486 100644
--- a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.scss
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.scss
@@ -8,7 +8,16 @@
   background-color: #000;
   opacity: 0.5;
 }
+mwlResizable {
+  box-sizing: border-box;
+}
+.modal-dialog{
+  width: 100% !important;
+}
 .modal{
+  width: 100% !important;
+  margin-right: 0%;
+  margin-left: 0%;
 
   #audit-info-modal {
     .leftColumn {
@@ -23,6 +32,8 @@
       border-radius: 0px;
       border: none;
       .modal-header{
+        padding: 5px !important;
+        padding-left: 23px !important;
         background: #009FDB;
         font-size: 24px;
         color: #ffffff;
@@ -49,6 +60,7 @@
           background: #f2f2f2;
           border-right: 1px solid #D2D2D2;
           padding-right: 0px;
+          width: 20%;
           .row:first-child{
             border-bottom: 1px solid #D2D2D2;
             height: 50px;
@@ -64,6 +76,7 @@
           }
         }
         .right-panel{
+          width: 100% !important;
           padding: 30px 30px 15px 30px;
           .row{
             margin: 0px;
@@ -78,79 +91,59 @@
             text-align: center;
             border: 1px solid #d2d2d2;
             padding: 20px;
-            margin-top: -23px;
+            margin-top: 0px;
           }
 
-          .table-bordered{
-            width: 100%;
+          .table-bordered {
             margin-top: 10px;
             font-family: OpenSans-Semibold;
             font-size: 12px;
             overflow-x: auto;
-            display: block;
+            overflow-y: auto;
+            //display: block;
             color: #5A5A5A;
-            .request-id {
-              width: 85px;
-            }
+            position: relative;
             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{
+                  &:last-child {
                     border-right: none;
                   }
-                  &.request-id {
-                    flex-grow: 0;
-                  }
                 }
               }
             }
-
-            tbody {
+            tbody{
               border: none !important;
               max-height: 152px;
-              display: block;
-
-              tr {
-                display: flex;
+              tr{
                 border-bottom: 1px solid #d2d2d2;
                 &:last-child{
                   border-bottom: none;
                 }
-                td {
-                  border: none;
+                td{
                   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;
+              position: sticky;
+              top: 0;
             }
-
             tr.odd {
               background-color: rgb(242, 242, 242);
             }
-
             tr:hover {
               background: #e1e1e1;
             }
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
index 5e39ee3ab..5703c67bd 100644
--- 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
@@ -18,6 +18,9 @@ import {HttpClient} from '@angular/common/http';
 import {getTestBed} from "@angular/core/testing";
 import {of} from 'rxjs';
 import {NodeInstance} from "../../models/nodeInstance";
+import {DatePipe} from "@angular/common";
+import {SpaceToUnderscorePipe} from "../../pipes/spaceToUnderscore/space-to-underscore.pipe";
+import {ResizableModule} from "angular-resizable-element";
 
 class MockAppStore<T> {
   getState() {
@@ -52,6 +55,7 @@ describe('Audit Info Modal Component_serviceInfoService', () => {
         ContextMenuModule,
         ScrollToModule.forRoot(),
         RouterTestingModule,
+        ResizableModule,
         ModalModule.forRoot()
       ],
       providers: [
@@ -61,6 +65,8 @@ describe('Audit Info Modal Component_serviceInfoService', () => {
         AuditInfoModalComponentService,
         ContextMenuService,
         FeatureFlagsService,
+        DatePipe,
+        SpaceToUnderscorePipe,
         {provide: NgRedux, useClass: MockAppStore}
       ],
       declarations: [AuditInfoModalComponent, CapitalizeAndFormatPipe],
@@ -195,4 +201,9 @@ describe('Audit Info Modal Component_serviceInfoService', () => {
     AuditInfoModalComponent.openModal.next(jobData);
     expect(component.auditInfoModal.hide).toHaveBeenCalled();
   });
+
+test('msoStatus table columns count', () =>{
+    let tableHeader = document.querySelector('table thead tr');
+    expect(tableHeader.querySelectorAll('th').length).toEqual(7);
+   });
 });
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
index 3a7f4ecfa..d8d3c32ac 100644
--- a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
@@ -11,6 +11,10 @@ import {NgRedux} from "@angular-redux/store";
 import {AppState} from "../../store/reducers";
 import {AuditInfoModalComponentService} from "./auditInfoModal.component.service";
 import {FeatureFlagsService, Features} from "../../services/featureFlag/feature-flags.service";
+import * as XLSX from 'xlsx';
+import {DatePipe} from "@angular/common";
+import {SpaceToUnderscorePipe} from "../../pipes/spaceToUnderscore/space-to-underscore.pipe";
+import {ResizeEvent} from "angular-resizable-element";
 
 @Component({
   selector: 'audit-info-modal',
@@ -21,7 +25,7 @@ export class AuditInfoModalComponent {
   static openModal: Subject<ServiceInfoModel> = new Subject<ServiceInfoModel>();
   static openInstanceAuditInfoModal: Subject<{instanceId , type, model, instance}> = new Subject<{instanceId , type, model, instance}>();
   @ViewChild('auditInfoModal', {static: false}) public auditInfoModal: ModalDirective;
-  title: string = 'Service Instantiation Information';
+  title: string = 'Service Information';
   modelInfoItems: ModelInformationItem[] = [];
   serviceModel: ServiceModel;
   serviceModelName: string;
@@ -39,17 +43,26 @@ export class AuditInfoModalComponent {
   type : string = "Service";
   showVidStatus : boolean = true;
   auditInfoModalComponentService : AuditInfoModalComponentService;
+  serviceInstanceName : string;
+  serviceModelVersion : any;
+  exportMSOStatusFeatureEnabled: boolean;
+  dataIsReady : boolean = false;
+  jobDataLocal : any;
   constructor(private _serviceInfoService: ServiceInfoService, private _iframeService : IframeService,
               private _auditInfoModalComponentService : AuditInfoModalComponentService,
               private _featureFlagsService: FeatureFlagsService,
+              private datePipe: DatePipe,
+              private spacetoUnderscore: SpaceToUnderscorePipe,
               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.showMoreAuditInfoLink = _featureFlagsService.getFlagState(Features.FLAG_MORE_AUDIT_INFO_LINK_ON_AUDIT_INFO);
+      this.exportMSOStatusFeatureEnabled = _featureFlagsService.getFlagState(Features.FLAG_2011_EXPORT_MSO_STATUS);
       this.initializeProperties();
       this.showVidStatus = true;
       if (jobData) {
+        this.jobDataLocal = jobData;
         this.isAlaCarte = jobData.aLaCarte;
         this.openAuditInfoModal(jobData);
         _iframeService.addClassOpenModal(this.parentElementClassName);
@@ -57,6 +70,8 @@ export class AuditInfoModalComponent {
         this.serviceModelId = jobData.serviceModelId;
         this.jobId = jobData.jobId;
         this.auditInfoModal.show();
+        this.serviceInstanceName = jobData.serviceInstanceName;
+        this.serviceModelVersion = jobData.serviceModelVersion;
       } else {
         _iframeService.removeClassCloseModal(this.parentElementClassName);
         this.auditInfoModal.hide();
@@ -85,6 +100,29 @@ export class AuditInfoModalComponent {
     });
   }
 
+  public style: object = {};
+  validate(event: ResizeEvent): boolean {
+    console.log("event : ", event);
+    if(event.rectangle.width && event.rectangle.height &&
+      ( event.rectangle.width < 800 || event.rectangle.width > 1240)
+    ){
+      return false;
+    } else{
+      return true;
+    }
+  }
+  onResizeEnd(event: ResizeEvent): void {
+    console.log('Element was resized', event);
+    this.style = {
+      position: 'fixed',
+      left: `${event.rectangle.left}px`,
+      top: `${event.rectangle.top}px`,
+      width: `${event.rectangle.width}px`,
+      height: `${event.rectangle.height}px`
+    };
+    console.log("stle : ", this.style);
+  }
+
 
   setModalTitles(type : string) : void{
     this.type = AuditInfoModalComponentService.setModalTitlesType(type) ;
@@ -117,6 +155,20 @@ export class AuditInfoModalComponent {
       });
   }
 
+  exportMsoStatusTable(){
+    let currentTime = new Date();
+    let timestamp = this.datePipe.transform(currentTime, "MMMddyyyy")+'_'
+      +currentTime.getHours()+":"+currentTime.getMinutes()+":"+currentTime.getSeconds()
+    let fileName = this.spacetoUnderscore.transform(this.serviceInstanceName)+'_'+timestamp;
+    let msoStatusTableElement = document.getElementById('service-instantiation-audit-info-mso');
+    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(msoStatusTableElement);
+    const wb: XLSX.WorkBook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+    /* save to file */
+    XLSX.writeFile(wb, fileName+'.csv');
+    this._iframeService.addClassOpenModal(this.parentElementClassName);
+  }
+
   onCancelClick() {
     this._iframeService.removeClassCloseModal(this.parentElementClassName);
     this.initializeProperties();
@@ -128,6 +180,13 @@ export class AuditInfoModalComponent {
     window.open("http://ecompguide.web.att.com:8000/#ecomp_ug/c_ecomp_ops_vid.htmll#r_ecomp_ops_vid_bbglossary", "_blank");
   }
 
+  refreshData(): void {
+    this.dataIsReady = false;
+    this.initAuditInfoData(this.jobDataLocal);
+    this.dataIsReady = true;
+
+  }
+
   readOnlyRetryUrl = (): string =>
     `../../serviceModels.htm?more#/servicePlanning/RETRY?serviceModelId=${this.serviceModelId}&jobId=${this.jobId}`
 }