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.html58
-rw-r--r--public/src/app/home/home.component.scss10
-rw-r--r--public/src/app/home/home.component.ts64
3 files changed, 103 insertions, 29 deletions
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html
index 99ab321..3c23385 100644
--- a/public/src/app/home/home.component.html
+++ b/public/src/app/home/home.component.html
@@ -5,15 +5,18 @@
<div style="font-size: 22px; display: flex; align-items: center;">Monitoring</div>
<div style="display: flex;">
- <button mat-icon-button [disabled]="!checkCanCreate()" style="margin-right: 10px;" data-tests-id="btn-import-mc" (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:20"></span>
+ align-items: center;"
+ [innerHTML]="'download' | feather:20"></span>
</button>
- <button mat-raised-button color="primary" (click)="createScreen()" data-tests-id="btn-create-mc" class="btn-create" [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>
@@ -29,14 +32,14 @@
</div>
</div>
- <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="monitoringComponents" [loadingIndicator]="loadingIndicator"
- [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12" [rowHeight]="40" (selected)="onTableSelectItem($event)"
- [selectionType]="'single'" [selected]="selectedLine" (activate)="onTableActivate($event)">
+ <ngx-datatable data-tests-id="monitoringComponentTable" class="material" [rows]="store.monitoringComponents"
+ [loadingIndicator]="loadingIndicator" [columnMode]="'flex'" [headerHeight]="40" [footerHeight]="40" [limit]="12"
+ [rowHeight]="45" (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" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
- [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}">
+ <div>
<span> {{value}} </span>
</div>
</ng-template>
@@ -54,21 +57,34 @@
<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>
+ <ngx-datatable-column name="Actions" sortable="false" prop="id" [flexGrow]="2">
+ <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="checkCanCreate(); 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>
+ <div *ngIf="hoveredIndex == rowIndex" style="margin-top:-5px; display: flex; justify-content: flex-start; align-items: center;">
+
+ <button mat-icon-button *ngIf="row.submittedUuid" pTooltip="View submitted" tooltipPosition="top" (click)="viewSubmitted(row)" data-tests-id="viewSubmitted">
+ <img src="{{imgBase}}/icon_submitted.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_submitted">
+ </button>
+
+ <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="editMC" (click)="checkTableItemHoverCondition(row) && editTableItem(row)"
+ [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}" pTooltip="Edit"
+ tooltipPosition="top">
+ <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+ [innerHTML]="'edit-3' | feather:18"></span>
</button>
- <ng-template #elseBtnBlock>
+ <div *ngIf="checkCanCreate();">
+ <button mat-icon-button *ngIf="row.submittedUuid != null && checkReverted(row)" pTooltip="Revert" data-tests-id="revertMC"
+ tooltipPosition="top" (click)="checkTableItemHoverCondition(row) && revertMcDialog(row)">
+ <img src="{{imgBase}}/icon_revert.svg" style="object-fit: contain; width:18px; height: 18px;" alt="icon_revert">
+ </button>
+ </div>
- <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>
+ <button *ngIf="checkCanCreate();" mat-icon-button data-tests-id="tableItemsButtonDelete"
+ pTooltip="Delete" tooltipPosition="top" (click)="deleteTableItem(row, rowIndex)">
+ <span style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color:#5A5A5A;"
+ [innerHTML]="'trash-2' | feather:18"></span>
+ </button>
</div>
@@ -99,7 +115,9 @@
<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: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">Add First MC</span>
+ <span style="margin-top: 10px; font-size: 14px; " [style.color]="!checkCanCreate() ? '#ebebe4' : '#009FDB'">
+ <p data-tests-id="btn-span-create-mc">Add First MC</p>
+ </span>
</div>
</div>
</ng-template>
diff --git a/public/src/app/home/home.component.scss b/public/src/app/home/home.component.scss
index 2217b7d..fb2f5e4 100644
--- a/public/src/app/home/home.component.scss
+++ b/public/src/app/home/home.component.scss
@@ -73,6 +73,16 @@
color: #5a5a5a;
}
+// .ngx-datatable.fixed-row
+// .datatable-scroll
+// .datatable-body-row
+// .datatable-body-cell {
+// padding: 3px;
+// display: flex;
+// align-items: center;
+// padding-left: 7px;
+// }
+
.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 aa783d4..ad970f6 100644
--- a/public/src/app/home/home.component.ts
+++ b/public/src/app/home/home.component.ts
@@ -9,6 +9,7 @@ import { ConfirmPopupComponent } from '../rule-engine/confirm-popup/confirm-popu
import { PluginPubSub } from 'sdc-pubsub';
import { Store } from '../store/store';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { environment } from '../../environments/environment';
@Component({
selector: 'app-home',
@@ -20,11 +21,11 @@ export class HomeComponent {
linkToMain: string;
showTable = true;
selectedLine = [];
- monitoringComponents = new Array();
unavailableMonitoringComponents = new Array();
hoveredIndex = 1;
dialogRef;
deleteRow: number;
+ imgBase = environment.imagePath;
loadingIndicator = true;
@@ -38,6 +39,8 @@ export class HomeComponent {
private changeDetectorRef: ChangeDetectorRef
) {
this.store.loader = true;
+ this.store.viewOnly = false;
+ this.store.mcName = '';
this.activeRoute.queryParams.subscribe(params => {
console.log('params: %o', params);
this.store.sdcParmas = params;
@@ -91,13 +94,13 @@ export class HomeComponent {
response => {
console.log('response: ', response);
if (response.hasOwnProperty('monitoringComponents')) {
- this.monitoringComponents = response.monitoringComponents;
+ this.store.monitoringComponents = response.monitoringComponents;
this.loadingIndicator = false;
}
if (response.hasOwnProperty('unavailable')) {
this.unavailableMonitoringComponents = response.unavailable;
}
- this.showTable = this.monitoringComponents.length > 0;
+ this.showTable = this.store.monitoringComponents.length > 0;
this.store.loader = false;
},
response => {
@@ -138,12 +141,30 @@ export class HomeComponent {
}
onTableActivate(event: any): void {
- this.hoveredIndex = this.monitoringComponents.findIndex(
+ this.hoveredIndex = this.store.monitoringComponents.findIndex(
s => s === event.row
);
console.log('selected : ');
}
+ revertMcDialog(item) {
+ this.store.submittedMcUuid = item.submittedUuid;
+ this.store.mcUuid = item.uuid;
+ this.store.vfiName = item.vfiName;
+ this.store.displayRevertDialog = true;
+ }
+
+ checkReverted(item: any) {
+ return !item.uuid.includes(item.submittedUuid);
+ }
+
+ viewSubmitted(item: any): void {
+ this.store.vfiName = item.vfiName;
+ console.log('item.submittedUuid', item.submittedUuid);
+ this.store.viewOnly = true;
+ this.route.navigate([this.linkToMain + '/' + item.submittedUuid]);
+ }
+
editTableItem(item: any): void {
this.store.vfiName = item.vfiName;
this.route.navigate([this.linkToMain + '/' + item.uuid]);
@@ -165,12 +186,16 @@ export class HomeComponent {
if (result) {
if (item.status === 'Submitted') {
this.store.loader = true;
+ const submittedUuid = !item.uuid.includes(item.submittedUuid)
+ ? item.submittedUuid
+ : '';
this._restApi
.deleteMonitoringComponentWithBlueprint(
this.store.sdcParmas,
item.name,
item.uuid,
- item.vfiName
+ item.vfiName,
+ submittedUuid
)
.subscribe(
response => {
@@ -180,7 +205,7 @@ export class HomeComponent {
error => {
const errorMsg = Object.values(error.requestError) as any;
if (errorMsg[0].messageId === 'SVC6118') {
- this.monitoringComponents = this.monitoringComponents.filter(
+ this.store.monitoringComponents = this.store.monitoringComponents.filter(
comp => {
return comp.uuid !== item.uuid;
}
@@ -215,12 +240,33 @@ export class HomeComponent {
}
itemDeletedRemoveAndNotify(uuid, deletedRow: number): void {
- this.monitoringComponents = this.monitoringComponents.filter(comp => {
- return comp.uuid !== uuid;
- });
+ this.store.monitoringComponents = this.store.monitoringComponents.filter(
+ comp => {
+ return comp.uuid !== uuid;
+ }
+ );
this.toastr.success(
'',
'Monitoring Configuration was successfully deleted'
);
}
+
+ test() {
+ const path = location.href;
+ console.log('path', path);
+
+ const newUrl = this.updateQueryStringParameter(path, 'userId', 'dror');
+ console.log('newUrl', newUrl);
+ window.location.href = newUrl;
+ }
+
+ updateQueryStringParameter(uri, key, value) {
+ const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+ const separator = uri.indexOf('?') !== -1 ? '&' : '?';
+ if (uri.match(re)) {
+ return uri.replace(re, '$1' + key + '=' + value + '$2');
+ } else {
+ return uri + separator + key + '=' + value;
+ }
+ }
}