Moving observables to promises when possible

src/app/gui/components/service/service.component.ts

@@ -141,16 +141,14 @@ export class ServiceComponent implements OnInit {
       type === 'release'
         ? django.gettext('Service released')
         : django.gettext('Service reseted');
-    this.api.gui
+    this.api.gui.yesno(title, django.gettext('Are you sure?')).then((val) => {
-      .yesno(title, django.gettext('Are you sure?'))
+      if (val) {
-      .subscribe((val) => {
+        this.api.action(type, this.service.id).then((service) => {
-        if (val) {
+          if (service) {
-          this.api.action(type, this.service.id).subscribe((service) => {
+            this.api.gui.alert(title, action);
-            if (service) {
+          }
-              this.api.gui.alert(title, action);
+        });
-            }
+      }
-          });
+    });
-        }
-      });
   }
 }

src/app/gui/modal/modal.component.html

@@ -1,8 +1,7 @@
 <h4 mat-dialog-title [innerHtml]="data.title | safeHtml"></h4>
 <mat-dialog-content [innerHTML]="data.body | safeHtml"></mat-dialog-content>
 <mat-dialog-actions>
-  <button *ngIf="data.type===0" mat-raised-button mat-dialog-close (click)="close()"> <uds-translate>Close</uds-translate>{{ extra }}</button>
+  <button *ngIf="data.type===0" mat-raised-button mat-dialog-close (click)="resolver(false); close()"> <uds-translate>Close</uds-translate>{{ extra }}</button>
-  <button *ngIf="data.type===1" mat-raised-button mat-dialog-close (click)="yes()"><uds-translate>Yes</uds-translate></button>
+  <button *ngIf="data.type===1" mat-raised-button mat-dialog-close (click)="resolver(true); close()"><uds-translate>Yes</uds-translate></button>
-  <button *ngIf="data.type===1" mat-raised-button mat-dialog-close (click)="no()"><uds-translate>No</uds-translate></button>
+  <button *ngIf="data.type===1" mat-raised-button mat-dialog-close (click)="resolver(false); close()"><uds-translate>No</uds-translate></button>
-
 </mat-dialog-actions>

src/app/gui/modal/modal.component.ts

