Merge pull request #631 from GNS3/Wizard-with-option-to-configure-gns3vm-(electron-version)

GNS3 - Wizard with option to configure gns3vm (electron version)

src/app/app.module.ts

@@ -256,6 +256,7 @@ import { ConfigDialogComponent } from './components/project-map/context-menu/dia
 import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
 import { Gns3vmService } from './services/gns3vm.service';
 import { ThemeService } from './services/theme.service';
+import { ConfigureGns3VMDialogComponent } from './components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -430,7 +431,8 @@ if (environment.production) {
     AlignVerticallyActionComponent,
     ConfirmationBottomSheetComponent,
     ConfigDialogComponent,
-    Gns3vmComponent
+    Gns3vmComponent,
+    ConfigureGns3VMDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -540,6 +542,7 @@ if (environment.production) {
     InfoDialogComponent,
     ChangeSymbolDialogComponent,
     EditProjectDialogComponent,
+    ConfigureGns3VMDialogComponent,
     ConfiguratorDialogVpcsComponent,
     ConfiguratorDialogEthernetHubComponent,
     ConfiguratorDialogEthernetSwitchComponent,

src/app/components/projects/projects.component.spec.ts

@@ -2,9 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconModule, MatSortModule, MatTableModule, MatTooltipModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatDialogRef, MatDialogContainer, MatBottomSheetModule } from '@angular/material';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
 import { Observable, of } from 'rxjs';
-
 import { ProjectsComponent } from './projects.component';
 import { ServerService } from '../../services/server.service';
 import { MockedServerService } from '../../services/server.service.spec';
@@ -23,6 +21,8 @@ import { ChooseNameDialogComponent } from './choose-name-dialog/choose-name-dial
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { ToasterService } from '../../services/toaster.service';
+import { ElectronService } from 'ngx-electron';
+import { ConfigureGns3VMDialogComponent } from '../servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
 
 describe('ProjectsComponent', () => {
   let component: ProjectsComponent;
@@ -33,8 +33,20 @@ describe('ProjectsComponent', () => {
   let server: Server;
   let progressService: ProgressService;
   let mockedProjectService: MockedProjectService = new MockedProjectService();
+  let electronService;
 
   beforeEach(async(() => {
+    electronService = {
+      isElectronApp: true,
+      remote: {
+        require: (file) => {
+          return {
+            openConsole() {}
+          }
+        }
+      }
+    };
+
     TestBed.configureTestingModule({
       imports: [
         MatTableModule,
@@ -55,12 +67,13 @@ describe('ProjectsComponent', () => {
         { provide: ProjectService, useValue: mockedProjectService },
         { provide: SettingsService, useClass: MockedSettingsService },
         { provide: ToasterService },
+        { provide: ElectronService, useValue: electronService },
         ProgressService
       ],
-      declarations: [ProjectsComponent, ChooseNameDialogComponent, ProjectsFilter],
+      declarations: [ProjectsComponent, ChooseNameDialogComponent, ConfigureGns3VMDialogComponent, ProjectsFilter],
       schemas: [NO_ERRORS_SCHEMA]
     })
-    .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ChooseNameDialogComponent] } })
+    .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ChooseNameDialogComponent, ConfigureGns3VMDialogComponent] } })
     .compileComponents();
 
     serverService = TestBed.get(ServerService);

src/app/components/projects/projects.component.ts

@@ -20,6 +20,8 @@ import { ChooseNameDialogComponent } from './choose-name-dialog/choose-name-dial
 import { NavigationDialogComponent } from './navigation-dialog/navigation-dialog.component';
 import { ConfirmationBottomSheetComponent } from './confirmation-bottomsheet/confirmation-bottomsheet.component';
 import { ToasterService } from '../../services/toaster.service';
+import { ConfigureGns3VMDialogComponent } from '../servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
+import { ElectronService } from 'ngx-electron';
 
 @Component({
   selector: 'app-projects',
@@ -46,7 +48,8 @@ export class ProjectsComponent implements OnInit {
     public dialog: MatDialog,
     private router: Router,
     private bottomSheet: MatBottomSheet,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private electronService: ElectronService
   ) {}
 
   ngOnInit() {
@@ -69,6 +72,22 @@ export class ProjectsComponent implements OnInit {
       });
 
     this.settings = this.settingsService.getAll();
+
+    let gns3vmConfig = localStorage.getItem('gns3vmConfig');
+    if (this.electronService.isElectronApp && gns3vmConfig!=='configured') {
+      const dialogRef = this.dialog.open(ConfigureGns3VMDialogComponent, {
+        width: '350px',
+        height: '120px',
+        autoFocus: false
+      });
+  
+      dialogRef.afterClosed().subscribe((answer: boolean) => {
+        if (answer) {
+          localStorage.setItem('gns3vmConfig', 'configured');
+          this.router.navigate(['/server', this.server.id, 'preferences', 'gns3vm']);
+        }
+      });
+    };
   }
 
   refresh() {

src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.html

@@ -0,0 +1,7 @@
+<span class="message">{{message}}</span>
+<div mat-dialog-actions>
+  <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
+  <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
+    Yes
+  </button>
+</div>

src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'app-configure-gns3-vm-dialog',
+  templateUrl: 'configure-gns3vm-dialog.component.html',
+  styleUrls: ['configure-gns3vm-dialog.component.scss']
+})
+export class ConfigureGns3VMDialogComponent implements OnInit {
+  public message: string = 'Do you want to configure GNS3 VM?';
+  constructor(public dialogRef: MatDialogRef<ConfigureGns3VMDialogComponent>) {}
+
+  ngOnInit() {}
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+  onYesClick(): void {
+    this.dialogRef.close(true);
+  }
+}

src/app/components/servers/servers.component.ts

@@ -1,16 +1,16 @@
 import { Component, Inject, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
 import { Observable, merge, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-
+import { Router } from '@angular/router';
 import { Server } from '../../models/server';
 import { ServerService } from '../../services/server.service';
 import { ServerDatabase } from '../../services/server.database';
 import { AddServerDialogComponent } from './add-server-dialog/add-server-dialog.component';
 import { ServerManagementService } from '../../services/server-management.service';
 
+
 @Component({
   selector: 'app-server-list',
   templateUrl: './servers.component.html',