add "new view/edit" button in the Instantiation Status page
[vid.git] / vid-webpack-master / src / app / instantiationStatus / instantiationStatus.component.ts
1 import {Component, OnInit, ViewChild} from '@angular/core';
2 import {ServiceInfoService} from '../shared/server/serviceInfo/serviceInfo.service';
3 import {ServiceInfoModel} from '../shared/server/serviceInfo/serviceInfo.model';
4 import {InstantiationStatusComponentService} from './instantiationStatus.component.service';
5 import {ContextMenuComponent, ContextMenuService} from 'ngx-contextmenu';
6 import {AuditInfoModalComponent} from "../shared/components/auditInfoModal/auditInfoModal.component";
7 import * as _ from 'lodash';
8 import {ScrollToConfigOptions, ScrollToService} from '@nicky-lenaers/ngx-scroll-to';
9 import {ConfigurationService} from "../shared/services/configuration.service";
10 import {LogService} from '../shared/utils/log/log.service';
11 import {AppState} from "../shared/store/reducers";
12 import {NgRedux} from '@angular-redux/store';
13 import {JobStatus, ServiceAction} from "../shared/models/serviceInstanceActions";
14 import {ActivatedRoute} from "@angular/router";
15 import {FeatureFlagsService, Features} from "../shared/services/featureFlag/feature-flags.service";
16
17 export interface MenuAction{
18   name: string;
19   dataTestId: string;
20   className: string;
21   tooltip?: string;
22   click(item: ServiceInfoModel): void;
23   enabled (item?: ServiceInfoModel): boolean;
24   visible (item?: ServiceInfoModel): boolean;
25 }
26
27 @Component({
28   selector : 'instantiation-status',
29   templateUrl : './instantiationStatus.component.html',
30   styleUrls : ['./instantiationStatus.component.scss']
31 })
32 export class InstantiationStatusComponent implements OnInit {
33
34   TIMER_TIME_IN_SECONDS : number = 0;
35   timer = null;
36   dataIsReady : boolean = false;
37   scroll : boolean = false;
38   lastUpdatedDate: Date = null;
39   instantiationStatusComponentService: InstantiationStatusComponentService;
40   configurationService : ConfigurationService;
41   serviceInfoData: ServiceInfoModel[] = null;
42   @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent;
43
44   public contextMenuActions: Array<MenuAction> = [
45     {
46       name: "Redeploy",
47       dataTestId: "context-menu-retry",
48       className: "fa-repeat",
49       click: (item: ServiceInfoModel) => this.retryItem(item),
50       enabled: () =>  true,
51       visible: (item: ServiceInfoModel) =>  item.isRetryEnabled,
52     },
53     {
54       name: "Open",
55       dataTestId: "context-menu-open",
56       className: "fa-external-link",
57       click: (item: ServiceInfoModel) => this.instantiationStatusComponentService.open(item),
58       enabled: (item: ServiceInfoModel) =>  this.isOpenEnabled(item),
59       visible: () =>  true,
60     },
61     {
62       name: "New View/Edit",
63       dataTestId: "context-menu-new-view-edit",
64       className: "fa-pencil",
65       click: (item: ServiceInfoModel) => this.instantiationStatusComponentService.forwardToNewViewEdit(item),
66       enabled: () => true,
67       visible: () => this.instantiationStatusComponentService.isNewViewEditVisible(),
68     },
69     {
70       name: "Create another one",
71       dataTestId: "context-menu-create-another-one",
72       className: "fa-clone",
73       click: (item: ServiceInfoModel) => this.instantiationStatusComponentService.recreate(item),
74       enabled: (item: ServiceInfoModel) =>  this.instantiationStatusComponentService.isRecreateEnabled(item),
75       visible: () =>  this.instantiationStatusComponentService.isRecreateVisible(),
76     },
77     {
78       name: "Audit info",
79       dataTestId: "context-menu-audit-info",
80       className: "fa-info-circle",
81       click: (item: ServiceInfoModel) => this.auditInfo(item),
82       enabled: (item: ServiceInfoModel) =>  this.isAuditInfoEnabled(item),
83       visible: () =>  true,
84     },
85     {
86       name: "Delete",
87       dataTestId: "context-menu-remove",
88       className: "fa-trash-o",
89       click: (item: ServiceInfoModel) => this.deleteItem(item),
90       enabled: (item: ServiceInfoModel) =>  this.isDeleteEnabled(item),
91       visible: () =>  true,
92     },
93     {
94       name: "Hide request",
95       dataTestId: "context-menu-hide",
96       className: "fa-eye-slash",
97       tooltip: "Hide this service from this table",
98       click: (item: ServiceInfoModel) => this.hideItem(item),
99       enabled: (item: ServiceInfoModel) =>  this.isHideEnabled(item),
100       visible: () =>  true,
101     }
102   ];
103
104   flags: any;
105   filterText: string;
106   constructor(private _serviceInfoService: ServiceInfoService,
107               private _instantiationStatusComponentService : InstantiationStatusComponentService,
108               private _contextMenuService: ContextMenuService,
109               private _configurationService : ConfigurationService,
110               private _scrollToService: ScrollToService,
111               private _logService : LogService,
112               private route: ActivatedRoute,
113               private _store: NgRedux<AppState>) {
114     this.instantiationStatusComponentService = _instantiationStatusComponentService;
115     this.configurationService = this._configurationService;
116     this.configurationService.getConfiguration("refreshTimeInstantiationDashboard").subscribe(response => {
117       this.TIMER_TIME_IN_SECONDS = _.isNumber(response) ? response : 0;
118       this.activateInterval();
119       this.refreshData();
120     });
121   }
122
123   ngOnInit() {
124     let filterTextParam =  this.route.snapshot.queryParams["filterText"];
125     this.filterText = filterTextParam ? filterTextParam : "" ;
126   }
127
128   activateInterval() {
129     if (this.TIMER_TIME_IN_SECONDS > 0) {
130       this.timer = setInterval(() => {
131         this.refreshData();
132       }, this.TIMER_TIME_IN_SECONDS * 1000);
133     }
134   }
135
136   deactivateInterval() {
137     clearInterval(this.timer);
138   }
139
140   refreshData(): void {
141     this.dataIsReady = false;
142     this._serviceInfoService.getServicesJobInfo(this.lastUpdatedDate === null)
143       .subscribe((res: ServiceInfoModel[]) => {
144         this._instantiationStatusComponentService.convertObjectToArray(res).subscribe((res) => {
145           this._logService.info('refresh instantiation status table', res);
146           this.dataIsReady = true;
147           this.lastUpdatedDate = new Date();
148           if (!_.isEqual(this.serviceInfoData, res)) {
149             this.serviceInfoData = res;
150             this.scrollToElement(this.findFirstVisibleJob());
151           }
152         });
153       })
154   }
155
156   trackByFn(index: number, item: ServiceInfoModel){
157     return _.isNil(item) ? null : item.jobId;
158   }
159
160   deleteItem(item: ServiceInfoModel): void {
161     this._serviceInfoService.deleteJob(item.jobId).subscribe(() => {
162       this.refreshData();
163     });
164   }
165
166   hideItem(item: ServiceInfoModel): void {
167     this._serviceInfoService.hideJob(item.jobId).subscribe(() => {
168       this.refreshData();
169     });
170   }
171
172   retryItem(item: ServiceInfoModel) : void {
173     if (item.isRetryEnabled) {
174       this._instantiationStatusComponentService.retry(item);
175     }
176   }
177
178   auditInfo(jobData : ServiceInfoModel): void {
179     AuditInfoModalComponent.openModal.next(jobData);
180   }
181
182   isOpenEnabled(item: ServiceInfoModel):boolean {
183     switch(item.action) {
184       case ServiceAction.DELETE:
185       return _.includes([ JobStatus.PENDING, JobStatus.COMPLETED_WITH_ERRORS, JobStatus.FAILED], item.jobStatus);
186       case ServiceAction.UPDATE:
187         return _.includes([JobStatus.PENDING, JobStatus.PAUSE, JobStatus.COMPLETED_WITH_ERRORS, JobStatus.COMPLETED, JobStatus.FAILED], item.jobStatus);
188       default:
189         return _.includes([JobStatus.COMPLETED, JobStatus.PAUSE, JobStatus.COMPLETED_WITH_ERRORS], item.jobStatus);
190     }
191   }
192
193   isAuditInfoEnabled(item: ServiceInfoModel): boolean {
194     if(item.action === ServiceAction.DELETE || item.action=== ServiceAction.UPDATE) {
195       return _.includes([JobStatus.FAILED, JobStatus.IN_PROGRESS, JobStatus.COMPLETED_WITH_ERRORS, JobStatus.PAUSE, JobStatus.COMPLETED], item.jobStatus);
196     }
197     return true;// ServiceAction.INSTANTIATE
198   }
199
200   isDeleteEnabled(item: ServiceInfoModel):boolean {
201     if( item.action === ServiceAction.DELETE || item.action === ServiceAction.UPDATE){
202       return _.includes([JobStatus.PENDING], item.jobStatus);
203     }
204     return _.includes([JobStatus.PENDING, JobStatus.STOPPED], item.jobStatus);
205   }
206
207   isHideEnabled(item: ServiceInfoModel):boolean {
208     return _.includes([JobStatus.COMPLETED, JobStatus.FAILED, JobStatus.STOPPED, JobStatus.COMPLETED_WITH_ERRORS], item.jobStatus);
209   }
210
211   public onContextMenu($event: MouseEvent, item: any): void {
212     this._contextMenuService.show.next({
213       contextMenu: this.contextMenu,
214       event: $event,
215       item: item,
216     });
217     $event.preventDefault();
218     $event.stopPropagation();
219   }
220
221   getImagesSrc(imageName : string) : string {
222     return './' + imageName + '.svg';
223   }
224
225   private getHeaderHeaderClientRect(): ClientRect {
226     const element = document.querySelector("#instantiation-status thead") as HTMLElement;
227     return element.getBoundingClientRect();
228   }
229
230   findFirstVisibleJob(): HTMLElement {
231     const elements : any = document.querySelectorAll('#instantiation-status tr');
232     const headerRect = this.getHeaderHeaderClientRect();
233     if (headerRect) {
234       const topEdge = headerRect.bottom;
235       for (let i = 0; i < elements.length; i++) {
236         if (elements[i].getBoundingClientRect().top >= topEdge)
237           return elements[i];
238       }
239     }
240     return null;
241   }
242
243   scrollToElement(currentJob: HTMLElement) {
244     if (currentJob) {
245       const config: ScrollToConfigOptions = {
246         target: currentJob,
247         duration: 0,
248         offset: -1 * (this.getHeaderHeaderClientRect().height + 2),
249       };
250
251       // wait after render
252       setTimeout(() => {
253         this._scrollToService.scrollTo(config);
254       }, 0)
255     }
256   }
257
258   isInstantiationStatusFilterFlagOn() {
259     return FeatureFlagsService.getFlagState(Features.FLAG_2004_INSTANTIATION_STATUS_FILTER, this._store);
260   }
261 }