X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fei-coordinator%2Fjobs-list%2Fjobs-list.component.ts;h=7fea5376883d334eb2465953cae59e08d02439f6;hb=aeb1f8f9386c144139a0f8b8a81af9ebbdcb4416;hp=52081120a47818810aaf817f93e169784b4e4b8f;hpb=f8f8ed0d00fb9c8ba0ca88f180cad5f13381db2a;p=portal%2Fnonrtric-controlpanel.git diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts index 5208112..7fea537 100644 --- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts +++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts @@ -17,13 +17,26 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; +import { MatPaginator } from '@angular/material/paginator'; import { Sort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; -import { EIJob } from 'src/app/interfaces/ei.types'; -import { UiService } from 'src/app/services/ui/ui.service'; -import { EIJobDataSource } from '../ei-job.datasource'; +import { forkJoin } from 'rxjs'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { mergeMap, finalize, tap } from 'rxjs/operators'; +import { EIJob } from '@interfaces/ei.types'; +import { EIService } from '@services/ei/ei.service'; +import { UiService } from '@services/ui/ui.service'; + +export interface Job { + jobId: string; + jobData: any; + typeId: string; + targetUri: string; + owner: string; + prodId: string; +} @Component({ selector: 'nrcp-jobs-list', @@ -31,53 +44,78 @@ import { EIJobDataSource } from '../ei-job.datasource'; styleUrls: ['./jobs-list.component.scss'] }) export class JobsListComponent implements OnInit { - darkMode: boolean; - jobsDataSource: MatTableDataSource = new MatTableDataSource(); + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + + darkMode: boolean; + jobsDataSource: MatTableDataSource; jobForm: FormGroup; + private loadingSubject = new BehaviorSubject(false); + private jobsSubject = new BehaviorSubject([]); + public loading$ = this.loadingSubject.asObservable(); constructor( - private eiJobsDataSource: EIJobDataSource, + private eiSvc: EIService, private ui: UiService ) { this.jobForm = new FormGroup({ - id: new FormControl(''), + jobId: new FormControl(''), typeId: new FormControl(''), owner: new FormControl(''), - targetUri: new FormControl('') + targetUri: new FormControl(''), + prodId: new FormControl('') }); - } ngOnInit(): void { - this.refresh(); + this.loadJobs(); + this.jobsSubject.subscribe((data) => { + this.jobsDataSource = new MatTableDataSource(data); + this.jobsDataSource.paginator = this.paginator; + + this.jobsDataSource.filterPredicate = ((data: Job, filter) => { + let searchTerms = JSON.parse(filter); + return this.isDataIncluding(data.targetUri, searchTerms.targetUri) + && this.isDataIncluding(data.jobId, searchTerms.jobId) + && this.isDataIncluding(data.owner, searchTerms.owner) + && this.isDataIncluding(data.typeId, searchTerms.typeId) + && this.isDataIncluding(data.prodId, searchTerms.prodId); + }) as (data: Job, filter: any) => boolean; + }); this.jobForm.valueChanges.subscribe(value => { - const filter = { ...value, id: value.id.trim().toLowerCase() } as string; - this.jobsDataSource.filter = filter; + this.jobsDataSource.filter = JSON.stringify(value); }); - this.jobsDataSource.filterPredicate = ((data: EIJob, filter) => { - return this.isDataIncluding(data.ei_job_identity, filter.id) - && this.isDataIncluding(data.target_uri, filter.targetUri) - && this.isDataIncluding(data.owner, filter.owner) - && this.isDataIncluding(data.ei_type_identity, filter.typeId); - }) as (data: EIJob, filter: any) => boolean; - this.ui.darkModeState.subscribe((isDark) => { this.darkMode = isDark; }); } + ngOnDestroy() { + if (!this.jobsSubject) this.jobsSubject.unsubscribe(); + if (!this.loadingSubject) this.loadingSubject.unsubscribe(); + if (!this.ui.darkModeState) this.ui.darkModeState.unsubscribe(); + } + + clearFilter() { + this.jobForm.get('jobId').setValue(''); + this.jobForm.get('typeId').setValue(''); + this.jobForm.get('owner').setValue(''); + this.jobForm.get('targetUri').setValue(''); + this.jobForm.get('prodId').setValue(''); + } + sortJobs(sort: Sort) { const data = this.jobsDataSource.data - data.sort((a: EIJob, b: EIJob) => { + data.sort((a: Job, b: Job) => { const isAsc = sort.direction === 'asc'; switch (sort.active) { - case 'id': return this.compare(a.ei_job_identity, b.ei_job_identity, isAsc); - case 'typeId': return this.compare(a.ei_type_identity, b.ei_type_identity, isAsc); + case 'jobId': return this.compare(a.jobId, b.jobId, isAsc); + case 'typeId': return this.compare(a.typeId, b.typeId, isAsc); case 'owner': return this.compare(a.owner, b.owner, isAsc); - case 'targetUri': return this.compare(a.target_uri, b.owner, isAsc); + case 'targetUri': return this.compare(a.targetUri, b.targetUri, isAsc); + case 'prodId': return this.compare(a.prodId, b.prodId, isAsc); default: return 0; } }); @@ -93,29 +131,58 @@ export class JobsListComponent implements OnInit { } isDataIncluding(data: string, filter: string): boolean { - return !filter || data.toLowerCase().includes(filter); + const transformedFilter = filter.trim().toLowerCase(); + return data.toLowerCase().includes(transformedFilter); } - getJobTypeId(eiJob: EIJob): string { - if (eiJob.ei_type_identity) { - return eiJob.ei_type_identity; + getJobTypeId(eiJob: Job): string { + if (eiJob.typeId) { + return eiJob.typeId; } return '< No type >'; } - getJobOwner(eiJob: EIJob): string { + getJobOwner(eiJob: Job): string { if (eiJob.owner) { return eiJob.owner; } return '< No owner >'; } - refresh() { - this.eiJobsDataSource.loadJobs(); + public jobs(): Job[] { + return this.jobsSubject.value; + } - this.eiJobsDataSource.eiJobsSubject().subscribe((data) => { - this.jobsDataSource.data = data; + loadJobs() { + this.loadingSubject.next(true); + let jobs = []; + let prodId = []; + this.eiSvc.getProducerIds().pipe( + tap(data => prodId = data), + mergeMap(prodIds => + forkJoin(prodIds.map(id => this.eiSvc.getJobsForProducer(id)))), + finalize(() => this.loadingSubject.next(false)) + ).subscribe(result => { + jobs = this.createJobList(prodId, result); + this.jobsSubject.next(jobs); }); } + createJobList(prodId: any[], result: EIJob[][]) { + let jobList = []; + prodId.forEach((element, index) => { + let jobs = result[index]; + jobList = jobList.concat(jobs.map(job => this.createJob(element, job))); + }); + return jobList; + } + createJob(element: any, job: EIJob): any { + let eiJob = {}; + eiJob.jobId = job.ei_job_identity; + eiJob.typeId = job.ei_type_identity; + eiJob.owner = job.owner; + eiJob.targetUri = job.target_uri; + eiJob.prodId = element; + return eiJob; + } }