NAS-123314 / 23.10 / Introducing withLoader operator (#8504)

src/app/modules/loader/app-loader.service.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
-import { EMPTY, Observable } from 'rxjs';
+import {
+  defer, EMPTY, finalize, MonoTypeOperatorFunction, Observable,
+} from 'rxjs';
 import { AppLoaderComponent } from 'app/modules/loader/components/app-loader/app-loader.component';
 
 @Injectable({ providedIn: 'root' })
@@ -10,6 +12,18 @@ export class AppLoaderService {
 
   constructor(private dialog: MatDialog) { }
 
+  /**
+   * Opens loader when observable (request) starts and closes when it ends.
+   */
+  withLoader<T>(): MonoTypeOperatorFunction<T> {
+    return (source$: Observable<T>) => defer(() => {
+      this.open();
+      return source$.pipe(
+        finalize(() => this.close()),
+      );
+    });
+  }
+
   open(title: string = T('Please wait')): Observable<boolean> {
     if (this.dialogRef !== undefined) {
       return EMPTY;

src/app/modules/loader/directives/with-loading-state/with-loading-state.directive.ts

@@ -2,7 +2,7 @@ import {
   ChangeDetectorRef, Directive, Input, OnDestroy, TemplateRef, ViewContainerRef,
 } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
-import { LoadingState } from 'app/helpers/to-loading-state.helper';
+import { LoadingState } from 'app/helpers/operators/to-loading-state.helper';
 import {
   WithLoadingStateErrorComponent,
 } from 'app/modules/loader/directives/with-loading-state/with-loading-state-error/with-loading-state-error.component';

src/app/pages/api-keys/components/api-key-form-dialog/api-key-form-dialog.component.spec.ts

@@ -9,7 +9,6 @@ import { mockCall, mockWebsocket } from 'app/core/testing/utils/mock-websocket.u
 import { ApiKey } from 'app/interfaces/api-key.interface';
 import { IxFormsModule } from 'app/modules/ix-forms/ix-forms.module';
 import { IxFormHarness } from 'app/modules/ix-forms/testing/ix-form.harness';
-import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import {
   ApiKeyFormDialogComponent,
 } from 'app/pages/api-keys/components/api-key-form-dialog/api-key-form-dialog.component';
@@ -42,7 +41,6 @@ describe('ApiKeyFormDialogComponent', () => {
         apiKeyEdited: jest.fn(),
       }),
       mockProvider(MatDialogRef),
-      mockProvider(AppLoaderService),
       mockProvider(DialogService),
       {
         provide: MAT_DIALOG_DATA,

src/app/pages/api-keys/components/api-key-form-dialog/api-key-form-dialog.component.ts

@@ -53,22 +53,20 @@ export class ApiKeyFormDialogComponent implements OnInit {
   }
 
   onSubmit(): void {
-    this.loader.open();
     const values = this.form.value;
     const request$ = this.isNew
       ? this.ws.call('api_key.create', [{ name: values.name, allowlist: [{ method: '*', resource: '*' }] }])
       : this.ws.call('api_key.update', [this.editingRow.id, values] as UpdateApiKeyRequest);
 
     request$
-      .pipe(untilDestroyed(this))
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
       .subscribe({
         next: (apiKey) => {
           if (this.isNew) {
             this.store.apiKeyAdded(apiKey);
           } else {
             this.store.apiKeyEdited(apiKey);
           }
-          this.loader.close();
           this.dialogRef.close(true);
 
           if (apiKey.key) {
@@ -78,7 +76,6 @@ export class ApiKeyFormDialogComponent implements OnInit {
           }
         },
         error: (error) => {
-          this.loader.close();
           this.errorHandler.handleWsFormError(error, this.form);
         },
       });

src/app/pages/apps/components/app-detail-view/app-resources-card/app-resources-card.component.ts

@@ -5,7 +5,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import {
   Observable, filter, map, switchMap, throttleTime,
 } from 'rxjs';
-import { toLoadingState } from 'app/helpers/to-loading-state.helper';
+import { toLoadingState } from 'app/helpers/operators/to-loading-state.helper';
 import { MemoryStatsEventData } from 'app/interfaces/events/memory-stats-event.interface';
 import { KubernetesStore } from 'app/pages/apps/store/kubernetes-store.service';
 import { WebSocketService } from 'app/services/ws.service';

src/app/pages/apps/components/catalogs/catalog-delete-dialog/catalog-delete-dialog.component.ts

@@ -33,18 +33,15 @@ export class CatalogDeleteDialogComponent {
   ) { }
 
   onDelete(): void {
-    this.loader.open();
     this.ws.call('catalog.delete', [this.catalog.id])
-      .pipe(untilDestroyed(this))
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
       .subscribe({
         next: () => {
           this.snackbar.success(this.translate.instant('Catalog deleted'));
           this.dialogRef.close(true);
-          this.loader.close();
         },
         error: (error: WebsocketError) => {
           this.dialogService.error(this.errorHandler.parseWsError(error));
-          this.loader.close();
         },
       });
   }

src/app/pages/apps/components/catalogs/manage-catalog-summary/manage-catalog-summary-dialog.component.ts

@@ -39,12 +39,10 @@ export class ManageCatalogSummaryDialogComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.loader.open();
     this.ws.call('catalog.items', [this.catalog.label])
-      .pipe(untilDestroyed(this))
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
       .subscribe({
         next: (result: CatalogItems) => {
-          this.loader.close();
           this.catalogItems = [];
           this.trainOptions = ['All'];
           if (result) {
@@ -64,7 +62,6 @@ export class ManageCatalogSummaryDialogComponent implements OnInit {
           }
         },
         error: (err: WebsocketError) => {
-          this.loader.close();
           this.dialogService.error(this.errorHandler.parseWsError(err));
         },
       });

src/app/pages/apps/components/chart-wizard/chart-wizard.component.spec.ts

@@ -17,7 +17,6 @@ import { IxSlideInRef } from 'app/modules/ix-forms/components/ix-slide-in/ix-sli
 import { SLIDE_IN_DATA } from 'app/modules/ix-forms/components/ix-slide-in/ix-slide-in.token';
 import { IxFormsModule } from 'app/modules/ix-forms/ix-forms.module';
 import { IxFormHarness } from 'app/modules/ix-forms/testing/ix-form.harness';
-import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import { ChartWizardComponent } from 'app/pages/apps/components/chart-wizard/chart-wizard.component';
 import { ApplicationsService } from 'app/pages/apps/services/applications.service';
 import { KubernetesStore } from 'app/pages/apps/store/kubernetes-store.service';
@@ -339,7 +338,6 @@ describe('ChartWizardComponent', () => {
         getChartRelease: jest.fn(() => of([existingChartEdit])),
         getAllChartReleases: jest.fn(() => of([existingChartEdit])),
       }),
-      mockProvider(AppLoaderService),
       mockWebsocket([
         mockJob('chart.release.create'),
         mockJob('chart.release.update'),

src/app/pages/apps/components/chart-wizard/chart-wizard.component.ts

@@ -157,10 +157,9 @@ export class ChartWizardComponent implements OnInit, OnDestroy {
   loadApplicationForCreation(): void {
     this.isNew = true;
     this.isLoading = true;
-    this.loader.open();
     this.appService
       .getCatalogItem(this.appId, this.catalog, this.train)
-      .pipe(untilDestroyed(this))
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
       .subscribe({
         next: (app) => {
           app.schema = app.versions[app.latest_version].schema;
@@ -294,10 +293,9 @@ export class ChartWizardComponent implements OnInit, OnDestroy {
   private loadApplicationForEdit(): void {
     this.isNew = false;
     this.isLoading = true;
-    this.loader.open();
     this.appService
       .getChartRelease(this.appId)
-      .pipe(untilDestroyed(this))
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
       .subscribe({
         next: (releases) => {
           this.setChartForEdit(releases[0]);
@@ -423,13 +421,11 @@ export class ChartWizardComponent implements OnInit, OnDestroy {
   private afterAppLoaded(): void {
     this.appsLoaded = true;
     this.isLoading = false;
-    this.loader.close();
     this.checkIfPoolIsSet();
     this.cdr.markForCheck();
   }
 
   private afterAppLoadError(error: WebsocketError): void {
-    this.loader.close();
     this.router.navigate(['/apps', 'available']).then(() => {
       this.dialogService.error(this.errorHandler.parseWsError(error));
     });

src/app/pages/apps/components/installed-apps/kubernetes-settings/kubernetes-settings.component.spec.ts

@@ -13,7 +13,6 @@ import { IxSlideInRef } from 'app/modules/ix-forms/components/ix-slide-in/ix-sli
 import { IxFormsModule } from 'app/modules/ix-forms/ix-forms.module';
 import { FormErrorHandlerService } from 'app/modules/ix-forms/services/form-error-handler.service';
 import { IxFormHarness } from 'app/modules/ix-forms/testing/ix-form.harness';
-import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import { KubernetesSettingsComponent } from 'app/pages/apps/components/installed-apps/kubernetes-settings/kubernetes-settings.component';
 import { ApplicationsService } from 'app/pages/apps/services/applications.service';
 import { DialogService } from 'app/services/dialog.service';
@@ -60,7 +59,6 @@ describe('KubernetesSettingsComponent', () => {
       mockProvider(DialogService, {
         confirm: jest.fn(() => of(true)),
       }),
-      mockProvider(AppLoaderService),
       mockProvider(IxSlideInRef),
       mockProvider(FormErrorHandlerService),
     ],

src/app/pages/apps/components/installed-apps/kubernetes-settings/kubernetes-settings.component.ts

@@ -84,20 +84,18 @@ export class KubernetesSettingsComponent implements OnInit {
     this.showReInitConfirm(values).pipe(
       filter(Boolean),
       switchMap(() => {
-        this.loader.open();
         return forkJoin([
           this.ws.job('kubernetes.update', [values]),
           this.appService.updateContainerConfig(enableContainerImageUpdate),
         ]).pipe(
+          this.loader.withLoader(),
           tap(([job]) => {
             if (job.state !== JobState.Success) {
               return;
             }
-            this.loader.close();
             this.slideInRef.close();
           }),
           catchError((error) => {
-            this.loader.close();
             this.formErrorHandler.handleWsFormError(error, this.form);
             return EMPTY;
           }),

src/app/pages/apps/components/installed-apps/pod-logs/pod-logs.component.ts

@@ -148,7 +148,6 @@ export class PodLogsComponent implements OnInit {
 
     this.dialogService.closeAllDialogs();
 
-    this.loader.open();
     const fileName = `${chartReleaseName}_${podName}_${containerName}.log`;
     const mimetype = 'application/octet-stream';
     this.ws.call(
@@ -158,9 +157,11 @@ export class PodLogsComponent implements OnInit {
         [chartReleaseName, { pod_name: podName, container_name: containerName, tail_lines: tailLines }],
         fileName,
       ],
-    ).pipe(untilDestroyed(this)).subscribe({
+    ).pipe(
+      this.loader.withLoader(),
+      untilDestroyed(this),
+    ).subscribe({
       next: (download) => {
-        this.loader.close();
         const [, url] = download;
         this.storageService.streamDownloadFile(url, fileName, mimetype)
           .pipe(untilDestroyed(this))
@@ -176,7 +177,6 @@ export class PodLogsComponent implements OnInit {
           });
       },
       error: (error) => {
-        this.loader.close();
         this.dialogService.error(this.errorHandler.parseWsError(error));
       },
     });

src/app/pages/apps/components/pod-select-dialog/pod-select-dialog.component.ts

@@ -65,31 +65,30 @@ export class PodSelectDialogComponent implements OnInit {
   loadPods(): void {
     this.podList = [];
     this.podDetails = {};
-    this.loader.open();
-    this.ws.call('chart.release.pod_console_choices', [this.selectedAppName]).pipe(untilDestroyed(this)).subscribe({
-      next: (consoleChoices) => {
-        this.loader.close();
-        this.podDetails = { ...consoleChoices };
-        this.podList = Object.keys(this.podDetails);
-        if (this.podList.length) {
-          this.pods$ = of(this.podList.map((item) => ({ label: item, value: item })));
-          this.containers$ = of(this.podDetails[this.podList[0]].map((item) => ({ label: item, value: item })));
-          this.form.controls.pods.patchValue(this.podList[0]);
-          this.form.controls.containers.patchValue(this.podDetails[this.podList[0]][0]);
+    this.ws.call('chart.release.pod_console_choices', [this.selectedAppName])
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
+      .subscribe({
+        next: (consoleChoices) => {
+          this.podDetails = { ...consoleChoices };
+          this.podList = Object.keys(this.podDetails);
+          if (this.podList.length) {
+            this.pods$ = of(this.podList.map((item) => ({ label: item, value: item })));
+            this.containers$ = of(this.podDetails[this.podList[0]].map((item) => ({ label: item, value: item })));
+            this.form.controls.pods.patchValue(this.podList[0]);
+            this.form.controls.containers.patchValue(this.podDetails[this.podList[0]][0]);
 
-          this.form.controls.pods.valueChanges.pipe(untilDestroyed(this)).subscribe((value: string) => {
-            this.containers$ = of(this.podDetails[value].map((item) => ({ label: item, value: item })));
-            this.form.controls.containers.patchValue(this.podDetails[value][0]);
-          });
-        } else {
+            this.form.controls.pods.valueChanges.pipe(untilDestroyed(this)).subscribe((value: string) => {
+              this.containers$ = of(this.podDetails[value].map((item) => ({ label: item, value: item })));
+              this.form.controls.containers.patchValue(this.podDetails[value][0]);
+            });
+          } else {
+            this.hasPool = false;
+          }
+        },
+        error: () => {
           this.hasPool = false;
-        }
-      },
-      error: () => {
-        this.hasPool = false;
-        this.loader.close();
-      },
-    });
+        },
+      });
   }
 
   onPodSelect(): void {

src/app/pages/apps/components/pod-select-logs/pod-select-logs-dialog.component.ts

@@ -92,10 +92,8 @@ export class PodSelectLogsDialogComponent implements OnInit {
   }
 
   loadPodLogs(appName: string): void {
-    this.loader.open();
-
     this.ws.call('chart.release.pod_logs_choices', [appName])
-      .pipe(untilDestroyed(this)).subscribe({
+      .pipe(this.loader.withLoader(), untilDestroyed(this)).subscribe({
         next: (podLogs) => {
           this.podLogsDetails = { ...podLogs };
           const logsList = Object.keys(this.podLogsDetails);
@@ -107,12 +105,10 @@ export class PodSelectLogsDialogComponent implements OnInit {
           } else {
             this.hasPool = false;
           }
-          this.loader.close();
           this.cdr.markForCheck();
         },
         error: () => {
           this.hasPool = false;
-          this.loader.close();
           this.cdr.markForCheck();
         },
       });

src/app/pages/apps/components/select-pool-dialog/select-pool-dialog.component.spec.ts

@@ -12,7 +12,6 @@ import { KubernetesConfig } from 'app/interfaces/kubernetes-config.interface';
 import { IxSelectHarness } from 'app/modules/ix-forms/components/ix-select/ix-select.harness';
 import { IxFormsModule } from 'app/modules/ix-forms/ix-forms.module';
 import { IxFormHarness } from 'app/modules/ix-forms/testing/ix-form.harness';
-import { AppLoaderService } from 'app/modules/loader/app-loader.service';
 import { SelectPoolDialogComponent } from 'app/pages/apps/components/select-pool-dialog/select-pool-dialog.component';
 import { ApplicationsService } from 'app/pages/apps/services/applications.service';
 import { KubernetesStore } from 'app/pages/apps/store/kubernetes-store.service';
@@ -47,7 +46,6 @@ describe('SelectPoolDialogComponent', () => {
         open: jest.fn(() => mockEntityJobComponentRef),
       }),
       mockProvider(MatDialogRef),
-      mockProvider(AppLoaderService),
       mockProvider(Router),
     ],
   });

src/app/pages/apps/components/select-pool-dialog/select-pool-dialog.component.ts

@@ -86,16 +86,13 @@ export class SelectPoolDialogComponent implements OnInit {
   }
 
   private loadPools(): void {
-    this.loader.open();
-
     forkJoin(([
       this.appService.getKubernetesConfig(),
       this.appService.getPoolList(),
     ]))
-      .pipe(untilDestroyed(this))
+      .pipe(this.loader.withLoader(), untilDestroyed(this))
       .subscribe({
         next: ([config, pools]) => {
-          this.loader.close();
           this.selectedPool = config.pool;
           this.form.patchValue({
             pool: this.selectedPool,
@@ -112,7 +109,6 @@ export class SelectPoolDialogComponent implements OnInit {
           }
         },
         error: (error) => {
-          this.loader.close();
           this.dialogService.error(this.errorHandler.parseWsError(error));
           this.dialogRef.close(false);
         },