ing

src/app/component/target/display/display.component.html

@@ -16,3 +16,8 @@
   </p-sidebar>
 
 </div>
+
+<p-dialog [showHeader]="false" [(visible)]="displayDiscoveryStopping" [modal]="true" [responsive]="false" [width]="300"
+  [height]="100" [minY]="70" [closeOnEscape]="false" [closable]="false">
+  <div class="ui-dialog-text-center">Discovery is being stopped...</div>
+</p-dialog>

src/app/component/target/display/display.component.scss

@@ -19,3 +19,8 @@
 /deep/ .ui-panel .ui-panel-content {
   padding: .6em .75em;
 }
+
+.ui-dialog-text-center {
+  padding-top: 50px;
+  text-align: center;
+}

src/app/component/target/display/display.component.ts

@@ -13,7 +13,7 @@ import { map, catchError, take, tap } from 'rxjs/operators';
 
 import { Port, Service, Host } from '@overflow/model/discovery';
 
-import { TargetDisplayType } from '../../../core/type';
+import { TargetDisplayType, DiscoveryStatusType } from '../../../core/type';
 import * as AppStore from '../../../store';
 import * as TargetStore from '../../../store/target/target';
 
@@ -30,6 +30,9 @@ export class DisplayComponent implements OnInit, AfterContentInit, OnDestroy {
   selectedTargetSubscription: Subscription | null;
   selectedTarget: { group: string, target: Host | Port | Service } | null;
 
+  displayDiscoveryStopping: boolean;
+  discoveryStatusSubscription: Subscription | null;
+
   constructor(
     private store: Store<any>,
     private changeDetector: ChangeDetectorRef,
@@ -56,6 +59,25 @@ export class DisplayComponent implements OnInit, AfterContentInit, OnDestroy {
       }),
     ).subscribe();
 
