Adding checkbox to enable/disable auto-refresh

Issue-ID: NONRTRIC-475
Signed-off-by: ychacon <yennifer.chacon@est.tech>
Change-Id: I7cd55fa9386145f3a188e2e43111a9240f953b4f

diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.module.ts b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.module.ts
index c9162d9..8dc0b47 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.module.ts
+++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.module.ts
@@ -25,10 +25,12 @@ import { RouterModule, Routes } from '@angular/router';
 import { EICoordinatorComponent } from './ei-coordinator.component';
 import { ProducersListComponent } from './producers-list/producers-list.component';
 import { JobsListComponent } from './jobs-list/jobs-list.component';
+import { FormsModule } from '@angular/forms';
 import { MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSortModule } from '@angular/material/sort';
 import { MatButtonModule } from '@angular/material/button';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -52,10 +54,12 @@ const routes: Routes = [
   imports: [
     CommonModule,
     FlexLayoutModule,
+    FormsModule,
     MatTableModule,
     MatIconModule,
     MatInputModule,
     ReactiveFormsModule,
+    MatCheckboxModule,
     MatSortModule,
     MatPaginatorModule,
     MatButtonModule,

diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html
index d325d4d..1f5fd43 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html
+++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.html
@@ -18,6 +18,7 @@ limitations under the License.
 ========================LICENSE_END===================================
 -->
 <div class="table-container">
+    <mat-checkbox class="polling-checkbox" [checked]="checked" (change)="stopPolling($event.checked)">auto-refresh</mat-checkbox>
     <div class="spinner-container" style="display: flex; justify-content: center; align-items: center;"
         *ngIf="loading$ | async">
         <mat-spinner></mat-spinner>

diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss
index d0f2ee7..18f2410 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss
+++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.scss
@@ -28,4 +28,9 @@
 .mat-form-field {\r
     font-size: 14px;\r
     width: 100%;\r
+}\r
+\r
+.polling-checkbox{\r
+    margin: 0 10px;\r
+    font-size: 0.75em;\r
 }
\ No newline at end of file

diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
index 58e437a..a85e577 100644 (file)
--- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
+++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts
@@ -23,6 +23,7 @@ import { MatPaginator } from "@angular/material/paginator";
 import { Sort } from "@angular/material/sort";
 import { MatTableDataSource } from "@angular/material/table";
 import {
+  EMPTY,
   forkJoin,
   Subscription,
   timer,
@@ -33,7 +34,7 @@ import {
   finalize,
   map,
   tap,
-  switchMap,
+  switchMap
 } from "rxjs/operators";
 import { EIJob } from "@interfaces/ei.types";
 import { EIService } from "@services/ei/ei.service";
@@ -59,11 +60,13 @@ export class JobsListComponent implements OnInit {
   jobForm: FormGroup;
   darkMode: boolean;
 
-  private jobsSubject = new BehaviorSubject<Job[]>([]);
+  private jobsSubject$ = new BehaviorSubject<Job[]>([]);
   private refresh$ = new BehaviorSubject("");
-  private loadingSubject = new BehaviorSubject<boolean>(false);
-  public loading$ = this.loadingSubject.asObservable();
+  private loadingSubject$ = new BehaviorSubject<boolean>(false);
+  private polling$ = new BehaviorSubject<boolean>(true);
+  public loading$ = this.loadingSubject$.asObservable();
   subscription: Subscription;
+  checked: boolean = false;
 
   constructor(private eiSvc: EIService, private ui: UiService) {
     this.jobForm = new FormGroup({
@@ -78,7 +81,7 @@ export class JobsListComponent implements OnInit {
   ngOnInit(): void {
     this.subscription = this.dataSubscription();
 
-    this.jobsSubject.subscribe((data) => {
+    this.jobsSubject$.subscribe((data) => {
       this.jobsDataSource = new MatTableDataSource<Job>(data);
       this.jobsDataSource.paginator = this.paginator;
 
@@ -110,22 +113,26 @@ export class JobsListComponent implements OnInit {
       mergeMap((prodIds) =>
         forkJoin(prodIds.map((id) => this.eiSvc.getJobsForProducer(id)))
       ),
-      finalize(() => this.loadingSubject.next(false))
+      finalize(() => this.loadingSubject$.next(false))
     );
 
-    return this.refresh$
+    const refreshedJobs$ = this.refresh$
       .pipe(
-        switchMap((_) =>
-          timer(0, 10000).pipe(
-            tap((_) => {
-              this.loadingSubject.next(true);
-            }),
-            switchMap((_) => jobs$),
-            map((response) => this.extractJobs(prodId, response))
-          )
+        switchMap((_) => timer(0, 10000).pipe(
+          tap((_) => {
+            this.loadingSubject$.next(true);
+          }),
+          switchMap((_) => jobs$),
+          map((response) => this.extractJobs(prodId, response))
         )
-      )
-      .subscribe();
+        )
+      );
+    
+    return this.polling$.pipe(
+      switchMap(p => {
+        return p ? refreshedJobs$ : EMPTY;
+      })
+    ).subscribe();
   }
 
   ngOnDestroy() {
@@ -162,6 +169,10 @@ export class JobsListComponent implements OnInit {
     this.jobsDataSource.data = data;
   }
 
+  stopPolling(checked){
+    this.polling$.next(checked);
+  }
+
   compare(a: any, b: any, isAsc: boolean) {
     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
   }
@@ -190,17 +201,17 @@ export class JobsListComponent implements OnInit {
   }
 
   public jobs(): Job[] {
-    return this.jobsSubject.value;
+    return this.jobsSubject$.value;
   }
 
   private extractJobs(prodId: number[], res: EIJob[][]) {
-    console.log(res.length);
+    this.clearFilter();
     let jobList = [];
     prodId.forEach((element, index) => {
       let jobs = res[index];
       jobList = jobList.concat(jobs.map((job) => this.createJob(element, job)));
     });
-    this.jobsSubject.next(jobList);
+    this.jobsSubject$.next(jobList);
     return jobList;
   }