diff options
Diffstat (limited to 'public/src/app/home')
| -rw-r--r-- | public/src/app/home/home.component.html | 106 | ||||
| -rw-r--r-- | public/src/app/home/home.component.scss | 110 | ||||
| -rw-r--r-- | public/src/app/home/home.component.ts | 188 |
3 files changed, 404 insertions, 0 deletions
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html new file mode 100644 index 0000000..90e82d3 --- /dev/null +++ b/public/src/app/home/home.component.html @@ -0,0 +1,106 @@ +<div class="container"> + <div style="display: flex; + justify-content: space-between;"> + <div style="font-size: 1.7em; display: flex; align-items: center;">Monitoring</div> + + <div style="display: flex;"> + <button mat-icon-button [disabled]="checkCanCreate()" (click)="importScreen()"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'download' | feather:22"></span> + </button> + + <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" [disabled]="checkCanCreate()"> + Create New MC + </button> + </div> + </div> + + <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> + <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> + </ng-template> + + <ng-template #elseBlock> + <div style="display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex:1;"> + <div style="font-size: 1.5em;"> + Monitoring Configuration does not Exist + </div> + <div style="padding: 0.5em; padding-top: 1em;" data-tests-id="new-monitoring-title"> + A Monitoring Configuration (MC) was not yet created + </div> + <div> + 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> + </div> + </div> + </ng-template> +</div> + diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss new file mode 100644 index 0000000..583705f --- /dev/null +++ b/public/src/app/home/home.component.scss @@ -0,0 +1,110 @@ +.container { + display: flex; + flex-direction: column; + height: 100%; + padding: 0.5em; + margin-left: 15px; + margin-right: 15px; + .wrapper-btn-add-mc { + margin-top: 3em; + display: flex; + flex-direction: column; + align-items: center; + } +} + +.table-Monitoring-Component { + &:hover { + color: #009fdb; + text-decoration: underline; + cursor: pointer; + } +} + +.table-wrapper { + display: flex; + justify-content: center; + flex: 1; + margin-bottom: 2em; + flex-direction: column; + display: block; +} + +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; +} + +table.mcTable { + border-collapse: collapse; + border-spacing: 0px; +} + +table.mcTable tr.active td { + background-color: #e6f6fb !important; + color: #5a5a5a; +} + +table.mcTable th { + background: #f4f4f4; + color: #191919; + text-align: left; +} + +table.mcTable tr { + &:hover { + background-color: #f8f8f8; + color: #5a5a5a; + } +} + +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; +} + +table.mcTable tr:last-child { + border-bottom: 0.5px solid #d2d2d2; +} + +/deep/ .ui-tooltip .ui-tooltip-text { + font-size: 0.8em; + padding: 0.7em; +} + +/deep/ .ui-tooltip { + max-width: 400px; +} diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts new file mode 100644 index 0000000..1c538c0 --- /dev/null +++ b/public/src/app/home/home.component.ts @@ -0,0 +1,188 @@ +import { Component } from '@angular/core'; +import { Store } from '../store/store'; +import { HostService } from '../host/host.service'; +import { ActivatedRoute, Router } from '@angular/router'; +import { RestApiService } from '../api/rest-api.service'; +import { NgIf } from '@angular/common'; +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'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent { + linkToMain: string; + currentUserId: string; + showTable = true; + selectedLine; + monitoringComponents = new Array(); + unavailableMonitoringComponents = new Array(); + hoveredIndex = null; + dialogRef; + + constructor( + private activeRoute: ActivatedRoute, + private route: Router, + private _restApi: RestApiService, + private dialog: MatDialog, + public store: Store, + private toastr: ToastrService, + private changeDetectorRef: ChangeDetectorRef + ) { + this.store.loader = true; + this.activeRoute.queryParams.subscribe(params => { + console.log('params: %o', params); + this.store.sdcParmas = params; + this.linkToMain = `/main/${params.contextType}/${params.uuid}/${ + params.version + }/`; + this._restApi.getMonitoringComponents(params).subscribe( + response => { + console.log('response: ', response); + if (response.hasOwnProperty('monitoringComponents')) { + this.monitoringComponents = response.monitoringComponents; + } + if (response.hasOwnProperty('unavailable')) { + this.unavailableMonitoringComponents = response.unavailable; + } + this.showTable = this.monitoringComponents.length > 0; + this.store.loader = false; + }, + response => { + this.showTable = false; + this.store.loader = false; + console.log('ERROR: ', response); + } + ); + HostService.disableLoader(); + }); + } + + createScreen() { + this.store.isEditMode = false; + this.route.navigate([this.linkToMain + 'new']); + } + + importScreen() { + this.store.isEditMode = false; + this.route.navigate([this.linkToMain + 'import']); + } + + checkCanCreate() { + if ( + JSON.parse(this.store.sdcParmas.isOwner) && + this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' + ) { + return false; + } else { + return true; + } + } + + checkHoverCondition(item: any): boolean { + if ( + this.store.sdcParmas.userId === item.lastUpdaterUserId && + this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' + ) { + return false; + } else { + return true; + } + } + + editItem(item: any): void { + this.store.vfiName = item.vfiName; + this.route.navigate([this.linkToMain + '/' + item.uuid]); + } + + onSelect(item: any): void { + this.selectedLine = item; + console.log('selected : ', item); + } + + deleteEnable(item: any): boolean { + console.log( + 'delete enable: ', + item.isOwner && item.Lifecycle == 'NOT_CERTIFIED_CHECKOUT' + ); + const { userId, lifecycleState } = this.store.sdcParmas; + return ( + item.lastUpdaterUserId == userId && + lifecycleState == 'NOT_CERTIFIED_CHECKOUT' + ); + } + + deleteItem(item: any): void { + let deleteRow = this.hoveredIndex; + this.dialogRef = this.dialog.open(ConfirmPopupComponent, { + panelClass: 'my-confrim-dialog', + disableClose: true + }); + this.dialogRef.afterClosed().subscribe(result => { + // if the user want to delete + if (result) { + if (item.status == 'submitted') { + this._restApi + .deleteMonitoringComponentWithBlueprint( + this.store.sdcParmas, + item.name, + item.uuid, + item.vfiName + ) + .subscribe( + response => { + this.itemDeletedRemoveAndNotify(deleteRow); + }, + error => { + if (error.messageId === 'SVC6118') { + this.monitoringComponents.splice(deleteRow, 1); + this.changeDetectorRef.detectChanges(); + } + const errorMsg = Object.values(error.requestError) as any; + this.toastr.error('', errorMsg[0]); + } + ); + } else { + this._restApi + .deleteMonitoringComponent( + this.store.sdcParmas, + item.uuid, + item.vfiName + ) + .subscribe( + response => { + this.itemDeletedRemoveAndNotify(deleteRow); + }, + error => { + const errorMsg = Object.values(error.requestError) as any; + this.toastr.error('', errorMsg[0]); + } + ); + } + } + }); + } + + itemDeletedRemoveAndNotify(deletedRow: number): void { + this.monitoringComponents.splice(deletedRow, 1); + this.changeDetectorRef.detectChanges(); + this.toastr.success( + '', + '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); + // } + // }); + // } +} |