Local settings and sentry

package.json

@@ -36,11 +36,13 @@
     "@angular/platform-browser-dynamic": "^5.2.1",
     "@angular/router": "^5.2.1",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
+    "angular-persistence": "^1.0.1",
     "angular2-hotkeys": "^2.0.4",
     "angular2-indexeddb": "^1.2.2",
     "bootstrap": "4.0.0",
     "core-js": "^2.4.1",
     "d3-ng2-service": "^1.23.3",
+    "electron-settings": "^3.1.4",
     "npm-check-updates": "^2.13.0",
     "raven-js": "^3.24.0",
     "rxjs": "^5.4.1",

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { ProjectMapComponent } from './project-map/project-map.component';
 import { ServersComponent } from "./servers/servers.component";
 import { ProjectsComponent } from "./projects/projects.component";
 import { DefaultLayoutComponent } from "./default-layout/default-layout.component";
+import { SettingsComponent } from "./settings/settings.component";
 
 
 const routes: Routes = [
@@ -14,7 +15,8 @@ const routes: Routes = [
     children: [
       { path: '', redirectTo: 'servers', pathMatch: 'full'},
       { path: 'servers', component: ServersComponent },
-      { path: 'server/:server_id/projects', component: ProjectsComponent }
+      { path: 'server/:server_id/projects', component: ProjectsComponent },
+      { path: 'settings', component: SettingsComponent },
     ]
   },
   { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent },

src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import {Http} from "@angular/http";
-import {MatIconRegistry} from "@angular/material";
-import {DomSanitizer} from "@angular/platform-browser";
+import { MatIconRegistry } from "@angular/material";
+import { DomSanitizer } from "@angular/platform-browser";
 
 @Component({
   selector: 'app-root',
@@ -11,7 +10,7 @@ import {DomSanitizer} from "@angular/platform-browser";
   ]
 })
 export class AppComponent implements OnInit {
-    constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer) {
+    constructor(iconReg: MatIconRegistry, sanitizer: DomSanitizer) {
       iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
   }
 

src/app/app.module.ts

@@ -1,7 +1,6 @@
 import * as Raven from 'raven-js';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, ErrorHandler } from '@angular/core';
-import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 import { CdkTableModule } from "@angular/cdk/table";
 import { HttpClientModule } from '@angular/common/http';
@@ -19,7 +18,10 @@ import {
   MatDialogModule,
   MatProgressBarModule,
   MatProgressSpinnerModule,
-  MatSnackBarModule
+  MatSnackBarModule,
+  MatCheckboxModule,
+  MatListModule,
+  MatExpansionModule,
 } from '@angular/material';
 
 import { D3Service } from 'd3-ng2-service';
@@ -27,6 +29,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { HotkeyModule } from 'angular2-hotkeys';
 
+import { PersistenceModule } from 'angular-persistence';
+
 import { AppRoutingModule } from './app-routing.module';
 
 import { VersionService } from './shared/services/version.service';
@@ -66,21 +70,15 @@ import { DrawingsDataSource } from "./cartography/shared/datasources/drawings-da
 import { MoveLayerDownActionComponent } from './shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component';
 import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component';
 import { ProjectMapShortcutsComponent } from './project-map/project-map-shortcuts/project-map-shortcuts.component';
+import { SettingsComponent } from './settings/settings.component';
+import { SettingsService } from "./shared/services/settings.service";
 
-import { environment } from "../environments/environment";
+import { RavenErrorHandler } from "./raven-error-handler";
 
 Raven
   .config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726')
   .install();
 
