diff options
Diffstat (limited to 'public/src/app/home')
| -rw-r--r-- | public/src/app/home/home.component.html | 40 | ||||
| -rw-r--r-- | public/src/app/home/home.component.ts | 67 |
2 files changed, 47 insertions, 60 deletions
diff --git a/public/src/app/home/home.component.html b/public/src/app/home/home.component.html index 8cea741..99ab321 100644 --- a/public/src/app/home/home.component.html +++ b/public/src/app/home/home.component.html @@ -5,7 +5,7 @@ <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; @@ -13,7 +13,7 @@ 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,20 +29,16 @@ </div> </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)" + <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-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"> + <div data-tests-id="tableItemsMonitoringConfiguration" (click)="checkTableItemHoverCondition(row) && editTableItem(row)" + [ngClass]="{'ngx-datatable-monitoring-name': checkTableItemHoverCondition(row)}"> <span> {{value}} </span> </div> - <div data-tests-id="tableItemsMonitoringConfigurationNotOwner" [hidden]="!checkTableItemHoverCondition(row)"> - <span>{{value}} </span> - </div> </ng-template> </ngx-datatable-column> @@ -57,22 +53,22 @@ </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 > + <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 + <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> </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> + <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> @@ -100,10 +96,10 @@ 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()"> + <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 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> diff --git a/public/src/app/home/home.component.ts b/public/src/app/home/home.component.ts index 349a031..aa783d4 100644 --- a/public/src/app/home/home.component.ts +++ b/public/src/app/home/home.component.ts @@ -5,7 +5,8 @@ import { ToastrService } from 'ngx-toastr'; import { RestApiService } from '../api/rest-api.service'; import { HostService } from '../host/host.service'; import { ConfirmPopupComponent } from '../rule-engine/confirm-popup/confirm-popup.component'; -import { PluginPubSub } from '../sdc/plugin-pubsub'; +// import { PluginPubSub } from '../sdc/plugin-pubsub'; +import { PluginPubSub } from 'sdc-pubsub'; import { Store } from '../store/store'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; @@ -120,33 +121,25 @@ export class HomeComponent { } checkCanCreate() { - if ( + return ( JSON.parse(this.store.sdcParmas.isOwner) && this.store.sdcParmas.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' - ) { - return false; - } else { - return true; - } + ); } // 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' - ) { - return false; - } else { - return true; - } + return ( + this.checkCanCreate() && + (this.store.sdcParmas.userId === item.lastUpdaterUserId || + item['lifecycleState'] !== 'NOT_CERTIFIED_CHECKOUT') + ); } onTableActivate(event: any): void { this.hoveredIndex = this.monitoringComponents.findIndex( - s => s == event.row + s => s === event.row ); console.log('selected : '); } @@ -161,18 +154,6 @@ export class HomeComponent { 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' - ); - } - deleteTableItem(item: any, index: any): void { this.deleteRow = index; this.dialogRef = this.dialog.open(ConfirmPopupComponent, { @@ -183,6 +164,7 @@ export class HomeComponent { // if the user want to delete if (result) { if (item.status === 'Submitted') { + this.store.loader = true; this._restApi .deleteMonitoringComponentWithBlueprint( this.store.sdcParmas, @@ -192,18 +174,24 @@ export class HomeComponent { ) .subscribe( response => { - this.itemDeletedRemoveAndNotify(this.deleteRow); + this.itemDeletedRemoveAndNotify(item.uuid, this.deleteRow); + this.store.loader = false; }, error => { - if (error.messageId === 'SVC6118') { - this.monitoringComponents.splice(this.deleteRow, 1); - this.changeDetectorRef.detectChanges(); - } const errorMsg = Object.values(error.requestError) as any; + if (errorMsg[0].messageId === 'SVC6118') { + this.monitoringComponents = this.monitoringComponents.filter( + comp => { + return comp.uuid !== item.uuid; + } + ); + } + this.store.loader = false; this.toastr.error('', errorMsg[0].formattedErrorMessage); } ); } else { + this.store.loader = true; this._restApi .deleteMonitoringComponent( this.store.sdcParmas, @@ -212,10 +200,12 @@ export class HomeComponent { ) .subscribe( response => { - this.itemDeletedRemoveAndNotify(this.deleteRow); + this.itemDeletedRemoveAndNotify(item.uuid, this.deleteRow); + this.store.loader = false; }, error => { const errorMsg = Object.values(error.requestError) as any; + this.store.loader = false; this.toastr.error('', errorMsg[0]); } ); @@ -224,9 +214,10 @@ export class HomeComponent { }); } - itemDeletedRemoveAndNotify(deletedRow: number): void { - this.monitoringComponents.splice(deletedRow, 1); - this.changeDetectorRef.detectChanges(); + itemDeletedRemoveAndNotify(uuid, deletedRow: number): void { + this.monitoringComponents = this.monitoringComponents.filter(comp => { + return comp.uuid !== uuid; + }); this.toastr.success( '', 'Monitoring Configuration was successfully deleted' |