Better connection handling (#1117)

* wait for port 5000.

* wait longer for script

helper/listener.js

@@ -3,6 +3,7 @@
 const exec = require('child_process').exec;
 const url = require('url');
 const path = require('path');
+const waitPort = require('wait-port');
 
 const sendCustomStyles = require('./styles');
 const { downloadUpdate, sendVersionInfo } = require('./update');
@@ -59,7 +60,27 @@ function activateDiscoverListener(ipcMain, window) {
   });
 }
 
+function activatePortListener(ipcMain, window) {
+  ipcMain.on('checkOctoprintPort', (_, hostInfo) => {
+    const waitPortParams = {
+      host: hostInfo.host,
+      port: hostInfo.port,
+      output: 'silent',
+      timeout: 60000,
+    };
+
+    waitPort(waitPortParams)
+      .then(open => {
+        window.webContents.send('octoprintReady', open);
+      })
+      .catch(error => {
+        window.webContents.send('waitPortError', error);
+      });
+  });
+}
+
 function activateListeners(ipcMain, window, app, dev) {
+  activatePortListener(ipcMain, window);
   activateAppInfoListener(ipcMain, window, app);
   activateScreenSleepListener(ipcMain);
   activateReloadListener(ipcMain, window, dev);

package.json

@@ -94,6 +94,7 @@
     "rxjs": "~6.6.3",
     "tslib": "^2.0.3",
     "v8-compile-cache": "^2.1.1",
+    "wait-port": "^0.2.9",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {

src/app/app.component.html

@@ -2,7 +2,11 @@
 <div class="container">
   <div *ngIf="!activated">
     <img src="assets/icon/icon-main.svg" class="splash-screen__icon-small" />
-    <span class="splash-screen__text loading-dots">connecting</span>
+    <span
+      class="splash-screen__text"
+      [ngClass]="{ 'loading-dots': status === 'connecting' || status === 'initializing' }"
+      >{{ status }}</span
+    >
   </div>
   <router-outlet (activate)="activated = true"></router-outlet>
 </div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, NgZone, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import _ from 'lodash';
 import { ElectronService } from 'ngx-electron';
@@ -30,15 +30,18 @@ export class AppComponent implements OnInit {
     private notificationService: NotificationService,
     private router: Router,
     private electronService: ElectronService,
+    private changeDetector: ChangeDetectorRef,
+    private ngZone: NgZone,
   ) {}
 
   public activated = false;
+  public status = 'connecting';
 
   public ngOnInit(): void {
     this.initialize();
   }
 
-  private async initialize(): Promise<void> {
+  private initialize(): void {
     if (!this.electronService.isElectronApp) {
       this.notificationService.setWarning(
         'Non electron environment detected!',
@@ -48,33 +51,9 @@ export class AppComponent implements OnInit {
     if (this.configService && this.configService.isInitialized()) {
       if (this.configService.isLoaded()) {
         if (this.configService.isValid()) {
-          this.octoprintScriptService
-            .initialize(this.configService.getURL(''))
-            .then(() => {
-              this.octoprintScriptService.authenticate(this.configService.getAccessKey());
-              if (this.configService.isTouchscreen()) {
-                this.router.navigate(['/main-screen']);
-              } else {
-                this.router.navigate(['/main-screen-no-touch']);
-              }
-            })
-            .catch(() => {
-              this.notificationService.setError(
-                "Can't get OctoPrint script!",
-                'Please restart your machine. If the error persists open a new issue on GitHub.',
-              );
-            });
+          this.waitForOctoprint();
         } else {
-          if (_.isEqual(this.configService.getErrors(), this.service.getUpdateError())) {
-            if (this.service.autoFixError()) {
-              this.initialize();
-            } else {
-              this.configService.setUpdate();
-              this.router.navigate(['/no-config']);
-            }
-          } else {
-            this.router.navigate(['/invalid-config']);
-          }
+          this.checkInvalidConfig();
         }
       } else {
         this.router.navigate(['/no-config']);
@@ -83,4 +62,72 @@ export class AppComponent implements OnInit {
       setTimeout(this.initialize.bind(this), 1000);
     }
   }
+
+  private checkInvalidConfig() {
+    if (_.isEqual(this.configService.getErrors(), this.service.getUpdateError())) {
+      if (this.service.autoFixError()) {
+        this.initialize();
+      } else {
+        this.configService.setUpdate();
+        this.router.navigate(['/no-config']);
+      }
+    } else {
+      this.router.navigate(['/invalid-config']);
+    }
+  }
+
+  private waitForOctoprint() {
+    this.electronService.ipcRenderer.on('octoprintReady', (_, octoprintReady: boolean) => {
+      if (octoprintReady) {
+        this.initializeOctoprintService();
+        this.status = 'initializing';
+      } else {
+        this.notificationService
+          .setWarning(
+            'Connection to OctoPrint timed out!',
+            'Make sure that OctoPrint is up and running, then close this card to try again.',
+          )
+          .then(this.checkOctoprintPort.bind(this));
+        this.status = 'no connection';
+      }
+      this.changeDetector.detectChanges();
+    });
+
+    this.electronService.ipcRenderer.on('waitPortError', (_, error: Error) => {
+      this.notificationService.setError('System Error - please restart', error.message);
+    });
+
+    this.checkOctoprintPort();
+  }
+
+  private checkOctoprintPort() {
+    this.status = 'connecting';
+    const urlNoProtocol = this.configService.getURL('').split('//')[1];
+    this.electronService.ipcRenderer.send('checkOctoprintPort', {
+      host: urlNoProtocol.split(':')[0],
+      port: Number(urlNoProtocol.split(':')[1].split('/')[0]),
+    });
+    this.changeDetector.detectChanges();
+  }
+
+  private initializeOctoprintService() {
+    this.octoprintScriptService
+      .initialize(this.configService.getURL(''))
+      .then(() => {
+        this.octoprintScriptService.authenticate(this.configService.getAccessKey());
+        this.ngZone.run(() => {
+          if (this.configService.isTouchscreen()) {
+            this.router.navigate(['/main-screen']);
+          } else {
+            this.router.navigate(['/main-screen-no-touch']);
+          }
+        });
+      })
+      .catch(() => {
+        this.notificationService.setError(
+          "Can't get OctoPrint script!",
+          'Please restart your machine. If the error persists open a new issue on GitHub.',
+        );
+      });
+  }
 }

src/app/app.service.ts

@@ -83,11 +83,11 @@ export class AppService {
   }
 
   public turnDisplayOff(): void {
-    this.electronService.ipcRenderer.send('screenSleep', '');
+    this.electronService.ipcRenderer.send('screenSleep');
   }
 
   public turnDisplayOn(): void {
-    this.electronService.ipcRenderer.send('screenWakeup', '');
+    this.electronService.ipcRenderer.send('screenWakeup');
   }
 
   public getUpdateError(): string[] {

src/app/config/no-config/no-config.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { ElectronService } from 'ngx-electron';
 import { NotificationService } from 'src/app/notification/notification.service';
@@ -36,6 +36,7 @@ export class NoConfigComponent implements OnInit {
     private notificationService: NotificationService,
     private electronService: ElectronService,
     private octoprintScriptService: OctoprintScriptService,
+    private ngZone: NgZone,
   ) {
     this.configUpdate = this.configService.isUpdate();
     if (this.configUpdate) {
@@ -50,7 +51,9 @@ export class NoConfigComponent implements OnInit {
     this.changeProgress();
 
     this.electronService.ipcRenderer.on('discoveredNodes', (_, nodes: OctoprintNodes) => {
-      this.octoprintNodes = nodes;
+      this.ngZone.run(() => {
+        this.octoprintNodes = nodes;
+      });
     });
   }
 
@@ -61,6 +64,7 @@ export class NoConfigComponent implements OnInit {
       const searching = document.querySelector('.no-config__discovered-instances__searching');
       if (searching) {
         searching.innerHTML = 'no instances found.';
+        searching.classList.remove('loading-dots');
       }
     }, 10000);
   }
@@ -96,7 +100,7 @@ export class NoConfigComponent implements OnInit {
   }
 
   public loginWithOctoPrintUI(): void {
-    this.notificationService.setUpdate(
+    this.notificationService.setNotification(
       'Login request send!',
       'Please confirm the request via the popup in the OctoPrint WebUI.',
     );

src/app/notification/notification.component.html

@@ -5,5 +5,5 @@
 >
   <span class="notification__heading">{{ notification.heading }}</span>
   <span class="notification__text">{{ notification.text }}</span>
-  <span class="notification__close">tap this card to close it ...</span>
+  <span class="notification__close">tap this card to close it</span>
 </div>

src/app/notification/notification.component.scss

@@ -47,7 +47,7 @@
       border-left: 1vw solid #fbc531;
     }
 
-    &-update {
+    &-notification {
       border-left: 1vw solid #44bd32;
     }
   }

src/app/notification/notification.component.ts

@@ -15,6 +15,7 @@ export class NotificationComponent implements OnDestroy {
     heading: '',
     text: '',
     type: '',
+    closed: null,
   };
   public show = false;
 
@@ -28,6 +29,9 @@ export class NotificationComponent implements OnDestroy {
 
   public hideNotification(): void {
     this.show = false;
+    if (this.notification.closed) {
+      this.notification.closed();
+    }
   }
 
   private setNotification(notification: Notification | 'close'): void {