-export class RavenErrorHandler implements ErrorHandler {
-  handleError(err:any) : void {
-    console.error(err.originalError || err);
-    if (environment.production) {
-      Raven.captureException(err.originalError || err);
-    }
-  }
-}
 
 
 @NgModule({
@@ -102,11 +100,11 @@ export class RavenErrorHandler implements ErrorHandler {
     MoveLayerDownActionComponent,
     MoveLayerUpActionComponent,
     ProjectMapShortcutsComponent,
+    SettingsComponent,
   ],
   imports: [
     NgbModule.forRoot(),
     BrowserModule,
-    HttpModule,
     HttpClientModule,
     AppRoutingModule,
     FormsModule,
@@ -123,11 +121,16 @@ export class RavenErrorHandler implements ErrorHandler {
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatSnackBarModule,
+    MatCheckboxModule,
+    MatListModule,
+    MatExpansionModule,
     CdkTableModule,
     CartographyModule,
-    HotkeyModule.forRoot()
+    HotkeyModule.forRoot(),
+    PersistenceModule
   ],
   providers: [
+    SettingsService,
     { provide: ErrorHandler, useClass: RavenErrorHandler },
     D3Service,
     VersionService,

src/app/default-layout/default-layout.component.css

@@ -58,3 +58,10 @@ main {
   text-align: right;
 }
 
+.fill-space {
+  flex: 1 1 auto;
+}
+
+.example-container > * {
+  width: 100%;
+}

src/app/default-layout/default-layout.component.html

@@ -5,6 +5,12 @@
     </button>
 
     <button mat-button routerLink="/servers" >Servers</button>
+
+    <span class="fill-space"></span>
+
+    <button mat-button routerLink="/settings" >
+      <mat-icon>settings</mat-icon>
+    </button>
   </mat-toolbar>
 </header>
 

src/app/raven-error-handler.spec.ts

@@ -0,0 +1,43 @@
+import { TestBed } from '@angular/core/testing';
+import { PersistenceService } from "angular-persistence";
+
+import * as Raven from 'raven-js';
+
+import { SettingsService } from "./shared/services/settings.service";
+import { RavenErrorHandler } from "./raven-error-handler";
+import { environment } from "../environments/environment";
+
+
+describe('RavenErrorHandler', () => {
+  let handler: RavenErrorHandler;
+  let settingsService: SettingsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SettingsService, PersistenceService, RavenErrorHandler]
+    });
+
+    settingsService = TestBed.get(SettingsService);
+    handler = TestBed.get(RavenErrorHandler);
+  });
+
+  it('should create', () => {
+    expect(handler).toBeTruthy();
+  });
+
+  it('should handle error', () => {
+    settingsService.set('crash_reports', true);
+    const error = new Error("My error");
+    const captureException = spyOn(Raven, 'captureException');
+    spyOn(environment, 'production').and.returnValue(true);
+    handler.handleError(error);
+    expect(captureException).toHaveBeenCalledWith(error);
+  });
+
+  it('should not handle when not in production', () => {
+    const captureException = spyOn(Raven, 'captureException');
+    spyOnProperty(environment, 'production').and.returnValue(false);
+    handler.handleError(new Error("My error"));
+    expect(captureException).not.toHaveBeenCalled();
+  });
+});

src/app/raven-error-handler.ts

@@ -0,0 +1,20 @@
+import * as Raven from 'raven-js';
+
+import { ErrorHandler, Inject, Injector } from "@angular/core";
+
+import { SettingsService } from "./shared/services/settings.service";
+import { environment } from "../environments/environment";
+
+
+export class RavenErrorHandler implements ErrorHandler {
+  constructor(@Inject(Injector) private injector: Injector) {}
+
+  handleError(err: any): void {
+    const settingsService: SettingsService = this.injector.get(SettingsService);
+    console.error(err.originalError || err);
+
+    if (environment.production && settingsService.get('crash_reports')) {
+      Raven.captureException(err.originalError || err);
+    }
+  }
+}

src/app/settings/settings.component.html

@@ -0,0 +1,39 @@
+<div class="content">
+  <div class="default-header">
+    <h1>Settings</h1>
+  </div>
+  <div class="default-content">
+
+    <!--<div class="example-container mat-elevation-z8">-->
+      <!--<section class="example-section">-->
+        <!--<mat-list>-->
+         <!--<mat-list-item>-->
+           <!--<mat-checkbox class="example-margin" [(ngModel)]="settings.crash_report">Send anonymous crash reports</mat-checkbox>-->
+         <!--</mat-list-item>-->
+        <!--</mat-list>-->
+      <!--</section>-->
+    <!--</div>-->
+
+    <div class="example-container mat-elevation-z8">
+      <mat-accordion>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Local settings
+            </mat-panel-title>
+            <mat-panel-description>
+              Customize your local settings
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+
+          <mat-checkbox class="example-margin" [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox>
+
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
+
+    <div class="buttons-bar">
+      <button mat-raised-button color="primary" (click)="save()">Save settings</button>
+    </div>
+  </div>
+</div>

src/app/settings/settings.component.spec.ts

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+import { MatCheckboxModule, MatExpansionModule } from "@angular/material";
+import { FormsModule } from "@angular/forms";
+import { SettingsService } from "../shared/services/settings.service";
+import { PersistenceModule } from "angular-persistence";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatExpansionModule, MatCheckboxModule, FormsModule,
+        PersistenceModule, BrowserAnimationsModule ],
+      providers: [ SettingsService ],
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/settings/settings.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { SettingsService } from "../shared/services/settings.service";
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+  settings = { ...SettingsService.DEFAULTS };
+
+  constructor(private settingsService: SettingsService) { }
+
+  ngOnInit() {
+    this.settings = this.settingsService.getAll();
+  }
+
+  save() {
+    this.settingsService.setAll(this.settings);
+  }
+}

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