@@ -15,7 +15,7 @@ export interface ModalData {
   title: string;
   body: string;
   autoclose?: number;
-  checkClose?: Observable<boolean>;
+  checkClose?: Promise<boolean>;
   type: DialogType;
   username?: string;
   domain?: string;
@@ -30,50 +30,17 @@ export interface ModalData {
 export class ModalComponent implements OnInit {
   extra: string;
   subscription: Subscription;
-  yesno: Observable<boolean>;
+  yesno: Promise<boolean>;
-  yes: () => void;
+  resolver: (value: boolean) => void;
-  no: () => void;
-  close: () => void;
 
   constructor(public dialogRef: MatDialogRef<ModalComponent>, @Inject(MAT_DIALOG_DATA) public data: ModalData) {
-    this.subscription = null;
-    this.resetCallbacks();
     // Notifies on case of yes or not to subscriber
-    this.yesno = new Observable<boolean>((observer) => {
+    this.yesno = new Promise<boolean>((resolve) => {
-      this.yes = () => {
+      this.resolver = resolve;
-        observer.next(true);
-        observer.complete();
-      };
-      this.no = () => {
-        observer.next(false);
-        observer.complete();
-      };
-      this.close = () => {
-        this.doClose();
-        observer.next(false);
-        observer.complete();
-      };
-      const self = this;
-      return {unsubscribe: () => self.resetCallbacks()};
     });
   }
 
-  resetCallbacks() {
+  close() {
-    this.yes = this.no = () => this.close();
-    this.close = () => this.doClose();
-  }
-
-  /**
-   * Invoked on closed modal component
-   * This ensures that we stop subscription to interval
-   */
-  closed(): void {
-    if (this.subscription !== null) {
-      this.subscription.unsubscribe();
-    }
-  }
-
-  doClose(): void {
     this.dialogRef.close();
   }
 
@@ -86,13 +53,13 @@ export class ModalComponent implements OnInit {
     this.extra = ' (' + Math.floor(miliseconds / 1000) + ' ' + django.gettext('seconds') + ') ';
   }
 
-  initAlert() {
+  async initAlert(): Promise<void> {
     if (this.data.autoclose > 0) {
       this.dialogRef.afterClosed().subscribe(res => {
-        this.closed();
+        this.close();
       });
       this.setExtra(this.data.autoclose);
-      this.subscription = interval(1000).subscribe(n => {
+      interval(1000).subscribe(n => {
         const rem = this.data.autoclose - (n + 1) * 1000;
         this.setExtra(rem);
         if (rem <= 0) {
@@ -103,26 +70,14 @@ export class ModalComponent implements OnInit {
         this.dialogRef.close();
       }, this.data.autoclose);*/
     } else if (this.data.checkClose) {
-      this.dialogRef.afterClosed().subscribe(res => {
+      await this.data.checkClose;
-        this.closed();
+      this.close();
-      });
-      this.subscription = this.data.checkClose.subscribe(res => {
-        // Invoke the close after, result in fact is not important
-        window.setTimeout(() => {
-          this.doClose();
-        });
-      });
-
     }
   }
 
-  initYesNo() {
-    // data.autoclose is not used
-  }
-
   ngOnInit() {
     if ( this.data.type === DialogType.yesno ) {
-      this.initYesNo();
+      ;
     } else {
       this.initAlert();
     }

src/app/gui/uds-gui.service.ts

@@ -3,7 +3,9 @@ import { Injectable } from '@angular/core';
 import { ModalComponent, DialogType } from './modal/modal.component';
 import { CredentialsModalComponent } from './credentials-modal/credentials-modal.component';
 import { MatDialog } from '@angular/material/dialog';
-import { Observable } from 'rxjs';
+import { Observable, firstValueFrom } from 'rxjs';
+
+const toPromise = <T>(observable: Observable<T>): Promise<T> => firstValueFrom(observable);
 
 @Injectable()
 export class UDSGuiService {
@@ -13,7 +15,7 @@ export class UDSGuiService {
     title: string,
     message: string,
     autoclose = 0,
-    checkClose: Observable<boolean> = null
+    checkClose: Promise<boolean> = null
   ) {
     const width = window.innerWidth < 800 ? '80%' : '40%';
     const dialogRef = this.dialog.open(ModalComponent, {
@@ -30,7 +32,7 @@ export class UDSGuiService {
     return dialogRef;
   }
 
-  yesno(title: string, message: string) {
+  yesno(title: string, message: string): Promise<boolean> {
     const width = window.innerWidth < 800 ? '80%' : '40%';
     const dialogRef = this.dialog.open(ModalComponent, {
       width,
@@ -41,13 +43,13 @@ export class UDSGuiService {
     return dialogRef.componentInstance.yesno;
   }
 
-  askCredentials(username: string, domain: string): Observable<{username: string; password: string; domain: string}> {
+  askCredentials(username: string, domain: string): Promise<{username: string; password: string; domain: string}> {
     const dialogRef = this.dialog.open(CredentialsModalComponent, {
       data: {
         username,
         domain,
       },
     });
-    return dialogRef.afterClosed();
+    return toPromise(dialogRef.afterClosed());
   }
 }

src/app/helpers/plugin.ts

@@ -48,12 +48,12 @@ export class Plugin {
         ),
         0,
         // Now UDS tries to check status
-        new Observable<boolean>((observer) => {
+        new Promise<boolean>((resolve) => {
           let readyTime = 0;
           const checker = () => {
             if (alert.componentInstance) {
               // Not closed dialog...
-              this.api.status(params[0], params[1]).subscribe(
+              this.api.status(params[0], params[1]).then(
                 (data) => {
                   if (data.status === 'ready') {
                     if (!readyTime) {
@@ -89,19 +89,16 @@ export class Plugin {
                     alert.componentInstance.data.body = django.gettext(
                       'Machine ready, waiting for UDS Client'
                     );
-                    observer.next(true);
+                    resolve(true);
-                    observer.complete();
                   } else if (data.status === 'running') {
                     window.setTimeout(checker, this.delay); // Recheck after delay seconds
                   } else {
-                    observer.next(true);
+                    resolve(true);
-                    observer.complete();
                     notifyError();
                   }
                 },
                 (error) => {
-                  observer.next(true);
+                  resolve(true);
-                  observer.complete();
                   notifyError(error);
                 }
               );
@@ -120,7 +117,7 @@ export class Plugin {
         })
       );
 
-      this.api.enabler(params[0], params[1]).subscribe(
+      this.api.enabler(params[0], params[1]).then(
         (data) => {
           if (data.error) {
             state = 'error';
@@ -162,15 +159,14 @@ export class Plugin {
         ),
         0,
         // Now UDS tries to check status before closing dialog...
-        new Observable<boolean>((observer) => {
+        new Promise<boolean>((resolve) => {
           const checker = () => {
             if (alert.componentInstance) {
               // Not closed dialog...
-              this.api.transportUrl(url).subscribe(
+              this.api.transportUrl(url).then(
                 (data) => {
                   if (data.url) {
-                    observer.next(true);
+                    resolve(true);
-                    observer.complete(); // Notify window to close...
                     // Extract if credentials modal is requested
                     let username = '';
                     let domain = '';
@@ -237,9 +233,9 @@ export class Plugin {
                     if (askCredentials) {
                       this.api.gui
                         .askCredentials(username, domain)
-                        .subscribe((result) => {
+                        .then((result) => {
                           // Update transport credentials
-                          this.api.updateTransportTicket(ticket, scrambler,result.username, result.password, result.domain).subscribe(
+                          this.api.updateTransportTicket(ticket, scrambler,result.username, result.password, result.domain).then(
                             () => {
                               openWindow();
                             }
@@ -249,16 +245,14 @@ export class Plugin {
                       openWindow();  // Open window
                     }
                   } else if (!data.running) {
-                    observer.next(true);
+                    resolve(true);
-                    observer.complete();
                     notifyError(data.error);
                   } else {
                     window.setTimeout(checker, this.delay); // Recheck after 5 seconds
                   }
                 },
                 (error) => {
-                  observer.next(true);
+                  resolve(true);
-                  observer.complete();
                   notifyError(error);
                 }
               );
@@ -273,7 +267,7 @@ export class Plugin {
     text: string,
     info: string,
     waitTime: number,
-    checker: Observable<boolean> = null
+    checker: Promise<boolean> = null
   ) {
     return this.api.gui.alert(
       django.gettext('Launching service'),

src/app/pages/services/services.component.ts

@@ -84,7 +84,7 @@ export class ServicesComponent implements OnInit {
     // Obtain services list
     this.api
       .getServicesInformation()
-      .subscribe((result: JSONServicesInformation) => {
+      .then((result: JSONServicesInformation) => {
         this.servicesInformation = result;
         this.autorun();
 

src/app/uds-api.service-type.ts

@@ -19,22 +19,22 @@ export interface UDSApiServiceType {
   enabler(
     serviceId: string,
     transportId: string
-  ): Observable<JSONEnabledService>;
+  ): Promise<JSONEnabledService>;
 
   /* Service status */
   status(
     serviceId: string,
     transportId: string
-  ): Observable<JSONStatusService>;
+  ): Promise<JSONStatusService>;
 
   /* Services resetter */
-  action(action: string, serviceId: string): Observable<JSONService>;
+  action(action: string, serviceId: string): Promise<JSONService>;
 
   /* transport url */
-  transportUrl(url: string): Observable<JSONTransportURLService>;
+  transportUrl(url: string): Promise<JSONTransportURLService>;
 
   /* Transport ticket credentials updater */
-  updateTransportTicket(ticketId: string, scrambler: string, username: string, password: string, domain: string): Observable<any>;
+  updateTransportTicket(ticketId: string, scrambler: string, username: string, password: string, domain: string): Promise<any>;
 
   /* Go to admin dashboard */
   gotoAdmin(): void;
@@ -45,7 +45,7 @@ export interface UDSApiServiceType {
   /**
    * Gets services information
    */
-  getServicesInformation(): Observable<JSONServicesInformation>;
+  getServicesInformation(): Promise<JSONServicesInformation>;
 
   /**
    * Executes custom javascript for service launch if it is available

src/app/uds-api.service.ts

@@ -2,7 +2,8 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { User, UDSConfig, Downloadable, Info } from './types/config';
-import { Observable } from 'rxjs';
+import { firstValueFrom, Observable } from 'rxjs';
+import { timeout } from 'rxjs/operators';
 import {
   JSONServicesInformation,
   JSONEnabledService,
@@ -23,7 +24,12 @@ declare const csrf: any;
 
 const DARK_THEME = 'dark-theme';
 const LIGHT_THEME = 'light-theme';
+const TIMEOUT = 10000;
 
+const toPromise = <T>(observable: Observable<T>, wait?: number): Promise<T> => {
+  wait = wait || TIMEOUT;
+  return firstValueFrom(observable.pipe(timeout(wait)));
+};
 
 @Injectable()
 export class UDSApiService implements UDSApiServiceType {
@@ -88,45 +94,50 @@ export class UDSApiService implements UDSApiServiceType {
   }
 
   /* Client enabler */
-  enabler(serviceId: string, transportId: string) {
+  enabler(serviceId: string, transportId: string): Promise<JSONEnabledService> {
     const enabler = this.config.urls.enabler
       .replace('param1', serviceId)
       .replace('param2', transportId);
-    return this.http.get<JSONEnabledService>(enabler);
+    return toPromise(this.http.get<JSONEnabledService>(enabler));
   }
 
   /* Check userService status */
-  status(
+  status(serviceId: string, transportId: string): Promise<JSONStatusService> {
-    serviceId: string,
-    transportId: string
-  ): Observable<JSONStatusService> {
     const status = this.config.urls.status
       .replace('param1', serviceId)
       .replace('param2', transportId);
-    return this.http.get<JSONStatusService>(status);
+    return toPromise(this.http.get<JSONStatusService>(status));
   }
 
   /* Services resetter */
-  action(action: string, serviceId: string) {
+  action(action: string, serviceId: string): Promise<JSONService> {
     const actionURL = this.config.urls.action
       .replace('param1', serviceId)
       .replace('param2', action);
-    return this.http.get<JSONService>(actionURL);
+    return toPromise(this.http.get<JSONService>(actionURL));
   }
 
-  transportUrl(url: string): Observable<JSONTransportURLService> {
+  transportUrl(url: string): Promise<JSONTransportURLService> {
-    return this.http.get<JSONTransportURLService>(url);
+    return toPromise(this.http.get<JSONTransportURLService>(url));
   }
 
-  updateTransportTicket(ticketId: string, scrambler: string, username: string, password: string, domain: string): Observable<any> {
+  updateTransportTicket(
+    ticketId: string,
+    scrambler: string,
+    username: string,
+    password: string,
+    domain: string
+  ): Promise<any> {
     const url = this.config.urls.updateTransportTicket
-        .replace('param1', ticketId)
+      .replace('param1', ticketId)
-        .replace('param2', scrambler);
+      .replace('param2', scrambler);
-    return this.http.post<any>(url, {
+    return toPromise(
-      username,
+      this.http.post<any>(url, {
-      password,
+        username,
-      domain,
+        password,
-    });
+        domain,
+      })
+    );
   }
 
   /* Images & static related */
@@ -149,15 +160,17 @@ export class UDSApiService implements UDSApiServiceType {
   /**
    * Gets services information
    */
-  getServicesInformation(): Observable<JSONServicesInformation> {
+  getServicesInformation(): Promise<JSONServicesInformation> {
-    return this.http.get<JSONServicesInformation>(this.config.urls.services);
+    return toPromise(this.http.get<JSONServicesInformation>(this.config.urls.services));
   }
 
   /**
    * Gets error string from a code
    */
   getErrorInformation(errorCode: string): Observable<JSONErrorInformation> {
-    return this.http.get<JSONErrorInformation>(this.config.urls.error.replace('9999', errorCode));
+    return this.http.get<JSONErrorInformation>(
+      this.config.urls.error.replace('9999', errorCode)
+    );
   }
 
   /**
@@ -206,5 +219,4 @@ export class UDSApiService implements UDSApiServiceType {
     });
     body.classList.add(dark ? DARK_THEME : LIGHT_THEME);
   }
-
 }