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 { EMPTY, forkJoin, of, Subscription, timer } from "rxjs";
  26 import { BehaviorSubject } from "rxjs/BehaviorSubject";
  27 import { mergeMap, finalize, map, tap, switchMap } from "rxjs/operators";
  28 import { ConsumerService } from "@services/ei/consumer.service";
  29 import { UiService } from "@services/ui/ui.service";
  30
  31 export interface Job {
  32   jobId: string;
  33   typeId: string;
  34   targetUri: string;
  35   owner: string;
  36   prodIds: string[];
  37 }
  38
  39 @Component({
  40   selector: "nrcp-jobs-list",
  41   templateUrl: "./jobs-list.component.html",
  42   styleUrls: ["./jobs-list.component.scss"],
  43 })
  44 export class JobsListComponent implements OnInit {
  45   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  46   jobsDataSource: MatTableDataSource<Job>;
  47   jobForm: FormGroup;
  48   darkMode: boolean;
  49
  50   private jobsSubject$ = new BehaviorSubject<Job[]>([]);
  51   private refresh$ = new BehaviorSubject("");
  52   private loadingSubject$ = new BehaviorSubject<boolean>(false);
  53   private polling$ = new BehaviorSubject(0);
  54   public loading$ = this.loadingSubject$.asObservable();
  55   subscription: Subscription;
  56   checked: boolean = false;
  57   firstTime: boolean = true;
  58
  59   constructor(private consumerService: ConsumerService, private ui: UiService) {
  60     this.jobForm = new FormGroup({
  61       jobId: new FormControl(""),
  62       typeId: new FormControl(""),
  63       owner: new FormControl(""),
  64       targetUri: new FormControl(""),
  65       prodIds: new FormControl(""),
  66     });
  67   }
  68
  69   ngOnInit(): void {
  70     this.subscription = this.dataSubscription();
  71
  72     this.jobsSubject$.subscribe((data) => {
  73       this.jobsDataSource = new MatTableDataSource<Job>(data);
  74       this.jobsDataSource.paginator = this.paginator;
  75
  76       this.jobsDataSource.filterPredicate = ((data: Job, filter) => {
  77         let searchTerms = JSON.parse(filter);
  78         return (
  79           this.isDataIncluding(data.targetUri, searchTerms.targetUri) &&
  80           this.isDataIncluding(data.jobId, searchTerms.jobId) &&
  81           this.isDataIncluding(data.owner, searchTerms.owner) &&
  82           this.isDataIncluding(data.typeId, searchTerms.typeId) &&
  83           this.isArrayIncluding(data.prodIds, searchTerms.prodIds)
  84         );
  85       }) as (data: Job, filter: any) => boolean;
  86     });
  87
  88     this.jobForm.valueChanges.subscribe((value) => {
  89       this.jobsDataSource.filter = JSON.stringify(value);
  90     });
  91
  92     this.ui.darkModeState.subscribe((isDark) => {
  93       this.darkMode = isDark;
  94     });
  95   }
  96
  97   dataSubscription(): Subscription {
  98     const jobsInfo$ = this.consumerService.getJobIds().pipe(
  99       mergeMap((jobIds) =>
 100         forkJoin(jobIds.map((jobId) => {
 101           return forkJoin([
 102             of(jobId),
 103             this.consumerService.getJobInfo(jobId),
 104             this.consumerService.getConsumerStatus(jobId)
 105           ])
 106         }))
 107       ),
 108       finalize(() => this.loadingSubject$.next(false))
 109     );
 110
 111     const refreshedJobs$ = this.refresh$.pipe(
 112       switchMap((_) =>
 113         timer(0, 10000).pipe(
 114           tap((_) => {
 115             this.loadingSubject$.next(true);
 116           }),
 117           switchMap((_) => jobsInfo$),
 118           map((response) => this.extractJobs(response))
 119         )
 120       )
 121     );
 122
 123     return this.polling$
 124       .pipe(
 125         switchMap((value) => {
 126           let pollCondition = value == 0 || this.checked;
 127           return pollCondition ? refreshedJobs$ : EMPTY;
 128         })
 129       )
 130       .subscribe();
 131   }
 132
 133   ngOnDestroy() {
 134     this.subscription.unsubscribe();
 135   }
 136
 137   clearFilter() {
 138     this.jobForm.get("jobId").setValue("");
 139     this.jobForm.get("typeId").setValue("");
 140     this.jobForm.get("owner").setValue("");
 141     this.jobForm.get("targetUri").setValue("");
 142     this.jobForm.get("prodIds").setValue("");
 143   }
 144
 145   sortJobs(sort: Sort) {
 146     const data = this.jobsDataSource.data;
 147     data.sort((a: Job, b: Job) => {
 148       const isAsc = sort.direction === "asc";
 149       switch (sort.active) {
 150         case "jobId":
 151           return this.compare(a.jobId, b.jobId, isAsc);
 152         case "typeId":
 153           return this.compare(a.typeId, b.typeId, isAsc);
 154         case "owner":
 155           return this.compare(a.owner, b.owner, isAsc);
 156         case "targetUri":
 157           return this.compare(a.targetUri, b.targetUri, isAsc);
 158         case "prodIds":
 159           return this.compare(a.prodIds, b.prodIds, isAsc);
 160         default:
 161           return 0;
 162       }
 163     });
 164     this.jobsDataSource.data = data;
 165   }
 166
 167   stopPolling(checked) {
 168     this.checked = checked;
 169     this.polling$.next(this.jobs().length);
 170   }
 171
 172   compare(a: any, b: any, isAsc: boolean) {
 173     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 174   }
 175
 176   stopSort(event: any) {
 177     event.stopPropagation();
 178   }
 179
 180   isDataIncluding(data: string, filter: string): boolean {
 181     const transformedFilter = filter.trim().toLowerCase();
 182     return data.toLowerCase().includes(transformedFilter);
 183   }
 184
 185   isArrayIncluding(data: string[], filter: string): boolean {
 186     if(!data)
 187       return true;
 188     for (let i = 0; i < data.length; i++) {
 189       return this.isDataIncluding(data[i], filter);
 190     }
 191   }
 192
 193   getJobTypeId(job: Job): string {
 194     if (job.typeId) {
 195       return job.typeId;
 196     }
 197     return "< No type >";
 198   }
 199
 200   getJobOwner(job: Job): string {
 201     if (job.owner) {
 202       return job.owner;
 203     }
 204     return "< No owner >";
 205   }
 206
 207   public jobs(): Job[] {
 208     return this.jobsSubject$.value;
 209   }
 210
 211   private extractJobs(res: any) {
 212     this.clearFilter();
 213     let jobList = [];
 214     res.forEach(element => {
 215       let jobObj = <Job>{};
 216       jobObj.jobId = element[0];
 217       jobObj.owner = element[1].job_owner;
 218       jobObj.targetUri = element[1].job_result_uri;
 219       jobObj.typeId = element[1].info_type_id;
 220       jobObj.prodIds = (element[2].producers) ? element[2].producers : ["No Producers"];
 221       jobList = jobList.concat(jobObj);
 222     });
 223
 224     this.jobsSubject$.next(jobList);
 225     if (this.firstTime && jobList.length > 0) {
 226       this.polling$.next(jobList.length);
 227       this.firstTime = false;
 228     }
 229     return jobList;
 230   }
 231
 232   refreshDataClick() {
 233     this.refresh$.next("");
 234   }
 235 }