diff options
author | 2018-08-29 17:01:32 +0300 | |
---|---|---|
committer | 2019-02-18 18:35:30 +0200 | |
commit | 6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 (patch) | |
tree | 936005c364dc5a7264d6304d4777c3d83494db22 /vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts | |
parent | 67d99f816cc583643c35193197594cf78d8ce60a (diff) |
merge from ecomp a88f0072 - Modern UI
Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
Diffstat (limited to 'vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts')
-rw-r--r-- | vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts | 170 |
1 files changed, 129 insertions, 41 deletions
diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts index ed45ce43c..f3f651960 100644 --- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts +++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts @@ -1,40 +1,97 @@ -import {AfterViewChecked, Component, ViewChild} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {ServiceInfoService} from '../shared/server/serviceInfo/serviceInfo.service'; import {ServiceInfoModel} from '../shared/server/serviceInfo/serviceInfo.model'; import {InstantiationStatusComponentService} from './instantiationStatus.component.service'; import {ContextMenuComponent, ContextMenuService} from 'ngx-contextmenu'; -import {AuditInfoModalComponent} from "./auditInfoModal/auditInfoModal.component"; +import {AuditInfoModalComponent} from "../shared/components/auditInfoModal/auditInfoModal.component"; import * as _ from 'lodash'; import {ScrollToConfigOptions, ScrollToService} from '@nicky-lenaers/ngx-scroll-to'; -import {ConfigurationService} from "../services/configuration.service"; +import {ConfigurationService} from "../shared/services/configuration.service"; import {LogService} from '../shared/utils/log/log.service'; - +import {AppState} from "../shared/store/reducers"; +import {NgRedux} from '@angular-redux/store'; +import {JobStatus, ServiceAction} from "../shared/models/serviceInstanceActions"; +import {DrawingBoardModes} from "../drawingBoard/service-planning/drawing-board.modes"; + +export interface MenuAction{ + name: string; + dataTestId: string; + className: string; + tooltip?: string; + click(item: ServiceInfoModel): void; + enabled (item?: ServiceInfoModel): boolean; + visible (item?: ServiceInfoModel): boolean; +} @Component({ selector : 'instantiation-status', templateUrl : './instantiationStatus.component.html', styleUrls : ['./instantiationStatus.component.scss'] }) -export class InstantiationStatusComponent implements AfterViewChecked{ - +export class InstantiationStatusComponent { TIMER_TIME_IN_SECONDS : number = 0; timer = null; dataIsReady : boolean = false; scroll : boolean = false; lastUpdatedDate: Date = null; - currentJobId: string = null; instantiationStatusComponentService: InstantiationStatusComponentService; configurationService : ConfigurationService; - serviceInfoData: Array<ServiceInfoModel> = null; + serviceInfoData: ServiceInfoModel[] = null; @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent; + public contextMenuActions: Array<MenuAction> = [ + { + name: "Redeploy", + dataTestId: "context-menu-retry", + className: "fa-repeat", + click: (item: ServiceInfoModel) => this.retryItem(item), + enabled: () => true, + visible: (item: ServiceInfoModel) => item.isRetryEnabled, + }, + { + name: "Open", + dataTestId: "context-menu-open", + className: "fa-external-link", + click: (item: ServiceInfoModel) => this.instantiationStatusComponentService.open(item), + enabled: (item: ServiceInfoModel) => this.isOpenEnabled(item), + visible: () => true, + }, + { + name: "Audit info", + dataTestId: "context-menu-audit-info", + className: "fa-info-circle", + click: (item: ServiceInfoModel) => this.auditInfo(item), + enabled: (item: ServiceInfoModel) => this.isAuditInfoEnabled(item), + visible: () => true, + }, + { + name: "Delete", + dataTestId: "context-menu-remove", + className: "fa-trash-o", + click: (item: ServiceInfoModel) => this.deleteItem(item), + enabled: (item: ServiceInfoModel) => this.isDeleteEnabled(item), + visible: () => true, + }, + { + name: "Hide request", + dataTestId: "context-menu-hide", + className: "fa-eye-slash", + tooltip: "Hide this service from this table", + click: (item: ServiceInfoModel) => this.hideItem(item), + enabled: (item: ServiceInfoModel) => this.isHideEnabled(item), + visible: () => true, + } + ]; + + flags: any; constructor(private _serviceInfoService: ServiceInfoService, private _instantiationStatusComponentService : InstantiationStatusComponentService, private _contextMenuService: ContextMenuService, private _configurationService : ConfigurationService, private _scrollToService: ScrollToService, - private _logService : LogService) { + private _logService : LogService, + private _store: NgRedux<AppState>) { this.instantiationStatusComponentService = _instantiationStatusComponentService; this.configurationService = this._configurationService; this.configurationService.getConfiguration("refreshTimeInstantiationDashboard").subscribe(response => { @@ -58,61 +115,73 @@ export class InstantiationStatusComponent implements AfterViewChecked{ refreshData(): void { this.dataIsReady = false; - this._serviceInfoService.getServicesJobInfo(true) - .subscribe((res: Array<ServiceInfoModel>) => { + this._serviceInfoService.getServicesJobInfo(true, this.lastUpdatedDate === null) + .subscribe((res: ServiceInfoModel[]) => { this._instantiationStatusComponentService.convertObjectToArray(res).subscribe((res) => { this._logService.info('refresh instantiation status table', res); this.dataIsReady = true; this.lastUpdatedDate = new Date(); if (!_.isEqual(this.serviceInfoData, res)) { this.serviceInfoData = res; - this.scroll = true; + this.scrollToElement(this.findFirstVisibleJob()); } }); }) } - ngAfterViewChecked(){ - if (this.scroll) { - this.scrollToElement(); - this.scroll = false; - } + trackByFn(index: number, item: ServiceInfoModel){ + return _.isNil(item) ? null : item.jobId; } - - - isDeleteEnabled(item):boolean { - return _.includes(['PENDING', 'STOPPED'], item.jobStatus); - } - - deleteItem(item): void { + deleteItem(item: ServiceInfoModel): void { this._serviceInfoService.deleteJob(item.jobId).subscribe(() => { this.refreshData(); }); } - hideItem(item): void { + hideItem(item: ServiceInfoModel): void { this._serviceInfoService.hideJob(item.jobId).subscribe(() => { this.refreshData(); }); } + + retryItem(item: ServiceInfoModel) : void { + if (item.isRetryEnabled) { + this._instantiationStatusComponentService.retry(item); + } + } auditInfo(jobData : ServiceInfoModel): void { AuditInfoModalComponent.openModal.next(jobData); + } + isOpenEnabled(item: ServiceInfoModel):boolean { + switch(item.action) { + case ServiceAction.DELETE: + return _.includes([ JobStatus.PENDING, JobStatus.COMPLETED_WITH_ERRORS, JobStatus.FAILED], item.jobStatus); + case ServiceAction.UPDATE: + return _.includes([JobStatus.PENDING, JobStatus.PAUSE, JobStatus.COMPLETED_WITH_ERRORS, JobStatus.COMPLETED, JobStatus.FAILED], item.jobStatus); + default: + return _.includes([JobStatus.COMPLETED, JobStatus.PAUSE, JobStatus.COMPLETED_WITH_ERRORS], item.jobStatus); + } } - isOpenVisible(item):boolean { - return _.includes(['COMPLETED', 'PAUSE'], item.jobStatus); + isAuditInfoEnabled(item: ServiceInfoModel): boolean { + if(item.action === ServiceAction.DELETE || item.action=== ServiceAction.UPDATE) { + return _.includes([JobStatus.FAILED, JobStatus.IN_PROGRESS, JobStatus.COMPLETED_WITH_ERRORS, JobStatus.PAUSE, JobStatus.COMPLETED], item.jobStatus); + } + return true;// ServiceAction.INSTANTIATE } - open(item): void { - let query = - `subscriberId=${item['subscriberName']}&` + - `serviceType=${item['serviceType']}&` + - `serviceInstanceId=${item['serviceInstanceId']}`; + isDeleteEnabled(item: ServiceInfoModel):boolean { + if( item.action === ServiceAction.DELETE || item.action === ServiceAction.UPDATE){ + return _.includes([JobStatus.PENDING], item.jobStatus); + } + return _.includes([JobStatus.PENDING, JobStatus.STOPPED], item.jobStatus); + } - window.parent.location.assign('../../serviceModels.htm#/instantiate?' + query); + isHideEnabled(item: ServiceInfoModel):boolean { + return _.includes([JobStatus.COMPLETED, JobStatus.FAILED, JobStatus.STOPPED, JobStatus.COMPLETED_WITH_ERRORS], item.jobStatus); } public onContextMenu($event: MouseEvent, item: any): void { @@ -129,17 +198,36 @@ export class InstantiationStatusComponent implements AfterViewChecked{ return './' + imageName + '.svg'; } - isHideEnabled(item: any):boolean { - return _.includes(['COMPLETED', 'FAILED', 'STOPPED'], item.jobStatus); + private getHeaderHeaderClientRect(): ClientRect { + const element = document.querySelector("#instantiation-status thead") as HTMLElement; + return element.getBoundingClientRect(); } - scrollToElement() { - if(this.currentJobId){ + + findFirstVisibleJob(): HTMLElement { + const elements : any = document.querySelectorAll('#instantiation-status tr'); + const headerRect = this.getHeaderHeaderClientRect(); + if (headerRect) { + const topEdge = headerRect.bottom; + for (let i = 0; i < elements.length; i++) { + if (elements[i].getBoundingClientRect().top >= topEdge) + return elements[i]; + } + } + return null; + } + + scrollToElement(currentJob: HTMLElement) { + if (currentJob) { const config: ScrollToConfigOptions = { - target: this.currentJobId, - duration: 50, - offset: -35 //header height + target: currentJob, + duration: 0, + offset: -1 * (this.getHeaderHeaderClientRect().height + 2), }; - this._scrollToService.scrollTo(config); + + // wait after render + setTimeout(() => { + this._scrollToService.scrollTo(config); + }, 0) } } } |