From: ychacon Date: Mon, 8 Feb 2021 23:59:26 +0000 (+0100) Subject: Add filters to the Jobs table of the EIC X-Git-Tag: 2.2.0~90^2 X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=7083fe17ce58e2ef8719b78164f41a459a40f5ef;p=portal%2Fnonrtric-controlpanel.git Add filters to the Jobs table of the EIC Issue-ID: NONRTRIC-419 Signed-off-by: ychacon Change-Id: I4e7382a10011605cc6015625729757590cb8597d --- diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html index 79385a7..09d03ec 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html @@ -62,26 +62,59 @@ limitations under the License.

Jobs

+
- + - - + +
+
+ + + Job ID + + + + {{this.getDisplayName(eiJob)}} - - - + +
+
+ + + Type ID + + + + {{this.getEITypeId(eiJob)}} + - - + +
+
+ + + Owner + + + + {{eiJob.owner}} - - + +
+
+ + + Target URI + + + + {{this.getTargetUri(eiJob)}} - - -
Job ID {{this.getDisplayName(eiJob)}} Type ID {{this.getEITypeId(eiJob)}} Owner {{eiJob.owner}} Target URI {{this.getTargetUri(eiJob)}}
+ + +
\ No newline at end of file diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.scss b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.scss index 759f2a8..955ca31 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.scss +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.scss @@ -39,11 +39,6 @@ background-color: #2d2d3d; } -.action-cell { - display: flex; - justify-content: flex-end; -} - .display-none { display: none; } @@ -62,4 +57,9 @@ .filter-form { width: 200px; -} \ No newline at end of file +} + +.mat-form-field { + font-size: 14px; + width: 100%; +} diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts index 2789114..8532fcc 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts @@ -17,10 +17,9 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { MatSort } from '@angular/material/sort'; +import { Component, OnInit} from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup, AbstractControl } from '@angular/forms'; import { MatTableDataSource } from '@angular/material'; import { defer, BehaviorSubject, Observable } from 'rxjs'; @@ -54,24 +53,45 @@ export class EICoordinatorComponent implements OnInit { producers$: Observable; filteredProducers$: Observable; - @ViewChild(MatSort, { static: true }) sort: MatSort; eiJobInfo = new Map(); darkMode: boolean; searchString: string; formGroup: FormGroup; - eiProducersData: MatTableDataSource; + jobsDataSource: MatTableDataSource; + + readonly jobsFormControl: AbstractControl; constructor( private eiJobsDataSource: EIJobDataSource, private eiProducersDataSource: EIProducerDataSource, private ui: UiService, private formBuilder: FormBuilder) { - this.formGroup = formBuilder.group({ filter: [""] }); - } + + this.formGroup = formBuilder.group({ filter: [""] }); + this.jobsFormControl = formBuilder.group({ + id: '', + typeId: '', + owner: '', + targetUri:'', + }) + } ngOnInit() { this.eiJobsDataSource.getJobs(); + this.jobsDataSource = new MatTableDataSource(this.eiJobsDataSource.eiJobsSubject.value); + + this.jobsFormControl.valueChanges.subscribe(value => { + const filter = {...value, id: value.id.trim().toLowerCase()} as string; + this.jobsDataSource.filter = filter; + }); + + this.jobsDataSource.filterPredicate = ((data, filter) => { + return this.isDataIncluding(data.ei_job_identity, filter.id) + && this.isDataIncluding(data.target_uri, filter.target_uri) + && this.isDataIncluding(data.owner, filter.owner) + && this.isDataIncluding(data.ei_type_identity, filter.typeId); + }) as (EIJob, string) => boolean; this.producers$= this.eiProducersDataSource.loadProducers(); this.filteredProducers$ = defer(() => this.formGroup.get("filter") @@ -88,6 +108,10 @@ export class EICoordinatorComponent implements OnInit { }); } + isDataIncluding(data: string, filter: string) : boolean { + return !filter || data.toLowerCase().includes(filter); + } + getEIJobInfo(eiJob: EIJob): EIJobInfo { let info: EIJobInfo = this.eiJobInfo.get(eiJob.ei_job_data); if (!info) { diff --git a/webapp-frontend/src/app/mock/ei-jobs-producer1.json b/webapp-frontend/src/app/mock/ei-jobs-producer1.json index 488e194..1f79777 100644 --- a/webapp-frontend/src/app/mock/ei-jobs-producer1.json +++ b/webapp-frontend/src/app/mock/ei-jobs-producer1.json @@ -13,7 +13,18 @@ { "ei_job_identity": "job2", "ei_type_identity": "type1", - "owner": "owner1", + "owner": "owner2", + "ei_job_data": { + "jobparam2": "value2_job2", + "jobparam3": "value3_job2", + "jobparam1": "value1_job2" + }, + "target_uri": "https://ricsim_g3_1:8185/datadelivery" + }, + { + "ei_job_identity": "job4", + "ei_type_identity": "type1", + "owner": "owner3", "ei_job_data": { "jobparam2": "value2_job2", "jobparam3": "value3_job2", diff --git a/webapp-frontend/src/app/mock/ei-jobs-producer2.json b/webapp-frontend/src/app/mock/ei-jobs-producer2.json index 07220a9..fd6d2c8 100644 --- a/webapp-frontend/src/app/mock/ei-jobs-producer2.json +++ b/webapp-frontend/src/app/mock/ei-jobs-producer2.json @@ -9,5 +9,16 @@ "jobparam1": "value1_job3" }, "target_uri": "https://ricsim_g3_1:8185/datadelivery" + }, + { + "ei_job_identity": "job5", + "ei_type_identity": "type2", + "owner": "owner5", + "ei_job_data": { + "jobparam2": "value2_job2", + "jobparam3": "value3_job2", + "jobparam1": "value1_job2" + }, + "target_uri": "https://ricsim_g3_1:8185/datadelivery" } ] \ No newline at end of file