webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts

   1 /*-
   2  * ========================LICENSE_START=================================
   3  * O-RAN-SC
   4  * %%
   5  * Copyright (C) 2021 Nordix Foundation
   6  * %%
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ========================LICENSE_END===================================
  19  */
  20 import { Component, OnInit, ViewChild } from '@angular/core';
  21 import { FormControl, FormGroup } from '@angular/forms';
  22 import { MatPaginator } from '@angular/material/paginator';
  23 import { Sort } from '@angular/material/sort';
  24 import { MatTableDataSource } from '@angular/material/table';
  25 import { forkJoin } from 'rxjs';
  26 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  27 import { mergeMap, finalize } from 'rxjs/operators';
  28 import { EIJob } from '../../interfaces/ei.types';
  29 import { EIService } from '../../services/ei/ei.service';
  30 import { UiService } from '../../services/ui/ui.service';
  31
  32 @Component({
  33   selector: 'nrcp-jobs-list',
  34   templateUrl: './jobs-list.component.html',
  35   styleUrls: ['./jobs-list.component.scss']
  36 })
  37 export class JobsListComponent implements OnInit {
  38
  39   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  40
  41   darkMode: boolean;
  42   jobsDataSource: MatTableDataSource<EIJob> = new MatTableDataSource<EIJob>();
  43   jobForm: FormGroup;
  44   private loadingSubject = new BehaviorSubject<boolean>(false);
  45   private jobsSubject = new BehaviorSubject<EIJob[]>([]);
  46   public loading$ = this.loadingSubject.asObservable();
  47
  48   constructor(
  49     private eiSvc: EIService,
  50     private ui: UiService
  51   ) {
  52     this.jobForm = new FormGroup({
  53       id: new FormControl(''),
  54       typeId: new FormControl(''),
  55       owner: new FormControl(''),
  56       targetUri: new FormControl('')
  57     });
  58   }
  59
  60   ngOnInit(): void {
  61     this.loadJobs();
  62     this.jobsSubject.subscribe((data) => {
  63       this.jobsDataSource = new MatTableDataSource<EIJob>(data);
  64       //this.jobsDataSource.data = data;
  65       this.jobsDataSource.paginator = this.paginator;
  66     });
  67
  68     this.jobForm.valueChanges.subscribe(value => {
  69       const filter = { ...value, id: value.id.trim().toLowerCase() } as string;
  70       this.jobsDataSource.filter = filter;
  71     });
  72
  73     this.jobsDataSource.filterPredicate = ((data: EIJob, filter) => {
  74       return this.isDataIncluding(data.ei_job_identity, filter.id)
  75         && this.isDataIncluding(data.target_uri, filter.targetUri)
  76         && this.isDataIncluding(data.owner, filter.owner)
  77         && this.isDataIncluding(data.ei_type_identity, filter.typeId);
  78     }) as (data: EIJob, filter: any) => boolean;
  79
  80     this.ui.darkModeState.subscribe((isDark) => {
  81       this.darkMode = isDark;
  82     });
  83   }
  84
  85   ngOnDestroy() {
  86     if (!this.jobsSubject) this.jobsSubject.unsubscribe();
  87     if (!this.loadingSubject) this.loadingSubject.unsubscribe();
  88     if (!this.ui.darkModeState) this.ui.darkModeState.unsubscribe();
  89   }
  90
  91   sortJobs(sort: Sort) {
  92     const data = this.jobsDataSource.data
  93     data.sort((a: EIJob, b: EIJob) => {
  94       const isAsc = sort.direction === 'asc';
  95       switch (sort.active) {
  96         case 'id': return this.compare(a.ei_job_identity, b.ei_job_identity, isAsc);
  97         case 'typeId': return this.compare(a.ei_type_identity, b.ei_type_identity, isAsc);
  98         case 'owner': return this.compare(a.owner, b.owner, isAsc);
  99         case 'targetUri': return this.compare(a.target_uri, b.owner, isAsc);
 100         default: return 0;
 101       }
 102     });
 103     this.jobsDataSource.data = data;
 104   }
 105
 106   compare(a: any, b: any, isAsc: boolean) {
 107     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 108   }
 109
 110   stopSort(event: any) {
 111     event.stopPropagation();
 112   }
 113
 114   isDataIncluding(data: string, filter: string): boolean {
 115     return !filter || data.toLowerCase().includes(filter);
 116   }
 117
 118   getJobTypeId(eiJob: EIJob): string {
 119     if (eiJob.ei_type_identity) {
 120       return eiJob.ei_type_identity;
 121     }
 122     return '< No type >';
 123   }
 124
 125   getJobOwner(eiJob: EIJob): string {
 126     if (eiJob.owner) {
 127       return eiJob.owner;
 128     }
 129     return '< No owner >';
 130   }
 131
 132   public jobs(): EIJob[] {
 133     return this.jobsSubject.value;
 134   }
 135
 136   loadJobs() {
 137     this.loadingSubject.next(true);
 138     let jobs = [];
 139     this.eiSvc.getProducerIds().pipe(
 140       mergeMap(prodIds =>
 141         forkJoin(prodIds.map(id => this.eiSvc.getJobsForProducer(id)))),
 142       mergeMap(result => result),
 143       finalize(() => this.loadingSubject.next(false))
 144     ).subscribe(result => {
 145       jobs = jobs.concat(result);
 146       this.jobsSubject.next(jobs);
 147     });
 148   }
 149
 150 }