summaryrefslogtreecommitdiffstats
path: root/public/src/app/home
diff options
context:
space:
mode:
Diffstat (limited to 'public/src/app/home')
-rw-r--r--public/src/app/home/home.component.html132
-rw-r--r--public/src/app/home/home.component.scss126
-rw-r--r--public/src/app/home/home.component.ts115
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);
- // }
- // });
- // }
}