X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fei-coordinator%2Fproducers-list%2Fproducers-list.component.ts;h=725117dfc468030b1037e915436d0eff9af51474;hb=b43fe9cc63931f8c45f93261f235d0608a855a83;hp=df1d0be0cb27818ad992ea6420cec17614856dd7;hpb=869354bad80ea5db92893ad3017eaf9c421c0731;p=portal%2Fnonrtric-controlpanel.git

diff --git a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts
index df1d0be..725117d 100644
--- a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts
+++ b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts
@@ -17,13 +17,16 @@
  * 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 { Sort } from '@angular/material/sort';
+import { MatSort, Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { EIProducer } from '../../interfaces/ei.types';
-import { UiService } from '../../services/ui/ui.service';
-import { EIProducerDataSource } from '../ei-producer.datasource';
+import { forkJoin, of } from 'rxjs';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { mergeMap, finalize } from 'rxjs/operators';
+import { ProducerService } from '@services/ei/producer.service';
+import { Producer } from '@interfaces/producer.types';
+import { UiService } from '@services/ui/ui.service';
 
 @Component({
   selector: 'nrcp-producers-list',
@@ -31,51 +34,74 @@ import { EIProducerDataSource } from '../ei-producer.datasource';
   styleUrls: ['./producers-list.component.scss']
 })
 export class ProducersListComponent implements OnInit {
-  darkMode: boolean;
-  producersDataSource: MatTableDataSource<EIProducer> = new MatTableDataSource<EIProducer>();
+
+  @ViewChild(MatSort) sort: MatSort;
+
+  producersDataSource: MatTableDataSource<Producer>;
   producerForm: FormGroup;
+  darkMode: boolean;
+
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+  private producerSubject = new BehaviorSubject<Producer[]>([]);
+  public loading$ = this.loadingSubject.asObservable();
 
   constructor(
-    private eiProducersDataSource: EIProducerDataSource,
+    private producerService: ProducerService,
     private ui: UiService) {
 
     this.producerForm = new FormGroup({
-      ei_producer_id: new FormControl(''),
-      ei_producer_types: new FormControl(''),
+      producer_id: new FormControl(''),
+      producer_types: new FormControl(''),
       status: new FormControl('')
     });
   }
 
   ngOnInit(): void {
-    this.refresh();
+    this.loadProducers();
+    this.producerSubject.subscribe((data) => {
+      this.producersDataSource = new MatTableDataSource<Producer>(data);
 
-    this.producerForm.valueChanges.subscribe(value => {
-      const filter = { ...value, ei_producer_id: value.ei_producer_id.trim().toLowerCase() } as string;
-      this.producersDataSource.filter = filter;
+      this.producersDataSource.filterPredicate = ((data, filter) => {
+        let searchTerms = JSON.parse(filter);
+        return this.isDataIncluding(data.producer_id, searchTerms.producer_id)
+          && this.isDataIncluding(data.producer_types.join(','), searchTerms.producer_types)
+          && this.isDataIncluding(data.status, searchTerms.status);
+      }) as (data: Producer, filter: any) => boolean;
     });
 
-    this.producersDataSource.filterPredicate = ((data, filter) => {
-      return this.isDataIncluding(data.ei_producer_id, filter.ei_producer_id)
-        && this.isDataIncluding(data.ei_producer_types.join(','), filter.ei_producer_types)
-        && this.isDataIncluding(data.status, filter.status);
-    }) as (data: EIProducer, filter: any) => boolean;
+    this.producerForm.valueChanges.subscribe(value => {
+      this.producersDataSource.filter = JSON.stringify(value);
+    });
 
     this.ui.darkModeState.subscribe((isDark) => {
       this.darkMode = isDark;
     });
   }
 
+  ngOnDestroy() {
+    if (!this.producerSubject) this.producerSubject.unsubscribe();
+    if (!this.loadingSubject) this.loadingSubject.unsubscribe();
+    if (!this.ui.darkModeState) this.ui.darkModeState.unsubscribe();
+  }
+
   isDataIncluding(data: string, filter: string): boolean {
-    return !filter || data.toLowerCase().includes(filter);
+    const transformedFilter = filter.trim().toLowerCase();
+    return data.toLowerCase().includes(transformedFilter);
+  }
+
+  clearFilter() {
+    this.producerForm.get('producer_id').setValue('');
+    this.producerForm.get('producer_types').setValue('');
+    this.producerForm.get('status').setValue('');
   }
 
   sortProducers(sort: Sort) {
     const data = this.producersDataSource.data
-    data.sort((a: EIProducer, b: EIProducer) => {
+    data.sort((a: Producer, b: Producer) => {
       const isAsc = sort.direction === 'asc';
       switch (sort.active) {
-        case 'id': return this.compare(a.ei_producer_id, b.ei_producer_id, isAsc);
-        case 'types': return this.compare(a.ei_producer_types, b.ei_producer_types, isAsc);
+        case 'id': return this.compare(a.producer_id, b.producer_id, isAsc);
+        case 'types': return this.compare(a.producer_types, b.producer_types, isAsc);
         case 'status': return this.compare(a.status, b.status, isAsc);
         default: return 0;
       }
@@ -91,24 +117,54 @@ export class ProducersListComponent implements OnInit {
     event.stopPropagation();
   }
 
-  getProducerTypes(eiProducer: EIProducer): string[] {
-    if (eiProducer.ei_producer_types) {
-      return eiProducer.ei_producer_types;
+  getProducerTypes(producer: Producer): string[] {
+    if (producer.producer_types) {
+      return producer.producer_types;
     }
     return ['< No types >'];
   }
 
-  getProducerStatus(eiProducer: EIProducer): string {
-    if (eiProducer.status) {
-      return eiProducer.status;
+  getProducerStatus(producer: Producer): string {
+    if (producer.status) {
+      return producer.status;
     }
     return '< No status >';
   }
 
-  refresh() {
-    this.eiProducersDataSource.loadProducers();
-    this.eiProducersDataSource.eiProducersSubject().subscribe((data) => {
-      this.producersDataSource.data = data;
+  public producers(): Producer[] {
+    return this.producerSubject.value;
+  }
+
+  loadProducers() {
+    this.loadingSubject.next(true);
+    let producers = [];
+
+    this.producerService.getProducerIds().pipe(
+      mergeMap(prodIds =>
+        forkJoin(prodIds.map(id => {
+          return forkJoin([
+            of(id),
+            this.producerService.getProducer(id),
+            this.producerService.getProducerStatus(id)
+          ])
+        })
+        )),
+      finalize(() => this.loadingSubject.next(false)),
+    ).subscribe(result => {
+      producers = result.map(producer => {
+        let producerObj = <Producer>{};
+        producerObj.producer_id = producer[0];
+        if (producer[1].supported_info_types) {
+          producerObj.producer_types = producer[1].supported_info_types;
+        }
+        if (producer[2].operational_state) {
+          producerObj.status = producer[2].operational_state.toString();
+        }
+        return producerObj;
+      });
+      this.producerSubject.next(producers);
+    }, err => {
+      console.error("Subscribe function error:" + err);
     });
   }
 }