From 548c5a220333c7cd666b861e737bff0b45461f18 Mon Sep 17 00:00:00 2001 From: "Stone, Avi (as206k)" Date: Sun, 3 Jun 2018 13:12:12 +0300 Subject: Update FE project Update FE to latest version so that fe can run on docker Change-Id: I9c5dee756b567dbe64fac6d3d6fd89362813bdcc Issue-ID: SDC-1359 Signed-off-by: Stone, Avi (as206k) --- public/src/app/home/home.component.html | 132 ++++++++++++++++---------------- public/src/app/home/home.component.scss | 126 ++++++++++++------------------ public/src/app/home/home.component.ts | 115 ++++++++++++++++++++-------- 3 files changed, 196 insertions(+), 177 deletions(-) (limited to 'public/src/app/home') diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html index 90e82d3..8cea741 100644 --- a/public/src/app/home/home.component.html +++ b/public/src/app/home/home.component.html @@ -1,18 +1,19 @@ -
+
-
Monitoring
+
Monitoring
- -
@@ -21,62 +22,66 @@
- -
-
-
- {{item.uuid}} -
+ +
+
+ {{item.uuid}}
- - - - - - - - - - - - - - - - - - - - - -
Monitoring ConfigurationVNFI NameVersionStatusLast Updated byAction
-
- {{item.name}} -
- 		- {{item.vfiName}} - {{item.version}}{{item.status}}{{item.lastUpdaterUserId}} -
- -
-
- -
-
+ + + + + + +
+ {{value}} +
+
+ {{value}} +
+ + + + + + +
{{value}}
+ + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + @@ -85,22 +90,21 @@ justify-content: center; align-items: center; flex:1;"> -
+
Monitoring Configuration does not Exist
-
+
A Monitoring Configuration (MC) was not yet created
-
+
Please create a new MC to monitor the service
- Add First MC + Add First MC
- diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss index 583705f..2217b7d 100644 --- a/public/src/app/home/home.component.scss +++ b/public/src/app/home/home.component.scss @@ -1,110 +1,78 @@ -.container { +@import '~@swimlane/ngx-datatable/release/themes/material.css'; +.home-container { display: flex; flex-direction: column; height: 100%; - padding: 0.5em; + margin: 15px 20px; margin-left: 15px; margin-right: 15px; .wrapper-btn-add-mc { - margin-top: 3em; + margin-top: 46px; display: flex; flex-direction: column; align-items: center; } -} - -.table-Monitoring-Component { - &:hover { - color: #009fdb; - text-decoration: underline; - cursor: pointer; + .btn-create { + width: 150px; + height: 36px; } } -.table-wrapper { - display: flex; - justify-content: center; - flex: 1; - margin-bottom: 2em; - flex-direction: column; - display: block; +.my-confrim-dialog .mat-dialog-container { + max-width: 600px; + width: 500px; + height: 200px; + padding: 0; } -table.mcTable { - display: flex; - flex-flow: column; - height: calc(100vh - 150px); - width: 100%; - background-color: #ffffff; - color: #5a5a5a; -} -table.mcTable thead { - /* head takes the height it requires, - and it's not scaled when table.mcTable is resized */ - flex: 0 0 auto; - // width: calc(100% - 17px); - width: 100%; -} -table.mcTable tbody { - /* body takes all the remaining available space */ - flex: 1 1 auto; - display: block; - overflow-y: scroll; -} -table.mcTable tbody tr { - width: 100%; -} - -table.mcTable thead, -table.mcTable tbody tr { - display: table; - table-layout: fixed; +/deep/ .ui-tooltip .ui-tooltip-text { + font-size: 0.8em; + padding: 0.7em; } -table.mcTable { - border-collapse: collapse; - border-spacing: 0px; +/deep/ .ui-tooltip { + max-width: 400px; } -table.mcTable tr.active td { - background-color: #e6f6fb !important; - color: #5a5a5a; +.ngx-datatable-monitoring-name { + &:hover { + color: #009fdb; + text-decoration: underline; + cursor: pointer; + } } -table.mcTable th { +.ngx-datatable.material .datatable-header .datatable-header-cell { background: #f4f4f4; - color: #191919; - text-align: left; -} -table.mcTable tr { - &:hover { - background-color: #f8f8f8; - color: #5a5a5a; + span { + font-weight: bold; + font-size: 13px; + font-family: 'Open Sans', sans-serif !important; } } -table.mcTable table, -table.mcTable th, -table.mcTable td { - padding: 5px 10px; - border: 0.5px solid #d2d2d2; - border-bottom: none; - height: 40px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; +.ngx-datatable .datatable-body-cell, +.ngx-datatable .datatable-header-cell { + border: 0.1px solid #d2d2d2; } -table.mcTable tr:last-child { - border-bottom: 0.5px solid #d2d2d2; -} - -/deep/ .ui-tooltip .ui-tooltip-text { - font-size: 0.8em; - padding: 0.7em; +.ngx-datatable.material.single-selection .datatable-body-row.active, +.ngx-datatable.material.single-selection + .datatable-body-row.active + .datatable-row-group, +.ngx-datatable.material.multi-selection .datatable-body-row.active, +.ngx-datatable.material.multi-selection + .datatable-body-row.active + .datatable-row-group, +.ngx-datatable.material.multi-click-selection .datatable-body-row.active, +.ngx-datatable.material.multi-click-selection + .datatable-body-row.active + .datatable-row-group { + background-color: #e6f6fb !important; + color: #5a5a5a; } -/deep/ .ui-tooltip { - max-width: 400px; +.ngx-datatable.material { + box-shadow: none; } diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts index 1c538c0..349a031 100644 --- a/public/src/app/home/home.component.ts +++ b/public/src/app/home/home.component.ts @@ -1,28 +1,31 @@ -import { Component } from '@angular/core'; -import { Store } from '../store/store'; -import { HostService } from '../host/host.service'; +import { ChangeDetectorRef, Component, ViewEncapsulation } from '@angular/core'; +import { MatDialog } from '@angular/material'; import { ActivatedRoute, Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; import { RestApiService } from '../api/rest-api.service'; -import { NgIf } from '@angular/common'; +import { HostService } from '../host/host.service'; import { ConfirmPopupComponent } from '../rule-engine/confirm-popup/confirm-popup.component'; -import { MatDialog } from '@angular/material'; -import { ToastrService } from 'ngx-toastr'; -import { ChangeDetectorRef } from '@angular/core'; +import { PluginPubSub } from '../sdc/plugin-pubsub'; +import { Store } from '../store/store'; +import { NgxDatatableModule } from '@swimlane/ngx-datatable'; @Component({ selector: 'app-home', templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + styleUrls: ['./home.component.scss'], + encapsulation: ViewEncapsulation.None }) export class HomeComponent { linkToMain: string; - currentUserId: string; showTable = true; - selectedLine; + selectedLine = []; monitoringComponents = new Array(); unavailableMonitoringComponents = new Array(); - hoveredIndex = null; + hoveredIndex = 1; dialogRef; + deleteRow: number; + + loadingIndicator = true; constructor( private activeRoute: ActivatedRoute, @@ -37,14 +40,58 @@ export class HomeComponent { this.activeRoute.queryParams.subscribe(params => { console.log('params: %o', params); this.store.sdcParmas = params; + + console.log('init comunication with sdc'); + const eventsToWaitFor = [ + 'WINDOW_OUT', + 'VERSION_CHANGE', + 'CHECK_IN', + 'CHECK_OUT', + 'SUBMIT_FOR_TESTING', + 'UNDO_CHECK_OUT' + ]; + this.store.ifrmaeMessenger = new PluginPubSub( + this.store.sdcParmas.eventsClientId, + this.store.sdcParmas.parentUrl, + eventsToWaitFor + ); + console.log('send ready to sdc'); + this.store.ifrmaeMessenger.notify('READY'); + + this.store.ifrmaeMessenger.on((eventData, event) => { + console.log('eventData', eventData); + console.log('event', event); + if ( + eventData.type === 'WINDOW_OUT' || + eventData.type === 'CHECK_IN' || + eventData.type === 'SUBMIT_FOR_TESTING' + ) { + const currentUrl = this.route.url; + if (currentUrl.includes('main')) { + if (this.store.cdumpIsDirty) { + this.store.displaySDCDialog = true; + } else { + this.store.ifrmaeMessenger.notify('ACTION_COMPLETED'); + } + } else { + this.store.ifrmaeMessenger.notify('ACTION_COMPLETED'); + } + } else { + this.store.ifrmaeMessenger.notify('ACTION_COMPLETED'); + } + }); + this.linkToMain = `/main/${params.contextType}/${params.uuid}/${ params.version }/`; + this.loadingIndicator = true; + this._restApi.getMonitoringComponents(params).subscribe( response => { console.log('response: ', response); if (response.hasOwnProperty('monitoringComponents')) { this.monitoringComponents = response.monitoringComponents; + this.loadingIndicator = false; } if (response.hasOwnProperty('unavailable')) { this.unavailableMonitoringComponents = response.unavailable; @@ -83,8 +130,11 @@ export class HomeComponent { } } - checkHoverCondition(item: any): boolean { + // Monitoring Table logic + + checkTableItemHoverCondition(item: any): boolean { if ( + this.store.sdcParmas !== undefined && this.store.sdcParmas.userId === item.lastUpdaterUserId && this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' ) { @@ -94,12 +144,19 @@ export class HomeComponent { } } - editItem(item: any): void { + onTableActivate(event: any): void { + this.hoveredIndex = this.monitoringComponents.findIndex( + s => s == event.row + ); + console.log('selected : '); + } + + editTableItem(item: any): void { this.store.vfiName = item.vfiName; this.route.navigate([this.linkToMain + '/' + item.uuid]); } - onSelect(item: any): void { + onTableSelectItem(item: any): void { this.selectedLine = item; console.log('selected : ', item); } @@ -107,17 +164,17 @@ export class HomeComponent { deleteEnable(item: any): boolean { console.log( 'delete enable: ', - item.isOwner && item.Lifecycle == 'NOT_CERTIFIED_CHECKOUT' + item.isOwner && item.Lifecycle === 'NOT_CERTIFIED_CHECKOUT' ); const { userId, lifecycleState } = this.store.sdcParmas; return ( - item.lastUpdaterUserId == userId && - lifecycleState == 'NOT_CERTIFIED_CHECKOUT' + item.lastUpdaterUserId === userId && + lifecycleState === 'NOT_CERTIFIED_CHECKOUT' ); } - deleteItem(item: any): void { - let deleteRow = this.hoveredIndex; + deleteTableItem(item: any, index: any): void { + this.deleteRow = index; this.dialogRef = this.dialog.open(ConfirmPopupComponent, { panelClass: 'my-confrim-dialog', disableClose: true @@ -125,7 +182,7 @@ export class HomeComponent { this.dialogRef.afterClosed().subscribe(result => { // if the user want to delete if (result) { - if (item.status == 'submitted') { + if (item.status === 'Submitted') { this._restApi .deleteMonitoringComponentWithBlueprint( this.store.sdcParmas, @@ -135,15 +192,15 @@ export class HomeComponent { ) .subscribe( response => { - this.itemDeletedRemoveAndNotify(deleteRow); + this.itemDeletedRemoveAndNotify(this.deleteRow); }, error => { if (error.messageId === 'SVC6118') { - this.monitoringComponents.splice(deleteRow, 1); + this.monitoringComponents.splice(this.deleteRow, 1); this.changeDetectorRef.detectChanges(); } const errorMsg = Object.values(error.requestError) as any; - this.toastr.error('', errorMsg[0]); + this.toastr.error('', errorMsg[0].formattedErrorMessage); } ); } else { @@ -155,7 +212,7 @@ export class HomeComponent { ) .subscribe( response => { - this.itemDeletedRemoveAndNotify(deleteRow); + this.itemDeletedRemoveAndNotify(this.deleteRow); }, error => { const errorMsg = Object.values(error.requestError) as any; @@ -175,14 +232,4 @@ export class HomeComponent { 'Monitoring Configuration was successfully deleted' ); } - - // convertFile(fileInput: any) { - // // read file from input - // const fileReaded = fileInput.target.files[0]; - // Papa.parse(fileReaded, { - // complete: function(results) { - // console.log('Finished:', results.data); - // } - // }); - // } } -- cgit 1.2.3-korg