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>;
  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.paginator = this.paginator;
  65
  66       this.jobsDataSource.filterPredicate = ((data: EIJob, filter) => {
  67         let searchTerms = JSON.parse(filter);
  68         return this.isDataIncluding(data.ei_job_identity, searchTerms.id)
  69           && this.isDataIncluding(data.target_uri, searchTerms.targetUri)
  70           && this.isDataIncluding(data.owner, searchTerms.owner)
  71           && this.isDataIncluding(data.ei_type_identity, searchTerms.typeId);
  72       }) as (data: EIJob, filter: any) => boolean;
  73     });
  74
  75     this.jobForm.valueChanges.subscribe(value => {
  76       this.jobsDataSource.filter = JSON.stringify(value);
  77     });
  78
  79     this.ui.darkModeState.subscribe((isDark) => {
  80       this.darkMode = isDark;
  81     });
  82   }
  83
  84   ngOnDestroy() {
  85     if (!this.jobsSubject) this.jobsSubject.unsubscribe();
  86     if (!this.loadingSubject) this.loadingSubject.unsubscribe();
  87     if (!this.ui.darkModeState) this.ui.darkModeState.unsubscribe();
  88   }
  89
  90   clearFilter() {
  91     this.jobForm.get('id').setValue('');
  92     this.jobForm.get('typeId').setValue('');
  93     this.jobForm.get('owner').setValue('');
  94     this.jobForm.get('targetUri').setValue('');
  95   }
  96
  97   sortJobs(sort: Sort) {
  98     const data = this.jobsDataSource.data
  99     data.sort((a: EIJob, b: EIJob) => {
 100       const isAsc = sort.direction === 'asc';
 101       switch (sort.active) {
 102         case 'id': return this.compare(a.ei_job_identity, b.ei_job_identity, isAsc);
 103         case 'typeId': return this.compare(a.ei_type_identity, b.ei_type_identity, isAsc);
 104         case 'owner': return this.compare(a.owner, b.owner, isAsc);
 105         case 'targetUri': return this.compare(a.target_uri, b.owner, isAsc);
 106         default: return 0;
 107       }
 108     });
 109     this.jobsDataSource.data = data;
 110   }
 111
 112   compare(a: any, b: any, isAsc: boolean) {
 113     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 114   }
 115
 116   stopSort(event: any) {
 117     event.stopPropagation();
 118   }
 119
 120   isDataIncluding(data: string, filter: string): boolean {
 121     const transformedFilter = filter.trim().toLowerCase();
 122     return data.toLowerCase().includes(transformedFilter);
 123   }
 124
 125   getJobTypeId(eiJob: EIJob): string {
 126     if (eiJob.ei_type_identity) {
 127       return eiJob.ei_type_identity;
 128     }
 129     return '< No type >';
 130   }
 131
 132   getJobOwner(eiJob: EIJob): string {
 133     if (eiJob.owner) {
 134       return eiJob.owner;
 135     }
 136     return '< No owner >';
 137   }
 138
 139   public jobs(): EIJob[] {
 140     return this.jobsSubject.value;
 141   }
 142
 143   loadJobs() {
 144     this.loadingSubject.next(true);
 145     let jobs = [];
 146     this.eiSvc.getProducerIds().pipe(
 147       mergeMap(prodIds =>
 148         forkJoin(prodIds.map(id => this.eiSvc.getJobsForProducer(id)))),
 149       mergeMap(result => result),
 150       finalize(() => this.loadingSubject.next(false))
 151     ).subscribe(result => {
 152       jobs = jobs.concat(result);
 153       this.jobsSubject.next(jobs);
 154     });
 155   }
 156
 157 }