@@ -0,0 +1,61 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { PersistenceService, StorageType } from "angular-persistence";
+
+import { SettingsService } from './settings.service';
+
+
+describe('SettingsService', () => {
+  let persistenceService: PersistenceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SettingsService, PersistenceService]
+    });
+
+    persistenceService = TestBed.get(PersistenceService);
+  });
+
+  afterEach(() => {
+    persistenceService.removeAll(StorageType.LOCAL);
+  });
+
+  it('should be created', inject([SettingsService], (service: SettingsService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should set value', inject([SettingsService], (service: SettingsService) => {
+    service.set('crash_reports', false);
+    expect(service.get('crash_reports')).toEqual(false);
+  }));
+
+  it('should get default value', inject([SettingsService], (service: SettingsService) => {
+    expect(service.get('crash_reports')).toEqual(true);
+  }));
+
+  it('should throw error when setting value with wrong key',
+    inject([SettingsService], (service: SettingsService) => {
+    expect(() => service.set('test', false)).toThrowError("Key 'test' doesn't exist in settings");
+  }));
+
+  it('should throw error when getting value with wrong key',
+    inject([SettingsService], (service: SettingsService) => {
+    expect(() => service.get('test')).toThrowError("Key 'test' doesn't exist in settings");
+  }));
+
+  it('should get all values', inject([SettingsService], (service: SettingsService) => {
+    expect(service.getAll()).toEqual({
+      'crash_reports': true
+    });
+  }));
+
+  it('should set all values', inject([SettingsService], (service: SettingsService) => {
+    const settings = {
+      'crash_reports': false
+    };
+    service.setAll(settings)
+
+    expect(service.getAll()).toEqual({
+      'crash_reports': false
+    });
+  }));
+});

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

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { PersistenceService, StorageType } from "angular-persistence";
+
+@Injectable()
+export class SettingsService {
+  static DEFAULTS = {
+    'crash_reports': true
+  };
+
+  constructor(private persistenceService: PersistenceService) { }
+
+  get<T>(key: string) {
+    if (!(key in SettingsService.DEFAULTS)) {
+      throw Error(`Key '${key}' doesn't exist in settings`);
+    }
+    const value = this.persistenceService.get(key, StorageType.LOCAL) as T;
+    if (typeof value === 'undefined') {
+      return SettingsService.DEFAULTS[key];
+    }
+    return value;
+  }
+
+  set<T>(key: string, value: T): void {
+    if (!(key in SettingsService.DEFAULTS)) {
+      throw Error(`Key '${key}' doesn't exist in settings`);
+    }
+    this.persistenceService.set(key, value, { type: StorageType.LOCAL });
+  }
+
+  getAll() {
+    const settings = { ...SettingsService.DEFAULTS };
+    Object.keys(SettingsService.DEFAULTS).forEach((key) => {
+      settings[key] = this.get(key);
+    });
+    return settings;
+  }
+
+  setAll(settings) {
+    Object.keys(settings).forEach((key) => {
+      this.set(key, settings[key]);
+    });
+  }
+}

yarn.lock

@@ -571,6 +571,10 @@ amqplib@^0.5.2:
     readable-stream "1.x >=1.1.9"
     safe-buffer "^5.0.1"
 
+angular-persistence@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/angular-persistence/-/angular-persistence-1.0.1.tgz#79ffe7317f1f7aed88e69f07705f0ac32ccdb9da"
+
 angular2-hotkeys@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/angular2-hotkeys/-/angular2-hotkeys-2.0.4.tgz#83355f0a65fe484bfdd3d238b6ee96d63526eb91"
@@ -2912,6 +2916,13 @@ electron-publish@20.0.2:
     fs-extra-p "^4.5.0"
     mime "^2.2.0"
 
+electron-settings@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/electron-settings/-/electron-settings-3.1.4.tgz#1b670837fd00626395714210291fb4af8ff52880"
+  dependencies:
+    clone "^2.1.1"
+    jsonfile "^4.0.0"
+
 electron-to-chromium@^1.3.30:
   version "1.3.31"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f"