Introduction of experimental features

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

@@ -224,6 +224,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.selectionManager.subscribe(this.mapChild.graphLayout.getSelectionTool().rectangleSelected)
     );
+
+    this.mapChild.graphLayout.getLinksWidget().getInterfaceLabelWidget().setEnabled(this.project.show_interface_labels);
+    this.mapChild.reload();
   }
 
   onNodeCreation(appliance: Appliance) {

src/app/projects/projects.component.html

@@ -17,7 +17,7 @@
         <ng-container matColumnDef="actions">
           <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
           <mat-cell *matCellDef="let row" style="text-align: right">
-            <button mat-icon-button (click)="delete(row)">
+            <button mat-icon-button (click)="delete(row)" *ngIf="settings.experimental_features">
               <mat-icon aria-label="Delete project">delete</mat-icon>
             </button>
           </mat-cell>

src/app/projects/projects.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { MatSort, MatSortable } from "@angular/material";
 
@@ -9,6 +9,7 @@ import { ServerService } from "../shared/services/server.service";
 import { BehaviorSubject } from "rxjs/BehaviorSubject";
 import { DataSource } from "@angular/cdk/collections";
 import { Observable } from "rxjs/Observable";
+import { SettingsService, Settings } from "../shared/services/settings.service";
 
 
 @Component({
@@ -21,12 +22,15 @@ export class ProjectsComponent implements OnInit {
   projectDatabase = new ProjectDatabase();
   dataSource: ProjectDataSource;
   displayedColumns = ['name', 'actions'];
+  settings: Settings;
 
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(private route: ActivatedRoute,
               private serverService: ServerService,
-              private projectService: ProjectService) {
+              private projectService: ProjectService,
+              private settingsService: SettingsService
+              ) {
 
   }
 
@@ -41,8 +45,8 @@ export class ProjectsComponent implements OnInit {
 
     this.route.paramMap
       .switchMap((params: ParamMap) => {
-        const server_id = parseInt(params.get('server_id'), 10);
+        const server_id = params.get('server_id');
-        return this.serverService.get(server_id);
+        return this.serverService.getLocalOrRemote(server_id);
       })
       .subscribe((server: Server) => {
         this.server = server;
@@ -52,6 +56,8 @@ export class ProjectsComponent implements OnInit {
             this.projectDatabase.addProjects(projects);
           });
       });
+
+    this.settings = this.settingsService.getAll();
   }
 
   delete(project: Project) {

src/app/settings/settings.component.html

@@ -15,7 +15,13 @@
             </mat-panel-description>
           </mat-expansion-panel-header>
 
-          <mat-checkbox class="example-margin" [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox>
+          <div>
+            <mat-checkbox class="example-margin" [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox>
+          </div>
+
+          <div>
+            <mat-checkbox class="example-margin" [(ngModel)]="settings.experimental_features">Enable experimental features (WARNING: IT CAN BREAK YOU LABS!)</mat-checkbox>
+          </div>
 
         </mat-expansion-panel>
       </mat-accordion>

src/app/settings/settings.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { SettingsService } from "../shared/services/settings.service";
+import { ToasterService } from "../shared/services/toaster.service";
 
 @Component({
   selector: 'app-settings',
@@ -9,7 +10,10 @@ import { SettingsService } from "../shared/services/settings.service";
 export class SettingsComponent implements OnInit {
   settings = { ...SettingsService.DEFAULTS };
 
-  constructor(private settingsService: SettingsService) { }
+  constructor(
+    private settingsService: SettingsService,
+    private toaster: ToasterService
+  ) { }
 
   ngOnInit() {
     this.settings = this.settingsService.getAll();
@@ -17,5 +21,6 @@ export class SettingsComponent implements OnInit {
 
   save() {
     this.settingsService.setAll(this.settings);
+    this.toaster.success("Settings have been saved.");
   }
 }

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

@@ -21,6 +21,13 @@ export class ServerService {
       this.indexedDbService.get().getByKey(this.tablename,  id));
   }
 
+  public getLocalOrRemote(id: string) {
+    if (id === 'local') {
+
+    }
+    return this.get(parseInt(id, 10));
+  }
+
   public create(server: Server) {
     return this.onReady(() => {
       const promise = new Promise((resolve, reject) => {

src/app/shared/services/settings.service.spec.ts

@@ -65,11 +65,16 @@ describe('SettingsService', () => {
 
     service.set('crash_reports', true);
     service.subscribe(settings => {
-      changedSettings = settings
+      changedSettings = settings;
     });
     service.set('crash_reports', false);
 
     expect(changedSettings.crash_reports).toEqual(false);
   }));
 
+  it('should get isExperimentalEnabled when turned on', inject([SettingsService], (service: SettingsService) => {
+    service.set('experimental_features', true);
+
+    expect(service.isExperimentalEnabled()).toEqual(true);
+  }));
 });

src/app/shared/services/settings.service.ts

@@ -6,13 +6,15 @@ import { BehaviorSubject } from "rxjs/BehaviorSubject";
 
 export interface Settings {
   crash_reports: boolean;
+  experimental_features: boolean;
 }
 
 
 @Injectable()
 export class SettingsService {
   static DEFAULTS: Settings = {
-    'crash_reports': true
+    'crash_reports': true,
+    'experimental_features': false
   };
 
   private settingsSubject: BehaviorSubject<Settings>;
@@ -54,6 +56,10 @@ export class SettingsService {
     });
   }
 
+  isExperimentalEnabled(): boolean {
+    return this.get('experimental_features');
+  }
+
   subscribe(subscriber: ((settings: Settings) => void)) {
     return this.settingsSubject.subscribe(subscriber);
   }