Merge pull request #306 from cobbler/feature/on-destroy-lifecycle

Unsubscribe during ngOnDestroy lifecycle

projects/cobbler-frontend/src/app/actions/build-iso/build-iso.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -7,6 +7,8 @@ import { MatInput } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { BackgroundBuildisoOptions, CobblerApiService } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 
 @Component({
@@ -25,7 +27,11 @@ import { UserService } from '../../services/user.service';
     MatCheckbox,
   ],
 })
-export class BuildISOComponent {
+export class BuildISOComponent implements OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Form
   private readonly _formBuilder = inject(FormBuilder);
   buildisoFormGroup = this._formBuilder.group({
     iso: '',
@@ -46,6 +52,11 @@ export class BuildISOComponent {
     private _snackBar: MatSnackBar,
   ) {}
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   runBuildiso(): void {
     const buildisoOptions: BackgroundBuildisoOptions = {
       iso: this.buildisoFormGroup.controls.iso.value,
@@ -67,6 +78,7 @@ export class BuildISOComponent {
     }
     this.cobblerApiService
       .background_buildiso(buildisoOptions, this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           // TODO

projects/cobbler-frontend/src/app/actions/check-sys/check-sys.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
@@ -8,7 +8,8 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltip } from '@angular/material/tooltip';
 import { RouterOutlet } from '@angular/router';
 import { CobblerApiService } from 'cobbler-api';
-import { Observable, of } from 'rxjs';
+import { Observable, of, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 
 @Component({
@@ -27,7 +28,11 @@ import { UserService } from '../../services/user.service';
     MatProgressSpinner,
   ],
 })
-export class CheckSysComponent implements OnInit {
+export class CheckSysComponent implements OnInit, OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Data
   public data: Observable<Array<string>> = of([]);
   public isLoading = true;
 
@@ -41,19 +46,27 @@ export class CheckSysComponent implements OnInit {
     this.updateChecks();
   }
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   updateChecks(): void {
     this.isLoading = true;
-    this.cobblerApiService.check(this.userService.token).subscribe(
-      (data) => {
-        this.data = of(data);
-        this.isLoading = false;
-      },
-      (error) => {
-        // HTML encode the error message since it originates from XML
-        this._snackBar.open(this.toHTML(error.message), 'Close');
-        this.isLoading = false;
-      },
-    );
+    this.cobblerApiService
+      .check(this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(
+        (data) => {
+          this.data = of(data);
+          this.isLoading = false;
+        },
+        (error) => {
+          // HTML encode the error message since it originates from XML
+          this._snackBar.open(this.toHTML(error.message), 'Close');
+          this.isLoading = false;
+        },
+      );
   }
 
   toHTML(input: string): any {

projects/cobbler-frontend/src/app/actions/hardlink/hardlink.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { CobblerApiService } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 
 @Component({
@@ -11,16 +13,25 @@ import { UserService } from '../../services/user.service';
   templateUrl: './hardlink.component.html',
   styleUrl: './hardlink.component.scss',
 })
-export class HardlinkComponent {
+export class HardlinkComponent implements OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
   constructor(
     public userService: UserService,
     private cobblerApiService: CobblerApiService,
     private _snackBar: MatSnackBar,
   ) {}
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   runHardlink(): void {
     this.cobblerApiService
       .background_hardlink(this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           // TODO

projects/cobbler-frontend/src/app/actions/import-dvd/import-dvd.component.ts

@@ -1,10 +1,12 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { CobblerApiService, BackgroundImportOptions } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 
 @Component({
@@ -21,7 +23,11 @@ import { UserService } from '../../services/user.service';
     MatButton,
   ],
 })
-export class ImportDVDComponent {
+export class ImportDVDComponent implements OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Form
   private readonly _formBuilder = inject(FormBuilder);
   importFormGroup = this._formBuilder.group({
     path: '',
@@ -40,6 +46,11 @@ export class ImportDVDComponent {
     private _snackBar: MatSnackBar,
   ) {}
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   runImport(): void {
     const importOptions: BackgroundImportOptions = {
       path: this.importFormGroup.controls.path.value,
@@ -59,6 +70,7 @@ export class ImportDVDComponent {
     }
     this.cobblerApiService
       .background_import(importOptions, this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           // TODO

projects/cobbler-frontend/src/app/actions/mkloaders/mkloaders.component.ts

@@ -1,7 +1,8 @@
 import { Component, inject, OnDestroy } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 import { CobblerApiService } from 'cobbler-api';
-import { Subscription } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatButton } from '@angular/material/button';
 
@@ -13,28 +14,33 @@ import { MatButton } from '@angular/material/button';
   styleUrl: './mkloaders.component.scss',
 })
 export class MkloadersComponent implements OnDestroy {
-  private userSvc = inject(UserService);
-  private cobblerApiSvc = inject(CobblerApiService);
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
 
-  private subs: Subscription = new Subscription();
-
-  constructor(private _snackBar: MatSnackBar) {}
+  constructor(
+    public userService: UserService,
+    private cobblerApiService: CobblerApiService,
+    private _snackBar: MatSnackBar,
+  ) {}
 
   ngOnDestroy(): void {
-    this.subs.unsubscribe();
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
   }
+
   runMkloaders(): void {
-    this.subs.add(
-      this.cobblerApiSvc.background_hardlink(this.userSvc.token).subscribe({
+    this.cobblerApiService
+      .background_hardlink(this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe({
         next: (value) => {
           // TODO
         },
         error: (error) => {
           // HTML encode the error message since it originates from XML
           this._snackBar.open(this.toHTML(error.message), 'Close');
         },
-      }),
-    );
+      });
   }
 
   toHTML(input: string): any {

projects/cobbler-frontend/src/app/actions/replicate/replicate.component.ts

@@ -1,11 +1,13 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';
 import { MatFormField, MatInput } from '@angular/material/input';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { BackgroundReplicateOptions, CobblerApiService } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 
 @Component({
@@ -23,7 +25,11 @@ import { UserService } from '../../services/user.service';
   templateUrl: './replicate.component.html',
   styleUrl: './replicate.component.scss',
 })
-export class ReplicateComponent {
+export class ReplicateComponent implements OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Form
   private readonly _formBuilder = inject(FormBuilder);
   replicateFormGroup = this._formBuilder.group({
     master: '',
@@ -48,6 +54,11 @@ export class ReplicateComponent {
     private _snackBar: MatSnackBar,
   ) {}
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   runReplicate(): void {
     const replicateOptions: BackgroundReplicateOptions = {
       master: this.replicateFormGroup.controls.master.value,
@@ -68,6 +79,7 @@ export class ReplicateComponent {
     };
     this.cobblerApiService
       .background_replicate(replicateOptions, this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           // TODO

projects/cobbler-frontend/src/app/actions/repo-sync/repo-sync.component.ts

@@ -1,6 +1,8 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { MatListModule } from '@angular/material/list';
 import { RouterOutlet } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 import { CobblerApiService } from 'cobbler-api';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -49,7 +51,11 @@ import { MatInput, MatInputModule } from '@angular/material/input';
     ReactiveFormsModule,
   ],
 })
-export class RepoSyncComponent {
+export class RepoSyncComponent implements OnDestroy {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Form
   private readonly _formBuilder = inject(FormBuilder);
   repositoryFormArray = new FormArray([]);
 
@@ -64,6 +70,11 @@ export class RepoSyncComponent {
     private _snackBar: MatSnackBar,
   ) {}
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   get newRepositoryFormGroup(): FormGroup {
     return new FormGroup({
       repoName: new FormControl(null, [Validators.required]),
@@ -97,6 +108,7 @@ export class RepoSyncComponent {
     };
     this.cobblerApiService
       .background_reposync(reposyncOptions, this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe(
         (value) => {
           // TODO

projects/cobbler-frontend/src/app/actions/status/status.component.ts

@@ -1,11 +1,19 @@
 import { DatePipe } from '@angular/common';
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { CobblerApiService, InstallationStatus } from 'cobbler-api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 
 @Component({
@@ -22,7 +30,11 @@ import { UserService } from '../../services/user.service';
   templateUrl: './status.component.html',
   styleUrl: './status.component.scss',
 })
-export class StatusComponent implements OnInit, AfterViewInit {
+export class StatusComponent implements OnInit, OnDestroy, AfterViewInit {
+  // Unsubscribe
+  private ngUnsubscribe = new Subject<void>();
+
+  // Table
   displayedColumns: string[] = [
     'ip',
     'objType',
@@ -48,12 +60,18 @@ export class StatusComponent implements OnInit, AfterViewInit {
   ngOnInit(): void {
     this.cobblerApiService
       .get_status('normal', this.userService.token)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((value) => {
         console.log(value);
         this.dataSource.data = value;
       });
   }
 
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;