summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/auditInfoModal
diff options
context:
space:
mode:
authorRachitha Ramappa <rachitha.ramappa@att.com>2020-09-23 12:42:19 +0530
committerIkram Ikramullah <ikram@research.att.com>2020-10-08 10:53:16 +0000
commit226ef715d7afe3758fbc88c05cf4d752c6bed51b (patch)
tree26915a243c02d977cd906937330234860cbed6dd /vid-webpack-master/src/app/shared/components/auditInfoModal
parent30eb0655f49fd3565d737b91146baf9ce4e02f9d (diff)
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
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/auditInfoModal')
-rw-r--r--vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.html132
-rw-r--r--vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.scss55
-rw-r--r--vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.spec.ts11
-rw-r--r--vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts61
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}`
}