diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/auditInfoModal')
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()">×</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> + + <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}` } |