+    this.discoveryStatusSubscription = this.store.pipe(
+      select(AppStore.DiscoverySelector.RequestSelector.selectDiscoveryStatus)
+    ).pipe(
+      map((_discoveryStatus) => {
+        switch (_discoveryStatus) {
+          case DiscoveryStatusType.Stopping: {
+            __this.displayDiscoveryStopping = true;
+          }
+            break;
+          default: {
+            __this.displayDiscoveryStopping = false;
+
+          }
+            break;
+        }
+        __this.changeDetector.detectChanges();
+      }),
+    ).subscribe();
+
   }
 
   ngAfterContentInit(): void {
@@ -65,6 +87,9 @@ export class DisplayComponent implements OnInit, AfterContentInit, OnDestroy {
     if (null !== this.selectedTargetSubscription) {
       this.selectedTargetSubscription.unsubscribe();
     }
+    if (null !== this.discoveryStatusSubscription) {
+      this.discoveryStatusSubscription.unsubscribe();
+    }
   }
 
   onHideDetail() {

src/app/component/target/display/map.component.ts

@@ -12,7 +12,7 @@ import {
   HostListener
 } from '@angular/core';
 
-import { Observable, of, Subscription, combineLatest } from 'rxjs';
+import { Observable, of, Subscription, combineLatest, Subject } from 'rxjs';
 import { catchError, map, tap, exhaustMap, take, filter } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
 
@@ -28,6 +28,7 @@ import * as TargetStore from '../../../store/target/target';
 import * as UILayoutStore from '../../../store/ui/layout';
 import { DiscoverySession } from '../../../core/discovery/discovery-session';
 import { DiscoveryMessageType } from 'src/app/core/type';
+import { ConfirmationService } from 'primeng/primeng';
 
 export class DisplaySummary {
   totalHosts: number;
@@ -36,10 +37,12 @@ export class DisplaySummary {
   elapsedTime: string;
 
   startDate: Date;
+  stopped: boolean;
 
   hTimer: any;
 
   constructor() {
+    this.stopped = true;
     this.totalHosts = 0;
     this.totalPorts = 0;
     this.totalServices = 0;
@@ -47,6 +50,7 @@ export class DisplaySummary {
   }
 
   start(startDate: Date) {
+    this.stopped = false;
     this.startDate = startDate;
     const __this = this;
     const _startDate = new Date();
@@ -71,6 +75,7 @@ export class DisplaySummary {
   stop(stopDate: Date) {
     clearInterval(this.hTimer);
     this.setElapsedTime(this.startDate, stopDate);
+    this.stopped = true;
   }
 
   increaseHost() {
@@ -127,10 +132,16 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
 
   discoverySubscription: Subscription | null = null;
 
+  private preventBrowserCloseSubject: Subject<void>;
+  private preventBrowserCloseSubscription: Subscription | null = null;
+
   constructor(
     private store: Store<any>,
     private changeDetector: ChangeDetectorRef,
+    private confirmationService: ConfirmationService,
   ) {
+    this.preventBrowserCloseSubject = new Subject<void>();
+
     this.maxScale = 1;
     this.minScale = 0.7;
 
@@ -148,6 +159,14 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
     );
   }
 
+  @HostListener('window:beforeunload', ['$event'])
+  onBeforeUnload($event: Event) {
+    if (null !== this.displaySummary && !this.displaySummary.stopped) {
+      this.preventBrowserCloseSubject.next();
+      $event.returnValue = true;
+    }
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     if (undefined !== this.displayTargetRef) {
@@ -251,6 +270,26 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
       }),
     ).subscribe();
 
+    this.preventBrowserCloseSubscription = this.preventBrowserCloseSubject
+      .pipe(
+        map(() => {
+          this.confirmationService.confirm({
+            message: 'Discovery is in progress.',
+            header: 'Alert',
+            icon: 'pi pi-info-circle',
+            acceptLabel: 'Yes',
+            acceptVisible: true,
+            rejectVisible: false,
+          });
+        }),
+        catchError(error => {
+          console.log(error);
+          alert('An error has occurred.');
+          return of();
+        }),
+      )
+      .subscribe();
+
   }
 
   ngAfterContentInit(): void {
@@ -275,6 +314,9 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
     if (null !== this.selectedTargetSubscription) {
       this.selectedTargetSubscription.unsubscribe();
     }
+    if (null !== this.preventBrowserCloseSubscription) {
+      this.preventBrowserCloseSubscription.unsubscribe();
+    }
   }
 
   initMapDisplay(zone: Zone, hosts: Host[], ports: Port[], services: Service[]) {

src/app/pages/home/home-page.component.html

@@ -21,8 +21,3 @@
 </of-p-div>
 
 <p-confirmDialog></p-confirmDialog>
-
-<p-dialog [showHeader]="false" [(visible)]="stopping" [modal]="true" [responsive]="false" [width]="300" [height]="100"
-  [minY]="70" [closeOnEscape]="false" [closable]="false">
-  <div class="ui-dialog-text-center">Discovery is being stopped...</div>
-</p-dialog>

src/app/pages/home/home-page.component.ts

@@ -1,8 +1,7 @@
 
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef, HostListener } from '@angular/core';
+import { Component, OnInit, OnDestroy, } from '@angular/core';
 
-import { Subject, Subscription, of, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
-import { map, catchError, take, tap } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
@@ -24,62 +23,19 @@ import { DiscoverySession } from '../../core/discovery/discovery-session';
 })
 export class HomePageComponent implements OnInit, OnDestroy {
 
-  blockedDocument = false;
-
-  private preventBrowserCloseSubject: Subject<void>;
-  private preventBrowserCloseSubscription: Subscription;
-
   showWelcomPage$: Observable<boolean>;
 
-  @HostListener('window:beforeunload', ['$event'])
-  onBeforeUnload($event: Event) {
-    // if (null !== this.discoveryRequestID) {
-    //   this.preventBrowserCloseSubject.next();
-    //   $event.returnValue = true;
-    // }
-  }
-
   constructor(
-    private confirmationService: ConfirmationService,
     private probeService: ProbeService,
     private store: Store<any>,
   ) {
-    this.preventBrowserCloseSubject = new Subject<void>();
   }
 
   ngOnInit() {
     this.showWelcomPage$ = this.store.pipe(select(AppStore.EnvironmentSelector.UserSelector.selectShowWelcomPage));
-
-    this.preventBrowserCloseSubscription = this.preventBrowserCloseSubject
-      .pipe(
-        map(() => {
-          this.confirmationService.confirm({
-            message: 'Discovery is in progress.',
-            header: 'Alert',
-            icon: 'pi pi-info-circle',
-            acceptLabel: 'Yes',
-            acceptVisible: true,
-            rejectVisible: false,
-          });
-        }),
-        catchError(error => {
-          console.log(error);
-          alert('An error has occurred.');
-          return of();
-        }),
-      )
-      .subscribe();
   }
 
   ngOnDestroy(): void {
-    this.preventBrowserCloseSubscription.unsubscribe();
-  }
-
-  blockDocument() {
-    this.blockedDocument = true;
-    setTimeout(() => {
-      this.blockedDocument = false;
-    }, 3000);
   }
 
   requestDiscover() {

src/electron/menu/build-default.ts

@@ -49,6 +49,7 @@ export function buildDefaultMenu(
         label: __DARWIN__ ? 'Save…' : 'Save…',
         id: 'save',
         click: emit('save'),
+        enabled: false,
         accelerator: 'CmdOrCtrl+S',
       },
       separator,
@@ -67,7 +68,7 @@ export function buildDefaultMenu(
             enabled: false,
           },
           {
-            label: __DARWIN__ ? 'svg…' : 'svg…',
+            label: __DARWIN__ ? 'SVG…' : 'SVG…',
             id: 'export-svg',
             click: emit('show-export-svg'),
             enabled: false,
@@ -169,6 +170,7 @@ export function buildDefaultMenu(
         id: 'preferences',
         accelerator: 'CmdOrCtrl+,',
         click: emit('show-preferences'),
+        enabled: false,
       },
       {
         label: __DARWIN__ ? 'Language…' : 'Language…',
@@ -177,11 +179,13 @@ export function buildDefaultMenu(
             label: __DARWIN__ ? 'English…' : 'English…',
             id: 'language-english',
             click: emit('change-language-english'),
+            enabled: false,
           },
           {
             label: __DARWIN__ ? 'Korean…' : 'Korean…',
             id: 'language-korean',
             click: emit('change-language-korean'),
+            enabled: false,
           },
         ],
       },