Distinction between local and remote server; Refactor IP to HOST

src/app/components/project-map/project-map.component.ts

@@ -158,7 +158,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
         nodes.forEach((node: Node) => {
-          node.symbol_url = `http://${this.server.ip}:${this.server.port}/v2/symbols/${node.symbol}/raw`;
+          node.symbol_url = `http://${this.server.host}:${this.server.port}/v2/symbols/${node.symbol}/raw`;
         });
 
         this.nodes = nodes;

src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts

@@ -87,7 +87,7 @@ describe('AddBlankProjectDialogComponent', () => {
     }).compileComponents();
 
     server = new Server();
-    server.ip = 'localhost';
+    server.host = 'localhost';
     server.port = 80;
   }));
 

src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts

@@ -80,7 +80,7 @@ describe('ImportProjectDialogComponent', () => {
     }).compileComponents();
 
     server = new Server();
-    server.ip = 'localhost';
+    server.host = 'localhost';
     server.port = 80;
   }));
 

src/app/components/projects/import-project-dialog/import-project-dialog.component.ts

@@ -138,6 +138,6 @@ export class ImportProjectDialogComponent implements OnInit {
 
   prepareUploadPath(): string {
     const projectName = this.projectNameForm.controls['projectName'].value;
-    return `http://${this.server.ip}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
+    return `http://${this.server.host}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
   }
 }

src/app/components/servers/add-server-dialog.html

@@ -1,7 +1,14 @@
 <h1 mat-dialog-title>Add server</h1>
 <div mat-dialog-content>
   <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.name" placeholder="Name" /> </mat-form-field>
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.ip" placeholder="IP" /> </mat-form-field>
+
+  <mat-form-field>
+    <mat-select placeholder="Location" [(value)]="server.location">
+      <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.host" placeholder="Host" /> </mat-form-field>
   <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.port" placeholder="Port" /> </mat-form-field>
 
   <mat-form-field>

src/app/components/servers/server-discovery/server-discovery.component.html

@@ -1,6 +1,6 @@
 <mat-card class="info" *ngIf="discoveredServer">
   <mat-card-content align="center">
-    We've discovered GNS3 server on <b>{{ discoveredServer.ip }}:{{ discoveredServer.port }}</b
+    We've discovered GNS3 server on <b>{{ discoveredServer.host }}:{{ discoveredServer.port }}</b
     >, would you like to add to the list?
   </mat-card-content>
   <mat-card-actions align="right">

src/app/components/servers/server-discovery/server-discovery.component.spec.ts

