diff options
Diffstat (limited to 'public/src/app/home')
-rw-r--r-- | public/src/app/home/home.component.html | 132 | ||||
-rw-r--r-- | public/src/app/home/home.component.scss | 126 | ||||
-rw-r--r-- | public/src/app/home/home.component.ts | 115 |
3 files changed, 196 insertions, 177 deletions
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 @@ -<div class="container"> +<div class="home-container"> <div style="display: flex; + padding-bottom:7px; justify-content: space-between;"> - <div style="font-size: 1.7em; display: flex; align-items: center;">Monitoring</div> + <div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div> <div style="display: flex;"> - <button mat-icon-button [disabled]="checkCanCreate()" (click)="importScreen()"> + <button mat-icon-button [disabled]="checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (click)="importScreen()"> <span style="width: 100%; height: 100%; display: flex; justify-content: center; - align-items: center;" [innerHTML]="'download' | feather:22"></span> + align-items: center;" [innerHTML]="'download' | feather:20"></span> </button> - <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" [disabled]="checkCanCreate()"> + <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [disabled]="checkCanCreate()"> Create New MC </button> </div> @@ -21,62 +22,66 @@ <div *ngIf="showTable===true; then thenBlock else elseBlock"></div> <ng-template #thenBlock> - <!-- Table --> - <div class="table-wrapper"> - <div *ngIf="unavailableMonitoringComponents.length > 0" data-tests-id="unavailableArea" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin: 1em 0;"> - <div *ngFor="let item of unavailableMonitoringComponents"> - {{item.uuid}} - </div> + + <div *ngIf="unavailableMonitoringComponents.length > 0" data-tests-id="unavailableArea" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin: 1em 0;"> + <div *ngFor="let item of unavailableMonitoringComponents"> + {{item.uuid}} </div> - <table class="mcTable"> - <thead> - <tr data-tests-id="monitoringComponentTableHeaders"> - <th>Monitoring Configuration</th> - <th>VNFI Name</th> - <th style="width:90px;">Version</th> - <th style="width:140px;">Status</th> - <th style="width:140px;">Last Updated by</th> - <th style="width:96px;">Action</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of monitoringComponents; let i = index" on-mouseleave="hoveredIndex=null" (click)="onSelect(i)" [class.active]="i == selectedLine" - data-tests-id="monitoringComponentTableItems" on-mouseover="hoveredIndex=i"> - <td color="blue"> - <div [hidden]="checkHoverCondition(item)" data-tests-id="tableItemsMonitoringConfiguration" class="table-Monitoring-Component" (click)="editItem(item)"> - {{item.name}} - </div> - </td> - <td> - <span pTooltip="{{item.vfiName}}" tooltipPosition="bottom" style="padding:5px;">{{item.vfiName}}</span> - </td> - <td style="width:90px;">{{item.version}}</td> - <td style="width:140px;">{{item.status}}</td> - <td style="width:140px;">{{item.lastUpdaterUserId}}</td> - <td style="width:80px;"> - <div *ngIf="i==hoveredIndex" [hidden]="checkHoverCondition(item)"> - <button mat-icon-button data-tests-id="tableItemsButtonDelete" (click)="deleteItem(item)" style="width:30px; height: 30px;"> - <span style="width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center;" [innerHTML]="'trash-2' | feather:18"></span> - </button> - </div> - <div *ngIf="i==hoveredIndex" [hidden]="!checkHoverCondition(item)"> - <button mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;"> - <span style="width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center;" [innerHTML]="'info' | feather:18"></span> - </button> - </div> - </td> - </tr> - </tbody> - </table> </div> + + <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" + [headerHeight]="40" [footerHeight]="40" [limit]="10" [rowHeight]="40"(selected)="onTableSelectItem($event)" + [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)"> + + <ngx-datatable-column name="Monitoring Configuration" prop="name" [flexGrow]="3"> + <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> + + <div data-tests-id="tableItemsMonitoringConfiguration" [hidden]="checkTableItemHoverCondition(row)" (click)="editTableItem(row)" + class="ngx-datatable-monitoring-name"> + <span> {{value}} </span> + </div> + <div data-tests-id="tableItemsMonitoringConfigurationNotOwner" [hidden]="!checkTableItemHoverCondition(row)"> + <span>{{value}} </span> + </div> + </ng-template> + + </ngx-datatable-column> + <ngx-datatable-column name="VNFI Name" prop="vfiName" [flexGrow]="3"> + <ng-template let-value="value" ngx-datatable-cell-template> + + <div pTooltip="{{value}}" tooltipPosition="bottom">{{value}}</div> + + </ng-template> + + + </ngx-datatable-column> + <ngx-datatable-column name="Version" prop="version" [flexGrow]="1"></ngx-datatable-column> + <ngx-datatable-column name="Status" prop="status" [flexGrow]="2"></ngx-datatable-column> + <ngx-datatable-column name="Last Updated by" prop="lastUpdaterUserId" [flexGrow]="2"></ngx-datatable-column> + <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="1"> + <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template > + + <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px;" > + <button data-tests-id="tableItemsButtonDelete" *ngIf="!checkTableItemHoverCondition(row); else elseBtnBlock" mat-icon-button + data-tests-id="tableItemsButtonDelete" (click)="deleteTableItem(row, rowIndex)" style="width:30px; height: 30px;"> + <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'trash-2' | feather:18"></span> + </button> + + <ng-template #elseBtnBlock> + + <button data-tests-id="tableItemsButtonInfo" mat-icon-button data-tests-id="tableItemsButtonInfo" style="width:30px; height: 30px;"> + <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;" [innerHTML]="'info' | feather:18"></span> + </button> + </ng-template> + + </div> + + </ng-template> + </ngx-datatable-column> + + </ngx-datatable> + + </ng-template> <ng-template #elseBlock> @@ -85,22 +90,21 @@ justify-content: center; align-items: center; flex:1;"> - <div style="font-size: 1.5em;"> + <div style="font-size: 18px;"> Monitoring Configuration does not Exist </div> - <div style="padding: 0.5em; padding-top: 1em;" data-tests-id="new-monitoring-title"> + <div style="padding: 0.5em; padding-top: 1em; font-size: 13px;" data-tests-id="new-monitoring-title"> A Monitoring Configuration (MC) was not yet created </div> - <div> + <div style="font-size: 13px;"> Please create a new MC to monitor the service </div> <div class="wrapper-btn-add-mc"> <button mat-mini-fab color="primary" (click)="createScreen()" data-tests-id="btn-fab-create-mc" [disabled]="checkCanCreate()"> <span [innerHTML]="'plus' | feather:24"></span> </button> - <span data-tests-id="btn-span-create-mc" style="margin-top: 1rem; font-size: 1.2em; font-weight: 400;" [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span> + <span data-tests-id="btn-span-create-mc" style="margin-top: 10px; font-size: 14px; " [style.color]="checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span> </div> </div> </ng-template> </div> - 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); - // } - // }); - // } } |