@@ -55,12 +55,12 @@ describe('ServerDiscoveryComponent', () => {
       const getVersionSpy = spyOn(mockedVersionService, 'get').and.returnValue(Observable.of(version));
 
       component.isServerAvailable('127.0.0.1', 3080).subscribe(s => {
-        expect(s.ip).toEqual('127.0.0.1');
+        expect(s.host).toEqual('127.0.0.1');
         expect(s.port).toEqual(3080);
       });
 
       const server = new Server();
-      server.ip = '127.0.0.1';
+      server.host = '127.0.0.1';
       server.port = 3080;
 
       expect(getVersionSpy).toHaveBeenCalledWith(server);
@@ -68,7 +68,7 @@ describe('ServerDiscoveryComponent', () => {
 
     it('should throw error once server is not available', () => {
       const server = new Server();
-      server.ip = '127.0.0.1';
+      server.host = '127.0.0.1';
       server.port = 3080;
 
       const getVersionSpy = spyOn(mockedVersionService, 'get').and.returnValue(
@@ -96,13 +96,13 @@ describe('ServerDiscoveryComponent', () => {
 
       spyOn(component, 'isServerAvailable').and.callFake((ip, port) => {
         const server = new Server();
-        server.ip = ip;
+        server.host = ip;
         server.port = port;
         return Observable.of(server);
       });
 
       component.discovery().subscribe(discovered => {
-        expect(discovered[0].ip).toEqual('127.0.0.1');
+        expect(discovered[0].host).toEqual('127.0.0.1');
         expect(discovered[0].port).toEqual(3080);
 
         expect(discovered.length).toEqual(1);
@@ -117,7 +117,7 @@ describe('ServerDiscoveryComponent', () => {
 
     beforeEach(function() {
       server = new Server();
-      (server.ip = '199.111.111.1'), (server.port = 3333);
+      (server.host = '199.111.111.1'), (server.port = 3333);
 
       spyOn(component, 'discovery').and.callFake(() => {
         return Observable.of([server]);
@@ -128,7 +128,7 @@ describe('ServerDiscoveryComponent', () => {
       expect(component.discoveredServer).toBeUndefined();
       component.discoverFirstAvailableServer();
       tick();
-      expect(component.discoveredServer.ip).toEqual('199.111.111.1');
+      expect(component.discoveredServer.host).toEqual('199.111.111.1');
       expect(component.discoveredServer.port).toEqual(3333);
     }));
 
@@ -146,7 +146,7 @@ describe('ServerDiscoveryComponent', () => {
     let server: Server;
     beforeEach(() => {
       server = new Server();
-      (server.ip = '199.111.111.1'), (server.port = 3333);
+      (server.host = '199.111.111.1'), (server.port = 3333);
       component.discoveredServer = server;
     });
 
@@ -155,7 +155,7 @@ describe('ServerDiscoveryComponent', () => {
         component.accept(server);
         tick();
         expect(component.discoveredServer).toBeNull();
-        expect(mockedServerService.servers[0].ip).toEqual('199.111.111.1');
+        expect(mockedServerService.servers[0].host).toEqual('199.111.111.1');
         expect(mockedServerService.servers[0].name).toEqual('199.111.111.1');
         expect(mockedServerService.servers[0].location).toEqual('remote');
       }));

src/app/components/servers/server-discovery/server-discovery.component.ts

@@ -18,7 +18,7 @@ import { ServerDatabase } from '../../../services/server.database';
 export class ServerDiscoveryComponent implements OnInit {
   private defaultServers = [
     {
-      ip: '127.0.0.1',
+      host: '127.0.0.1',
       port: 3080
     }
   ];
@@ -42,7 +42,7 @@ export class ServerDiscoveryComponent implements OnInit {
     ).subscribe(([local, discovered]) => {
       local.forEach(added => {
         discovered = discovered.filter(server => {
-          return !(server.ip == added.ip && server.port == added.port);
+          return !(server.host == added.host && server.port == added.port);
         });
       });
       if (discovered.length > 0) {
@@ -56,7 +56,7 @@ export class ServerDiscoveryComponent implements OnInit {
 
     this.defaultServers.forEach(testServer => {
       queries.push(
-        this.isServerAvailable(testServer.ip, testServer.port).catch(err => {
+        this.isServerAvailable(testServer.host, testServer.port).catch(err => {
           return Observable.of(null);
         })
       );
@@ -72,7 +72,7 @@ export class ServerDiscoveryComponent implements OnInit {
 
   isServerAvailable(ip: string, port: number): Observable<Server> {
     const server = new Server();
-    server.ip = ip;
+    server.host = ip;
     server.port = port;
     return this.versionService.get(server).flatMap((version: Version) => Observable.of(server));
   }
@@ -83,7 +83,7 @@ export class ServerDiscoveryComponent implements OnInit {
 
   accept(server: Server) {
     if (server.name == null) {
-      server.name = server.ip;
+      server.name = server.host;
     }
 
     server.location = 'remote';

src/app/components/servers/servers.component.html

@@ -17,9 +17,14 @@
           >
         </ng-container>
 
+        <ng-container matColumnDef="location">
+          <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.location }} </mat-cell>
+        </ng-container>
+
         <ng-container matColumnDef="ip">
-          <mat-header-cell *matHeaderCellDef> IP </mat-header-cell>
-          <mat-cell *matCellDef="let row"> {{ row.ip }} </mat-cell>
+          <mat-header-cell *matHeaderCellDef> Host </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.host }} </mat-cell>
         </ng-container>
 
         <ng-container matColumnDef="port">

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

@@ -8,6 +8,7 @@ import { map } from 'rxjs/operators';
 import { Server } from '../../models/server';
 import { ServerService } from '../../services/server.service';
 import { ServerDatabase } from '../../services/server.database';
+import { ElectronService } from 'ngx-electron';
 
 @Component({
   selector: 'app-server-list',
@@ -16,7 +17,7 @@ import { ServerDatabase } from '../../services/server.database';
 })
 export class ServersComponent implements OnInit {
   dataSource: ServerDataSource;
-  displayedColumns = ['id', 'name', 'ip', 'port', 'actions'];
+  displayedColumns = ['id', 'name', 'location', 'ip', 'port', 'actions'];
 
   constructor(
     private dialog: MatDialog,
@@ -61,11 +62,34 @@ export class AddServerDialogComponent implements OnInit {
   server: Server = new Server();
 
   authorizations = [{ key: 'none', name: 'No authorization' }, { key: 'basic', name: 'Basic authorization' }];
+  locations = [];
 
-  constructor(public dialogRef: MatDialogRef<AddServerDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+  constructor(
+    public dialogRef: MatDialogRef<AddServerDialogComponent>,
+    private electronService: ElectronService,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
+
+  getLocations() {
+    let locations = [];
+    if(this.electronService.isElectronApp) {
+      locations.push({ key: 'local', name: 'Local' });
+    }
+    locations.push({ key: 'remote', name: 'Remote' });
+    return locations
+  }
+
+  getDefaultLocation() {
+    if(this.electronService.isElectronApp) {
+      return 'local';
+    }
+    return 'remote';
+  }
 
   ngOnInit() {
+    this.locations = this.getLocations();
     this.server.authorization = 'none';
+    this.server.location = this.getDefaultLocation();
   }
 
   onAddClick(): void {

src/app/models/server.ts

@@ -1,10 +1,13 @@
 export type ServerAuthorization = 'basic' | 'none';
+export type ServerLocation = 'local' | 'remote';
 
 export class Server {
   id: number;
   name: string;
-  ip: string;
+  location: ServerLocation;
+  host: string;
   port: number;
+  path: string;
   authorization: ServerAuthorization;
   login: string;
   password: string;

src/app/services/http-server.service.spec.ts

@@ -218,7 +218,7 @@ describe('HttpServer', () => {
   });
 
   it('should make local call when ip and port is not defined', () => {
-    server.ip = null;
+    server.host = null;
     server.port = null;
 
     service

src/app/services/http-server.service.ts

@@ -164,8 +164,8 @@ export class HttpServer {
   }
 
   private getOptionsForServer<T extends HeadersOptions>(server: Server, url: string, options: T) {
-    if (server.ip && server.port) {
-      url = `http://${server.ip}:${server.port}/v2${url}`;
+    if (server.host && server.port) {
+      url = `http://${server.host}:${server.port}/v2${url}`;
     } else {
       url = `/v2${url}`;
     }

src/app/services/project.service.ts

@@ -50,7 +50,7 @@ export class ProjectService {
   }
 
   notificationsPath(server: Server, project_id: string): string {
-    return `ws://${server.ip}:${server.port}/v2/projects/${project_id}/notifications/ws`;
+    return `ws://${server.host}:${server.port}/v2/projects/${project_id}/notifications/ws`;
   }
 
   isReadOnly(project: Project) {

src/app/services/server.service.spec.ts

@@ -149,7 +149,7 @@ describe('ServerService', () => {
 
     const expectedServer = new Server();
     expectedServer.name = 'local';
-    expectedServer.ip = 'hostname';
+    expectedServer.host = 'hostname';
     expectedServer.port = 9999;
     expectedServer.is_local = true;
 
@@ -162,7 +162,7 @@ describe('ServerService', () => {
   it('should update local server when found', done => {
     const server = new Server();
     server.name = 'local';
-    server.ip = 'hostname';
+    server.host = 'hostname';
     server.port = 9999;
     server.is_local = true;
 
@@ -170,7 +170,7 @@ describe('ServerService', () => {
     spyOn(service, 'update').and.returnValue(Promise.resolve(new Server()));
 
     service.getLocalServer('hostname-2', 11111).then(() => {
-      server.ip = 'hostname-2';
+      server.host = 'hostname-2';
       server.port = 11111;
 
       expect(service.update).toHaveBeenCalledWith(server);

src/app/services/server.service.ts

@@ -55,12 +55,12 @@ export class ServerService {
     return this.onReady(() => this.indexedDbService.get().delete(this.tablename, server.id));
   }
 
-  public getLocalServer(ip: string, port: number) {
+  public getLocalServer(host: string, port: number) {
     const promise = new Promise((resolve, reject) => {
       this.findAll().then((servers: Server[]) => {
         const local = servers.find(server => server.is_local);
         if (local) {
-          local.ip = ip;
+          local.host = host;
           local.port = port;
           this.update(local).then(updated => {
             resolve(updated);
@@ -68,7 +68,7 @@ export class ServerService {
         } else {
           const server = new Server();
           server.name = 'local';
-          server.ip = ip;
+          server.host = host;
           server.port = port;
           server.is_local = true;
           this.create(server).then(created => {

src/app/services/template.service.spec.ts

@@ -29,7 +29,7 @@ describe('TemplateService', () => {
 
   it('should ask for the list from server', () => {
     const server = new Server();
-    server.ip = '127.0.0.1';
+    server.host = '127.0.0.1';
     server.port = 3080;
     server.authorization = 'none';
 

src/app/services/testing.ts

@@ -2,7 +2,7 @@ import { Server } from '../models/server';
 
 export function getTestServer(): Server {
   const server = new Server();
-  server.ip = '127.0.0.1';
+  server.host = '127.0.0.1';
   server.port = 3080;
   server.authorization = 'none';
   return server;