From 29b6d813addf7c8562b2abf35f23ce22c04380e0 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 10 Apr 2017 15:41:35 +0200
Subject: [PATCH 01/78] NEMEA: submodule for reporter configuration bootstrap

---
 .../exporters_configuration.component.ts      | 20 +++++++++++++++++++
 .../exporters_configuration.html              | 10 ++++++++++
 .../exporters_configuration.scss              |  0
 .../exporters_configuration.service.ts        |  8 ++++++++
 www/src/app/modules/nemea/nemea.component.ts  |  8 ++++++++
 www/src/app/modules/nemea/nemea.module.ts     | 13 ++++++++++--
 6 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 www/src/app/modules/nemea/configuration/exporters_configuration.component.ts
 create mode 100644 www/src/app/modules/nemea/configuration/exporters_configuration.html
 create mode 100644 www/src/app/modules/nemea/configuration/exporters_configuration.scss
 create mode 100644 www/src/app/modules/nemea/configuration/exporters_configuration.service.ts

diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.component.ts b/www/src/app/modules/nemea/configuration/exporters_configuration.component.ts
new file mode 100644
index 0000000..274389a
--- /dev/null
+++ b/www/src/app/modules/nemea/configuration/exporters_configuration.component.ts
@@ -0,0 +1,20 @@
+import { Component, Pipe, PipeTransform } from '@angular/core';
+//import { nConfService } from './exporter_configuration.service';
+
+@Component({
+	selector : 'nemea-exporters-configuration',
+	templateUrl : './exporters_configuration.html',
+	styleUrls : ['./exporters_configuration.scss'],
+	providers : []
+})
+export class nemeaExportersConfigurationComponent {
+
+	constructor() {}
+
+	ngOnInit() {
+	}
+
+	ngOnDestroy() {
+	}
+
+}
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.html b/www/src/app/modules/nemea/configuration/exporters_configuration.html
new file mode 100644
index 0000000..f518bc2
--- /dev/null
+++ b/www/src/app/modules/nemea/configuration/exporters_configuration.html
@@ -0,0 +1,10 @@
+<h2>
+	<a routerLink='/nemea'>
+		<i class="fa fa-chevron-left" aria-hidden="true"></i> Nemea
+	</a>
+</h2>
+
+
+<div id="content">
+    Here should be NEMEA reporter configuration
+</div>
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.scss b/www/src/app/modules/nemea/configuration/exporters_configuration.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.service.ts b/www/src/app/modules/nemea/configuration/exporters_configuration.service.ts
new file mode 100644
index 0000000..cf7470c
--- /dev/null
+++ b/www/src/app/modules/nemea/configuration/exporters_configuration.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class nConfService {
+	constructor(private http : Http) {}	
+}
diff --git a/www/src/app/modules/nemea/nemea.component.ts b/www/src/app/modules/nemea/nemea.component.ts
index 1a61a9b..a444ad7 100644
--- a/www/src/app/modules/nemea/nemea.component.ts
+++ b/www/src/app/modules/nemea/nemea.component.ts
@@ -24,6 +24,14 @@ export class nemeaBase {};
 				</a>
 			</h2>
 		</section>
+
+		<section class="box">
+			<h2>
+				<a routerLink='configuration'>
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Configuration
+				</a>
+			</h2>
+		</section>
 	</section>
 	`
 })
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index ceb9f5c..cd86b0c 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -4,8 +4,9 @@ import { Routes, RouterModule} from '@angular/router';
 import { FormsModule }		from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { nemeaBase, nemeaComponent } from './nemea.component';
-import { nemeaStatusComponent } from './status/nemea_status.component'
-import { EventsComponent } from './events/events.component'
+import { nemeaStatusComponent } from './status/nemea_status.component';
+import { EventsComponent } from './events/events.component';
+import { nemeaExportersConfigurationComponent } from './configuration/exporters_configuration.component';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { IdeaPipe } from './events/idea.pipe';
@@ -49,6 +50,14 @@ const nemeaRoutes : Routes = [
 				data : {
 					role : 10
 				}
+			},
+			{
+				path : 'exporters',
+				component: nemeaExportersConfigurationComponent,
+				canActivate : [AuthGuard],
+				data : {
+					role : 10
+				}
 			}
 		]
 	}

From ecfcc16586abf50ace4a297740125f538ba9d13d Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 13 Apr 2017 09:14:32 +0200
Subject: [PATCH 02/78] NEMEA: Rename exporters to reporters

---
 www/src/app/modules/nemea/nemea.component.ts              | 4 ++--
 www/src/app/modules/nemea/nemea.module.ts                 | 7 ++++---
 .../reporter_conf.component.ts}                           | 8 ++++----
 .../reporter_conf.html}                                   | 0
 .../reporter_conf.scss}                                   | 0
 .../reporter_conf.service.ts}                             | 0
 6 files changed, 10 insertions(+), 9 deletions(-)
 rename www/src/app/modules/nemea/{configuration/exporters_configuration.component.ts => reporter/reporter_conf.component.ts} (53%)
 rename www/src/app/modules/nemea/{configuration/exporters_configuration.html => reporter/reporter_conf.html} (100%)
 rename www/src/app/modules/nemea/{configuration/exporters_configuration.scss => reporter/reporter_conf.scss} (100%)
 rename www/src/app/modules/nemea/{configuration/exporters_configuration.service.ts => reporter/reporter_conf.service.ts} (100%)

diff --git a/www/src/app/modules/nemea/nemea.component.ts b/www/src/app/modules/nemea/nemea.component.ts
index de13933..2764544 100644
--- a/www/src/app/modules/nemea/nemea.component.ts
+++ b/www/src/app/modules/nemea/nemea.component.ts
@@ -27,8 +27,8 @@ export class nemeaBase {};
 
 		<section class="box">
 			<h2>
-				<a routerLink='exporters'>
-					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Configuration
+				<a routerLink='reporters'>
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Reporter Configuration
 				</a>
 			</h2>
 		</section>
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index a61bcbc..2b9c902 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -6,7 +6,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { nemeaBase, nemeaComponent } from './nemea.component';
 import { nemeaStatusComponent } from './status/nemea_status.component';
 import { EventsComponent } from './events/events.component';
-import { nemeaExportersConfigurationComponent } from './configuration/exporters_configuration.component';
+import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { IdeaPipe } from './events/idea.pipe';
@@ -53,8 +53,8 @@ const nemeaRoutes : Routes = [
 				}
 			},
 			{
-				path : 'exporters',
-				component: nemeaExportersConfigurationComponent,
+				path : 'reporters',
+				component: nemeaReporterConfComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 10
@@ -79,6 +79,7 @@ const nemeaRoutes : Routes = [
 		nemeaBase,
 		nemeaComponent,
 		nemeaStatusComponent,
+		nemeaReporterConfComponent,
 		EventsComponent,
 		EventItemComponent,
 		EventDetailComponent],
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.component.ts b/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
similarity index 53%
rename from www/src/app/modules/nemea/configuration/exporters_configuration.component.ts
rename to www/src/app/modules/nemea/reporter/reporter_conf.component.ts
index 274389a..4361fdb 100644
--- a/www/src/app/modules/nemea/configuration/exporters_configuration.component.ts
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
@@ -2,12 +2,12 @@ import { Component, Pipe, PipeTransform } from '@angular/core';
 //import { nConfService } from './exporter_configuration.service';
 
 @Component({
-	selector : 'nemea-exporters-configuration',
-	templateUrl : './exporters_configuration.html',
-	styleUrls : ['./exporters_configuration.scss'],
+	selector : 'nemea-reporter-conf',
+	templateUrl : './reporter_conf.html',
+	styleUrls : ['./reporter_conf.scss'],
 	providers : []
 })
-export class nemeaExportersConfigurationComponent {
+export class nemeaReporterConfComponent {
 
 	constructor() {}
 
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.html b/www/src/app/modules/nemea/reporter/reporter_conf.html
similarity index 100%
rename from www/src/app/modules/nemea/configuration/exporters_configuration.html
rename to www/src/app/modules/nemea/reporter/reporter_conf.html
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.scss b/www/src/app/modules/nemea/reporter/reporter_conf.scss
similarity index 100%
rename from www/src/app/modules/nemea/configuration/exporters_configuration.scss
rename to www/src/app/modules/nemea/reporter/reporter_conf.scss
diff --git a/www/src/app/modules/nemea/configuration/exporters_configuration.service.ts b/www/src/app/modules/nemea/reporter/reporter_conf.service.ts
similarity index 100%
rename from www/src/app/modules/nemea/configuration/exporters_configuration.service.ts
rename to www/src/app/modules/nemea/reporter/reporter_conf.service.ts

From 4d53863e648a32d0fa24ff338d01ce0e7445cf2a Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 13 Apr 2017 09:41:34 +0200
Subject: [PATCH 03/78] NEMEA: symlink for reporter module

---
 api/liberouterapi/modules/nemea-reporter-rest | 1 +
 1 file changed, 1 insertion(+)
 create mode 120000 api/liberouterapi/modules/nemea-reporter-rest

diff --git a/api/liberouterapi/modules/nemea-reporter-rest b/api/liberouterapi/modules/nemea-reporter-rest
new file mode 120000
index 0000000..36cfd0b
--- /dev/null
+++ b/api/liberouterapi/modules/nemea-reporter-rest
@@ -0,0 +1 @@
+../../../modules/Nemea-Dashboard/api/modules/nemea/reporter-rest
\ No newline at end of file

From dab49143b4d7041a8a6558791c70465ee6adc2b9 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 13 Apr 2017 14:48:34 +0200
Subject: [PATCH 04/78] Reporter service with dummy data and methods

---
 .../nemea/reporter/reporter.service.spec.ts   | 16 ++++
 .../nemea/reporter/reporter.service.ts        | 85 +++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 www/src/app/modules/nemea/reporter/reporter.service.spec.ts
 create mode 100644 www/src/app/modules/nemea/reporter/reporter.service.ts

diff --git a/www/src/app/modules/nemea/reporter/reporter.service.spec.ts b/www/src/app/modules/nemea/reporter/reporter.service.spec.ts
new file mode 100644
index 0000000..f7d207d
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { ReporterService } from './reporter.service';
+
+describe('ReporterService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ReporterService]
+    });
+  });
+
+  it('should ...', inject([ReporterService], (service: ReporterService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/www/src/app/modules/nemea/reporter/reporter.service.ts b/www/src/app/modules/nemea/reporter/reporter.service.ts
new file mode 100644
index 0000000..39eebd8
--- /dev/null
+++ b/www/src/app/modules/nemea/reporter/reporter.service.ts
@@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+let test_conf = [["hoststats2idea", {"idx": 12, "status": "running", "CPU-u": 0, "MEM-rss": 24502272, "MEM-vms": 209367040, "config": "/etc/nemea/reporters/config.yaml", "CPU-s": 0, "outputs": [], "inputs": [{"messages": 1, "type": "t", "is-conn": 1, "ID": "12002", "buffers": 1}], "path": "python", "params": "/usr/bin/nemea/hoststats2idea.py --name=cz.cesnet.nemea.hoststats --config=/etc/nemea/reporters/config.yaml --verbose=1"}], ["haddrscan2idea", {"idx": 13, "status": "stopped", "CPU-u": 1, "MEM-rss": 15761408, "MEM-vms": 122785792, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/haddrscan2idea.py", "params": "--name=cz.cesnet.nemea.haddrscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["vportscan2idea", {"idx": 14, "status": "stopped", "CPU-u": 1, "MEM-rss": 15761408, "MEM-vms": 122785792, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/vportscan2idea.py", "params": "--name=cz.cesnet.nemea.vportscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["bruteforce2idea", {"idx": 15, "status": "stopped", "CPU-u": 1, "MEM-rss": 15503360, "MEM-vms": 122511360, "CPU-s": 0, "outputs": [], "inputs": [], "path": "python", "params": "/usr/bin/nemea/bruteforce2idea.py --name=cz.cesnet.nemea.bruteforce_detector --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["amplification2idea", {"idx": 16, "status": "stopped", "CPU-u": 1, "MEM-rss": 15769600, "MEM-vms": 122761216, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/amplification2idea.py", "params": "--name=cz.cesnet.nemea.amplification_detection --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["ipblacklist2idea", {"idx": 17, "status": "stopped", "CPU-u": 1, "MEM-rss": 15785984, "MEM-vms": 122806272, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/ipblacklist2idea.py", "params": "--name=cz.cesnet.nemea.ipblacklistfilter --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["voipfraud2idea", {"idx": 22, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/voipfraud2idea.py", "params": "--name=org.tf-csirt.nemea.voipfraud_detection --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["sipbf2idea", {"idx": 25, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/sipbf2idea.py", "params": "--name=org.tf-csirt.nemea.sip_bf_detector --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["haddrscan2idea2", {"idx": 27, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/haddrscan2idea.py", "params": "--name=org.tf-csirt.nemea.haddrscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["vportscan2idea2", {"idx": 28, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "/usr/bin/nemea/vportscan2idea.py", "params": "--name=org.tf-csirt.nemea.vportscan --mongodb=nemeadb --mongodb-coll=alerts_new"}], ["hoststats2idea2", {"idx": 34, "status": "stopped", "CPU-u": 0, "MEM-rss": 0, "MEM-vms": 0, "CPU-s": 0, "outputs": [], "inputs": [], "path": "python", "params": "/usr/bin/nemea/hoststats2idea.py --name=org.tf-csirt.nemea.hoststats --mongodb=nemeadb --mongodb-coll=alerts_new"}]];
+
+let test_rep_config = `custom_actions:
+- id: warden1
+  type: warden
+  warden:
+    url: https://warden1
+- id: mongo1
+  type: mongo
+  host: localhost
+  #port: 1234
+  db: nemea_test
+  collection: alerts
+- id: marktest
+  type: mark
+  mark:
+    path: Mark
+    value: test
+- id: markwhitelisted
+  type: mark
+  mark:
+    path: _CESNET.Whitelisted
+    value: 'True'
+addressgroups:
+- id: main_whitelist
+  file: "whitelists/whitelist1"
+- id: whitelist2
+  list:
+  - 1.1.0.0/24
+  - 1.2.3.4
+rules:
+- id: 1
+  condition: Source.IP4 in main_whitelist or Target.IP4 in main_whitelist
+  actions:
+  - markwhitelisted
+  - mongo1
+  elseactions:
+  - mongo1`
+
+
+@Injectable()
+export class ReporterService {
+
+    constructor(private http : Http) { }
+
+    reporters_dummy() {
+        return test_conf;
+    }
+
+    reporters() {
+        return this.http.get('/nemea/reporters').map(
+            (response : Response) => {
+                return response.json();
+            })
+            .catch(this.handleError);
+    }
+
+    config_dummy(idx) {
+        if (idx < 0)
+            throw "Index not set";
+
+        console.debug("Should get id " + idx)
+        return test_rep_config;
+    }
+
+    save(idx : number, conf : string) {
+        if (idx < 0)
+            throw "Index not set";
+
+        if (conf == '')
+            throw "Configuration is empty"
+
+        console.log(idx);
+        console.log(conf);
+    }
+
+    private handleError(err : Response | any) {
+        return Promise.reject(err);
+    }
+
+}

From 823fd3d8bdfa745aa30bee1a6468ef43d8cde4b7 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 13 Apr 2017 14:49:32 +0200
Subject: [PATCH 05/78] Reporter configuration front-end

Backend communication is currently missing
---
 www/angular-cli.json                          |  3 +-
 www/package.json                              |  1 +
 www/src/app/modules/nemea/nemea.module.ts     | 12 +++
 .../nemea/reporter/reporter_conf.component.ts | 82 ++++++++++++++++++-
 .../modules/nemea/reporter/reporter_conf.html | 43 +++++++++-
 .../modules/nemea/reporter/reporter_conf.scss | 40 +++++++++
 www/src/styles/main.scss                      |  6 ++
 7 files changed, 182 insertions(+), 5 deletions(-)

diff --git a/www/angular-cli.json b/www/angular-cli.json
index 32872b3..e719c7b 100644
--- a/www/angular-cli.json
+++ b/www/angular-cli.json
@@ -21,7 +21,8 @@
       "styles": [
         "styles/main.scss",
         "../node_modules/font-awesome/css/font-awesome.css",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/codemirror/lib/codemirror.css"
       ],
       "scripts": [],
       "environments": {
diff --git a/www/package.json b/www/package.json
index fa03587..4cd8e6e 100644
--- a/www/package.json
+++ b/www/package.json
@@ -26,6 +26,7 @@
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
+    "ng2-codemirror": "^1.1.1",
     "node-sass": "^4.5.0",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index 2b9c902..a8c8a29 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -6,6 +6,9 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { nemeaBase, nemeaComponent } from './nemea.component';
 import { nemeaStatusComponent } from './status/nemea_status.component';
 import { EventsComponent } from './events/events.component';
+
+import { CodemirrorModule } from 'ng2-codemirror';
+
 import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
 
 import { AuthGuard } from  'app/utils/auth.guard';
@@ -59,6 +62,14 @@ const nemeaRoutes : Routes = [
 				data : {
 					role : 10
 				}
+			},
+            {
+				path : 'reporters/:id',
+				component: nemeaReporterConfComponent,
+				canActivate : [AuthGuard],
+				data : {
+					role : 10
+				}
 			}
 		]
 	}
@@ -71,6 +82,7 @@ const nemeaRoutes : Routes = [
 		CommonModule,
 		FormsModule,
 		SafePipeModule,
+		CodemirrorModule,
 		NgbModule.forRoot(),
 		RouterModule.forChild(nemeaRoutes)
 	],
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.component.ts b/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
index 4361fdb..9fb7c41 100644
--- a/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.component.ts
@@ -1,20 +1,98 @@
 import { Component, Pipe, PipeTransform } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { ReporterService } from './reporter.service';
+
 //import { nConfService } from './exporter_configuration.service';
 
 @Component({
 	selector : 'nemea-reporter-conf',
 	templateUrl : './reporter_conf.html',
 	styleUrls : ['./reporter_conf.scss'],
-	providers : []
+	providers : [ReporterService]
 })
 export class nemeaReporterConfComponent {
 
-	constructor() {}
+    reporters = [];
+    error : string = '';
+    selectedConfig : string = '';
+    activeConfig = -1;
+
+    config = {
+        lineNumbers: true,
+        mode : "x-yaml",
+        gutter : true
+    };
+
+	constructor(private router : Router, private reporterService : ReporterService) {}
 
 	ngOnInit() {
+	    /*this.reporterService.reporters().subscribe(
+			(data) => { this.reporters = data; },
+			(error : Object) => this.processError(error)
+		);*/
+
+	   this.reporters = this.reporterService.reporters_dummy();
 	}
 
 	ngOnDestroy() {
 	}
 
+	selectReporter(reporter : number) {
+	    console.log(reporter);
+	    this.activeConfig = reporter['idx'];
+	    try {
+    	    this.getConfig(reporter["config"])
+        } catch (err) {
+            this.error = err;
+        }
+
+	    this.router.navigate(["nemea/reporters", reporter['idx']])
+	}
+
+	getConfig(path : string) {
+	    if (path == undefined) {
+	        this.error = "Config file for this reporter doesn't exist";
+	        this.selectedConfig = '';
+	        return;
+	    }
+	    this.error = '';
+	    console.log("should get " + path)
+
+	    this.selectedConfig = this.reporterService.config_dummy(this.activeConfig);
+	}
+
+	private processError(error : Object) {
+		console.log(error);
+		this.error = "Something went wrong";
+	}
+
+	saveConfig() {
+	    try {
+	        this.reporterService.save(this.activeConfig, this.selectedConfig);
+        } catch (err) {
+            console.log(err)
+            this.error = err;
+
+        }
+	    /*
+	    for (let rep of this.reporters) {
+	        if (rep[1]['idx'] == this.activeConfig) {
+	            console.log(rep)
+	            return;
+            }
+	    }
+
+        console.error("Couldnt find the exporter")
+        */
+	}
+
+	onBlur() {
+	    console.log("onblur");
+	}
+
+	onFocus() {
+	    console.log("onfocus");
+	}
+
 }
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.html b/www/src/app/modules/nemea/reporter/reporter_conf.html
index f518bc2..81158d6 100644
--- a/www/src/app/modules/nemea/reporter/reporter_conf.html
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.html
@@ -5,6 +5,45 @@ <h2>
 </h2>
 
 
-<div id="content">
-    Here should be NEMEA reporter configuration
+
+
+<div id="content" class="container-fluid">
+    <div class="row">
+        <div class="reporter-list col-4">
+            <section class="box reporter" [ngClass]="{'active' : activeConfig == rep[1]['idx']}" *ngFor="let rep of reporters" (click)="selectReporter(rep[1])">
+                <h3>
+                    {{ rep[0] }}
+                    <span class="status {{ rep[1]['status'] }}" [class]="">{{ rep[1]['status'] }}</span>
+                </h3>
+                <p>Memory Usage: {{ rep[1]["MEM-vms"] / 1048576 | number : '1.3-3' }} MB</p>
+                <!--p>Parameters: {{ rep[1]["params"] }}</p-->
+                <p>Config path: {{ rep[1]["config"] }}</p>
+                <!--{{ rep | json }}-->
+            </section>
+        </div>
+
+        <div class="config col-8">
+            <section class="box">
+                <div class="alert alert-danger" role="alert" *ngIf="error != ''">
+                    {{ error }}
+                </div>
+
+                <div *ngIf="selectedConfig == '' && error == ''">
+                    <div class="alert alert-info">
+                        Please select a reporter
+                    </div>
+                </div>
+
+                <div *ngIf="selectedConfig != '' || activeConfig >= 0">
+                    <codemirror [(ngModel)]="selectedConfig"
+                        [config]="config"
+                        (focus)="onFocus()"
+                        (blur)="onBlur()">
+                    </codemirror>
+
+                </div>
+            </section>
+            <button class="btn btn-primary" value="Save config" (click)="saveConfig()" [disabled]="activeConfig < 0">Save config</button>
+        </div>
+    </div>
 </div>
diff --git a/www/src/app/modules/nemea/reporter/reporter_conf.scss b/www/src/app/modules/nemea/reporter/reporter_conf.scss
index e69de29..57851d3 100644
--- a/www/src/app/modules/nemea/reporter/reporter_conf.scss
+++ b/www/src/app/modules/nemea/reporter/reporter_conf.scss
@@ -0,0 +1,40 @@
+$light-grey : #EEE;
+
+h3 {
+    span {
+        font-size: 0.5em;
+        font-weight: normal;
+        background-color: $light-grey;
+        padding: 0.25em 0.5em;
+        position: relative;
+        bottom: 0.45em;
+        &.running {
+            color: green;
+        }
+
+        &.stopped {
+            color: red;
+        }
+    }
+}
+
+.config {
+    height: 100%;
+    display: block;
+    position: relative;
+    right: 1em;
+
+    .box {
+        //height: 90vh;
+    }
+
+    textarea {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.active {
+    border: 1px solid #CCC;
+    background: #EEE;
+}
diff --git a/www/src/styles/main.scss b/www/src/styles/main.scss
index 7575140..88aa296 100644
--- a/www/src/styles/main.scss
+++ b/www/src/styles/main.scss
@@ -142,3 +142,9 @@ nemea-events .modal-dialog {
 .row-space {
 	margin: 1em;
 }
+
+
+.CodeMirror {
+  border: 1px solid #eee;
+  height: calc(90vh - 2em)!important;
+}

From 71b70cc164c10021804aa225d2e2707ff6f5b8c2 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 29 May 2017 13:21:34 +0200
Subject: [PATCH 06/78] Nicer user adding with validation

---
 www/src/app/modules/users/user-add.scss      |  10 ++
 www/src/app/modules/users/users-add.html     | 124 ++++++++++---------
 www/src/app/modules/users/users.component.ts |   2 +-
 3 files changed, 77 insertions(+), 59 deletions(-)
 create mode 100644 www/src/app/modules/users/user-add.scss

diff --git a/www/src/app/modules/users/user-add.scss b/www/src/app/modules/users/user-add.scss
new file mode 100644
index 0000000..5f205e8
--- /dev/null
+++ b/www/src/app/modules/users/user-add.scss
@@ -0,0 +1,10 @@
+.pw-verify {
+	position: absolute;
+	right: -0.5em;
+	top: 2.5em;
+	color: green;
+
+	.fa-times {
+		color: red;
+	}
+}
diff --git a/www/src/app/modules/users/users-add.html b/www/src/app/modules/users/users-add.html
index b51ef5d..5803ce6 100644
--- a/www/src/app/modules/users/users-add.html
+++ b/www/src/app/modules/users/users-add.html
@@ -1,78 +1,86 @@
-<h2><a routerLink='/users'><i class="fa fa-chevron-left" aria-hidden="true"></i></a> Add new user</h2>
-
-<form class="example-form">
-	<div class="flex-container"
-		fxLayout="column"
-		fxLayoutAlign="center left">
-			<input
-				placeholder="Username"
-				[(ngModel)]="user.username"
-				required
-				name="username">
+<div class="container">
+	<h2>
+		<a routerLink='/users'><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+		Add new user
+	</h2>
+<form class="example-form" (ngSubmit)="addUser()" novalidate #userForm="ngForm">
+	<div class="row">
+		<div class="form-group col">
+			<label for="username">Username *</label>
+			<input placeholder="Username" class="form-control" required
+				[(ngModel)]="user.username"	name="username" id="username">
+		</div>
 
+		<div class="form-group col">
+			<label for="email">E-mail</label>
 			<input
 				placeholder="E-mail"
 				[(ngModel)]="user.email"
-				required
 				name="email"
-				type="email">
+				type="email"
+				id="email"
+				class="form-control">
+		</div>
 	</div>
 
-	<div class="flex-container">
-			<input
-				placeholder="Password"
-				[(ngModel)]="user.password"
-				required
-				name="password"
-				type="password">
-
-			<input
-				placeholder="Password verification"
-				required
-				[(ngModel)]="passwordValidation"
-				name="password_validation"
-				type="password">
-
-		<div class="pw-verify flex-item" *ngIf="passwordValidation">
-			<span *ngIf="passwordValidation == user.password">
-				<i class="fa fa-check" aria-hidden="true"></i>
-			</span>
-			<span *ngIf="passwordValidation != user.password">
-				<i class="fa fa-times" aria-hidden="true"></i>
-			</span>
+	<div class="row">
+		<div class="form-group col">
+			<label for="first_name">First Name</label>
+			<input placeholder="First name" [(ngModel)]="user.first_name"
+				name="first_name" id="first_name" class="form-control">
+		</div>
+		<div class="form-group col">
+			<label for="last_name">Last Name</label>
+			<input placeholder="Last name" [(ngModel)]="user.last_name"
+				name="last_name" id="last_name" class="form-control">
 		</div>
 	</div>
 
-	<div class="flex-container">
-			<input
-				placeholder="First name"
-				[(ngModel)]="user.first_name"
-				name="first_name">
+	<!-- PASSWORD -->
+	<div class="row">
+		<div class="form-group col">
+			<label for="password">Password *</label>
+			<input placeholder="Password" [(ngModel)]="user.password" required
+				name="password" type="password" id="password" class="form-control">
+		</div>
 
-			<input
-				placeholder="Last name"
-				[(ngModel)]="user.last_name"
-				name="last_name">
-	</div>
+		<div class="form-group col">
+			<label for="password_validation">Password validation *</label>
+			<input placeholder="Password verification" required
+				[(ngModel)]="passwordValidation" name="password_validation"
+				class="form-control" type="password">
 
-	<div class="flex-container">
-		<select placeholder="Role" [(ngModel)]="user.role" name="role" class="custom-select">
-		<option *ngFor="let role of roles" [value]="role.value">
-		  {{role.viewValue}}
-		</option>
-	  </select>
+			<div class="pw-verify flex-item" *ngIf="passwordValidation">
+				<span *ngIf="passwordValidation == user.password">
+					<i class="fa fa-check" aria-hidden="true"></i>
+				</span>
+				<span *ngIf="passwordValidation != user.password">
+					<i class="fa fa-times" aria-hidden="true"></i>
+				</span>
+			</div>
+		</div>
+	</div>
 
+	<!-- ROLE selection -->
+	<div class="form-group">
+		<label for="user_role">Select Role *</label>
+		<select placeholder="Role" [(ngModel)]="user.role" name="role"
+			class="custom-select form-control" id="user_role">
+			<option *ngFor="let role of roles" [value]="role.value">
+				{{role.viewValue}}
+			</option>
+		</select>
 	</div>
 
 	<div class="flex-item">
-		<button
-			name="last_name"
-			type="submit"
-			class="btn btn-primary"
-		   (click)="addUser()">Add user</button>
+		<button name="last_name" type="submit" class="btn btn-primary btn-lg"
+			[disabled]="!userForm.form.valid">
+			Add User
+		</button>
+
+		<a routerLink='/users' class="btn btn-outline-danger">Cancel</a>
 
 		<span *ngIf="error">Error: {{ error }}</span>
 	</div>
 </form>
-
-{{ user | json }}
+</div>
diff --git a/www/src/app/modules/users/users.component.ts b/www/src/app/modules/users/users.component.ts
index 2202d20..4718f1c 100644
--- a/www/src/app/modules/users/users.component.ts
+++ b/www/src/app/modules/users/users.component.ts
@@ -14,9 +14,9 @@ import { UsersService } from './users.service';
 export class usersComponent {};
 
 @Component({
-	//moduleId : module.id.replace("/dist/", "/"),
 	selector : 'users-add',
 	templateUrl : './users-add.html',
+	styleUrls: ['./user-add.scss'],
 	providers : [UsersService]
 })
 export class usersAddComponent {

From f56bbb2f70e14aef93e86a592fe74417375993e7 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 29 May 2017 13:24:53 +0200
Subject: [PATCH 07/78] Whitelisting NEMEA Events

Option to hide whitelisted events (_CESNET.Whitelisted is set to true).
---
 .../nemea/events/events.component.html        |  4 +++-
 .../nemea/events/events.component.scss        | 10 ++++++++++
 .../modules/nemea/events/events.component.ts  | 20 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/www/src/app/modules/nemea/events/events.component.html b/www/src/app/modules/nemea/events/events.component.html
index 00e403e..7d32fe5 100644
--- a/www/src/app/modules/nemea/events/events.component.html
+++ b/www/src/app/modules/nemea/events/events.component.html
@@ -61,6 +61,8 @@ <h2>
 			</div>
 		</div>
 	</form>
+
+    Hide whitelisted items ({{ totalWhitelisted }}): <input type="checkbox" [(ngModel)]="hideWhitelisted" />
 </section>
 
 <section class="box">
@@ -98,7 +100,7 @@ <h3 class="text-center" *ngIf="loadBtn == 'LOADING...'">{{ loadBtn }}</h3>
 					<h3 class="text-center" *ngIf="loadBtn != 'LOADING...'"><em>No events match given criteria.</em></h3>
 				</td>
 			</tr>
-			<tr nemea-event *ngFor="let event of events" [item]="event">
+            <tr nemea-event *ngFor="let event of events" [item]="event" [ngClass]="{'whitelisted' : event?._CESNET?.Whitelisted == 'True', 'hidden' : hideWhitelisted}">
 			</tr>
 		</tbody>
 		<tfoot>
diff --git a/www/src/app/modules/nemea/events/events.component.scss b/www/src/app/modules/nemea/events/events.component.scss
index 75b11fc..e70b6d4 100644
--- a/www/src/app/modules/nemea/events/events.component.scss
+++ b/www/src/app/modules/nemea/events/events.component.scss
@@ -2,3 +2,13 @@
 	margin: 1em auto 0 auto;
     display: block;
 }
+
+tr {
+    &.whitelisted {
+        color: #AAA;
+        background: #fbfbfb;;
+        &.hidden {
+            display: none;
+        }
+    }
+}
diff --git a/www/src/app/modules/nemea/events/events.component.ts b/www/src/app/modules/nemea/events/events.component.ts
index c6046d1..41d099e 100644
--- a/www/src/app/modules/nemea/events/events.component.ts
+++ b/www/src/app/modules/nemea/events/events.component.ts
@@ -35,13 +35,18 @@ export class EventsComponent implements OnInit {
 	}
 	loadBtn = "LOAD";
 	error;
+	totalWhitelisted = 0;
 
 	constructor(private eventsService : EventsService, private router : Router) { }
 
 	ngOnInit() {
 		this.loadBtn = "LOADING...";
 		this.eventsService.last_events(100).subscribe(
-			(data) => { this.events = data; this.loadBtn = "LOAD" },
+			(data) => {
+			    this.events = data;
+			    this.loadBtn = "LOAD";
+		        this.countWhitelisted();
+			},
 			(error : Object) => this.processError(error)
 		);
 		this.selectToday();
@@ -52,6 +57,7 @@ export class EventsComponent implements OnInit {
 		this.events = data;
 		this.loadBtn = "LOAD";
 		this.setParams();
+		this.countWhitelisted();
 	}
 
 	private appendData(data : any) {
@@ -59,6 +65,7 @@ export class EventsComponent implements OnInit {
 		this.events = this.events.concat(data);
 		this.loadBtn = "LOAD";
 		this.setParams();
+		this.countWhitelisted();
 	}
 
 
@@ -148,4 +155,15 @@ export class EventsComponent implements OnInit {
 		this.query['from'] = Math.floor((time)/1000);
 		this.runQuery(true);
 	}
+
+	private countWhitelisted() {
+	    for (let item of this.events) {
+	        try {
+	            if (item["_CESNET"]["Whitelisted"] == "True")
+	                this.totalWhitelisted += 1;
+            } catch(e) {
+                continue;
+            }
+	    }
+	}
 }

From 3fcb6e1e051b794d358b15324add66f391df8af6 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 29 May 2017 14:44:07 +0200
Subject: [PATCH 08/78] Update nemea API

---
 modules/Nemea-Dashboard | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index 8d85015..409cc14 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit 8d85015253c459c77784435b4b0d366b532c2413
+Subproject commit 409cc148cb88bad3581cc27b1adcc042924c6f72

From b7eb2b3f480b21ed1dddc3ef92c7e38ec57223f2 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 30 May 2017 10:25:52 +0200
Subject: [PATCH 09/78] NEMEA: add NgGrid module

---
 www/package.json                          | 1 +
 www/src/app/modules/nemea/nemea.module.ts | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/www/package.json b/www/package.json
index 4cd8e6e..bf0ac5d 100644
--- a/www/package.json
+++ b/www/package.json
@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
+    "angular2-grid": "^2.0.2",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index a8c8a29..cf8aa70 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -7,6 +7,8 @@ import { nemeaBase, nemeaComponent } from './nemea.component';
 import { nemeaStatusComponent } from './status/nemea_status.component';
 import { EventsComponent } from './events/events.component';
 
+import { NgGridModule } from 'angular2-grid';
+
 import { CodemirrorModule } from 'ng2-codemirror';
 
 import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
@@ -75,14 +77,13 @@ const nemeaRoutes : Routes = [
 	}
 ];
 
-//export const dummyRouting = RouterModule.forChild(dummyRoutes);
-
 @NgModule({
 	imports : [
 		CommonModule,
 		FormsModule,
 		SafePipeModule,
 		CodemirrorModule,
+		NgGridModule,
 		NgbModule.forRoot(),
 		RouterModule.forChild(nemeaRoutes)
 	],

From ba87d9d4f515722e9d182525c1373beaf55890f4 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 30 May 2017 10:26:26 +0200
Subject: [PATCH 10/78] NEMEA: initial mockup for dashboard

---
 .../nemea/dashboard/dashboard.component.html  | 36 +++++++++
 .../nemea/dashboard/dashboard.component.scss  | 26 +++++++
 .../dashboard/dashboard.component.spec.ts     | 28 +++++++
 .../nemea/dashboard/dashboard.component.ts    | 78 +++++++++++++++++++
 www/src/app/modules/nemea/nemea.component.ts  | 13 +++-
 www/src/app/modules/nemea/nemea.module.ts     | 12 ++-
 6 files changed, 189 insertions(+), 4 deletions(-)
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard.component.html
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard.component.scss
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard.component.ts

diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.html b/www/src/app/modules/nemea/dashboard/dashboard.component.html
new file mode 100644
index 0000000..c054431
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.html
@@ -0,0 +1,36 @@
+<p>
+  dashboard works!
+</p>
+
+<div [ngGrid]="gridConfig">
+
+	<div [(ngGridItem)]="config">
+		<div class="handle">Handle</div>
+		Box
+	</div>
+
+	<div *ngFor="let box of boxes" [(ngGridItem)]="box.config">
+		<div class="handle">
+			<div class="row">
+				<h3 class="col h4">{{ box.title}}</h3>
+
+			<div ngbDropdown>
+				<a class="" id="dMenu" ngbDropdownToggle></a>
+				<div class="dropdown-menu" aria-labelledby="dMenu">
+					<button class="dropdown-item" (click)="editBox(box)">Edit</button>
+					<a class="dropdown-item" (click)="duplicateBox(box)">Duplicate</a>
+					<a class="dropdown-item" (click)="deleteBox(box)">Delete</a>
+				</div>
+			</div>
+			</div>
+
+
+		</div>
+
+		{{ box.content }}
+
+		{{ box.config | json }}
+	</div>
+</div>
+
+<a (click)="addBox()" class="btn btn-primary">Add Box</a>
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.scss b/www/src/app/modules/nemea/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..c2a5fd5
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.scss
@@ -0,0 +1,26 @@
+.grid-item {
+	border: solid 1px #ccc;
+
+	&.moving {
+		box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
+			0px 7px 10px 1px rgba(0, 0, 0, 0.14),
+			0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+	}
+}
+
+.handle {
+	width: 100%;
+	height: 50px;
+	background: #eee;
+	color: black;
+	font-weight: 500;
+	padding: 15px;
+	box-sizing: border-box;
+
+	.dropdown {
+		cursor: pointer;
+		margin-right: 1em;
+		font-size: 1.25em;
+		top: -0.25em;
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..a29783c
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..ce317e1
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+
+import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';  
+
+interface Box {
+	id : number;
+	config : any;
+	title : string;
+	content : string;
+}
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+	private boxes : Array<Box> = [];
+
+	private gridConfig: NgGridConfig = <NgGridConfig>{
+		'margins': [5],
+		'draggable': true,
+		'resizable': true,
+		'max_cols': 0,
+		'max_rows': 0,
+		'visible_cols': 0,
+		'visible_rows': 0,
+		'min_cols': 1,
+		'min_rows': 1,
+		'col_width': 200,
+		'row_height': 200,
+		'cascade': 'up',
+		'min_width': 100,
+		'min_height': 100,
+		'fix_to_grid': false,
+		'auto_style': true,
+		'auto_resize': false,
+		'maintain_ratio': false,
+		'prefer_new': false,
+		'zoom_on_drag': false,
+		'limit_to_screen': true
+	};
+
+	config = { 'dragHandle': '.handle', 'col': 1, 'row': 1, 'sizex': 2, 'sizey': 2 };
+
+	constructor() {}
+
+	ngOnInit() {
+		this.boxes.push({
+			id : 0,
+			config : {
+				'dragHandle': '.handle',
+				'sizex': 2,
+				'sizey': 2
+			},
+			title : "New Box",
+			content : "Newly new box"
+		});
+	}
+
+	addBox() {
+		console.log("should add box");
+
+		this.boxes.push({
+			id : 0,
+			config : {
+				'dragHandle': '.handle',
+				'sizex': 2,
+				'sizey': 2
+			},
+			title : "New Box",
+			content : "Newly new box"
+		});
+	}
+
+}
diff --git a/www/src/app/modules/nemea/nemea.component.ts b/www/src/app/modules/nemea/nemea.component.ts
index 2764544..e081390 100644
--- a/www/src/app/modules/nemea/nemea.component.ts
+++ b/www/src/app/modules/nemea/nemea.component.ts
@@ -13,22 +13,29 @@ export class nemeaBase {};
 		<section class="box">
 			<h2>
 				<a routerLink='status'>
-					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Status
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Status
 				</a>
 			</h2>
 		</section>
 		<section class="box">
 			<h2>
 				<a routerLink='events'>
-					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Events
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Events
 				</a>
 			</h2>
 		</section>
 
+		<section class="box">
+			<h2>
+				<a routerLink='dashboard'>
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Dashboard
+				</a>
+			</h2>
+		</section>
 		<section class="box">
 			<h2>
 				<a routerLink='reporters'>
-					<i class="fa fa-chevron-right" aria-hidden="true"></i> Nemea Reporter Configuration
+					<i class="fa fa-chevron-right" aria-hidden="true"></i> NEMEA Reporter Configuration
 				</a>
 			</h2>
 		</section>
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index cf8aa70..a9fc6d9 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -18,6 +18,7 @@ import { IdeaPipe } from './events/idea.pipe';
 import { EventItemComponent } from './events/event-item/event-item.component';
 import { EventDetailComponent } from './events/event-detail/event-detail.component';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 const nemeaRoutes : Routes = [
 	{
@@ -57,6 +58,14 @@ const nemeaRoutes : Routes = [
 					role : 10
 				}
 			},
+			{
+				path : 'dashboard',
+				component : DashboardComponent,
+				canActivate : [AuthGuard],
+				data : {
+					role : 255
+				}
+			},
 			{
 				path : 'reporters',
 				component: nemeaReporterConfComponent,
@@ -95,7 +104,8 @@ const nemeaRoutes : Routes = [
 		nemeaReporterConfComponent,
 		EventsComponent,
 		EventItemComponent,
-		EventDetailComponent],
+		EventDetailComponent,
+		DashboardComponent],
 	exports : [],
 	providers : [SafePipe],
 	entryComponents : [EventDetailComponent]

From d3d26c2285e4ca8e7ca9319b769dc5e493a87238 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 30 May 2017 11:39:40 +0200
Subject: [PATCH 11/78] Display user info only when user is logged in

---
 www/src/app/app.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/app/app.component.html b/www/src/app/app.component.html
index 22631bc..0b99dc3 100644
--- a/www/src/app/app.component.html
+++ b/www/src/app/app.component.html
@@ -8,7 +8,7 @@ <h1 class="user-area">
 		<div class="user-area ">
 			<div ngbDropdown class="d-flex flex-column align-content-center">
 				<a class="user" id="dropdownMenu1" ngbDropdownToggle>
-					{{ user.user.username }}
+					{{ user?.user?.username }}
 				</a>
 				<div class="dropdown-menu" aria-labelledby="userActions">
 					<button class="dropdown-item">Action - 1</button>

From 1362c38b046962839e7c599e23bbda0e948c15a3 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 30 May 2017 15:22:26 +0200
Subject: [PATCH 12/78] NEMEA: Update Stats API

---
 modules/Nemea-Dashboard | 2 +-
 www/package.json        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index 409cc14..a3cc161 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit 409cc148cb88bad3581cc27b1adcc042924c6f72
+Subproject commit a3cc161c9d7bdc10e19611c42624f893b63b80e8
diff --git a/www/package.json b/www/package.json
index bf0ac5d..7c2aa06 100644
--- a/www/package.json
+++ b/www/package.json
@@ -24,6 +24,7 @@
     "@angular/router": "^3.4.0",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
     "angular2-grid": "^2.0.2",
+    "angular2-nvd3": "^1.0.7",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",

From 9673239ac22866aa99f624bb8e49b1ec961a8f31 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 1 Jun 2017 11:09:13 +0200
Subject: [PATCH 13/78] NEMEA: Initial bare version of NEMEA Dashboard

TODO:
	* replace NVD3 charts with something working
	* Edit Box function implmentation
	* Timeshift
	* Multiple dashboards
	* Better config of the box
---
 .../nemea/dashboard/box.service.spec.ts       |  16 ++
 .../modules/nemea/dashboard/box.service.ts    |  51 +++++
 .../dash-box/dash-box.component.html          |  22 ++
 .../dash-box/dash-box.component.scss          |   0
 .../dash-box/dash-box.component.spec.ts       |  28 +++
 .../dashboard/dash-box/dash-box.component.ts  |  63 ++++++
 .../dash-item/dash-item.component.html        |  21 ++
 .../dash-item/dash-item.component.scss        |   0
 .../dash-item/dash-item.component.spec.ts     |  28 +++
 .../dash-item/dash-item.component.ts          |  18 ++
 .../nemea/dashboard/dashboard.component.html  |  21 +-
 .../nemea/dashboard/dashboard.component.ts    | 202 ++++++++++++++++--
 www/src/app/modules/nemea/nemea.module.ts     |  10 +-
 13 files changed, 446 insertions(+), 34 deletions(-)
 create mode 100644 www/src/app/modules/nemea/dashboard/box.service.spec.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/box.service.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.scss
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.spec.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts

diff --git a/www/src/app/modules/nemea/dashboard/box.service.spec.ts b/www/src/app/modules/nemea/dashboard/box.service.spec.ts
new file mode 100644
index 0000000..b569978
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/box.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { BoxService } from './box.service';
+
+describe('BoxService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [BoxService]
+    });
+  });
+
+  it('should ...', inject([BoxService], (service: BoxService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/www/src/app/modules/nemea/dashboard/box.service.ts b/www/src/app/modules/nemea/dashboard/box.service.ts
new file mode 100644
index 0000000..3f1466b
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/box.service.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
+
+@Injectable()
+export class BoxService {
+
+	constructor(private http : Http) {}
+
+	get(box) {
+		console.log(box);
+
+		if (box['type'] == 'chart')
+			return this.aggregate(box);
+
+		else if (box['type'] == 'top')
+			return null;
+
+		else
+			console.warn("No box type is set.")
+
+	}
+
+	aggregate(box) {
+		let requestOptions = new RequestOptions();
+
+		let params: URLSearchParams = new URLSearchParams();
+
+		/**
+		  * Set time window
+		  * The difference in capitalization is because of backward compatibility
+		  */
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+
+		params.set('metric', box['metric']);
+		params.set('type', box['type']);
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/aggregate', requestOptions).map(
+			(response : Response) => {
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+	private handleError(err : Response | any) {
+		return Promise.reject(err);
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
new file mode 100644
index 0000000..1252ef0
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -0,0 +1,22 @@
+{{ data | json}}
+
+<div *ngIf="box.type == 'piechart'">
+	<app-nvd3 [options]="box.options" [data]="data" #chart></app-nvd3>
+</div>
+
+<div *ngIf="box.type == 'top'">
+	Here should be TOP events
+</div>
+
+<div *ngIf="box.type == 'number'">
+	Here should be NUMBER
+</div>
+
+<div *ngIf="box.type == ''">
+	No type of box is defined
+</div>
+
+{{ box.content }}
+
+{{ box.data  | json }}
+
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts
new file mode 100644
index 0000000..769a6d1
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DashBoxComponent } from './dash-box.component';
+
+describe('DashBoxComponent', () => {
+  let component: DashBoxComponent;
+  let fixture: ComponentFixture<DashBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
new file mode 100644
index 0000000..1f5884d
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -0,0 +1,63 @@
+import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
+
+import { BoxService } from '../box.service';
+import * as nv from 'nvd3';
+
+
+@Component({
+  selector: 'dash-box',
+  templateUrl: './dash-box.component.html',
+  styleUrls: ['./dash-box.component.scss'],
+  providers : [BoxService]
+})
+export class DashBoxComponent {
+
+	@Input() box;
+	@ViewChild('chart') chart;
+
+	private data = [ { "key": [ "Hello" ], "x:": 10 }, { "key": [ "Hello2" ], "x:": 20 } ];
+
+	constructor(private boxService : BoxService) {
+		window.onresize = null;
+	}
+
+	ngOnInit() {
+		delete this.box.data;
+//		console.log(this.box.data);
+		this.timeShift();
+		console.log("should get data from", this.box.beginTime)
+
+		this.boxService.aggregate(this.box).subscribe(
+			(data) => {
+				console.debug("Getting data");
+				//this.data = data;
+				//this.data = [{"key" : ["Hello"], "x:" : 10}]
+				console.log(data);
+				//setTimeout(_ => { this.data = data }, 100);
+				//console.log(data);
+				//console.log(this.chart["ngNvD3"])
+				//this.chart["ngNvD3"].clearElement();
+				//this.chart["ngNvD3"].isViewInitialize(false);
+				//this.chart["ngNvD3"]["chart"].update()//WithData(this.box.data, this.box.options);
+			},
+			(err) => {
+				console.error(err);
+			}
+		);
+	}
+
+	/**
+	  * Set beginTime and endTime in given box of the period size
+	  *
+	  * These times serve as a window in which to look in the events.
+	  * period is the size of time window
+	  */
+	timeShift() {
+		let now = new Date();
+
+        this.box.beginTime = Math.floor((now.getTime() - (this.box["period"]*60*60*1000))/1000);
+        this.box.endTime = Math.floor(Number(now)/1000);
+    }
+
+
+}
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html
new file mode 100644
index 0000000..94711d0
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html
@@ -0,0 +1,21 @@
+<div class="modal-header">
+	<h4 class="modal-title">{{ data.title }}</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body d-flex">
+	{{ data | json }}
+
+	<form novalidate>
+		<div class="form-group">
+			<label for="content">Content</label>
+			<input type="text" [(ngModel)]="data.content" name="content" id="content">
+		</div>
+	</form>
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-secondary" (click)="activeModal.close()">
+		Close
+	</button>
+</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.scss b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.spec.ts
new file mode 100644
index 0000000..9646570
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DashItemComponent } from './dash-item.component';
+
+describe('DashItemComponent', () => {
+  let component: DashItemComponent;
+  let fixture: ComponentFixture<DashItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts
new file mode 100644
index 0000000..98dd854
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-dash-item',
+  templateUrl: './dash-item.component.html',
+  styleUrls: ['./dash-item.component.scss']
+})
+export class DashItemComponent implements OnInit {
+
+	@Input() data : Object;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+	}
+
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.html b/www/src/app/modules/nemea/dashboard/dashboard.component.html
index c054431..8ddf623 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.html
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.html
@@ -1,15 +1,8 @@
-<p>
-  dashboard works!
-</p>
-
 <div [ngGrid]="gridConfig">
 
-	<div [(ngGridItem)]="config">
-		<div class="handle">Handle</div>
-		Box
-	</div>
+	<div *ngIf="boxes.length == 0">You should add box</div>
 
-	<div *ngFor="let box of boxes" [(ngGridItem)]="box.config">
+	<div *ngFor="let box of boxes ; let i = index" [(ngGridItem)]="box.config">
 		<div class="handle">
 			<div class="row">
 				<h3 class="col h4">{{ box.title}}</h3>
@@ -19,7 +12,7 @@ <h3 class="col h4">{{ box.title}}</h3>
 				<div class="dropdown-menu" aria-labelledby="dMenu">
 					<button class="dropdown-item" (click)="editBox(box)">Edit</button>
 					<a class="dropdown-item" (click)="duplicateBox(box)">Duplicate</a>
-					<a class="dropdown-item" (click)="deleteBox(box)">Delete</a>
+					<a class="dropdown-item" (click)="deleteBox(box, i)">Delete</a>
 				</div>
 			</div>
 			</div>
@@ -27,10 +20,12 @@ <h3 class="col h4">{{ box.title}}</h3>
 
 		</div>
 
-		{{ box.content }}
+		<dash-box [box]="box"></dash-box>
 
-		{{ box.config | json }}
 	</div>
 </div>
 
-<a (click)="addBox()" class="btn btn-primary">Add Box</a>
+<a (click)="addCleanBox()" class="btn btn-primary">Add Box</a>
+
+<template ngbModalContainer class="item-detail"></template>
+
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
index ce317e1..99269e5 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -1,22 +1,106 @@
 import { Component, OnInit } from '@angular/core';
 
-import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';  
+import { NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent } from 'angular2-grid';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { UsersService } from 'app/modules/users/users.service';
+
+import { DashItemComponent } from './dash-item/dash-item.component';
 
 interface Box {
 	id : number;
+	/**
+	  * Configuration of the box itself
+	  */
 	config : any;
+	/**
+	  * Title of the box
+	  */
 	title : string;
+	/**
+	  * Content which to display below data
+	  */
 	content : string;
+	/**
+	  * Define type of the box
+	  * Value: chart|top|number
+	  */
+	type : string;
+	/**
+	  * Options for the graph
+	  */
+	options : Object;
+	data : any;
+	beginTime : number;
+	endTime : number;
+	period : number;
+	metric : string;
 }
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+  styleUrls: ['./dashboard.component.scss'],
+  providers : [ UsersService ]
 })
 export class DashboardComponent implements OnInit {
 
+	private piechart = {
+		refreshDataOnly : true,
+        chart: {
+            type: 'pieChart',
+            //height: 375,
+            x: function(d) {
+            	return d.key;
+            },
+            y: function(d) {
+	            return d.x;
+            },
+            //showLabels: false,
+            //donut : true,
+            //padAngle : 0.00,
+            //cornerRadius : 1,
+            //transitionDuration: 500,
+            //labelThreshold: 0,
+            //useInteractiveGuideline: true,
+            //legend: {
+            //    margin: {
+            //        top: 5,
+            //        right: 0,
+            //        bottom: -15,
+            //        left: 0
+            //    }
+            //},
+            //legendPosition : "top",
+            /*tooltipContent : function(key, x, y, e, graph) {
+                                console.log(key);
+                                console.log(y);
+                                console.log(e);
+                                console.log(graph);
+                                return 'Hello';
+                             },*/
+            /*pie : {
+                dispatch: {
+                    elementClick: function(e) {
+                        var date = new Date();
+                        console.log(e)
+                        date.setTime(date.getTime() - 1000*60*60*24);
+                        date.setHours(0);
+                        date.setMinutes(0);
+                        window.location.href = '#/events?filter&date=' + date.getTime() + '&from=' + new Date().getHours() + ':' + new Date().getMinutes() + '&category=' + e.data.key[0]
+                    },
+                },
+                labelType : "percent",
+                labelsOutside : false,
+			},*/
+			callback : () => {
+				console.log("hello");
+			}
+        }
+	}
+
+
 	private boxes : Array<Box> = [];
 
 	private gridConfig: NgGridConfig = <NgGridConfig>{
@@ -31,7 +115,7 @@ export class DashboardComponent implements OnInit {
 		'min_rows': 1,
 		'col_width': 200,
 		'row_height': 200,
-		'cascade': 'up',
+		'cascade': 'left',
 		'min_width': 100,
 		'min_height': 100,
 		'fix_to_grid': false,
@@ -43,27 +127,34 @@ export class DashboardComponent implements OnInit {
 		'limit_to_screen': true
 	};
 
+	private user : Object;
+	private modalRef : any;
+
 	config = { 'dragHandle': '.handle', 'col': 1, 'row': 1, 'sizex': 2, 'sizey': 2 };
 
-	constructor() {}
+	constructor(private usersService : UsersService,
+			   private modalService: NgbModal) {}
 
 	ngOnInit() {
-		this.boxes.push({
-			id : 0,
-			config : {
-				'dragHandle': '.handle',
-				'sizex': 2,
-				'sizey': 2
-			},
-			title : "New Box",
-			content : "Newly new box"
-		});
+		this.user = JSON.parse(localStorage["currentUser"]);
+
+		// Load settings for dashboard (boxes configuration)
+		try {
+			console.log(this.user["user"]["settings"]["nemea"]["dashboard"]);
+			this.boxes = this.user["user"]["settings"]["nemea"]["dashboard"];
+		} catch (e) {
+			console.log(e);
+			this.addCleanBox();
+		}
 	}
 
-	addBox() {
+	/**
+	  * Add default box to boxes array
+	  */
+	addCleanBox() {
 		console.log("should add box");
 
-		this.boxes.push({
+		let box = {
 			id : 0,
 			config : {
 				'dragHandle': '.handle',
@@ -71,8 +162,81 @@ export class DashboardComponent implements OnInit {
 				'sizey': 2
 			},
 			title : "New Box",
-			content : "Newly new box"
-		});
+			content : "",
+			options : this.piechart,
+			type : "piechart",
+			data : [],
+			beginTime : -1,
+			endTime : -1,
+			period : 240,
+			metric : "Category"
+		}
+
+		this.boxes.push(box);
+
+		// Save the new box to local storage
+		this.save();
+
 	}
 
+	addBox(box : Box) {
+		this.boxes.push(box);
+	}
+
+	save() : void {
+		let user = JSON.parse(localStorage.getItem("currentUser"));
+
+		console.log(user);
+
+		if (user['user']['setting'] == null)
+			user['user']["settings"] = { "nemea" : { "dashboard" : this.boxes } };
+		else {
+			if ('nemea' in user['user']['settings']) {
+				if ('dashboard' in user['user']['settings']['nemea']) {
+					user['user']["settings"]["nemea"]["dashboard"] = this.boxes;
+				} else {
+					user['user']["settings"]["nemea"] = { "dashboard" : this.boxes };
+				}
+			} else {
+				user['user']["settings"] = { "nemea" : { "dashboard" : this.boxes } };
+			}
+		}
+
+		localStorage.setItem("currentUser", JSON.stringify(user));
+	}
+
+	/**
+	  * Trigger a modal window which can edit the given box
+	  */
+	editBox(box : Object) {
+		console.debug("Should edit box");
+		this.modalRef = this.modalService.open(DashItemComponent);
+		this.modalRef.componentInstance.data = box;
+	}
+
+	deleteBox(box, i) {
+		console.log("should delete: ", box, i);
+
+		let index = this.boxes.indexOf(box, 0);
+
+		if (index > -1) {
+			this.boxes.splice(index, 1);
+			this.save();
+		}
+	}
+
+	/**
+	  * Duplicates given box and adds it to boxes array
+	  *
+	  * TODO: this causes an exception when not in production mode
+	  */
+	duplicateBox(box : Box) {
+		let newbox = Object.assign({}, box);
+		newbox["title"] = "Duplicate of " + box["title"];
+		this.addBox(newbox);
+	}
+
+	loadData(box : Box) {
+		console.log(box);
+	}
 }
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index a9fc6d9..dc3ce3e 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -8,6 +8,7 @@ import { nemeaStatusComponent } from './status/nemea_status.component';
 import { EventsComponent } from './events/events.component';
 
 import { NgGridModule } from 'angular2-grid';
+import { NvD3Module } from 'angular2-nvd3';
 
 import { CodemirrorModule } from 'ng2-codemirror';
 
@@ -19,6 +20,8 @@ import { EventItemComponent } from './events/event-item/event-item.component';
 import { EventDetailComponent } from './events/event-detail/event-detail.component';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { DashItemComponent } from './dashboard/dash-item/dash-item.component';
+import { DashBoxComponent } from './dashboard/dash-box/dash-box.component';
 
 const nemeaRoutes : Routes = [
 	{
@@ -93,6 +96,7 @@ const nemeaRoutes : Routes = [
 		SafePipeModule,
 		CodemirrorModule,
 		NgGridModule,
+		NvD3Module,
 		NgbModule.forRoot(),
 		RouterModule.forChild(nemeaRoutes)
 	],
@@ -105,9 +109,11 @@ const nemeaRoutes : Routes = [
 		EventsComponent,
 		EventItemComponent,
 		EventDetailComponent,
-		DashboardComponent],
+		DashboardComponent,
+		DashItemComponent,
+		DashBoxComponent],
 	exports : [],
 	providers : [SafePipe],
-	entryComponents : [EventDetailComponent]
+	entryComponents : [EventDetailComponent, DashItemComponent]
 })
 export class nemeaModule {};

From 7da72dc60a157f2858f6057559f69c8659a66505 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 1 Jun 2017 11:11:27 +0200
Subject: [PATCH 14/78] Update name in package.json to remove warning

---
 www/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/package.json b/www/package.json
index 7c2aa06..ae03634 100644
--- a/www/package.json
+++ b/www/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Liberouter GUI",
+  "name": "liberouter-gui",
   "version": "0.2.0-beta",
   "license": "MIT",
   "angular-cli": {},

From 1f7564657bce9e54dda3e46a3b459268a83d2b72 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 5 Jun 2017 16:03:37 +0200
Subject: [PATCH 15/78] Update ng and Angular

ng to version ^1.0 and Angular to ^4.0
---
 www/.angular-cli.json                        | 70 ++++++++++++++++++
 www/angular-cli.json                         | 77 --------------------
 www/karma.conf.js                            | 17 ++---
 www/package.json                             | 76 ++++++++++---------
 www/protractor.conf.js                       | 13 ++--
 www/src/{tsconfig.json => tsconfig.app.json} | 21 +++---
 www/src/tsconfig.e2e.json                    | 19 +++++
 www/src/tsconfig.spec.json                   | 28 +++++++
 www/{e2e => }/tsconfig.json                  | 19 ++---
 www/tslint.json                              | 31 ++++++--
 10 files changed, 216 insertions(+), 155 deletions(-)
 create mode 100644 www/.angular-cli.json
 delete mode 100644 www/angular-cli.json
 rename www/src/{tsconfig.json => tsconfig.app.json} (71%)
 create mode 100644 www/src/tsconfig.e2e.json
 create mode 100644 www/src/tsconfig.spec.json
 rename www/{e2e => }/tsconfig.json (65%)

diff --git a/www/.angular-cli.json b/www/.angular-cli.json
new file mode 100644
index 0000000..f62b814
--- /dev/null
+++ b/www/.angular-cli.json
@@ -0,0 +1,70 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"project": {
+		"version": "0.2.0",
+		"name": "liberouter-gui"
+	},
+	"apps": [
+		{
+			"root": "src",
+			"outDir": "dist",
+			"assets": [
+				"assets",
+				"favicon.ico"
+			],
+			"index": "index.html",
+			"main": "main.ts",
+			"polyfills": "polyfills.ts",
+			"test": "test.ts",
+			"tsconfig": "tsconfig.app.json",
+			"testTsconfig": "tsconfig.spec.json",
+			"prefix": "app",
+			"styles": [
+				"styles/main.scss",
+				"../node_modules/font-awesome/css/font-awesome.css",
+				"../node_modules/bootstrap/dist/css/bootstrap.min.css",
+				"../node_modules/codemirror/lib/codemirror.css"
+			],
+			"scripts": [],
+			"environmentSource": "environments/environment.ts",
+			"environments": {
+				"dev": "environments/environment.ts",
+				"prod": "environments/environment.prod.ts"
+			}
+		}
+	],
+	"addons" : [
+		"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
+	],
+	"sassCompiler" : {
+		"includePaths": ["src/styles"]
+	},
+	"e2e": {
+		"protractor": {
+			"config": "./protractor.conf.js"
+		}
+	},
+	"lint": [
+		{
+			"project": "src/tsconfig.app.json"
+		},
+		{
+			"project": "src/tsconfig.spec.json"
+		},
+		{
+			"project": "e2e/tsconfig.e2e.json"
+		}
+	],
+	"test": {
+		"karma": {
+			"config": "./karma.conf.js"
+		}
+	},
+	"defaults": {
+		"styleExt": "scss",
+		"component": {
+			"inlineTemplate": false,
+			"spec": true
+		}
+	}
+}
diff --git a/www/angular-cli.json b/www/angular-cli.json
deleted file mode 100644
index e719c7b..0000000
--- a/www/angular-cli.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "version": "1.0.0-beta.31",
-    "name": "www"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.json",
-      "prefix": "app",
-      "styles": [
-        "styles/main.scss",
-        "../node_modules/font-awesome/css/font-awesome.css",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "../node_modules/codemirror/lib/codemirror.css"
-      ],
-      "scripts": [],
-      "environments": {
-        "source": "environments/environment.ts",
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "addons" : [
-	"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
-  ],
-  "sassCompiler" : {
-	"includePaths": ["src/styles"]
-  },
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "files": "src/**/*.ts",
-      "project": "src/tsconfig.json"
-    },
-    {
-      "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
-  }
-}
diff --git a/www/karma.conf.js b/www/karma.conf.js
index 437f2d0..1685601 100644
--- a/www/karma.conf.js
+++ b/www/karma.conf.js
@@ -8,29 +8,21 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
@@ -39,3 +31,4 @@ module.exports = function (config) {
     singleRun: false
   });
 };
+
diff --git a/www/package.json b/www/package.json
index ae03634..b5061c7 100644
--- a/www/package.json
+++ b/www/package.json
@@ -6,50 +6,60 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "scss": "node-sass --include-path scss src/styles/base.scss src/styles/main.css -o dist",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/cli": "^1.0.0-beta.31",
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
     "angular2-grid": "^2.0.2",
     "angular2-nvd3": "^1.0.7",
     "bootstrap": "^4.0.0-alpha.6",
-    "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
-    "ng2-codemirror": "^1.1.1",
-    "node-sass": "^4.5.0",
-    "rxjs": "^5.0.1",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.2"
+    "ng2-codemirror": "^1.1.1"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-beta.31",
-    "@angular/compiler-cli": "^2.4.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.42",
-    "codelyzer": "~2.0.0-beta.1",
-    "jasmine-core": "2.5.2",
-    "jasmine-spec-reporter": "2.5.0",
-    "karma": "1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "protractor": "~5.1.0",
-    "ts-node": "1.2.1",
-    "tslint": "^4.3.0",
-    "typescript": "~2.0.0"
-  }
+    "@angular/cli": "1.1.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@types/jasmine": "2.5.45",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  },
+  "description": "Web interface for Liberouter GUI. Built using webpack.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CESNET/liberouter-gui.git"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/CESNET/liberouter-gui/issues"
+  },
+  "homepage": "https://github.com/CESNET/liberouter-gui#readme"
 }
diff --git a/www/protractor.conf.js b/www/protractor.conf.js
index ffded70..1891703 100644
--- a/www/protractor.conf.js
+++ b/www/protractor.conf.js
@@ -1,8 +1,7 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-/*global jasmine */
-var SpecReporter = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
@@ -20,13 +19,11 @@ exports.config = {
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
-  useAllAngular2AppRoots: true,
-  beforeLaunch: function() {
+  onPrepare() {
     require('ts-node').register({
-      project: 'e2e'
+      project: 'e2e/tsconfig.e2e.json'
     });
-  },
-  onPrepare: function() {
-    jasmine.getEnv().addReporter(new SpecReporter());
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
 };
+
diff --git a/www/src/tsconfig.json b/www/src/tsconfig.app.json
similarity index 71%
rename from www/src/tsconfig.json
rename to www/src/tsconfig.app.json
index 40fe5c0..5a810e3 100644
--- a/www/src/tsconfig.json
+++ b/www/src/tsconfig.app.json
@@ -1,21 +1,22 @@
 {
   "compilerOptions": {
-    "baseUrl": "",
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "target": "es5",
     "lib": [
       "es2016",
       "dom"
     ],
-    "mapRoot": "./",
+    "outDir": "../out-tsc/app",
     "module": "es2015",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
-    "sourceMap": true,
-    "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
-    ]
-  }
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
 }
diff --git a/www/src/tsconfig.e2e.json b/www/src/tsconfig.e2e.json
new file mode 100644
index 0000000..72a2d6d
--- /dev/null
+++ b/www/src/tsconfig.e2e.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}
diff --git a/www/src/tsconfig.spec.json b/www/src/tsconfig.spec.json
new file mode 100644
index 0000000..a474b12
--- /dev/null
+++ b/www/src/tsconfig.spec.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016",
+      "dom"
+    ],
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/www/e2e/tsconfig.json b/www/tsconfig.json
similarity index 65%
rename from www/e2e/tsconfig.json
rename to www/tsconfig.json
index 94da47a..a35a8ee 100644
--- a/www/e2e/tsconfig.json
+++ b/www/tsconfig.json
@@ -1,19 +1,20 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc-e2e",
-    "sourceMap": true,
-    "target": "es6",
+    "target": "es5",
     "typeRoots": [
-      "../node_modules/@types"
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
     ]
   }
 }
diff --git a/www/tslint.json b/www/tslint.json
index 86bc184..dd117b3 100644
--- a/www/tslint.json
+++ b/www/tslint.json
@@ -3,6 +3,7 @@
     "node_modules/codelyzer"
   ],
   "rules": {
+    "arrow-return-shorthand": true,
     "callable-types": true,
     "class-name": true,
     "comment-format": [
@@ -12,7 +13,10 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [true, "rxjs"],
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
     "import-spacing": true,
     "indent": [
       true,
@@ -42,16 +46,22 @@
     ],
     "no-construct": true,
     "no-debugger": true,
-    "no-duplicate-variable": true,
+    "no-duplicate-super": true,
     "no-empty": false,
     "no-empty-interface": true,
     "no-eval": true,
-    "no-inferrable-types": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
     "no-shadowed-variable": true,
     "no-string-literal": false,
     "no-string-throw": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
     "no-unused-expression": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
@@ -97,9 +107,18 @@
       "check-separator",
       "check-type"
     ],
-
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,

From dc37e0e19b392d0411f065b306f0e2d9627c97ef Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 5 Jun 2017 16:04:38 +0200
Subject: [PATCH 16/78] NEMEA: events are loaded as an Object

---
 www/src/app/modules/nemea/events/events.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/app/modules/nemea/events/events.component.ts b/www/src/app/modules/nemea/events/events.component.ts
index 41d099e..d0f8bfa 100644
--- a/www/src/app/modules/nemea/events/events.component.ts
+++ b/www/src/app/modules/nemea/events/events.component.ts
@@ -15,7 +15,7 @@ const now = new Date();
 })
 export class EventsComponent implements OnInit {
 
-	events : Array<Object>;
+	events : any;
 	remaining : Object = {total : (-1)};
 	query : Object = {
         from : "12:00",

From f44b3cba5e492d5b873b8bb23d0986985859d886 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 5 Jun 2017 17:06:41 +0200
Subject: [PATCH 17/78] Add new chart library instead of buggy ng2-nvd3

Somehow it also reodered some other dependencies
---
 www/package.json | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/www/package.json b/www/package.json
index b5061c7..9e795db 100644
--- a/www/package.json
+++ b/www/package.json
@@ -22,15 +22,16 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.1.0",
-    "zone.js": "^0.8.4",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
+    "@swimlane/ngx-charts": "^5.3.1",
     "angular2-grid": "^2.0.2",
-    "angular2-nvd3": "^1.0.7",
     "bootstrap": "^4.0.0-alpha.6",
+    "core-js": "^2.4.1",
+    "d3": "^4.9.1",
     "font-awesome": "^4.7.0",
-    "ng2-codemirror": "^1.1.1"
+    "ng2-codemirror": "^1.1.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "1.1.0",

From 1b4e03186c30cd95f51fc8797ee308d5115cdd86 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:13:00 +0200
Subject: [PATCH 18/78] NEMEA: renamed component for dashboard modal

Also it is now working
---
 .../dash-box-modal.component.html             | 63 +++++++++++++++
 .../dash-box-modal.component.scss}            |  0
 .../dash-box-modal.component.spec.ts}         |  0
 .../dash-box-modal.component.ts               | 77 +++++++++++++++++++
 .../dash-item/dash-item.component.html        | 21 -----
 .../dash-item/dash-item.component.ts          | 18 -----
 6 files changed, 140 insertions(+), 39 deletions(-)
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
 rename www/src/app/modules/nemea/dashboard/{dash-item/dash-item.component.scss => dash-box-modal/dash-box-modal.component.scss} (100%)
 rename www/src/app/modules/nemea/dashboard/{dash-item/dash-item.component.spec.ts => dash-box-modal/dash-box-modal.component.spec.ts} (100%)
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
 delete mode 100644 www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html
 delete mode 100644 www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts

diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
new file mode 100644
index 0000000..b9872f2
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
@@ -0,0 +1,63 @@
+<div class="modal-header">
+	<h4 class="modal-title">Editing "{{ data.title }}"</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="form">
+		<div class="input-group">
+			<div class="input-group-addon">Title</div>
+			<input type="text"
+				class="form-control"
+				name="title"
+				placeholder="Box title"
+				[(ngModel)]="data.title" />
+		</div>
+
+		<div class="input-group">
+			<div class="input-group-addon">Content</div>
+			<input type="text"
+				class="form-control"
+				name="content"
+				placeholder="Box content"
+				[(ngModel)]="data.content" />
+		</div>
+
+		<div class="input-group">
+			<div class="input-group-addon">Period [hours]</div>
+			<input type="text"
+				class="form-control"
+				name="period"
+				placeholder="Period in hours"
+				[(ngModel)]="data.period" />
+		</div>
+
+		<div class="input-group">
+			<div class="input-group-addon">Metric</div>
+			<input type="text"
+				class="form-control"
+				name="metric"
+				placeholder="Metric"
+				[(ngModel)]="data.metric"
+				[ngbTypeahead]="searchMetric" />
+		</div>
+
+		<div class="input-group">
+			<div class="input-group-addon">Type</div>
+			<select class="custom-select form-control" [(ngModel)]="data.type" name="type">
+				<option *ngFor="let type of types" [value]="type.value">{{ type.name }}</option>
+			</select>
+		</div>
+	</form>
+
+	{{ data | json }}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+	{{ backup | json }}
+
+</div>
+<div class="modal-footer">
+	<button type="button" class="btn btn-secondary" (click)="close($event)">
+		Close
+	</button>
+</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.scss b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.scss
similarity index 100%
rename from www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.scss
rename to www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.scss
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.spec.ts
similarity index 100%
rename from www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.spec.ts
rename to www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.spec.ts
diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
new file mode 100644
index 0000000..6126f12
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+const metrics = ['Category', 'Node.Name', 'Node.SW', 'Target.IP4', 'Source.IP4']
+
+@Component({
+  selector: 'app-dash-item',
+  templateUrl: './dash-box-modal.component.html',
+  styleUrls: ['./dash-box-modal.component.scss']
+})
+export class DashBoxModalComponent implements OnInit {
+
+	@Input() data : Object;
+
+	// Array of options for type selector
+	private types = [
+		{
+			value : 'piechart',
+			name : 'Piechart'
+		},
+		{
+			value : 'barchart',
+			name : 'Barchart'
+		},
+		{
+			value : 'top',
+			name : 'Top N'
+		},
+		{
+			value : 'sum',
+			name : 'Sum'
+		}
+	]
+
+	private backup;
+	private modal;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		// Save current model as backup
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Typeahead lookup
+	  */
+	searchMetric = (term : Observable<string>) => {
+		return term
+			.debounceTime(200)
+			.distinctUntilChanged()
+			.map(term => term.length < 2 ? []
+				: metrics.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0,10));
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		console.log(result);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		console.log(result);
+		this.activeModal.dismiss(result);
+	}
+
+}
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html
deleted file mode 100644
index 94711d0..0000000
--- a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="modal-header">
-	<h4 class="modal-title">{{ data.title }}</h4>
-	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
-		<span aria-hidden="true">&times;</span>
-	</button>
-</div>
-<div class="modal-body d-flex">
-	{{ data | json }}
-
-	<form novalidate>
-		<div class="form-group">
-			<label for="content">Content</label>
-			<input type="text" [(ngModel)]="data.content" name="content" id="content">
-		</div>
-	</form>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn-secondary" (click)="activeModal.close()">
-		Close
-	</button>
-</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts b/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts
deleted file mode 100644
index 98dd854..0000000
--- a/www/src/app/modules/nemea/dashboard/dash-item/dash-item.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'app-dash-item',
-  templateUrl: './dash-item.component.html',
-  styleUrls: ['./dash-item.component.scss']
-})
-export class DashItemComponent implements OnInit {
-
-	@Input() data : Object;
-
-	constructor(public activeModal: NgbActiveModal) { }
-
-	ngOnInit() {
-	}
-
-}

From c221bc7aa333a409bd50d6a8eee4b3b2990028e5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:13:45 +0200
Subject: [PATCH 19/78] NEMEA: Dashboard box working piechart

---
 .../dash-box/dash-box.component.html          |  60 +++++--
 .../dash-box/dash-box.component.scss          |  53 +++++++
 .../dashboard/dash-box/dash-box.component.ts  | 148 +++++++++++++++---
 3 files changed, 226 insertions(+), 35 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
index 1252ef0..1deb226 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -1,22 +1,52 @@
-{{ data | json}}
+<div class="box"
+	[(ngGridItem)]="box.config"
+	(onResizeStop)="resize($event)"
+	(onDragStop)="itemChange($event)">
+	<div class="handle">
+		<div class="row">
+			<h3 class="col h4">{{ box.title}}</h3>
 
-<div *ngIf="box.type == 'piechart'">
-	<app-nvd3 [options]="box.options" [data]="data" #chart></app-nvd3>
-</div>
+			<div ngbDropdown>
+				<a class="" id="dMenu" ngbDropdownToggle></a>
+				<div class="dropdown-menu" aria-labelledby="dMenu">
+					<button class="dropdown-item" (click)="edit()">Edit</button>
+					<a class="dropdown-item" (click)="duplicate()">Duplicate</a>
+					<a class="dropdown-item" (click)="remove()">Delete</a>
+				</div>
+			</div>
+		</div>
+	</div>
 
-<div *ngIf="box.type == 'top'">
-	Here should be TOP events
-</div>
+	<section class="body">
 
-<div *ngIf="box.type == 'number'">
-	Here should be NUMBER
-</div>
+		<div *ngIf="box.type == 'piechart'">
+			<ngx-charts-pie-chart #chart
+			 [results]="data"
+			 [labels]="true"
+			 [legend]="false"
+			 [doughnut]="true"
+			 (select)="onSelect($event)"></ngx-charts-pie-chart>
+		</div>
 
-<div *ngIf="box.type == ''">
-	No type of box is defined
-</div>
+		<div *ngIf="box.type == 'barchart'">
+			Here should be BARCHART graph
+		</div>
 
-{{ box.content }}
+		<div *ngIf="box.type == 'top'">
+			Here should be TOP events
+		</div>
 
-{{ box.data  | json }}
+		<div *ngIf="box.type == 'sum'">
+			Here should be SUM
+		</div>
+
+		<div *ngIf="box.type == ''">
+			No type of box is defined
+		</div>
+
+		<p>{{ box.content }}</p>
+
+	</section>
+</div>
 
+<ng-template ngbModalContainer class="item-detail"></ng-template>
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
index e69de29..8606ce1 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
@@ -0,0 +1,53 @@
+.body {
+	width: 100%;
+	height: calc(100% - 50px);	// Height of handle element must be subtracted
+	background: #FFF;
+
+	div {
+		width: calc(100% - 1em);
+		height: 100%;
+		margin: 0 0.5em;
+		display: block;
+	}
+
+	p {
+		position: absolute;
+		bottom: 0;
+		padding: 0 0.5em;
+	}
+}
+
+.grid-item {
+	border: solid 1px #ccc;
+	background: #fff;
+
+	&.moving {
+		box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
+			0px 7px 10px 1px rgba(0, 0, 0, 0.14),
+			0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+		z-index: 999;
+
+		.body div {
+			opacity: 0.25;
+		}
+	}
+
+	.handle {
+		width: 100%;
+		height: 50px;
+		background: #eee;
+		color: black;
+		font-weight: 500;
+		padding: 15px;
+		box-sizing: border-box;
+
+		.dropdown {
+			cursor: pointer;
+			margin-right: 1em;
+			font-size: 1.25em;
+			top: -0.25em;
+		}
+	}
+
+}
+
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
index 1f5884d..ba77d2e 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -1,9 +1,24 @@
-import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
+import { PieChartComponent } from '@swimlane/ngx-charts';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DashBoxModalComponent } from '../dash-box-modal/dash-box-modal.component';
+import { Box } from '../dashboard.component';
 
-import { BoxService } from '../box.service';
-import * as nv from 'nvd3';
 
+import { BoxService } from '../box.service';
 
+/**
+  * Dashboard Box component
+  *
+  * It encapsulates a box which can of several types:
+  *		- piechart
+  *		- barchart
+  *		- sum
+  *		- top
+  *
+  * For displaying charts ngx-charts library is used. Before you say I should
+  * use nvd3 it is very buggy in Angular 4 (ng2-nvd3 and angular-nvd3).
+  */
 @Component({
   selector: 'dash-box',
   templateUrl: './dash-box.component.html',
@@ -13,32 +28,43 @@ import * as nv from 'nvd3';
 export class DashBoxComponent {
 
 	@Input() box;
-	@ViewChild('chart') chart;
 
-	private data = [ { "key": [ "Hello" ], "x:": 10 }, { "key": [ "Hello2" ], "x:": 20 } ];
+	// Keeps the original model
+	private backup;
+
+	@Input() index;
 
-	constructor(private boxService : BoxService) {
-		window.onresize = null;
+	/**
+	  * We use event emitter for parent interaction which holds the boxes array
+	  *
+	  * It might look that this should be in the dashboard component but
+	  * this component really operates only on itself.
+	  */
+	@Output() onDelete = new EventEmitter<Object>();
+	@Output() onDuplicate = new EventEmitter<Object>();
+	@Output() onSave = new EventEmitter<Object>();
+
+	@ViewChild(PieChartComponent)
+	private piechart;
+
+	private data = [];
+	private modalRef : any;
+
+	constructor(private boxService : BoxService,
+			   private modalService: NgbModal) {
 	}
 
+	/**
+	  * Shift time and fetch data on init
+	  */
 	ngOnInit() {
-		delete this.box.data;
-//		console.log(this.box.data);
+		// Shift time for fetching correct data
 		this.timeShift();
-		console.log("should get data from", this.box.beginTime)
 
+		// Fetch data
 		this.boxService.aggregate(this.box).subscribe(
 			(data) => {
-				console.debug("Getting data");
-				//this.data = data;
-				//this.data = [{"key" : ["Hello"], "x:" : 10}]
-				console.log(data);
-				//setTimeout(_ => { this.data = data }, 100);
-				//console.log(data);
-				//console.log(this.chart["ngNvD3"])
-				//this.chart["ngNvD3"].clearElement();
-				//this.chart["ngNvD3"].isViewInitialize(false);
-				//this.chart["ngNvD3"]["chart"].update()//WithData(this.box.data, this.box.options);
+				this.data = data;
 			},
 			(err) => {
 				console.error(err);
@@ -59,5 +85,87 @@ export class DashBoxComponent {
         this.box.endTime = Math.floor(Number(now)/1000);
     }
 
+	/**
+	  * Update the chart
+	  * Calls child method update()
+	  * More info here: https://github.com/swimlane/ngx-charts/blob/master/src/pie-chart/pie-chart.component.ts
+	  */
+    update() {
+    	if (this.piechart != undefined)
+			this.piechart.update();
+    }
+
+	/**
+	  * Trigger a modal window which can edit the given box
+	  */
+	edit() {
+		// Create a backup of current model
+		this.backup = Object.assign({}, this.box);
+
+		// Open the modal and check results
+		this.modalRef = this.modalService.open(DashBoxModalComponent)
+		this.modalRef.componentInstance.data = this.box;
+		this.modalRef.result.then(
+			(result) => {
+				/**
+				  * Closed with a button, replace current model with the new one
+				  * Also would be nice to reload data
+				  */
+
+				// Shift the time
+				this.timeShift();
+				this.save();
+
+				this.boxService.aggregate(this.box).subscribe(
+					(data) => {
+						this.data = data;
+					},
+					(err) => {
+						console.error(err);
+					}
+				);
+
+			},
+			(reason) => {
+				// Dismissal of the modal, revert backup
+				console.debug("Modal dismissed");
+				this.box = Object.assign({}, this.backup);
+			}
+		);
+	}
+
+	/**
+	  * Remove this box from the array of boxes
+	  */
+	remove() {
+		console.debug("Deleting box");
+		this.onDelete.emit({"box" : this.box, "index" : this.index });
+	}
+
+	/**
+	  * Duplicate this box in the boxes array
+	  */
+	duplicate() {
+		this.onDuplicate.emit(this.box);
+	}
+
+	save() {
+		this.onSave.emit({});
+	}
+
+	resize(event) {
+		console.log(event);
+		this.update();
+	}
+
+	/**
+	  * Called when onDragStop is emitted to save the change
+	  */
+	itemChange(event) {
+		this.update();
+
+		// Must wait with saving, the change is not propagated fash enough
+		setTimeout(_ => { this.save() }, 100);
+	}
 
 }

From cf4fc7acada9100ccb2bef9774b3b80562749af2 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:14:27 +0200
Subject: [PATCH 20/78] NEMEA: move Dashboard Box logic to DashBoxComponent

---
 .../nemea/dashboard/dashboard.component.html  |  29 +---
 .../nemea/dashboard/dashboard.component.scss  |  25 ----
 .../nemea/dashboard/dashboard.component.ts    | 141 ++++++------------
 3 files changed, 56 insertions(+), 139 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.html b/www/src/app/modules/nemea/dashboard/dashboard.component.html
index 8ddf623..064bb8b 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.html
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.html
@@ -2,30 +2,17 @@
 
 	<div *ngIf="boxes.length == 0">You should add box</div>
 
-	<div *ngFor="let box of boxes ; let i = index" [(ngGridItem)]="box.config">
-		<div class="handle">
-			<div class="row">
-				<h3 class="col h4">{{ box.title}}</h3>
+	<dash-box
+		[box]="box"
+		[index]="index"
+		(onDelete)="deleteBox($event)"
+		(onDuplicate)="duplicateBox($event)"
+		(onSave)="save($event)"
+		*ngFor="let box of boxes">
+	</dash-box>
 
-			<div ngbDropdown>
-				<a class="" id="dMenu" ngbDropdownToggle></a>
-				<div class="dropdown-menu" aria-labelledby="dMenu">
-					<button class="dropdown-item" (click)="editBox(box)">Edit</button>
-					<a class="dropdown-item" (click)="duplicateBox(box)">Duplicate</a>
-					<a class="dropdown-item" (click)="deleteBox(box, i)">Delete</a>
-				</div>
-			</div>
-			</div>
-
-
-		</div>
-
-		<dash-box [box]="box"></dash-box>
-
-	</div>
 </div>
 
 <a (click)="addCleanBox()" class="btn btn-primary">Add Box</a>
 
-<template ngbModalContainer class="item-detail"></template>
 
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.scss b/www/src/app/modules/nemea/dashboard/dashboard.component.scss
index c2a5fd5..8b13789 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.scss
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.scss
@@ -1,26 +1 @@
-.grid-item {
-	border: solid 1px #ccc;
 
-	&.moving {
-		box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
-			0px 7px 10px 1px rgba(0, 0, 0, 0.14),
-			0px 2px 16px 1px rgba(0, 0, 0, 0.12);
-	}
-}
-
-.handle {
-	width: 100%;
-	height: 50px;
-	background: #eee;
-	color: black;
-	font-weight: 500;
-	padding: 15px;
-	box-sizing: border-box;
-
-	.dropdown {
-		cursor: pointer;
-		margin-right: 1em;
-		font-size: 1.25em;
-		top: -0.25em;
-	}
-}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
index 99269e5..66baa9d 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -1,14 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-
 import { NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent } from 'angular2-grid';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { UsersService } from 'app/modules/users/users.service';
 
-import { DashItemComponent } from './dash-item/dash-item.component';
-
-interface Box {
+export interface Box {
 	id : number;
 	/**
 	  * Configuration of the box itself
@@ -31,10 +27,22 @@ interface Box {
 	  * Options for the graph
 	  */
 	options : Object;
-	data : any;
+	/**
+	  * time from which to analyze events
+	  */
 	beginTime : number;
+	/**
+	  * ending time for analyzing events, usually now
+	  * TODO: add time offset for history views
+	  */
 	endTime : number;
+	/**
+	  * Time window size in hours
+	  */
 	period : number;
+	/**
+	  * metric for analysis
+	  */
 	metric : string;
 }
 
@@ -46,63 +54,11 @@ interface Box {
 })
 export class DashboardComponent implements OnInit {
 
-	private piechart = {
-		refreshDataOnly : true,
-        chart: {
-            type: 'pieChart',
-            //height: 375,
-            x: function(d) {
-            	return d.key;
-            },
-            y: function(d) {
-	            return d.x;
-            },
-            //showLabels: false,
-            //donut : true,
-            //padAngle : 0.00,
-            //cornerRadius : 1,
-            //transitionDuration: 500,
-            //labelThreshold: 0,
-            //useInteractiveGuideline: true,
-            //legend: {
-            //    margin: {
-            //        top: 5,
-            //        right: 0,
-            //        bottom: -15,
-            //        left: 0
-            //    }
-            //},
-            //legendPosition : "top",
-            /*tooltipContent : function(key, x, y, e, graph) {
-                                console.log(key);
-                                console.log(y);
-                                console.log(e);
-                                console.log(graph);
-                                return 'Hello';
-                             },*/
-            /*pie : {
-                dispatch: {
-                    elementClick: function(e) {
-                        var date = new Date();
-                        console.log(e)
-                        date.setTime(date.getTime() - 1000*60*60*24);
-                        date.setHours(0);
-                        date.setMinutes(0);
-                        window.location.href = '#/events?filter&date=' + date.getTime() + '&from=' + new Date().getHours() + ':' + new Date().getMinutes() + '&category=' + e.data.key[0]
-                    },
-                },
-                labelType : "percent",
-                labelsOutside : false,
-			},*/
-			callback : () => {
-				console.log("hello");
-			}
-        }
-	}
-
-
 	private boxes : Array<Box> = [];
 
+	/**
+	  * Grid configuration taken from: https://github.com/BTMorton/angular2-grid/blob/master/demo-dashboard/app/app.component.ts
+	  */
 	private gridConfig: NgGridConfig = <NgGridConfig>{
 		'margins': [5],
 		'draggable': true,
@@ -113,11 +69,11 @@ export class DashboardComponent implements OnInit {
 		'visible_rows': 0,
 		'min_cols': 1,
 		'min_rows': 1,
-		'col_width': 200,
-		'row_height': 200,
+		'col_width': 20,
+		'row_height': 20,
 		'cascade': 'left',
-		'min_width': 100,
-		'min_height': 100,
+		'min_width': 5,
+		'min_height': 5,
 		'fix_to_grid': false,
 		'auto_style': true,
 		'auto_resize': false,
@@ -127,14 +83,16 @@ export class DashboardComponent implements OnInit {
 		'limit_to_screen': true
 	};
 
+	// LocalStorage currentUser
 	private user : Object;
-	private modalRef : any;
-
-	config = { 'dragHandle': '.handle', 'col': 1, 'row': 1, 'sizex': 2, 'sizey': 2 };
 
-	constructor(private usersService : UsersService,
-			   private modalService: NgbModal) {}
+	constructor(private usersService : UsersService) {}
 
+	/**
+	  * Get dashboard config from local storage
+	  *
+	  * If no box is there add a clean box (empty dashboard is a sad dashboard)
+	  */
 	ngOnInit() {
 		this.user = JSON.parse(localStorage["currentUser"]);
 
@@ -158,14 +116,13 @@ export class DashboardComponent implements OnInit {
 			id : 0,
 			config : {
 				'dragHandle': '.handle',
-				'sizex': 2,
-				'sizey': 2
+				'sizex': 10,
+				'sizey': 10
 			},
 			title : "New Box",
 			content : "",
-			options : this.piechart,
+			options : null,
 			type : "piechart",
-			data : [],
 			beginTime : -1,
 			endTime : -1,
 			period : 240,
@@ -175,7 +132,7 @@ export class DashboardComponent implements OnInit {
 		this.boxes.push(box);
 
 		// Save the new box to local storage
-		this.save();
+		this.save({});
 
 	}
 
@@ -183,7 +140,14 @@ export class DashboardComponent implements OnInit {
 		this.boxes.push(box);
 	}
 
-	save() : void {
+	/**
+	  * Save settings of the dashboard to localStorage
+	  *
+	  * TODO: store the settings in DB
+	  *
+	  * This looks really bad but we can't be sure what is inside localStorage
+	  */
+	save($event) : void {
 		let user = JSON.parse(localStorage.getItem("currentUser"));
 
 		console.log(user);
@@ -206,37 +170,28 @@ export class DashboardComponent implements OnInit {
 	}
 
 	/**
-	  * Trigger a modal window which can edit the given box
+	  * Remove a box from boxes array and save it
 	  */
-	editBox(box : Object) {
-		console.debug("Should edit box");
-		this.modalRef = this.modalService.open(DashItemComponent);
-		this.modalRef.componentInstance.data = box;
-	}
-
-	deleteBox(box, i) {
-		console.log("should delete: ", box, i);
+	deleteBox(box) {
+		console.log("should delete: ", box.box, box.index);
 
-		let index = this.boxes.indexOf(box, 0);
+		let index = this.boxes.indexOf(box.box, 0);
 
 		if (index > -1) {
 			this.boxes.splice(index, 1);
-			this.save();
+			this.save({});
 		}
 	}
 
 	/**
 	  * Duplicates given box and adds it to boxes array
 	  *
-	  * TODO: this causes an exception when not in production mode
+	  * TODO: this causes the browser to freeze, don't know why
 	  */
 	duplicateBox(box : Box) {
+		console.log("duplicating")
 		let newbox = Object.assign({}, box);
 		newbox["title"] = "Duplicate of " + box["title"];
-		this.addBox(newbox);
-	}
-
-	loadData(box : Box) {
-		console.log(box);
+		this.boxes.push(box);
 	}
 }

From a48abcf6fbf9f9094ca46153463cdd473dea6a79 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:17:15 +0200
Subject: [PATCH 21/78] NEMEA: better organization of imports

---
 www/src/app/modules/nemea/nemea.module.ts | 40 ++++++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index dc3ce3e..2be3e78 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -3,25 +3,46 @@ import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
 import { FormsModule }		from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { nemeaBase, nemeaComponent } from './nemea.component';
-import { nemeaStatusComponent } from './status/nemea_status.component';
-import { EventsComponent } from './events/events.component';
 
 import { NgGridModule } from 'angular2-grid';
-import { NvD3Module } from 'angular2-nvd3';
 
 import { CodemirrorModule } from 'ng2-codemirror';
 
-import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
+/**
+  * ngx charts
+  */
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { IdeaPipe } from './events/idea.pipe';
+
+import { nemeaBase, nemeaComponent } from './nemea.component';
+
+/**
+  * NEMEA Events
+  */
+import { EventsComponent } from './events/events.component';
 import { EventItemComponent } from './events/event-item/event-item.component';
 import { EventDetailComponent } from './events/event-detail/event-detail.component';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
+
+/**
+  * NEMEA Dashboard
+  */
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { DashItemComponent } from './dashboard/dash-item/dash-item.component';
 import { DashBoxComponent } from './dashboard/dash-box/dash-box.component';
+import { DashBoxModalComponent } from './dashboard/dash-box-modal/dash-box-modal.component';
+
+/**
+  * NEMEA Reporter Configuration
+  */
+import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
+
+/**
+  * NEMEA Status
+  */
+import { nemeaStatusComponent } from './status/nemea_status.component';
 
 const nemeaRoutes : Routes = [
 	{
@@ -96,7 +117,8 @@ const nemeaRoutes : Routes = [
 		SafePipeModule,
 		CodemirrorModule,
 		NgGridModule,
-		NvD3Module,
+		BrowserAnimationsModule,
+		NgxChartsModule,
 		NgbModule.forRoot(),
 		RouterModule.forChild(nemeaRoutes)
 	],
@@ -110,10 +132,10 @@ const nemeaRoutes : Routes = [
 		EventItemComponent,
 		EventDetailComponent,
 		DashboardComponent,
-		DashItemComponent,
+		DashBoxModalComponent,
 		DashBoxComponent],
 	exports : [],
 	providers : [SafePipe],
-	entryComponents : [EventDetailComponent, DashItemComponent]
+	entryComponents : [EventDetailComponent, DashBoxModalComponent]
 })
 export class nemeaModule {};

From 1aaca0dc4d953cfb15e0f7db072ec4815fc47e18 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:17:44 +0200
Subject: [PATCH 22/78] NEMEA: use ng-template

---
 .../modules/nemea/events/event-item/event-item.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/app/modules/nemea/events/event-item/event-item.component.html b/www/src/app/modules/nemea/events/event-item/event-item.component.html
index fdb5e24..2e3f110 100644
--- a/www/src/app/modules/nemea/events/event-item/event-item.component.html
+++ b/www/src/app/modules/nemea/events/event-item/event-item.component.html
@@ -16,7 +16,7 @@
 	<button [routerLink]="['.']" [queryParams]="{id : item._id.$oid }" class="btn btn-primary btn-sm">Expand</button>
 </td>
 
-<template ngbModalContainer class="item-detail"></template>
+<ng-template ngbModalContainer class="item-detail"></ng-template>
 
 <!--
 	Source: <span *ngIf="item.Source[0]">{{ item.Source[0].IP4[0] }} | {{ item.Source[0].Proto[0] }}</span>

From 409ca9873a4e4e01b0f9efaf135745f0143fd0e0 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:18:09 +0200
Subject: [PATCH 23/78] NEMEA: Placeholder styles must in root styles

---
 www/src/styles/main.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/www/src/styles/main.scss b/www/src/styles/main.scss
index 88aa296..f80e87c 100644
--- a/www/src/styles/main.scss
+++ b/www/src/styles/main.scss
@@ -148,3 +148,8 @@ nemea-events .modal-dialog {
   border: 1px solid #eee;
   height: calc(90vh - 2em)!important;
 }
+
+.grid-placeholder {
+	border: 2px dashed $gray;
+	background: rgba(0,0,0,0.05)
+}

From 6f5138699ada76c89ef2e45fecd6e7485915eca5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:19:51 +0200
Subject: [PATCH 24/78] Better descriptions for modules

---
 www/src/app/modules/ftas/ftas.module.ts         | 2 +-
 www/src/app/modules/nerd/nerd.module.ts         | 2 +-
 www/src/app/modules/security-cloud/sc.module.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/src/app/modules/ftas/ftas.module.ts b/www/src/app/modules/ftas/ftas.module.ts
index 18664f6..609ed9e 100644
--- a/www/src/app/modules/ftas/ftas.module.ts
+++ b/www/src/app/modules/ftas/ftas.module.ts
@@ -14,7 +14,7 @@ const ftasRoutes : Routes = [{
     data : {
         role : 10,
         name : "FTAS",
-        description : "The mighty FTAS!",
+        description : "Flow-based Traffic Analysis System",
         icon : "fa-first-order"
     }
 }]
diff --git a/www/src/app/modules/nerd/nerd.module.ts b/www/src/app/modules/nerd/nerd.module.ts
index e7953fc..24d8997 100644
--- a/www/src/app/modules/nerd/nerd.module.ts
+++ b/www/src/app/modules/nerd/nerd.module.ts
@@ -14,7 +14,7 @@ const routes : Routes = [{
     data : {
         role : 10,
         name : "NERD",
-        description : "There is nothing nerdy about NERD.",
+        description : "Network Entity Reputation Database",
         icon : "fa-user-secret"
     }
 }]
diff --git a/www/src/app/modules/security-cloud/sc.module.ts b/www/src/app/modules/security-cloud/sc.module.ts
index ddfa2e4..be21be8 100644
--- a/www/src/app/modules/security-cloud/sc.module.ts
+++ b/www/src/app/modules/security-cloud/sc.module.ts
@@ -14,7 +14,7 @@ const routes : Routes = [{
     data : {
         role : 10,
         name : "Security Cloud",
-        description : "Let's be secure, in cloud!",
+        description : "Distributed, highly available IP flow record collector.",
         icon : "fa-cloud"
     }
 }]

From c91d2bd2868b9b60b7d91e5bb2c0675ed0d785db Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:21:08 +0200
Subject: [PATCH 25/78] NEMEA: update API to comply with ngx-charts

---
 modules/Nemea-Dashboard | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index a3cc161..f2c9d11 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit a3cc161c9d7bdc10e19611c42624f893b63b80e8
+Subproject commit f2c9d110630ec9f6924212e43c13d52f52014a51

From 5fd5044f577d072ecb106993f86f259e2bd121e5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 15:58:09 +0200
Subject: [PATCH 26/78] Refactor users module to use angular-cli structure

---
 .../users/users-add/users-add.component.html  |  87 +++++++
 .../users-add.component.scss}                 |   0
 .../users-add/users-add.component.spec.ts     |  25 ++
 .../users/users-add/users-add.component.ts    |  66 ++++++
 .../users-edit.component.html}                |   4 -
 .../users-edit/users-edit.component.scss      |   0
 .../users-edit/users-edit.component.spec.ts   |  25 ++
 .../users/users-edit/users-edit.component.ts  |  75 ++++++
 .../users-list/users-list.component.html      |  36 +++
 .../users-list/users-list.component.scss      |   0
 .../users-list/users-list.component.spec.ts   |  25 ++
 .../users/users-list/users-list.component.ts  |  48 ++++
 www/src/app/modules/users/users.component.ts  | 214 +-----------------
 www/src/app/modules/users/users.module.ts     |  35 +--
 14 files changed, 407 insertions(+), 233 deletions(-)
 create mode 100644 www/src/app/modules/users/users-add/users-add.component.html
 rename www/src/app/modules/users/{user-add.scss => users-add/users-add.component.scss} (100%)
 create mode 100644 www/src/app/modules/users/users-add/users-add.component.spec.ts
 create mode 100644 www/src/app/modules/users/users-add/users-add.component.ts
 rename www/src/app/modules/users/{users-edit.html => users-edit/users-edit.component.html} (97%)
 create mode 100644 www/src/app/modules/users/users-edit/users-edit.component.scss
 create mode 100644 www/src/app/modules/users/users-edit/users-edit.component.spec.ts
 create mode 100644 www/src/app/modules/users/users-edit/users-edit.component.ts
 create mode 100644 www/src/app/modules/users/users-list/users-list.component.html
 create mode 100644 www/src/app/modules/users/users-list/users-list.component.scss
 create mode 100644 www/src/app/modules/users/users-list/users-list.component.spec.ts
 create mode 100644 www/src/app/modules/users/users-list/users-list.component.ts

diff --git a/www/src/app/modules/users/users-add/users-add.component.html b/www/src/app/modules/users/users-add/users-add.component.html
new file mode 100644
index 0000000..ee9321e
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.html
@@ -0,0 +1,87 @@
+<div class="container">
+	<h2>
+		<a routerLink='/users'><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+		Add new user
+	</h2>
+<form class="example-form" (ngSubmit)="addUser()" novalidate #userForm="ngForm">
+	<div class="row">
+		<div class="form-group col">
+			<label for="username">Username *</label>
+			<input placeholder="Username" class="form-control" required
+				[(ngModel)]="user.username"	name="username" id="username">
+		</div>
+
+		<div class="form-group col">
+			<label for="email">E-mail</label>
+			<input
+				placeholder="E-mail"
+				[(ngModel)]="user.email"
+				name="email"
+				type="email"
+				id="email"
+				class="form-control">
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="form-group col">
+			<label for="first_name">First Name</label>
+			<input placeholder="First name" [(ngModel)]="user.first_name"
+				name="first_name" id="first_name" class="form-control">
+		</div>
+		<div class="form-group col">
+			<label for="last_name">Last Name</label>
+			<input placeholder="Last name" [(ngModel)]="user.last_name"
+				name="last_name" id="last_name" class="form-control">
+		</div>
+	</div>
+
+	<!-- PASSWORD -->
+	<div class="row">
+		<div class="form-group col">
+			<label for="password">Password *</label>
+			<input placeholder="Password" [(ngModel)]="user.password" required
+				name="password" type="password" id="password" class="form-control">
+		</div>
+
+		<div class="form-group col">
+			<label for="password_validation">Password validation *</label>
+			<input placeholder="Password verification" required
+				[(ngModel)]="passwordValidation" name="password_validation"
+				class="form-control" type="password">
+
+			<div class="pw-verify flex-item" *ngIf="passwordValidation">
+				<span *ngIf="passwordValidation == user.password">
+					<i class="fa fa-check" aria-hidden="true"></i>
+				</span>
+				<span *ngIf="passwordValidation != user.password">
+					<i class="fa fa-times" aria-hidden="true"></i>
+				</span>
+			</div>
+		</div>
+	</div>
+
+	<!-- ROLE selection -->
+	<div class="form-group">
+		<label for="user_role">Select Role *</label>
+		<select placeholder="Role" [(ngModel)]="user.role" name="role"
+			class="custom-select form-control" id="user_role">
+			<option *ngFor="let role of roles" [value]="role.value">
+				{{role.viewValue}}
+			</option>
+		</select>
+	</div>
+
+	<div class="flex-item">
+		<button name="last_name" type="submit" class="btn btn-primary btn-lg"
+			[disabled]="!userForm.form.valid">
+			Add User
+		</button>
+
+		<a routerLink='/users' class="btn btn-outline-danger">Cancel</a>
+
+		<span *ngIf="error">Error: {{ error }}</span>
+	</div>
+</form>
+</div>
+
diff --git a/www/src/app/modules/users/user-add.scss b/www/src/app/modules/users/users-add/users-add.component.scss
similarity index 100%
rename from www/src/app/modules/users/user-add.scss
rename to www/src/app/modules/users/users-add/users-add.component.scss
diff --git a/www/src/app/modules/users/users-add/users-add.component.spec.ts b/www/src/app/modules/users/users-add/users-add.component.spec.ts
new file mode 100644
index 0000000..bbf3307
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersAddComponent } from './users-add.component';
+
+describe('UsersAddComponent', () => {
+  let component: UsersAddComponent;
+  let fixture: ComponentFixture<UsersAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/users/users-add/users-add.component.ts b/www/src/app/modules/users/users-add/users-add.component.ts
new file mode 100644
index 0000000..f95591b
--- /dev/null
+++ b/www/src/app/modules/users/users-add/users-add.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { UsersService } from '../users.service';
+
+@Component({
+	selector: 'users-add',
+	templateUrl: './users-add.component.html',
+	styleUrls: ['./users-add.component.scss'],
+	providers : [UsersService]
+})
+export class UsersAddComponent implements OnInit {
+
+	returnUrl = "/users";
+
+	// Default user model
+	user = {
+		first_name : "",
+		last_name : "",
+		username : "",
+		email : "",
+		password : "",
+		role : 10
+	}
+
+	// Default role model
+	roles = [
+		{value: 0, viewValue: 'Administrator'},
+		{value: 10, viewValue: 'User'},
+		{value: 255, viewValue: 'Guest'}
+	];
+
+	error = "";
+	// Store password from validation
+	passwordValidation : string = "";
+
+	constructor(private usersService: UsersService,
+				 private router : Router) {}
+
+	ngOnInit() {
+	}
+
+	addUser() {
+		// Check if all required fields are set
+		// Check password verification
+		if ((this.user.username == "" ||
+			this.user.email == ""	||
+			this.user.password == "" ||
+			this.passwordValidation == "") &&
+			this.passwordValidation == this.user.password) {
+			this.error = "Required fields are missing.";
+			return;
+		} else {
+			this.usersService.add(this.user).subscribe(
+			data => {
+				// Successfully created user, redirect to users listing
+				this.router.navigate([this.returnUrl]);
+			},
+			error => {
+				// Handle error response and display it as error
+				let response = JSON.parse(error['_body']);
+				this.error = response['message'];
+			})
+		}
+	}
+}
diff --git a/www/src/app/modules/users/users-edit.html b/www/src/app/modules/users/users-edit/users-edit.component.html
similarity index 97%
rename from www/src/app/modules/users/users-edit.html
rename to www/src/app/modules/users/users-edit/users-edit.component.html
index f92c3c6..7ab0797 100644
--- a/www/src/app/modules/users/users-edit.html
+++ b/www/src/app/modules/users/users-edit/users-edit.component.html
@@ -56,7 +56,3 @@ <h2>
 		<span *ngIf="error">Error: {{ error }}</span>
 	</div>
 </form>
-
-
-{{ user | json }}
-{{ user_original | json }}
diff --git a/www/src/app/modules/users/users-edit/users-edit.component.scss b/www/src/app/modules/users/users-edit/users-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/users/users-edit/users-edit.component.spec.ts b/www/src/app/modules/users/users-edit/users-edit.component.spec.ts
new file mode 100644
index 0000000..d649f1b
--- /dev/null
+++ b/www/src/app/modules/users/users-edit/users-edit.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersEditComponent } from './users-edit.component';
+
+describe('UsersEditComponent', () => {
+  let component: UsersEditComponent;
+  let fixture: ComponentFixture<UsersEditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/users/users-edit/users-edit.component.ts b/www/src/app/modules/users/users-edit/users-edit.component.ts
new file mode 100644
index 0000000..e17e518
--- /dev/null
+++ b/www/src/app/modules/users/users-edit/users-edit.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { UsersService } from '../users.service';
+
+@Component({
+	selector: 'app-users-edit',
+	templateUrl: './users-edit.component.html',
+	styleUrls: ['./users-edit.component.scss'],
+	providers : [UsersService]
+})
+export class UsersEditComponent implements OnInit {
+	userId : String;
+	error : String;
+	passwordValidation = "";
+	user : Object = {
+		first_name : "",
+		last_name : "",
+		username : "",
+		email : "",
+		password : "",
+		role : -1
+	}
+	user_original : Object;
+
+	roles = [
+		{value: 0, viewValue: 'Administrator'},
+		{value: 10, viewValue: 'User'},
+		{value: 255, viewValue: 'Guest'}
+	];
+
+	constructor(private usersService : UsersService, private route : ActivatedRoute, private router : Router) {}
+
+	ngOnInit() {
+		this.route.params.subscribe(data => {
+			this.userId = data['id'];
+
+			this.usersService.get(this.userId).subscribe(
+				(data : Object) => {
+					console.log(data);
+					this.user = data;
+					this.user_original = JSON.parse(JSON.stringify(data));
+				},
+				error => {
+					console.log(error);
+					this.error = "This user doesn't exist";
+				}
+			);
+		});
+	}
+
+	updateUser() {
+		// Create a diff between user and user_original
+		let diff_user : Object = {};
+		for (var key in this.user) {
+			if (key != "_id" && key != 'settings' &&
+				this.user_original[key] != this.user[key])
+			{
+				diff_user[key] = this.user[key]
+			}
+		}
+
+		// Update only if there is something to update
+		if (Object.keys(diff_user).length > 0) {
+			this.usersService.update(this.userId, diff_user).subscribe(
+				data => {
+					this.router.navigate(['/users']);
+				},
+				error => {
+					console.log(error);
+					this.error = "Something went wrong";
+				});
+		}
+	}
+}
diff --git a/www/src/app/modules/users/users-list/users-list.component.html b/www/src/app/modules/users/users-list/users-list.component.html
new file mode 100644
index 0000000..2c6f01b
--- /dev/null
+++ b/www/src/app/modules/users/users-list/users-list.component.html
@@ -0,0 +1,36 @@
+<h2>Users management</h2>
+<section class="box d-flex flex-row">
+	<table class="table table-hover">
+		<thead>
+		<tr>
+			<th>Username</th>
+			<th>E-mail</th>
+			<th>First Name</th>
+			<th>Last Name</th>
+			<th>Role</th>
+			<th>Action</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr *ngFor="let user of users">
+			<td>{{ user.username }}</td>
+			<td>{{ user.email }}</td>
+			<td>{{ user.first_name }}</td>
+			<td>{{ user.last_name }}</td>
+			<td>{{ user.role }}</td>
+			<td>
+				<button class="btn btn-secondary"routerLink="{{user.id.$oid}}">View user</button>
+				<button class="btn btn-danger" title="Remove user" (click)="removeUser(user)"
+				*ngIf="currentUser.user.username != user.username">Delete user</button>
+			</td>
+		</tr>
+		</tbody>
+		<tfoot>
+			<tr>
+				<td colspan="5"><button type="button" class="btn btn-primary" routerLink="add" routerLinkActive="active-link">Add new user</button>
+				<td>
+			</tr>
+		</tfoot>
+	</table>
+</section>
+
diff --git a/www/src/app/modules/users/users-list/users-list.component.scss b/www/src/app/modules/users/users-list/users-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/users/users-list/users-list.component.spec.ts b/www/src/app/modules/users/users-list/users-list.component.spec.ts
new file mode 100644
index 0000000..8c1ac3e
--- /dev/null
+++ b/www/src/app/modules/users/users-list/users-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersListComponent } from './users-list.component';
+
+describe('UsersListComponent', () => {
+  let component: UsersListComponent;
+  let fixture: ComponentFixture<UsersListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/users/users-list/users-list.component.ts b/www/src/app/modules/users/users-list/users-list.component.ts
new file mode 100644
index 0000000..a8969b1
--- /dev/null
+++ b/www/src/app/modules/users/users-list/users-list.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+
+import { UsersService } from '../users.service';
+
+@Component({
+  selector: 'users-list',
+  templateUrl: './users-list.component.html',
+  styleUrls: ['./users-list.component.scss'],
+  providers : [UsersService]
+})
+export class UsersListComponent implements OnInit {
+
+	users : Array<Object> = [];
+	currentUser = JSON.parse(localStorage.getItem('currentUser'));
+
+	constructor (private usersService : UsersService) {}
+
+	ngOnInit() {
+		console.log("trying to list users")
+		this.listUsers();
+	}
+
+	private listUsers() {
+		this.usersService.list().subscribe(
+			data => {
+				console.log(data);
+				this.users = data;
+			},
+			error => {
+				console.log(error)
+			}
+		);
+	}
+
+	removeUser(user:Object) {
+		console.log(user['id']['$oid']);
+		this.usersService.remove(user['id']['$oid']).subscribe(
+			data => {
+			console.log(data);
+			this.listUsers();
+			},
+			error => {
+				console.log(error);
+			}
+		)
+	}
+
+}
diff --git a/www/src/app/modules/users/users.component.ts b/www/src/app/modules/users/users.component.ts
index 4718f1c..655a412 100644
--- a/www/src/app/modules/users/users.component.ts
+++ b/www/src/app/modules/users/users.component.ts
@@ -5,220 +5,8 @@ import { Observable } from 'rxjs/Observable';
 
 import { UsersService } from './users.service';
 
-//import { HttpService } from '../../services/index';
-
 @Component({
 	selector : 'users',
 	template : `<router-outlet></router-outlet>`
 })
-export class usersComponent {};
-
-@Component({
-	selector : 'users-add',
-	templateUrl : './users-add.html',
-	styleUrls: ['./user-add.scss'],
-	providers : [UsersService]
-})
-export class usersAddComponent {
-	returnUrl = "/users";
-
-	user = {
-		first_name : "",
-		last_name : "",
-		username : "",
-		email : "",
-		password : "",
-		role : 10
-	}
-
-	error = "";
-	passwordValidation : string = "";
-
-	roles = [
-		{value: 0, viewValue: 'Administrator'},
-		{value: 10, viewValue: 'User'},
-		{value: 255, viewValue: 'Guest'}
-	];
-
-	constructor (private usersService: UsersService, private router : Router) {}
-
-	ngOnInit() {
-	}
-
-	addUser() {
-		// Check if all required fields are set
-		// Check password verification
-		if ((this.user.username == "" ||
-			this.user.email == ""	||
-			this.user.password == "" ||
-			this.passwordValidation == "") &&
-			this.passwordValidation == this.user.password) {
-			this.error = "Required fields are missing.";
-			return;
-		} else {
-			this.usersService.add(this.user).subscribe(
-			data => {
-				// Successfully created user, redirect to users listing
-				this.router.navigate([this.returnUrl]);
-			},
-			error => {
-				// Handle error response and display it as error
-				let response = JSON.parse(error['_body']);
-				this.error = response['message'];
-			})
-		}
-	}
-};
-
-@Component({
-	selector : 'users-list',
-	template : `
-	<h2>Users management</h2>
-	<section class="box d-flex flex-row">
-		<table class="table table-hover">
-			<thead>
-			<tr>
-				<th>Username</th>
-				<th>E-mail</th>
-				<th>First Name</th>
-				<th>Last Name</th>
-				<th>Role</th>
-				<th>Action</th>
-			</tr>
-			</thead>
-			<tbody>
-			<tr *ngFor="let user of users">
-				<td>{{ user.username }}</td>
-				<td>{{ user.email }}</td>
-				<td>{{ user.first_name }}</td>
-				<td>{{ user.last_name }}</td>
-				<td>{{ user.role }}</td>
-				<td>
-					<button class="btn btn-secondary"routerLink="{{user.id.$oid}}">View user</button>
-					<button class="btn btn-danger" title="Remove user" (click)="removeUser(user)"
-					*ngIf="currentUser.user.username != user.username">Delete user</button>
-				</td>
-			</tr>
-			</tbody>
-			<tfoot>
-				<tr>
-					<td colspan="5"><button type="button" class="btn btn-primary" routerLink="add" routerLinkActive="active-link">Add new user</button>
-					<td>
-				</tr>
-			</tfoot>
-		</table>
-	</section>
-
-		`,
-	providers : [UsersService]
-
-})
-export class usersListComponent {
-	users : Array<Object> = [];
-	currentUser = JSON.parse(localStorage.getItem('currentUser'));
-
-	constructor (private usersService : UsersService) {}
-
-	ngOnInit() {
-		console.log("trying to list users")
-		this.listUsers();
-	}
-
-	private listUsers() {
-		this.usersService.list().subscribe(
-			data => {
-				console.log(data);
-				this.users = data;
-			},
-			error => {
-				console.log(error)
-			}
-		);
-	}
-
-	removeUser(user:Object) {
-		console.log(user['id']['$oid']);
-		this.usersService.remove(user['id']['$oid']).subscribe(
-			data => {
-			console.log(data);
-			this.listUsers();
-			},
-			error => {
-				console.log(error);
-			}
-		)
-	}
-
-};
-
-@Component({
-	//moduleId : module.id.replace("/dist/", "/"),
-	selector : 'edit-user',
-	templateUrl : './users-edit.html',
-	providers : [UsersService]
-})
-export class usersEditComponent {
-	userId : String;
-	error : String;
-	passwordValidation = "";
-	user : Object = {
-		first_name : "",
-		last_name : "",
-		username : "",
-		email : "",
-		password : "",
-		role : -1
-	}
-	user_original : Object;
-
-	roles = [
-		{value: 0, viewValue: 'Administrator'},
-		{value: 10, viewValue: 'User'},
-		{value: 255, viewValue: 'Guest'}
-	];
-
-	constructor(private usersService : UsersService, private route : ActivatedRoute, private router : Router) {}
-
-	ngOnInit() {
-		this.route.params.subscribe(data => {
-			this.userId = data['id'];
-
-			this.usersService.get(this.userId).subscribe(
-				(data : Object) => {
-					console.log(data);
-					this.user = data;
-					this.user_original = JSON.parse(JSON.stringify(data));
-				},
-				error => {
-					console.log(error);
-					this.error = "This user doesn't exist";
-				}
-			);
-			//console.log(this.userId;)
-		});
-	}
-
-	updateUser() {
-		// Create a diff between user and user_original
-		let diff_user : Object = {};
-		for (var key in this.user) {
-			if (key != "_id" && key != 'settings' &&
-				this.user_original[key] != this.user[key])
-			{
-				diff_user[key] = this.user[key]
-			}
-		}
-
-		// Update only if there is something to update
-		if (Object.keys(diff_user).length > 0) {
-			this.usersService.update(this.userId, diff_user).subscribe(
-				data => {
-					this.router.navigate(['/users']);
-				},
-				error => {
-					console.log(error);
-					this.error = "Something went wrong";
-				});
-		}
-	}
-}
+export class UsersComponent {};
diff --git a/www/src/app/modules/users/users.module.ts b/www/src/app/modules/users/users.module.ts
index 9e3ff74..cc6fb2a 100644
--- a/www/src/app/modules/users/users.module.ts
+++ b/www/src/app/modules/users/users.module.ts
@@ -2,20 +2,18 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
 import { FormsModule }		from '@angular/forms';
-//import { HttpService } from '../../services/http.service';
-import {
-	usersComponent,
-	usersAddComponent,
-	usersListComponent,
-	usersEditComponent
-	} from './users.component';
+
+import { UsersComponent } from './users.component';
+import { UsersAddComponent } from './users-add/users-add.component';
+import { UsersListComponent } from './users-list/users-list.component';
+import { UsersEditComponent } from './users-edit/users-edit.component';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 
 const usersRoutes : Routes = [
 	{
 		path : 'users',
-		component : usersComponent,
+		component : UsersComponent,
 		canActivate : [AuthGuard],
 		data : {
 			basepath : true,
@@ -27,7 +25,7 @@ const usersRoutes : Routes = [
 		children : [
 			{
 				path : '',
-				component: usersListComponent,
+				component: UsersListComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 0
@@ -35,7 +33,7 @@ const usersRoutes : Routes = [
 			},
 			{
 				path : 'add',
-				component : usersAddComponent,
+				component : UsersAddComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 0,
@@ -44,7 +42,7 @@ const usersRoutes : Routes = [
 			},
 			{
 				path : ':id',
-				component : usersEditComponent,
+				component : UsersEditComponent,
 				canActivate : [AuthGuard],
 				data : {
 					role : 0,
@@ -55,16 +53,21 @@ const usersRoutes : Routes = [
 	}
 ];
 
-//export const dummyRouting = RouterModule.forChild(dummyRoutes);
-
 @NgModule({
 	imports : [
 		CommonModule,
 		FormsModule,
 		RouterModule.forChild(usersRoutes)
 	],
-	declarations : [usersComponent, usersAddComponent, usersListComponent, usersEditComponent],
-	exports : [usersComponent, usersAddComponent, usersEditComponent, RouterModule],
-	//	providers : [HttpService]
+	declarations : [
+		UsersComponent,
+		UsersListComponent,
+		UsersAddComponent,
+		UsersEditComponent
+	],
+	exports : [
+		UsersComponent,
+		RouterModule
+	]
 })
 export class usersModule {};

From 6dd6c560eec7d9cd9754c08cd806d938e277c9b2 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 6 Jun 2017 17:00:14 +0200
Subject: [PATCH 27/78] Users: add confirmation when deleting a user

---
 .../users-list/users-list.component.html      | 28 +++++++++++++++----
 .../users/users-list/users-list.component.ts  | 20 +++++++++++--
 www/src/app/modules/users/users.module.ts     |  3 ++
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/www/src/app/modules/users/users-list/users-list.component.html b/www/src/app/modules/users/users-list/users-list.component.html
index 2c6f01b..83697b6 100644
--- a/www/src/app/modules/users/users-list/users-list.component.html
+++ b/www/src/app/modules/users/users-list/users-list.component.html
@@ -12,17 +12,34 @@ <h2>Users management</h2>
 		</tr>
 		</thead>
 		<tbody>
-		<tr *ngFor="let user of users">
+		<tr *ngFor="let user of users; let i = '0'">
 			<td>{{ user.username }}</td>
 			<td>{{ user.email }}</td>
 			<td>{{ user.first_name }}</td>
 			<td>{{ user.last_name }}</td>
-			<td>{{ user.role }}</td>
+			<td>{{ roles[user.role] }}</td>
 			<td>
-				<button class="btn btn-secondary"routerLink="{{user.id.$oid}}">View user</button>
-				<button class="btn btn-danger" title="Remove user" (click)="removeUser(user)"
-				*ngIf="currentUser.user.username != user.username">Delete user</button>
+				<button class="btn btn-secondary" routerLink="{{user.id.$oid}}">View user</button>
+				<button class="btn btn-danger"
+					title="Remove user"
+					*ngIf="currentUser.user.username != user.username"
+					[ngbPopover]="deleteConfirmation"
+					popoverTitle="Are you sure?"
+					#popover="ngbPopover"
+					(click)="confirmDelete(user)">
+					{{ deleteBtn[popover.isOpen() ? 1 : 0] }}
+				</button>
+				<ng-template #deleteConfirmation>
+					<p>Delete user <strong>{{ user.username }}</strong>? This action can't be taken back.</p>
+					<button class="btn btn-danger btn-block"
+						title="Remove user"
+						(click)="removeUser(user)">
+						Yes, delete them!
+					</button>
+				</ng-template>
+
 			</td>
+
 		</tr>
 		</tbody>
 		<tfoot>
@@ -33,4 +50,3 @@ <h2>Users management</h2>
 		</tfoot>
 	</table>
 </section>
-
diff --git a/www/src/app/modules/users/users-list/users-list.component.ts b/www/src/app/modules/users/users-list/users-list.component.ts
index a8969b1..6b68cb2 100644
--- a/www/src/app/modules/users/users-list/users-list.component.ts
+++ b/www/src/app/modules/users/users-list/users-list.component.ts
@@ -1,7 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 
 import { UsersService } from '../users.service';
 
+enum Roles {
+	"Administrator" = 0,
+	"User" = 10,
+	"Guest" = 255
+}
+
 @Component({
   selector: 'users-list',
   templateUrl: './users-list.component.html',
@@ -12,6 +19,9 @@ export class UsersListComponent implements OnInit {
 
 	users : Array<Object> = [];
 	currentUser = JSON.parse(localStorage.getItem('currentUser'));
+	roles = Roles;
+	user = {};
+	deleteBtn = ["Delete", "Cancel"];
 
 	constructor (private usersService : UsersService) {}
 
@@ -32,12 +42,16 @@ export class UsersListComponent implements OnInit {
 		);
 	}
 
+	public confirmDelete(user) {
+		this.user = user;
+	}
+
 	removeUser(user:Object) {
 		console.log(user['id']['$oid']);
 		this.usersService.remove(user['id']['$oid']).subscribe(
 			data => {
-			console.log(data);
-			this.listUsers();
+				console.log(data);
+				this.listUsers();
 			},
 			error => {
 				console.log(error);
diff --git a/www/src/app/modules/users/users.module.ts b/www/src/app/modules/users/users.module.ts
index cc6fb2a..8bd7b0a 100644
--- a/www/src/app/modules/users/users.module.ts
+++ b/www/src/app/modules/users/users.module.ts
@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
 import { FormsModule }		from '@angular/forms';
 
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { UsersComponent } from './users.component';
 import { UsersAddComponent } from './users-add/users-add.component';
 import { UsersListComponent } from './users-list/users-list.component';
@@ -57,6 +59,7 @@ const usersRoutes : Routes = [
 	imports : [
 		CommonModule,
 		FormsModule,
+		NgbModule.forRoot(),
 		RouterModule.forChild(usersRoutes)
 	],
 	declarations : [

From 628dfeebd1a601302a5dd48b2ce941a97f94588c Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 09:40:28 +0200
Subject: [PATCH 28/78] Users: minor code styling

---
 .../app/modules/users/users-list/users-list.component.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/www/src/app/modules/users/users-list/users-list.component.html b/www/src/app/modules/users/users-list/users-list.component.html
index 83697b6..978dfe7 100644
--- a/www/src/app/modules/users/users-list/users-list.component.html
+++ b/www/src/app/modules/users/users-list/users-list.component.html
@@ -44,7 +44,12 @@ <h2>Users management</h2>
 		</tbody>
 		<tfoot>
 			<tr>
-				<td colspan="5"><button type="button" class="btn btn-primary" routerLink="add" routerLinkActive="active-link">Add new user</button>
+				<td colspan="5">
+					<button class="btn btn-primary"
+						routerLink="add"
+						routerLinkActive="active-link">
+						Add new user
+					</button>
 				<td>
 			</tr>
 		</tfoot>

From 9e2a995ac5b2f1315e367bcd4f6943cacac64a3b Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 16:50:31 +0200
Subject: [PATCH 29/78] NEMEA: update API

---
 modules/Nemea-Dashboard | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index f2c9d11..9b29ec5 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit f2c9d110630ec9f6924212e43c13d52f52014a51
+Subproject commit 9b29ec533743475590dc33b66f308983ebe4e4d1

From 2348895fa1adfec4e3c4dd3f576cccc6739d0530 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 16:50:59 +0200
Subject: [PATCH 30/78] NEMEA: grid placeholder must have !important

---
 www/src/styles/main.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/styles/main.scss b/www/src/styles/main.scss
index f80e87c..c52549b 100644
--- a/www/src/styles/main.scss
+++ b/www/src/styles/main.scss
@@ -150,6 +150,6 @@ nemea-events .modal-dialog {
 }
 
 .grid-placeholder {
-	border: 2px dashed $gray;
-	background: rgba(0,0,0,0.05)
+	border: 2px dashed $gray!important;
+	background: rgba(0,0,0,0.05)!important;
 }

From 3ba057c666f95332f5264074df4548fce0a1536d Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 16:51:41 +0200
Subject: [PATCH 31/78] NEMEA: support for count and top boxes

---
 .../modules/nemea/dashboard/box.service.ts    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/www/src/app/modules/nemea/dashboard/box.service.ts b/www/src/app/modules/nemea/dashboard/box.service.ts
index 3f1466b..02af113 100644
--- a/www/src/app/modules/nemea/dashboard/box.service.ts
+++ b/www/src/app/modules/nemea/dashboard/box.service.ts
@@ -45,6 +45,44 @@ export class BoxService {
 			.catch(this.handleError);
 	}
 
+	count(box) {
+		let requestOptions = new RequestOptions();
+		let params: URLSearchParams = new URLSearchParams();
+
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+		params.set('category', "any");
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/count', requestOptions).map(
+			(response : Response) => {
+				console.log("response", response)
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+	top(box) {
+		let requestOptions = new RequestOptions();
+		let params: URLSearchParams = new URLSearchParams();
+
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+
+		requestOptions.search = params;
+
+		return this.http.get('/nemea/events/top', requestOptions).map(
+			(response : Response) => {
+				console.log("response", response)
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
+	}
+
+
 	private handleError(err : Response | any) {
 		return Promise.reject(err);
 	}

From 2a1c38169bc72efbdae5a9a1be345bf5eb981e64 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 16:53:04 +0200
Subject: [PATCH 32/78] NEMEA: box modal correct backup model behaviour

Before that if you first cancel and then store new model
it lost the bindings.
---
 .../dash-box-modal.component.html             | 20 ++++++++-----------
 .../dash-box-modal.component.ts               |  1 +
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
index b9872f2..78aab94 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-	<h4 class="modal-title">Editing "{{ data.title }}"</h4>
+	<h4 class="modal-title">Editing "{{ backup.title }}"</h4>
 	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
 		<span aria-hidden="true">&times;</span>
 	</button>
@@ -12,7 +12,7 @@ <h4 class="modal-title">Editing "{{ data.title }}"</h4>
 				class="form-control"
 				name="title"
 				placeholder="Box title"
-				[(ngModel)]="data.title" />
+				[(ngModel)]="backup.title" />
 		</div>
 
 		<div class="input-group">
@@ -21,7 +21,7 @@ <h4 class="modal-title">Editing "{{ data.title }}"</h4>
 				class="form-control"
 				name="content"
 				placeholder="Box content"
-				[(ngModel)]="data.content" />
+				[(ngModel)]="backup.content" />
 		</div>
 
 		<div class="input-group">
@@ -30,31 +30,27 @@ <h4 class="modal-title">Editing "{{ data.title }}"</h4>
 				class="form-control"
 				name="period"
 				placeholder="Period in hours"
-				[(ngModel)]="data.period" />
+				[(ngModel)]="backup.period" />
 		</div>
 
-		<div class="input-group">
+		<div class="input-group"
+			*ngIf="backup.type != 'sum'">
 			<div class="input-group-addon">Metric</div>
 			<input type="text"
 				class="form-control"
 				name="metric"
 				placeholder="Metric"
-				[(ngModel)]="data.metric"
+				[(ngModel)]="backup.metric"
 				[ngbTypeahead]="searchMetric" />
 		</div>
 
 		<div class="input-group">
 			<div class="input-group-addon">Type</div>
-			<select class="custom-select form-control" [(ngModel)]="data.type" name="type">
+			<select class="custom-select form-control" [(ngModel)]="backup.type" name="type">
 				<option *ngFor="let type of types" [value]="type.value">{{ type.name }}</option>
 			</select>
 		</div>
 	</form>
-
-	{{ data | json }}
-~~~~~~~~~~~~~~~~~~~~~~~~~~~
-	{{ backup | json }}
-
 </div>
 <div class="modal-footer">
 	<button type="button" class="btn btn-secondary" (click)="close($event)">
diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
index 6126f12..3d5748b 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
@@ -63,6 +63,7 @@ export class DashBoxModalComponent implements OnInit {
 	  */
 	close(result : any) : void {
 		console.log(result);
+		this.data = Object.assign(this.data,this.backup);
 		this.activeModal.close(result);
 	}
 

From 44f48041280b03fea2ac810da6bd2b250d1832ef Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 16:54:29 +0200
Subject: [PATCH 33/78] NEMEA: add cancel button to modal

---
 .../dashboard/dash-box-modal/dash-box-modal.component.html  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
index 78aab94..68c33af 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
@@ -53,7 +53,9 @@ <h4 class="modal-title">Editing "{{ backup.title }}"</h4>
 	</form>
 </div>
 <div class="modal-footer">
-	<button type="button" class="btn btn-secondary" (click)="close($event)">
-		Close
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">Cancel</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
 	</button>
+
 </div>

From b60373021114f1fb93db97369b96a68ab65f3769 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 16:55:21 +0200
Subject: [PATCH 34/78] NEMEA: implement TOP and COUNT boxes

---
 .../dash-box-modal.component.ts               |  4 +-
 .../dash-box/dash-box.component.html          | 50 ++++++++++++----
 .../dash-box/dash-box.component.scss          | 58 ++++++++++++-------
 .../dashboard/dash-box/dash-box.component.ts  | 57 ++++++++++--------
 4 files changed, 112 insertions(+), 57 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
index 3d5748b..44e6b1f 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.ts
@@ -32,8 +32,8 @@ export class DashBoxModalComponent implements OnInit {
 			name : 'Top N'
 		},
 		{
-			value : 'sum',
-			name : 'Sum'
+			value : 'count',
+			name : 'Count'
 		}
 	]
 
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
index 1deb226..90a7f65 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -8,7 +8,7 @@ <h3 class="col h4">{{ box.title}}</h3>
 
 			<div ngbDropdown>
 				<a class="" id="dMenu" ngbDropdownToggle></a>
-				<div class="dropdown-menu" aria-labelledby="dMenu">
+				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dMenu">
 					<button class="dropdown-item" (click)="edit()">Edit</button>
 					<a class="dropdown-item" (click)="duplicate()">Duplicate</a>
 					<a class="dropdown-item" (click)="remove()">Delete</a>
@@ -17,36 +17,62 @@ <h3 class="col h4">{{ box.title}}</h3>
 		</div>
 	</div>
 
-	<section class="body">
+	<section class="body" [ngSwitch]="box.type" *ngIf="data.length; else nodata">
 
-		<div *ngIf="box.type == 'piechart'">
+		<div *ngSwitchCase="'piechart'">
 			<ngx-charts-pie-chart #chart
 			 [results]="data"
 			 [labels]="true"
-			 [legend]="false"
+			 [legend]="true"
 			 [doughnut]="true"
-			 (select)="onSelect($event)"></ngx-charts-pie-chart>
+			 (select)="onSelect($event)">
+			</ngx-charts-pie-chart>
 		</div>
 
-		<div *ngIf="box.type == 'barchart'">
+		<div *ngSwitchCase="'barchart'">
 			Here should be BARCHART graph
 		</div>
 
-		<div *ngIf="box.type == 'top'">
-			Here should be TOP events
+		<div *ngSwitchCase="'top'">
+			<ul class="list-group top-events">
+				<a [routerLink]="['../events', { 'id' : event.id.$oid}]"
+					*ngFor="let event of data"
+					class="list-group-item d-flex flex-row justify-content-center">
+					<span>
+						<i class="fa fa-tag" aria-hidden="true"></i>
+						{{ event._id }}
+					</span>
+					<span>
+						<i class="fa fa-bar-chart" aria-hidden="true"></i>
+						{{ event.FlowCount }}
+					</span>
+					<span>
+						<i class="fa fa-clock-o" aria-hidden="true"></i>
+						{{ event.DetectTime.$date | date: 'dd/mm/yy hh:mm:ss' }}
+					</span>
+				</a>
+			</ul>
 		</div>
 
-		<div *ngIf="box.type == 'sum'">
-			Here should be SUM
+		<div *ngSwitchCase="'count'" class="d-flex justify-content-center flex-column">
+			<h2 class="align-self-center">{{ data }}</h2>
 		</div>
 
-		<div *ngIf="box.type == ''">
+		<div *ngSwitchDefault>
 			No type of box is defined
 		</div>
 
-		<p>{{ box.content }}</p>
+		<p class="text-center">{{ box.content }}</p>
 
 	</section>
+
+	<ng-template #nodata>
+		<section class="body d-flex justify-content-center flex-column">
+				<h5 class="align-self-center" *ngIf="box.type != 'count'">No data to display</h5>
+				<h2 class="align-self-center" *ngIf="box.type == 'count'">{{ data }}</h2>
+			<span class="text-center">{{ box.content }}</span>
+		</section>
+	</ng-template>
 </div>
 
 <ng-template ngbModalContainer class="item-detail"></ng-template>
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
index 8606ce1..0af9a32 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
@@ -1,25 +1,20 @@
-.body {
-	width: 100%;
-	height: calc(100% - 50px);	// Height of handle element must be subtracted
-	background: #FFF;
-
-	div {
-		width: calc(100% - 1em);
-		height: 100%;
-		margin: 0 0.5em;
-		display: block;
-	}
-
-	p {
-		position: absolute;
-		bottom: 0;
-		padding: 0 0.5em;
-	}
-}
-
 .grid-item {
 	border: solid 1px #ccc;
-	background: #fff;
+
+	.body {
+		width: 100%;
+		height: calc(100% - 50px);	// Height of handle element must be subtracted
+		background: #FFF;
+		overflow: scroll;
+
+		div {
+			width: calc(100% - 1em);
+			height: 100%;
+			margin: 0 0.5em;
+			display: block;
+		}
+
+	}
 
 	&.moving {
 		box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
@@ -46,8 +41,31 @@
 			margin-right: 1em;
 			font-size: 1.25em;
 			top: -0.25em;
+
+			&.show {
+				color: #999;
+			}
+
+			.dropdown-menu {
+				box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.25);
+			}
 		}
 	}
 
+	.top-events {
+		padding-top: 0.5em;
+		a {
+			color: #000;
+
+			&:hover {
+				background-color: #f0f0f0;
+			}
+
+			span {
+				margin-right: 1em;
+			}
+
+		}
+	}
 }
 
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
index ba77d2e..19c7289 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -61,15 +61,34 @@ export class DashBoxComponent {
 		// Shift time for fetching correct data
 		this.timeShift();
 
-		// Fetch data
-		this.boxService.aggregate(this.box).subscribe(
-			(data) => {
-				this.data = data;
-			},
-			(err) => {
-				console.error(err);
-			}
-		);
+		switch (this.box.type) {
+			case "piechart":
+			case "barchart":
+				// Fetch data
+				this.boxService.aggregate(this.box).subscribe(
+					(data) => { this.data = data },
+					(err) => { console.error(err) }
+				);
+				break;
+
+			case "count":
+				this.boxService.count(this.box).subscribe(
+					(data) => { this.data = data },
+					(err) => { console.error(err) }
+				);
+				break;
+
+			case "top":
+				this.boxService.top(this.box).subscribe(
+					(data) => { this.data = data },
+					(err) => { console.error(err) }
+				);
+				break;
+
+			default:
+				console.warn("unknown type '%s'", this.box.type);
+				break;
+		}
 	}
 
 	/**
@@ -112,24 +131,13 @@ export class DashBoxComponent {
 				  * Also would be nice to reload data
 				  */
 
-				// Shift the time
-				this.timeShift();
 				this.save();
 
-				this.boxService.aggregate(this.box).subscribe(
-					(data) => {
-						this.data = data;
-					},
-					(err) => {
-						console.error(err);
-					}
-				);
-
+				this.ngOnInit();
 			},
 			(reason) => {
-				// Dismissal of the modal, revert backup
+				// Dismissal of the modal, do nothing
 				console.debug("Modal dismissed");
-				this.box = Object.assign({}, this.backup);
 			}
 		);
 	}
@@ -154,8 +162,8 @@ export class DashBoxComponent {
 	}
 
 	resize(event) {
-		console.log(event);
 		this.update();
+		this.save();
 	}
 
 	/**
@@ -168,4 +176,7 @@ export class DashBoxComponent {
 		setTimeout(_ => { this.save() }, 100);
 	}
 
+	onSelect(event) {
+		console.log(event);
+	}
 }

From 4686dd87ecae78470fc720c5dd272bc2a0859845 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 17:03:52 +0200
Subject: [PATCH 35/78] Fix issue #6 in setup user must have username

---
 .../app/components/setup/setup.component.html | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/www/src/app/components/setup/setup.component.html b/www/src/app/components/setup/setup.component.html
index 90e5967..9e54129 100644
--- a/www/src/app/components/setup/setup.component.html
+++ b/www/src/app/components/setup/setup.component.html
@@ -3,23 +3,27 @@ <h2>Liberouter GUI Setup</h2>
 
 	<p>You need to setup an administrator account to access Liberouter GUI</p>
 
-	<form (ngSubmit)="onSubmit()">
+	<form (ngSubmit)="onSubmit()" #setupForm="ngForm" novalidate>
 		<div class="form-group">
-			<label for="username">Username</label>
-			<input type="text" name="username" id="username" class="form-control" placeholder="admin" [(ngModel)]="admin.username">
+			<label for="username">Username *</label>
+			<input type="text" name="username" id="username" class="form-control" placeholder="admin" [(ngModel)]="admin.username" required>
 		</div>
 
 		<div class="form-group">
-			<label for="password">Password</label>
-			<input type="password" name="password" id="password" class="form-control" placeholder="password" [(ngModel)]="admin.password">
+			<label for="password">Password *</label>
+			<input type="password" name="password" id="password" class="form-control" placeholder="password" [(ngModel)]="admin.password" required>
 		</div>
 
 		<div class="form-group">
-			<label for="password2">Password Confirmation</label>
-			<input type="password" name="password2" id="password2" class="form-control" placeholder="password" [(ngModel)]="admin.password2">
+			<label for="password2">Password Confirmation *</label>
+			<input type="password" name="password2" id="password2" class="form-control" placeholder="password" [(ngModel)]="admin.password2" required>
 			<small>Re-enter the same password as above to make sure you haven't mispelled it</small>
 		</div>
 
-		<button type="submit" class="btn btn-primary" [disabled]="admin.password != admin.password2 || admin.password == ''">Create</button>
+		<button type="submit"
+			class="btn btn-primary"
+			[disabled]="admin.password != admin.password2 || !setupForm.form.valid">
+			Create
+		</button>
 	</form>
 </section>

From 57b6d6fcdc1d500322bb1f994f4690962da4d263 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 17:13:08 +0200
Subject: [PATCH 36/78] Check username and password length in setup mode

---
 api/liberouterapi/bootstrap.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/api/liberouterapi/bootstrap.py b/api/liberouterapi/bootstrap.py
index 6ef5421..24fb554 100644
--- a/api/liberouterapi/bootstrap.py
+++ b/api/liberouterapi/bootstrap.py
@@ -104,6 +104,13 @@ def setup():
 		raise ApiException("API is already setup")
 	settings = request.get_json()
 	db = dbConnector()
+
+	if len(settings['username']) == 0:
+		raise ApiException("Missing username")
+
+	if len(settings['password']) == 0:
+		raise ApiException("Missing password")
+
 	try:
 		# Insert user to database via user module
 		from .modules.users import unprotected_add_user

From c3f63383d29260ac128a7bed8421b666d23686c8 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Wed, 7 Jun 2017 17:13:33 +0200
Subject: [PATCH 37/78] Error display in setup mode

---
 www/src/app/components/setup/setup.component.html | 4 ++++
 www/src/app/components/setup/setup.component.ts   | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/www/src/app/components/setup/setup.component.html b/www/src/app/components/setup/setup.component.html
index 9e54129..ba62998 100644
--- a/www/src/app/components/setup/setup.component.html
+++ b/www/src/app/components/setup/setup.component.html
@@ -25,5 +25,9 @@ <h2>Liberouter GUI Setup</h2>
 			[disabled]="admin.password != admin.password2 || !setupForm.form.valid">
 			Create
 		</button>
+
+		<span class="alert alert-danger" role="alert" *ngIf="error != ''">
+			{{ error }}
+		</span>
 	</form>
 </section>
diff --git a/www/src/app/components/setup/setup.component.ts b/www/src/app/components/setup/setup.component.ts
index abb4fd4..2b385da 100644
--- a/www/src/app/components/setup/setup.component.ts
+++ b/www/src/app/components/setup/setup.component.ts
@@ -16,6 +16,8 @@ export class SetupComponent implements OnInit {
 		password2 : ""
 	};
 
+	error = "";
+
 	constructor( private authService : AuthService
                , private router : Router
                ) { }
@@ -27,6 +29,9 @@ export class SetupComponent implements OnInit {
 		this.authService.admin(this.admin).subscribe(
 		    data => {
 		        this.router.navigate(["/login"]);
+		    },
+		    err => {
+				this.error = err;
 		    }
 		)
 	}

From 1232d528bb72b4f0c53b75598638b8b785892204 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 8 Jun 2017 16:42:58 +0200
Subject: [PATCH 38/78] NEMEA: extract box interface

---
 www/src/app/modules/nemea/dashboard/box.ts    | 40 ++++++++++++++++++
 .../nemea/dashboard/dashboard.component.ts    | 42 -------------------
 2 files changed, 40 insertions(+), 42 deletions(-)
 create mode 100644 www/src/app/modules/nemea/dashboard/box.ts

diff --git a/www/src/app/modules/nemea/dashboard/box.ts b/www/src/app/modules/nemea/dashboard/box.ts
new file mode 100644
index 0000000..4cde1ec
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/box.ts
@@ -0,0 +1,40 @@
+export interface Box {
+	/**
+	  * Configuration of the box itself
+	  */
+	config : any;
+	/**
+	  * Title of the box
+	  */
+	title : string;
+	/**
+	  * Content which to display below data
+	  */
+	content : string;
+	/**
+	  * Define type of the box
+	  * Value: chart|top|number
+	  */
+	type : string;
+	/**
+	  * Options for the graph
+	  */
+	options : Object;
+	/**
+	  * time from which to analyze events
+	  */
+	beginTime : number;
+	/**
+	  * ending time for analyzing events, usually now
+	  * TODO: add time offset for history views
+	  */
+	endTime : number;
+	/**
+	  * Time window size in hours
+	  */
+	period : number;
+	/**
+	  * metric for analysis
+	  */
+	metric : string;
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
index 66baa9d..ebf94a1 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -4,48 +4,6 @@ import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
 import { UsersService } from 'app/modules/users/users.service';
 
-export interface Box {
-	id : number;
-	/**
-	  * Configuration of the box itself
-	  */
-	config : any;
-	/**
-	  * Title of the box
-	  */
-	title : string;
-	/**
-	  * Content which to display below data
-	  */
-	content : string;
-	/**
-	  * Define type of the box
-	  * Value: chart|top|number
-	  */
-	type : string;
-	/**
-	  * Options for the graph
-	  */
-	options : Object;
-	/**
-	  * time from which to analyze events
-	  */
-	beginTime : number;
-	/**
-	  * ending time for analyzing events, usually now
-	  * TODO: add time offset for history views
-	  */
-	endTime : number;
-	/**
-	  * Time window size in hours
-	  */
-	period : number;
-	/**
-	  * metric for analysis
-	  */
-	metric : string;
-}
-
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',

From a31be5b06784e95fb95e515b26c77043201a4cf5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 8 Jun 2017 16:43:19 +0200
Subject: [PATCH 39/78] NEMEA: split aggregate service to piechart and barchart

---
 .../modules/nemea/dashboard/box.service.ts    | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/box.service.ts b/www/src/app/modules/nemea/dashboard/box.service.ts
index 02af113..3011295 100644
--- a/www/src/app/modules/nemea/dashboard/box.service.ts
+++ b/www/src/app/modules/nemea/dashboard/box.service.ts
@@ -9,18 +9,36 @@ export class BoxService {
 	get(box) {
 		console.log(box);
 
-		if (box['type'] == 'chart')
-			return this.aggregate(box);
+		console.warn("No box type is set.")
 
-		else if (box['type'] == 'top')
-			return null;
+	}
+
+	piechart(box) {
+		let requestOptions = new RequestOptions();
+
+		let params: URLSearchParams = new URLSearchParams();
+
+		/**
+		  * Set time window
+		  * The difference in capitalization is because of backward compatibility
+		  */
+		params.set('begintime', box['beginTime']);
+		params.set('endtime', box['endTime']);
+
+		params.set('metric', box['metric']);
+		params.set('type', 'piechart');
 
-		else
-			console.warn("No box type is set.")
+		requestOptions.search = params;
 
+		return this.http.get('/nemea/events/aggregate', requestOptions).map(
+			(response : Response) => {
+				let body = response.json()
+				return body;
+			})
+			.catch(this.handleError);
 	}
 
-	aggregate(box) {
+	barchart(box) {
 		let requestOptions = new RequestOptions();
 
 		let params: URLSearchParams = new URLSearchParams();
@@ -32,8 +50,8 @@ export class BoxService {
 		params.set('begintime', box['beginTime']);
 		params.set('endtime', box['endTime']);
 
-		params.set('metric', box['metric']);
-		params.set('type', box['type']);
+		params.set('window', box['window'] ? box['window'] : 60);
+		params.set('type', 'barchart');
 
 		requestOptions.search = params;
 

From 2c65aff53d929d56ebc72120fee7d0488ffb1ca5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 8 Jun 2017 16:43:58 +0200
Subject: [PATCH 40/78] NEMEA: multiple dashboards

---
 .../dashboard-view.component.html             |  17 +++
 .../dashboard-view.component.scss             |   0
 .../dashboard-view.component.spec.ts          |  25 ++++
 .../dashboard-view.component.ts               | 127 +++++++++++++++++
 .../nemea/dashboard/dashboard.component.html  |  51 +++++--
 .../nemea/dashboard/dashboard.component.ts    | 128 +++++++-----------
 www/src/app/modules/nemea/nemea.module.ts     |   5 +-
 7 files changed, 258 insertions(+), 95 deletions(-)
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.scss
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts

diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
new file mode 100644
index 0000000..8bd11af
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
@@ -0,0 +1,17 @@
+<div [ngGrid]="gridConfig">
+
+	<div *ngIf="boxes == []">You should add box</div>
+
+	<dash-box
+		[box]="box"
+		[index]="index"
+		(onDelete)="deleteBox($event)"
+		(onDuplicate)="duplicateBox($event)"
+		(onSave)="save()"
+		*ngFor="let box of boxes">
+	</dash-box>
+
+</div>
+
+<a (click)="addCleanBox()" class="btn btn-primary">Add Box</a>
+
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.scss b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts
new file mode 100644
index 0000000..4bd2b4c
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardViewComponent } from './dashboard-view.component';
+
+describe('DashboardViewComponent', () => {
+  let component: DashboardViewComponent;
+  let fixture: ComponentFixture<DashboardViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts
new file mode 100644
index 0000000..343c35a
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.ts
@@ -0,0 +1,127 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent } from 'angular2-grid';
+
+import { Box } from '../box';
+
+@Component({
+  selector: 'dashboard-view',
+  templateUrl: './dashboard-view.component.html',
+  styleUrls: ['./dashboard-view.component.scss']
+})
+export class DashboardViewComponent implements OnInit {
+
+	@Input() dashboard;
+	private boxes;
+
+	@Output() onSave = new EventEmitter<Object>();
+
+	constructor() { }
+
+	ngOnInit() {
+		this.boxes = this.dashboard["boxes"];
+	}
+	/**
+	  * Grid configuration taken from: https://github.com/BTMorton/angular2-grid/blob/master/demo-dashboard/app/app.component.ts
+	  */
+  	private gridConfig: NgGridConfig = <NgGridConfig>{
+		'margins': [5],
+		'draggable': true,
+		'resizable': true,
+		'max_cols': 0,
+		'max_rows': 0,
+		'visible_cols': 0,
+		'visible_rows': 0,
+		'min_cols': 1,
+		'min_rows': 1,
+		'col_width': 20,
+		'row_height': 20,
+		'cascade': 'left',
+		'min_width': 5,
+		'min_height': 5,
+		'fix_to_grid': false,
+		'auto_style': true,
+		'auto_resize': false,
+		'maintain_ratio': false,
+		'prefer_new': false,
+		'zoom_on_drag': false,
+		'limit_to_screen': true
+	};
+
+	/**
+	  * Add default box to boxes array
+	  */
+	addCleanBox() {
+		console.log("should add box");
+
+		let box = {
+			config : {
+				'dragHandle': '.handle',
+				'sizex': 10,
+				'sizey': 10,
+				'col': 1,
+				'row': 1,
+				'resizeHandle': null,
+				'borderSize': 15,
+				'fixed': false,
+				'draggable': true,
+				'resizable': true,
+				'payload': null,
+				'maxCols': 0,
+				'minCols': 0,
+				'maxRows': 0,
+				'minRows': 0,
+				'minWidth': 0,
+				'minHeight': 0,
+			},
+			title : "New Box",
+			content : "",
+			options : null,
+			type : "piechart",
+			beginTime : -1,
+			endTime : -1,
+			period : 240,
+			metric : "Category"
+		}
+
+		this.boxes.push(box);
+
+		// Save the new box to local storage
+		this.save();
+
+	}
+
+	addBox(box : Box) {
+		this.boxes.push(box);
+	}
+
+	/**
+	  * Remove a box from boxes array and save it
+	  */
+	deleteBox(box) {
+		console.log("should delete: ", box.box, box.index);
+
+		let index = this.boxes.indexOf(box.box, 0);
+
+		if (index > -1) {
+			this.boxes.splice(index, 1);
+			this.save();
+		}
+	}
+
+	/**
+	  * Duplicates given box and adds it to boxes array
+	  *
+	  * TODO: this causes the browser to freeze, don't know why
+	  */
+	duplicateBox(box : Box) {
+		console.log("duplicating")
+		let newbox = Object.assign({}, box);
+		newbox["title"] = "Duplicate of " + newbox["title"];
+		this.boxes.push(newbox);
+	}
+
+
+	save() {
+		this.onSave.emit();
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.html b/www/src/app/modules/nemea/dashboard/dashboard.component.html
index 064bb8b..20b1372 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.html
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.html
@@ -1,18 +1,45 @@
-<div [ngGrid]="gridConfig">
+<ngb-tabset type="pills" [destroyOnHide]="false" #tabs="ngbTabset" (tabChange)="change($event)">
+	<ngb-tab *ngFor="let dashboard of dashboards">
+		<ng-template ngbTabTitle>
+			{{ dashboard.title }}
+			<div ngbDropdown class="d-inline-block">
+				<span ngbDropdownToggle></span>
 
-	<div *ngIf="boxes.length == 0">You should add box</div>
+				 <div class="dropdown-menu">
+					<a class="dropdown-item">Edit</a>
+					<a class="dropdown-item" (click)="deleteDashboard(dashboard, $event)">Delete</a>
+				</div>
 
-	<dash-box
-		[box]="box"
-		[index]="index"
-		(onDelete)="deleteBox($event)"
-		(onDuplicate)="duplicateBox($event)"
-		(onSave)="save($event)"
-		*ngFor="let box of boxes">
-	</dash-box>
+			</div>
 
-</div>
+		</ng-template>
+		<ng-template ngbTabContent>
 
-<a (click)="addCleanBox()" class="btn btn-primary">Add Box</a>
+			<dashboard-view
+				[dashboard]="dashboard"
+				(onSave)="save($event)">
+			</dashboard-view>
+		</ng-template>
+	</ngb-tab>
+	<ngb-tab>
+		<ng-template ngbTabTitle #title>+ Add new</ng-template>
+		<ng-template ngbTabContent #content>
+			<form novalidate
+				(ngSubmit)="addDashboard(dashTitle.value, offset.value)"
+				#dashform="ngForm"
+				class="form">
+				<div class="form-group">
+					<label>Dashboard Title</label>
+					<input type="text" #dashTitle name="title" placeholder="Dashboard title" required class="form-control">
+				</div>
 
+				<div class="form-group">
+					<label>Offset Time [hours]</label>
+					<input type="number" #offset name="offset" placeholder="0" class="form-control">
+				</div>
 
+				<button class="btn btn-primary" type="submit">Add</button>
+			</form>
+		</ng-template>
+	</ngb-tab>
+</ngb-tabset>
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
index ebf94a1..32355b2 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent } from 'angular2-grid';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
 import { UsersService } from 'app/modules/users/users.service';
@@ -12,38 +11,14 @@ import { UsersService } from 'app/modules/users/users.service';
 })
 export class DashboardComponent implements OnInit {
 
-	private boxes : Array<Box> = [];
-
-	/**
-	  * Grid configuration taken from: https://github.com/BTMorton/angular2-grid/blob/master/demo-dashboard/app/app.component.ts
-	  */
-	private gridConfig: NgGridConfig = <NgGridConfig>{
-		'margins': [5],
-		'draggable': true,
-		'resizable': true,
-		'max_cols': 0,
-		'max_rows': 0,
-		'visible_cols': 0,
-		'visible_rows': 0,
-		'min_cols': 1,
-		'min_rows': 1,
-		'col_width': 20,
-		'row_height': 20,
-		'cascade': 'left',
-		'min_width': 5,
-		'min_height': 5,
-		'fix_to_grid': false,
-		'auto_style': true,
-		'auto_resize': false,
-		'maintain_ratio': false,
-		'prefer_new': false,
-		'zoom_on_drag': false,
-		'limit_to_screen': true
-	};
+	private dashboards : Array<any>;
 
 	// LocalStorage currentUser
 	private user : Object;
 
+	@ViewChild('tabs')
+	private tabs;
+
 	constructor(private usersService : UsersService) {}
 
 	/**
@@ -57,45 +32,37 @@ export class DashboardComponent implements OnInit {
 		// Load settings for dashboard (boxes configuration)
 		try {
 			console.log(this.user["user"]["settings"]["nemea"]["dashboard"]);
-			this.boxes = this.user["user"]["settings"]["nemea"]["dashboard"];
+			this.dashboards = this.user["user"]["settings"]["nemea"]["dashboard"];
 		} catch (e) {
 			console.log(e);
-			this.addCleanBox();
+			this.addCleanDashboard();
 		}
 	}
 
-	/**
-	  * Add default box to boxes array
-	  */
-	addCleanBox() {
-		console.log("should add box");
-
-		let box = {
-			id : 0,
-			config : {
-				'dragHandle': '.handle',
-				'sizex': 10,
-				'sizey': 10
-			},
-			title : "New Box",
-			content : "",
-			options : null,
-			type : "piechart",
-			beginTime : -1,
-			endTime : -1,
-			period : 240,
-			metric : "Category"
-		}
+	addCleanDashboard() {
+		this.dashboards = [{
+			title : "Untitled Dashboard",
+			offset : 0,
+			boxes : []
+		}]
 
-		this.boxes.push(box);
+		this.save();
+	}
 
-		// Save the new box to local storage
-		this.save({});
+	addDashboard(title : string, offset = 0) {
 
-	}
+		console.log(title, offset);
 
-	addBox(box : Box) {
-		this.boxes.push(box);
+		if (title.length) {
+			let dash = {
+				"title" : title,
+				"boxes" : [],
+				"offset" : Number(offset)
+			}
+
+			this.dashboards.push(dash)
+			this.save();
+		}
 	}
 
 	/**
@@ -105,22 +72,22 @@ export class DashboardComponent implements OnInit {
 	  *
 	  * This looks really bad but we can't be sure what is inside localStorage
 	  */
-	save($event) : void {
+	save($event = {}) : void {
 		let user = JSON.parse(localStorage.getItem("currentUser"));
 
 		console.log(user);
 
-		if (user['user']['setting'] == null)
-			user['user']["settings"] = { "nemea" : { "dashboard" : this.boxes } };
+		if (user['user']['settings'] == null)
+			user['user']["settings"] = { "nemea" : { "dashboard" : this.dashboards } };
 		else {
 			if ('nemea' in user['user']['settings']) {
 				if ('dashboard' in user['user']['settings']['nemea']) {
-					user['user']["settings"]["nemea"]["dashboard"] = this.boxes;
+					user['user']["settings"]["nemea"]["dashboard"] = this.dashboards;
 				} else {
-					user['user']["settings"]["nemea"] = { "dashboard" : this.boxes };
+					user['user']["settings"]["nemea"] = { "dashboard" : this.dashboards };
 				}
 			} else {
-				user['user']["settings"] = { "nemea" : { "dashboard" : this.boxes } };
+				user['user']["settings"] = { "nemea" : { "dashboard" : this.dashboards } };
 			}
 		}
 
@@ -128,28 +95,25 @@ export class DashboardComponent implements OnInit {
 	}
 
 	/**
-	  * Remove a box from boxes array and save it
+	  * Remove a dashboard from dashboard array and save it
 	  */
-	deleteBox(box) {
-		console.log("should delete: ", box.box, box.index);
+	deleteDashboard(dashboard, $event) {
+
+		$event.preventDefault();
+
+		console.log(this.tabs);
+		this.tabs.select('ngb-tab-1');
 
-		let index = this.boxes.indexOf(box.box, 0);
+		let index = this.dashboards.indexOf(dashboard, 0);
 
 		if (index > -1) {
-			this.boxes.splice(index, 1);
-			this.save({});
+			this.dashboards.splice(index, 1);
+			this.save();
 		}
 	}
 
-	/**
-	  * Duplicates given box and adds it to boxes array
-	  *
-	  * TODO: this causes the browser to freeze, don't know why
-	  */
-	duplicateBox(box : Box) {
-		console.log("duplicating")
-		let newbox = Object.assign({}, box);
-		newbox["title"] = "Duplicate of " + box["title"];
-		this.boxes.push(box);
+	change($event) {
+		console.log($event);
 	}
+
 }
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index 2be3e78..3bc55a1 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -43,6 +43,7 @@ import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
   * NEMEA Status
   */
 import { nemeaStatusComponent } from './status/nemea_status.component';
+import { DashboardViewComponent } from './dashboard/dashboard-view/dashboard-view.component';
 
 const nemeaRoutes : Routes = [
 	{
@@ -133,7 +134,9 @@ const nemeaRoutes : Routes = [
 		EventDetailComponent,
 		DashboardComponent,
 		DashBoxModalComponent,
-		DashBoxComponent],
+		DashBoxComponent,
+		DashboardViewComponent
+		],
 	exports : [],
 	providers : [SafePipe],
 	entryComponents : [EventDetailComponent, DashBoxModalComponent]

From 6bb2744318f4b8a5ca7495d730cda75279c3958c Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 8 Jun 2017 16:44:23 +0200
Subject: [PATCH 41/78] NEMEA: add support for barchart

---
 .../dash-box-modal.component.html             | 45 +++++++++-------
 .../dash-box/dash-box.component.html          | 42 +++++++++++++--
 .../dashboard/dash-box/dash-box.component.ts  | 51 +++++++++++++++++--
 3 files changed, 113 insertions(+), 25 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
index 68c33af..c67ae03 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box-modal/dash-box-modal.component.html
@@ -5,48 +5,59 @@ <h4 class="modal-title">Editing "{{ backup.title }}"</h4>
 	</button>
 </div>
 <div class="modal-body form-control">
-	<form novalidate class="form">
-		<div class="input-group">
-			<div class="input-group-addon">Title</div>
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Title</label>
 			<input type="text"
-				class="form-control"
+				class="form-control col"
 				name="title"
 				placeholder="Box title"
 				[(ngModel)]="backup.title" />
 		</div>
 
-		<div class="input-group">
-			<div class="input-group-addon">Content</div>
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Content</label>
 			<input type="text"
-				class="form-control"
+				class="form-control col"
 				name="content"
 				placeholder="Box content"
 				[(ngModel)]="backup.content" />
 		</div>
 
-		<div class="input-group">
-			<div class="input-group-addon">Period [hours]</div>
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Period [hours]</label>
 			<input type="text"
-				class="form-control"
+				class="form-control col"
 				name="period"
 				placeholder="Period in hours"
 				[(ngModel)]="backup.period" />
 		</div>
 
-		<div class="input-group"
-			*ngIf="backup.type != 'sum'">
-			<div class="input-group-addon">Metric</div>
+		<div class="form-group row"
+			*ngIf="backup.type == 'barchart'">
+			<label class="col-form-label col-sm-2">Window [minutes]</label>
 			<input type="text"
-				class="form-control"
+				class="form-control col"
+				name="window"
+				placeholder="60"
+				[(ngModel)]="backup.window"/>
+		</div>
+
+
+		<div class="form-group row"
+			*ngIf="backup.type == 'piechart' || backup.type == 'barchart'">
+			<label class="col-form-label col-sm-2">Metric</label>
+			<input type="text"
+				class="form-control col"
 				name="metric"
 				placeholder="Metric"
 				[(ngModel)]="backup.metric"
 				[ngbTypeahead]="searchMetric" />
 		</div>
 
-		<div class="input-group">
-			<div class="input-group-addon">Type</div>
-			<select class="custom-select form-control" [(ngModel)]="backup.type" name="type">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Type</label>
+			<select class="custom-select form-control col" [(ngModel)]="backup.type" name="type">
 				<option *ngFor="let type of types" [value]="type.value">{{ type.name }}</option>
 			</select>
 		</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
index 90a7f65..d25b00e 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -10,7 +10,7 @@ <h3 class="col h4">{{ box.title}}</h3>
 				<a class="" id="dMenu" ngbDropdownToggle></a>
 				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dMenu">
 					<button class="dropdown-item" (click)="edit()">Edit</button>
-					<a class="dropdown-item" (click)="duplicate()">Duplicate</a>
+					<!--a class="dropdown-item" (click)="duplicate()">Duplicate</a-->
 					<a class="dropdown-item" (click)="remove()">Delete</a>
 				</div>
 			</div>
@@ -20,7 +20,7 @@ <h3 class="col h4">{{ box.title}}</h3>
 	<section class="body" [ngSwitch]="box.type" *ngIf="data.length; else nodata">
 
 		<div *ngSwitchCase="'piechart'">
-			<ngx-charts-pie-chart #chart
+			<ngx-charts-pie-chart #piechart
 			 [results]="data"
 			 [labels]="true"
 			 [legend]="true"
@@ -30,7 +30,41 @@ <h3 class="col h4">{{ box.title}}</h3>
 		</div>
 
 		<div *ngSwitchCase="'barchart'">
-			Here should be BARCHART graph
+			<ngx-charts-area-chart-stacked
+				#areachart
+				[results]="data"
+				[xAxis]="true"
+				[yAxis]="true"
+				[timeline]="true"
+				[xAxisTickFormatting]="xAxis"
+				(select)="onSelect($event)">
+
+					<!--
+						This one shows when hovering above the whole chart
+						and represents the whole column with all values
+						in given tick.
+					-->
+					<ng-template #seriesTooltipTemplate let-model="model">
+						{{ model[0].name }}
+						<div class="tooltip-item" *ngFor="let item of model">
+							<span class="tooltip-item-color"
+								[style.background-color]="item.color">
+							</span> {{ item.series }}: {{ item.value }}
+						</div>
+						<!--pre style="color: #fff">{{ model | json }}</pre-->
+					</ng-template>
+
+					<!--
+						Tooltip for one specific point in chart
+					-->
+					<ng-template #tooltipTemplate let-model="model">
+						<div class="tooltip-item">
+							<p>{{ model.series }} | {{ model.name | date: 'dd/MM HH:MM:ss' }}</p>
+							<h5 class="text-center">{{ model.value }}</h5>
+						</div>
+					</ng-template>
+				</ngx-charts-area-chart-stacked>
+
 		</div>
 
 		<div *ngSwitchCase="'top'">
@@ -64,6 +98,8 @@ <h2 class="align-self-center">{{ data }}</h2>
 
 		<p class="text-center">{{ box.content }}</p>
 
+	<pre>{{ box | json }}</pre>
+
 	</section>
 
 	<ng-template #nodata>
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
index 19c7289..58ef699 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -1,11 +1,10 @@
 import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
-import { PieChartComponent } from '@swimlane/ngx-charts';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DashBoxModalComponent } from '../dash-box-modal/dash-box-modal.component';
-import { Box } from '../dashboard.component';
 
 
 import { BoxService } from '../box.service';
+import { Box } from '../box';
 
 /**
   * Dashboard Box component
@@ -44,9 +43,12 @@ export class DashBoxComponent {
 	@Output() onDuplicate = new EventEmitter<Object>();
 	@Output() onSave = new EventEmitter<Object>();
 
-	@ViewChild(PieChartComponent)
+	@ViewChild("piechart")
 	private piechart;
 
+	@ViewChild("areachart")
+	private areachart;
+
 	private data = [];
 	private modalRef : any;
 
@@ -63,13 +65,19 @@ export class DashBoxComponent {
 
 		switch (this.box.type) {
 			case "piechart":
-			case "barchart":
 				// Fetch data
-				this.boxService.aggregate(this.box).subscribe(
+				this.boxService.piechart(this.box).subscribe(
 					(data) => { this.data = data },
 					(err) => { console.error(err) }
 				);
 				break;
+			case "barchart":
+				// Fetch data
+				this.boxService.barchart(this.box).subscribe(
+					(data) => { this.data = data; this.processDates(); },
+					(err) => { console.error(err) }
+				);
+				break;
 
 			case "count":
 				this.boxService.count(this.box).subscribe(
@@ -104,14 +112,47 @@ export class DashBoxComponent {
         this.box.endTime = Math.floor(Number(now)/1000);
     }
 
+	/**
+	  * Convert dates to Date class so ngx charts can detect it is a date
+	  * and create the timeline below a chart
+	  */
+    processDates() {
+		this.data = this.data.map(category => {
+			category.series = category.series.map(item => {
+				item.date = item.name;
+				item.name = new Date(item.name*1000);
+				return item;
+			})
+
+			return category;
+		})
+    }
+
+	/**
+	  * Custom format of X axis ticks
+	  * unfortunately it cannot display hours/minutes becuase ngx sends just date
+	  */
+    xAxis = function(d) {
+    	let day = d.getDate();
+    	let month = d.getMonth();
+    	let hours = d.getHours();
+    	let minutes = d.getMinutes();
+		return day + '/' + month;
+	};
+
 	/**
 	  * Update the chart
 	  * Calls child method update()
 	  * More info here: https://github.com/swimlane/ngx-charts/blob/master/src/pie-chart/pie-chart.component.ts
 	  */
     update() {
+    	console.log(this.piechart);
+    	console.log(this.areachart);
+
     	if (this.piechart != undefined)
 			this.piechart.update();
+		else if(this.areachart != undefined)
+			this.areachart.update();
     }
 
 	/**

From 87aae91f6ef502f8735d48b48763a765fdd65585 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 8 Jun 2017 16:45:40 +0200
Subject: [PATCH 42/78] NEMEA: update API for barchart

---
 modules/Nemea-Dashboard | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index 9b29ec5..145220c 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit 9b29ec533743475590dc33b66f308983ebe4e4d1
+Subproject commit 145220c9e942146b6f50889309883f5501f93120

From 056b1272e829085c3f5af55859b9f5ab70c073b6 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 12 Jun 2017 16:43:19 +0200
Subject: [PATCH 43/78] NEMEA: Dashboard editing modal

---
 .../dash-modal/dash-modal.component.html      | 34 +++++++++++
 .../dash-modal/dash-modal.component.scss      |  0
 .../dash-modal/dash-modal.component.spec.ts   | 25 ++++++++
 .../dash-modal/dash-modal.component.ts        | 37 +++++++++++
 .../nemea/dashboard/dashboard.component.html  |  4 +-
 .../nemea/dashboard/dashboard.component.ts    | 61 ++++++++++++++++---
 www/src/app/modules/nemea/nemea.module.ts     | 10 ++-
 7 files changed, 161 insertions(+), 10 deletions(-)
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.scss
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts
 create mode 100644 www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts

diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html
new file mode 100644
index 0000000..46fa73f
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.html
@@ -0,0 +1,34 @@
+<div class="modal-header">
+	<h4 class="modal-title">Editing "{{ backup.title }}"</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Title</label>
+			<input type="text"
+				class="form-control col"
+				name="title"
+				placeholder="Dashboard title"
+				[(ngModel)]="backup.title" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Offset [hours]</label>
+			<input type="text"
+				class="form-control col"
+				name="period"
+				placeholder="Offset in hours"
+				[(ngModel)]="backup.offset" />
+		</div>
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">Cancel</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.scss b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts
new file mode 100644
index 0000000..7b7e565
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashModalComponent } from './dash-modal.component';
+
+describe('DashModalComponent', () => {
+  let component: DashModalComponent;
+  let fixture: ComponentFixture<DashModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts
new file mode 100644
index 0000000..63140d6
--- /dev/null
+++ b/www/src/app/modules/nemea/dashboard/dash-modal/dash-modal.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-dash-modal',
+  templateUrl: './dash-modal.component.html',
+  styleUrls: ['./dash-modal.component.scss']
+})
+export class DashModalComponent implements OnInit {
+
+	@Input() data : Object;
+
+	private backup;
+
+	constructor(private activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		console.log(result);
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		console.log(result);
+		this.activeModal.dismiss(result);
+	}
+}
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.html b/www/src/app/modules/nemea/dashboard/dashboard.component.html
index 20b1372..87f4aeb 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.html
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.html
@@ -6,7 +6,7 @@
 				<span ngbDropdownToggle></span>
 
 				 <div class="dropdown-menu">
-					<a class="dropdown-item">Edit</a>
+					<a class="dropdown-item" (click)="editDashboard(dashboard)">Edit</a>
 					<a class="dropdown-item" (click)="deleteDashboard(dashboard, $event)">Delete</a>
 				</div>
 
@@ -43,3 +43,5 @@
 		</ng-template>
 	</ngb-tab>
 </ngb-tabset>
+
+<ng-template ngbModalContainer class="dash-modal"></ng-template>
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
index 32355b2..690990f 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DashModalComponent } from './dash-modal/dash-modal.component';
 
 import { UsersService } from 'app/modules/users/users.service';
 
@@ -15,11 +16,13 @@ export class DashboardComponent implements OnInit {
 
 	// LocalStorage currentUser
 	private user : Object;
+	private modalRef;
 
 	@ViewChild('tabs')
 	private tabs;
 
-	constructor(private usersService : UsersService) {}
+	constructor(private usersService : UsersService,
+			   private modalService: NgbModal) {}
 
 	/**
 	  * Get dashboard config from local storage
@@ -68,14 +71,13 @@ export class DashboardComponent implements OnInit {
 	/**
 	  * Save settings of the dashboard to localStorage
 	  *
-	  * TODO: store the settings in DB
+	  * Reload the component in case of offset change
 	  *
 	  * This looks really bad but we can't be sure what is inside localStorage
 	  */
-	save($event = {}) : void {
-		let user = JSON.parse(localStorage.getItem("currentUser"));
+	save($event = {}, reload = false) : void {
 
-		console.log(user);
+		let user = JSON.parse(localStorage.getItem("currentUser"));
 
 		if (user['user']['settings'] == null)
 			user['user']["settings"] = { "nemea" : { "dashboard" : this.dashboards } };
@@ -91,7 +93,52 @@ export class DashboardComponent implements OnInit {
 			}
 		}
 
-		localStorage.setItem("currentUser", JSON.stringify(user));
+		this.usersService.update(user['user']['_id']['$oid'], user['user']).subscribe(
+			data => {
+				user['user'] = data;
+				localStorage.setItem("currentUser", JSON.stringify(user));
+				if (reload) {
+					this.ngOnInit();
+				}
+			},
+			error => {
+				console.log(error);
+				// Save local copy anyway
+				localStorage.setItem("currentUser", JSON.stringify(user));
+
+				if (reload) {
+					this.ngOnInit();
+				}
+
+			}
+		)
+	}
+
+	editDashboard(dashboard) {
+		console.debug("should edit", dashboard);
+
+		const offset = dashboard["offset"]
+
+		this.modalRef = this.modalService.open(DashModalComponent);
+		this.modalRef.componentInstance.data = dashboard;
+
+		this.modalRef.result.then(
+			(result) => {
+				/**
+				  * Closed with a button, replace current model with the new one
+				  * Also would be nice to reload data
+				  */
+
+				this.save({}, dashboard['offset'] != offset);
+				console.log(result);
+				console.log(dashboard);
+
+			},
+			(reason) => {
+				// Dismissal of the modal, do nothing
+				console.debug("Modal dismissed");
+			}
+		);
 	}
 
 	/**
diff --git a/www/src/app/modules/nemea/nemea.module.ts b/www/src/app/modules/nemea/nemea.module.ts
index 3bc55a1..0fd8382 100644
--- a/www/src/app/modules/nemea/nemea.module.ts
+++ b/www/src/app/modules/nemea/nemea.module.ts
@@ -44,6 +44,7 @@ import { nemeaReporterConfComponent } from './reporter/reporter_conf.component';
   */
 import { nemeaStatusComponent } from './status/nemea_status.component';
 import { DashboardViewComponent } from './dashboard/dashboard-view/dashboard-view.component';
+import { DashModalComponent } from './dashboard/dash-modal/dash-modal.component';
 
 const nemeaRoutes : Routes = [
 	{
@@ -135,10 +136,15 @@ const nemeaRoutes : Routes = [
 		DashboardComponent,
 		DashBoxModalComponent,
 		DashBoxComponent,
-		DashboardViewComponent
+		DashboardViewComponent,
+		DashModalComponent
 		],
 	exports : [],
 	providers : [SafePipe],
-	entryComponents : [EventDetailComponent, DashBoxModalComponent]
+	entryComponents : [
+		EventDetailComponent,
+		DashBoxModalComponent,
+		DashModalComponent
+	]
 })
 export class nemeaModule {};

From 9f1d335fac4e8b14c4d3bc20a94bf038dab14141 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 12 Jun 2017 16:44:53 +0200
Subject: [PATCH 44/78] NEMEA: add offset to dashboard box

---
 .../modules/nemea/dashboard/dash-box/dash-box.component.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
index 58ef699..9bc2d0d 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -33,6 +33,9 @@ export class DashBoxComponent {
 
 	@Input() index;
 
+	// Time offset
+	@Input() offset = 0;
+
 	/**
 	  * We use event emitter for parent interaction which holds the boxes array
 	  *
@@ -108,8 +111,8 @@ export class DashBoxComponent {
 	timeShift() {
 		let now = new Date();
 
-        this.box.beginTime = Math.floor((now.getTime() - (this.box["period"]*60*60*1000))/1000);
-        this.box.endTime = Math.floor(Number(now)/1000);
+        this.box.beginTime = Math.floor((now.getTime() - (this.box["period"]*60*60*1000) - this.offset * 60 * 60 x* 1000)/1000);
+        this.box.endTime = Math.floor((Number(now) - this.offset * 60 * 60 * 1000)/1000);
     }
 
 	/**

From ee964fd20fe556b8008177e13e774dabbf454776 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 12 Jun 2017 16:45:12 +0200
Subject: [PATCH 45/78] NEMEA: no overflow on X axis in box

---
 .../modules/nemea/dashboard/dash-box/dash-box.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
index 0af9a32..a8acd61 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
@@ -5,7 +5,7 @@
 		width: 100%;
 		height: calc(100% - 50px);	// Height of handle element must be subtracted
 		background: #FFF;
-		overflow: scroll;
+		overflow-x: hidden;
 
 		div {
 			width: calc(100% - 1em);

From 6af8ecdcf9c2f3e1238a9b900668fb04e62452ff Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 12 Jun 2017 16:46:03 +0200
Subject: [PATCH 46/78] NEMEA: take offset time from dashboard config

---
 .../dashboard/dashboard-view/dashboard-view.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
index 8bd11af..fd68418 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
@@ -1,10 +1,10 @@
 <div [ngGrid]="gridConfig">
-
 	<div *ngIf="boxes == []">You should add box</div>
 
 	<dash-box
 		[box]="box"
 		[index]="index"
+		[offset]="dashboard.offset"
 		(onDelete)="deleteBox($event)"
 		(onDuplicate)="duplicateBox($event)"
 		(onSave)="save()"

From 7cc9c7ce449b60939df70424994a0c785a93015b Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 12 Jun 2017 16:46:20 +0200
Subject: [PATCH 47/78] Remove debug logs

---
 www/src/app/modules/users/users.service.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/www/src/app/modules/users/users.service.ts b/www/src/app/modules/users/users.service.ts
index c4058f3..cc46d88 100644
--- a/www/src/app/modules/users/users.service.ts
+++ b/www/src/app/modules/users/users.service.ts
@@ -15,7 +15,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
@@ -28,7 +27,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
@@ -47,7 +45,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);
@@ -60,7 +57,6 @@ export class UsersService {
 				// Extract data from response
 				let body : Object = response.json();
 
-				console.log(body)
 				return body;
 			})
 			.catch(this.handleError);

From 57d0812582c10ad1f981b00d0a1e3db54349ab4e Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 12 Jun 2017 16:47:28 +0200
Subject: [PATCH 48/78] NEMEA: minor syntax error

---
 .../app/modules/nemea/dashboard/dash-box/dash-box.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
index 9bc2d0d..027217e 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.ts
@@ -111,7 +111,7 @@ export class DashBoxComponent {
 	timeShift() {
 		let now = new Date();
 
-        this.box.beginTime = Math.floor((now.getTime() - (this.box["period"]*60*60*1000) - this.offset * 60 * 60 x* 1000)/1000);
+        this.box.beginTime = Math.floor((now.getTime() - this.box["period"]*60*60*1000 - this.offset * 60 * 60 * 1000)/1000);
         this.box.endTime = Math.floor((Number(now) - this.offset * 60 * 60 * 1000)/1000);
     }
 

From 5be78fe64452b6887907fdbc047a32b8fa07e370 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 09:08:28 +0200
Subject: [PATCH 49/78] NEMEA: remove debugging logs

---
 www/src/app/modules/nemea/dashboard/box.service.ts     |  9 ---------
 .../app/modules/nemea/dashboard/dashboard.component.ts | 10 +---------
 2 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/box.service.ts b/www/src/app/modules/nemea/dashboard/box.service.ts
index 3011295..262ef01 100644
--- a/www/src/app/modules/nemea/dashboard/box.service.ts
+++ b/www/src/app/modules/nemea/dashboard/box.service.ts
@@ -6,13 +6,6 @@ export class BoxService {
 
 	constructor(private http : Http) {}
 
-	get(box) {
-		console.log(box);
-
-		console.warn("No box type is set.")
-
-	}
-
 	piechart(box) {
 		let requestOptions = new RequestOptions();
 
@@ -75,7 +68,6 @@ export class BoxService {
 
 		return this.http.get('/nemea/events/count', requestOptions).map(
 			(response : Response) => {
-				console.log("response", response)
 				let body = response.json()
 				return body;
 			})
@@ -93,7 +85,6 @@ export class BoxService {
 
 		return this.http.get('/nemea/events/top', requestOptions).map(
 			(response : Response) => {
-				console.log("response", response)
 				let body = response.json()
 				return body;
 			})
diff --git a/www/src/app/modules/nemea/dashboard/dashboard.component.ts b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
index 690990f..c0d775e 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard.component.ts
+++ b/www/src/app/modules/nemea/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
 import { DashModalComponent } from './dash-modal/dash-modal.component';
 
 import { UsersService } from 'app/modules/users/users.service';
@@ -34,7 +35,6 @@ export class DashboardComponent implements OnInit {
 
 		// Load settings for dashboard (boxes configuration)
 		try {
-			console.log(this.user["user"]["settings"]["nemea"]["dashboard"]);
 			this.dashboards = this.user["user"]["settings"]["nemea"]["dashboard"];
 		} catch (e) {
 			console.log(e);
@@ -53,9 +53,6 @@ export class DashboardComponent implements OnInit {
 	}
 
 	addDashboard(title : string, offset = 0) {
-
-		console.log(title, offset);
-
 		if (title.length) {
 			let dash = {
 				"title" : title,
@@ -115,8 +112,6 @@ export class DashboardComponent implements OnInit {
 	}
 
 	editDashboard(dashboard) {
-		console.debug("should edit", dashboard);
-
 		const offset = dashboard["offset"]
 
 		this.modalRef = this.modalService.open(DashModalComponent);
@@ -130,8 +125,6 @@ export class DashboardComponent implements OnInit {
 				  */
 
 				this.save({}, dashboard['offset'] != offset);
-				console.log(result);
-				console.log(dashboard);
 
 			},
 			(reason) => {
@@ -148,7 +141,6 @@ export class DashboardComponent implements OnInit {
 
 		$event.preventDefault();
 
-		console.log(this.tabs);
 		this.tabs.select('ngb-tab-1');
 
 		let index = this.dashboards.indexOf(dashboard, 0);

From 512a2587b76a45727fb5741d332486a95f4d4788 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 09:08:52 +0200
Subject: [PATCH 50/78] NEMEA: minor style improvements

---
 .../nemea/dashboard/dash-box/dash-box.component.html      | 4 +---
 .../nemea/dashboard/dash-box/dash-box.component.scss      | 8 ++++++++
 .../dashboard-view/dashboard-view.component.html          | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
index d25b00e..53c8ee6 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -96,9 +96,7 @@ <h2 class="align-self-center">{{ data }}</h2>
 			No type of box is defined
 		</div>
 
-		<p class="text-center">{{ box.content }}</p>
-
-	<pre>{{ box | json }}</pre>
+		<p class="text-center box-text">{{ box.content }}</p>
 
 	</section>
 
diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
index a8acd61..fa929f4 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.scss
@@ -14,6 +14,14 @@
 			display: block;
 		}
 
+		.box-text {
+			position: absolute;
+			bottom: -0.5em;
+			width: 100%;
+			padding: 0 0.5em;
+			background: #FFF;
+		}
+
 	}
 
 	&.moving {
diff --git a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
index fd68418..d9f07b7 100644
--- a/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
+++ b/www/src/app/modules/nemea/dashboard/dashboard-view/dashboard-view.component.html
@@ -13,5 +13,5 @@
 
 </div>
 
-<a (click)="addCleanBox()" class="btn btn-primary">Add Box</a>
+<button (click)="addCleanBox()" class="btn btn-primary">Add Box</button>
 

From ddae9b59c96215b319fbb04798ec1b68a25c5730 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 12:26:39 +0200
Subject: [PATCH 51/78] NEMEA: rewrite clickthroughs to NERD, FTAS and SCGUI

---
 .../event-detail/event-detail.component.html  |  6 +-
 .../event-detail/event-detail.component.ts    | 91 ++++++++++---------
 .../events/event-item/event-item.component.ts | 31 ++++---
 3 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/www/src/app/modules/nemea/events/event-detail/event-detail.component.html b/www/src/app/modules/nemea/events/event-detail/event-detail.component.html
index 9f80437..baa774c 100644
--- a/www/src/app/modules/nemea/events/event-detail/event-detail.component.html
+++ b/www/src/app/modules/nemea/events/event-detail/event-detail.component.html
@@ -8,9 +8,9 @@ <h4 class="modal-title">Event detail</h4>
 	<div [outerHTML]="data | idea" style="width: 50%"></div>
 </div>
 <div class="modal-footer">
-    <a [routerLink]="[nerdUrl, nerdUrlParams]" class="btn btn-primary">NERD</a>
-    <a [routerLink]="[scUrl, scUrlParams]" class="btn btn-primary">SecurityCloud</a>
-    <a [routerLink]="[ftasUrl, ftasUrlParams]" class="btn btn-primary">FTAS</a>
+    <button class="btn btn-primary" (click)="nerd()">NERD</button>
+    <button class="btn btn-primary" (click)="scgui()">SecurityCloud</button>
+	<button class="btn btn-primary" (click)="ftas()">FTAS</button>
 	<!--button type="button" class="btn btn-primary" (click)="activeModal.close()" disabled>
 		Source IP
 	</button>
diff --git a/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts b/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts
index b5a7405..1c9d9b9 100644
--- a/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts
+++ b/www/src/app/modules/nemea/events/event-detail/event-detail.component.ts
@@ -1,62 +1,69 @@
 import { Component, OnInit, Input } from '@angular/core';
-import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'event-detail',
-  templateUrl: './event-detail.component.html',
-  styleUrls: ['./event-detail.component.scss']
+	selector: 'event-detail',
+	templateUrl: './event-detail.component.html',
+	styleUrls: ['./event-detail.component.scss']
 })
 export class EventDetailComponent implements OnInit {
-  @Input() data : Object;
+	@Input() data : Object;
 
-  ftasUrl : string = "/ftas";
-  ftasUrlParams : Object = {};
+	ftasUrl : string = "/ftas";
+	ftasUrlParams : Object = {};
 
-  scUrl : string = "/security-cloud";
-  scUrlParams : Object = {};
+	scUrl : string = "/security-cloud";
+	scUrlParams : Object = {};
 
-  nerdUrl : string = "/nerd";
-  nerdUrlParams : Object = {};
+	nerdUrl : string = "/nerd";
+	nerdUrlParams : Object = {};
 
-  constructor(public activeModal: NgbActiveModal) {}
+	constructor(public activeModal: NgbActiveModal,
+				private router : Router) {}
 
-  ngOnInit() {
-    this.generateFtasUrl();
-    this.generateScUrl();
-    this.generateNerdUrl();
-  }
+	ngOnInit() {
+	}
 
-  generateFtasUrl() {
-    console.log(this.data);
+	ftas() {
+		// Add source IP to query
+		if (this.data["Source"] != undefined &&
+				this.data["Source"][0]["IP4"] != undefined) {
+			this.ftasUrlParams["src_ip"] = this.data["Source"][0]["IP4"][0];
+			console.log("adding src IP")
+		}
 
-    if (this.data["Source"] != undefined && this.data["Source"][0]["IP4"] != undefined) {
-        this.ftasUrlParams["src_ip"] = this.data["Source"][0]["IP4"][0];
-        console.log("adding src IP")
-    }
+		// Add target IP to query
+		if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
+			this.ftasUrlParams["dst_ip"] = this.data["Target"][0]["IP4"][0];
+			console.log("adding dst IP")
+		}
 
-    if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
-        this.ftasUrlParams["dst_ip"] = this.data["Target"][0]["IP4"][0];
-        console.log("adding dst IP")
-    }
+		// Add time to query
+		this.ftasUrlParams["first"] = Math.floor(this.data["DetectTime"]["$date"]/1000) - 600;
+		this.ftasUrlParams["last"] = Math.floor(Date.now()/1000);
 
-    console.log(this.ftasUrl)
-  }
+		console.log(this.ftasUrlParams);
 
-  generateScUrl() {
-    console.log(this.data);
-    let time = new Date(this.data["DetectTime"]["$date"])
-    this.scUrlParams = {"eventtime" : Math.floor(time.getTime()/1000)}
+		this.activeModal.close([this.ftasUrl, this.ftasUrlParams]);
+	}
 
-    console.log(this.scUrlParams)
-  }
+	scgui() {
+		console.log(this.data);
+		let time = new Date(this.data["DetectTime"]["$date"])
+		this.scUrlParams = {"eventtime" : Math.floor(time.getTime()/1000)}
 
-  generateNerdUrl() {
-    if (this.data["Source"] != undefined && this.data["Source"][0]["IP4"] != undefined) {
-        this.nerdUrlParams["ip"] = this.data["Source"][0]["IP4"][0];
-    } else if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
-        this.nerdUrlParams["ip"] = this.data["Target"][0]["IP4"][0];
-    }
+		console.log(this.scUrlParams)
+		this.activeModal.close([this.scUrl, this.scUrlParams]);
+	}
 
-  }
+	nerd() {
+		if (this.data["Source"] != undefined && this.data["Source"][0]["IP4"] != undefined) {
+			this.nerdUrlParams["ip"] = this.data["Source"][0]["IP4"][0];
+		} else if (this.data["Target"] != undefined && this.data["Target"][0]["IP4"] != undefined) {
+			this.nerdUrlParams["ip"] = this.data["Target"][0]["IP4"][0];
+		}
 
+		this.activeModal.close([this.nerdUrl, this.nerdUrlParams]);
+	}
 }
diff --git a/www/src/app/modules/nemea/events/event-item/event-item.component.ts b/www/src/app/modules/nemea/events/event-item/event-item.component.ts
index ef9bafc..05b5d41 100644
--- a/www/src/app/modules/nemea/events/event-item/event-item.component.ts
+++ b/www/src/app/modules/nemea/events/event-item/event-item.component.ts
@@ -23,16 +23,25 @@ export class EventItemComponent implements OnInit {
 			params => {
 	            this.params = params;
 
-	            if (this.params['id'] && this.params['id'] == this.item['_id']['$oid']) {
-	            	if (!this.modalRef) {
-						this.modalRef = this.modalService.open(EventDetailComponent);
-						this.modalRef.componentInstance.data = this.item;
-					}
-
-					// We can ditch the parameter since it is always null
-					this.modalRef.result
-						.then(p => {this.unsetId(this.router, this.params)})
-						.catch(p => {this.unsetId(this.router, this.params)});
+	            if (this.params['id'] &&
+						this.params['id'] == this.item['_id']['$oid'] &&
+						!this.modalRef) {
+					this.modalRef = this.modalService.open(EventDetailComponent);
+					this.modalRef.componentInstance.data = this.item;
+					this.modalRef.result.then(
+						(result) => {
+							// The modal was closed and we shall redirect
+							if (result != undefined) {
+								console.log('should redirect', result);
+								this.router.navigate(result);
+							} else {
+								this.unsetId(this.router, this.params)
+							}
+						},
+						(reason) => {
+							//dismissal
+							this.unsetId(this.router, this.params)
+						});
 				}
 		});
 	}
@@ -45,6 +54,4 @@ export class EventItemComponent implements OnInit {
 		p['id'] = undefined;
 		r.navigate(['nemea/events'], {queryParams : p});
 	}
-
-	//@HostListener('click')
 }

From 6a87dc7b4053eb47185ae6bf83f25d47b25491b1 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 12:28:17 +0200
Subject: [PATCH 52/78] FTAS: use timestamps from the url params

---
 www/src/app/modules/ftas/ftas.component.html |  7 ++++++-
 www/src/app/modules/ftas/ftas.component.ts   | 20 ++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/www/src/app/modules/ftas/ftas.component.html b/www/src/app/modules/ftas/ftas.component.html
index 9dbf48c..57534be 100644
--- a/www/src/app/modules/ftas/ftas.component.html
+++ b/www/src/app/modules/ftas/ftas.component.html
@@ -1,6 +1,11 @@
 <section class="box">
     <h4 *ngIf="ftasMsg.length > 0">{{ ftasMsg }}</h4>
-    <iframe [src]="url | safe" class="frame" (load)="iframeLoaded()"></iframe>
+    <base target="_blank">
+    <iframe [src]="url | safe" class="frame" (onload)="iframeLoaded()">
+		<div class="alert alert-danger">
+			Your browser doesn't support iframes
+		</div>
+	</iframe>
 </section>
 
 <section class="box">
diff --git a/www/src/app/modules/ftas/ftas.component.ts b/www/src/app/modules/ftas/ftas.component.ts
index 3bd480c..54aa9e8 100644
--- a/www/src/app/modules/ftas/ftas.component.ts
+++ b/www/src/app/modules/ftas/ftas.component.ts
@@ -18,6 +18,7 @@ export class FtasComponent implements OnInit {
     filter : string;                // Advanced filter field for FTAS
     iframeInit : Boolean = false;   // Flag for iframe initialization routine
     ftasMsg : string = "";          // The loading message
+    params : Object;
 
     /**
       * Construct the FTAS URL from environment variables
@@ -40,13 +41,16 @@ export class FtasComponent implements OnInit {
       */
     ngOnInit() {
         this.route.params.subscribe(params => {
+        	this.params = params;
             for (var key in params) {
-                if (this.filter == undefined) {
-                    this.filter = key + "=" + params[key];
-                }
-                else {
-                    this.filter += "and " + key + '=' + params[key];
-                }
+            	if (key != 'first' && key != 'last') {
+					if (this.filter == undefined) {
+						this.filter = key + "=" + params[key];
+					}
+					else {
+						this.filter += " and " + key + '=' + params[key];
+					}
+				}
             }
 
             /**
@@ -93,8 +97,8 @@ export class FtasComponent implements OnInit {
         queryBase.set("select_output-use", "yes");
         queryBase.set("query_style", "advanced");
         //this.query.set("advanced_query", "dst_ip%3D193.170.227.139");
-        queryBase.set("first", "today 8:00");
-        queryBase.set("last", "today 10:00");
+        queryBase.set("first", this.params["first"]);
+        queryBase.set("last", this.params["last"]);
         queryBase.set("use_all_fields", "1");
         queryBase.set("query", "yes");
         queryBase.set("run_query", "yes");

From 82670c6907754c987e04672fe47a2a631112bb62 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 12:29:41 +0200
Subject: [PATCH 53/78] NEMEA: fix top n box when data is missing

---
 .../nemea/dashboard/dash-box/dash-box.component.html        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
index 53c8ee6..ff06b8e 100644
--- a/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
+++ b/www/src/app/modules/nemea/dashboard/dash-box/dash-box.component.html
@@ -74,15 +74,15 @@ <h5 class="text-center">{{ model.value }}</h5>
 					class="list-group-item d-flex flex-row justify-content-center">
 					<span>
 						<i class="fa fa-tag" aria-hidden="true"></i>
-						{{ event._id }}
+						{{ event?._id }}
 					</span>
 					<span>
 						<i class="fa fa-bar-chart" aria-hidden="true"></i>
-						{{ event.FlowCount }}
+						{{ event?.FlowCount }}
 					</span>
 					<span>
 						<i class="fa fa-clock-o" aria-hidden="true"></i>
-						{{ event.DetectTime.$date | date: 'dd/mm/yy hh:mm:ss' }}
+						{{ event?.DetectTime.$date | date: 'dd/MM/yy hh:mm:ss' }}
 					</span>
 				</a>
 			</ul>

From 0227312fa61983970bfa8ece8b6255c77da95590 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 12:30:00 +0200
Subject: [PATCH 54/78] NEMEA: remove logging info

---
 www/src/app/modules/nemea/events/events.service.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/www/src/app/modules/nemea/events/events.service.ts b/www/src/app/modules/nemea/events/events.service.ts
index 4744879..5ccea66 100644
--- a/www/src/app/modules/nemea/events/events.service.ts
+++ b/www/src/app/modules/nemea/events/events.service.ts
@@ -9,7 +9,6 @@ export class EventsService {
 	last_events(items : number) {
 		return this.http.get('/nemea/events/' + String(items)).map(
 			(response : Response) => {
-				console.log(response);
 				let body : Object = response.json();
 				return body;
 			})
@@ -23,7 +22,6 @@ export class EventsService {
 		}
 		return this.http.get('/nemea/events/query', {search : params}).map(
 			(response : Response) => {
-				console.log(response);
 				let body = response.json();
 				return body;
 			})

From 0c959a66e47de6117104f8b29d509c8abd80e152 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 12:31:28 +0200
Subject: [PATCH 55/78] Remove Loading... message in iframes

---
 www/src/app/modules/nerd/nerd.component.html         | 2 +-
 www/src/app/modules/security-cloud/sc.component.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/app/modules/nerd/nerd.component.html b/www/src/app/modules/nerd/nerd.component.html
index 2725474..a024337 100644
--- a/www/src/app/modules/nerd/nerd.component.html
+++ b/www/src/app/modules/nerd/nerd.component.html
@@ -1,6 +1,6 @@
 <section class="box">
     <h4 *ngIf="msg.length > 0">{{ msg }}</h4>
-    <iframe [src]="url | safe" class="frame" (load)="iframeLoaded()"></iframe>
+    <iframe [src]="url | safe" class="frame"></iframe>
 </section>
 
 <section class="box">
diff --git a/www/src/app/modules/security-cloud/sc.component.html b/www/src/app/modules/security-cloud/sc.component.html
index 2725474..a024337 100644
--- a/www/src/app/modules/security-cloud/sc.component.html
+++ b/www/src/app/modules/security-cloud/sc.component.html
@@ -1,6 +1,6 @@
 <section class="box">
     <h4 *ngIf="msg.length > 0">{{ msg }}</h4>
-    <iframe [src]="url | safe" class="frame" (load)="iframeLoaded()"></iframe>
+    <iframe [src]="url | safe" class="frame"></iframe>
 </section>
 
 <section class="box">

From 6689edce75475abfc1f2927ffb457e6cda54f5b0 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 13:07:19 +0200
Subject: [PATCH 56/78] Update editorconfig

---
 www/.editorconfig | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/.editorconfig b/www/.editorconfig
index 6e87a00..2e8b0ef 100644
--- a/www/.editorconfig
+++ b/www/.editorconfig
@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

From bb1cf408ed4efe1c8a144a8d2090212f922cd3ea Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Tue, 13 Jun 2017 16:03:01 +0200
Subject: [PATCH 57/78] NEMEA: refactor Events

Rework time and date picker, loading and appending
---
 modules/Nemea-Dashboard                       |   2 +-
 .../nemea/events/events.component.html        | 129 +++++++++---
 .../modules/nemea/events/events.component.ts  | 183 +++++++++++-------
 3 files changed, 214 insertions(+), 100 deletions(-)

diff --git a/modules/Nemea-Dashboard b/modules/Nemea-Dashboard
index 145220c..4b1aa0a 160000
--- a/modules/Nemea-Dashboard
+++ b/modules/Nemea-Dashboard
@@ -1 +1 @@
-Subproject commit 145220c9e942146b6f50889309883f5501f93120
+Subproject commit 4b1aa0a81ce9aa308b5486189e6cab8af1602f9e
diff --git a/www/src/app/modules/nemea/events/events.component.html b/www/src/app/modules/nemea/events/events.component.html
index 7d32fe5..2bc03aa 100644
--- a/www/src/app/modules/nemea/events/events.component.html
+++ b/www/src/app/modules/nemea/events/events.component.html
@@ -8,50 +8,119 @@ <h2>
 	<form (ngSubmit)="runQuery()" name="query_form" class="query box">
 		<div class="d-flex flex-row">
 			<div class="row-space">
-				<ngb-datepicker [(ngModel)]="query.date" (navigate)="date = $event.next" name="datepicker"></ngb-datepicker>
-			</div>
-
-			<div class="d-flex flex-column row-space">
+				<div class="form-group">
+					<label for="timeFrom">Time from</label>
+						<ngb-timepicker [(ngModel)]="query.from"
+							name="timeFrom"
+							[spinners]="false">
+						</ngb-timepicker>
+
+					<div class="input-group">
+						<input class="form-control"
+							placeholder="{{ query.date.year}}-{{query.date.month}}-{{query.date.day}}"
+							name="dp"
+							ngbDatepicker
+							[(ngModel)]="query.date"
+							#d="ngbDatepicker"
+							name="datepicker">
+						<div class="input-group-addon" (click)="d.toggle()">
+							<i class="fa fa-calendar-o" aria-hidden="true"></i>
+						</div>
+					</div>
+				</div>
 
-				<label for="timeFrom">Time from</label>
-				<input [(ngModel)]="query.from" type="text" placeholder="12:00" [ngModelOptions]="{ debounce: 100 }" validate-format name="timeTo">
-				<p *ngIf="False">Bad time format</p>
+				<div class="form-group">
+					<label>Time To</label>
+					<ngb-timepicker [(ngModel)]="query.to"
+						name="timeTo"
+						[spinners]="false">
+					</ngb-timepicker>
+
+					<div class="input-group">
+						<input class="form-control"
+							placeholder="{{ query.date.year}}-{{query.date.month}}-{{query.date.day}}"
+							name="dp"
+							ngbDatepicker
+							[(ngModel)]="query.date"
+							#d="ngbDatepicker"
+							name="datepicker">
+						<div class="input-group-addon" (click)="d.toggle()">
+							<i class="fa fa-calendar-o" aria-hidden="true"></i>
+						</div>
+					</div>
 
-				<label>To</label>
-				<input [(ngModel)]="query.to" type="text" placeholder="13:00" validate-format validate-hours [ngModelOptions]="{ debounce: 100 }" name="timeFrom">
-				<p *ngIf="False">Bad time format or "TO" time sooner than "FROM" time</p>
+				</div>
+			</div>
 
-				<label>Category</label>
-				<input [(ngModel)]="query.category" name="Category">
+			<div class="d-flex flex-column row-space">
 
-				<label>Description</label>
-				<input [(ngModel)]="query.description" name="Description">
+				<div class="form-group">
+					<label>Category</label>
+					<input [(ngModel)]="query.category" name="Category" class="form-control">
+				</div>
 
-				<label>Limit</label>
-				<input [(ngModel)]="query.limit" name="Limit">
+				<div class="form-group">
+					<label>Description</label>
+					<input [(ngModel)]="query.description" name="Description" class="form-control">
+				</div>
 			</div>
 
 			<div class="d-flex flex-column row-space">
-				<label>Order by</label>
-				<input type="text" [(ngModel)]="query.orderby" name="OrderBy">
+				<div class="form-group">
+					<label>Limit</label>
+					<input [(ngModel)]="query.limit" name="Limit" class="form-control">
+				</div>
+
+				<div class="form-group">
+					<label>Order by</label>
+					<input type="text" [(ngModel)]="query.orderby" name="OrderBy" class="form-control">
+				</div>
 
 				<label>Direction</label>
 				<div class="btn-group" data-toggle="buttons">
-					<label class="btn btn-primary" [ngClass]="{'active' : query.dir == 1}">
-						<input type="radio" name="options" id="option1"
-							autocomplete="off" [value]="1" [(ngModel)]="query.dir"> Ascending
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : query.dir == 1}"
+						title="Earliest first">
+						<input type="radio" data-toggle="tooltip"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="1"
+							[(ngModel)]="query.dir">
+						Ascending
 					</label>
-					<label class="btn btn-primary" [ngClass]="{'active' : query.dir == -1}">
-						<input type="radio" name="options" id="option1" 
-							autocomplete="off" [value]="-1" [(ngModel)]="query.dir"> Descending
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : query.dir == -1}"
+						title="Latest first">
+						<input type="radio"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="-1"
+							[(ngModel)]="query.dir">
+						Descending
 					</label>
 				</div>
+			</div>
+			<div class="d-flex flex-column row-space">
+				<div class="form-group">
+					<label>Source IP</label>
+					<input type="text" [(ngModel)]="query.srcip" name="srcip" class="form-control">
+				</div>
 
-				<label>Source IP</label>
-				<input type="text" [(ngModel)]="query.srcip" name="srcip">
+				<div class="form-group">
+					<label>Destination IP</label>
+					<input type="text" [(ngModel)]="query.dstip" name="dstip" class="form-control">
+				</div>
+
+				<div class="form-group">
 
-				<label>Destination IP</label>
-				<input type="text" [(ngModel)]="query.dstip" name="dstip">
+					<label class="custom-control custom-checkbox">
+						<input type="checkbox" class="custom-control-input" [(ngModel)]="hideWhitelisted" name="whitelisted">
+						<span class="custom-control-indicator"></span>
+						<span class="custom-control-description">Hide whitelisted items ({{ totalWhitelisted }})</span>
+					</label>
+				</div>
 			</div>
 
 			<div class="d-flex flex-column row-space">
@@ -61,8 +130,6 @@ <h2>
 			</div>
 		</div>
 	</form>
-
-    Hide whitelisted items ({{ totalWhitelisted }}): <input type="checkbox" [(ngModel)]="hideWhitelisted" />
 </section>
 
 <section class="box">
@@ -113,7 +180,7 @@ <h3 class="text-center" *ngIf="loadBtn != 'LOADING...'"><em>No events match give
 						Load next <span *ngIf="remaining?.total > 0">
 							{{ query.limit < remaining?.total ? query.limit : remaining?.total }}</span>
 							<span *ngIf="remaining?.total == -1">{{ query.limit }}</span> items<br/>
-							<small *ngIf="remaining?.total > 0">{{ remaining.total }}<span *ngIf="remaining.total == 10000">+</span> remaining</small>
+							<small *ngIf="remaining?.total > 0">{{ remaining.total - 1}}<span *ngIf="remaining.total > query.limit">+</span> remaining</small>
 					</button>
 				</td>
 			</tr>
diff --git a/www/src/app/modules/nemea/events/events.component.ts b/www/src/app/modules/nemea/events/events.component.ts
index d0f8bfa..ed51f9c 100644
--- a/www/src/app/modules/nemea/events/events.component.ts
+++ b/www/src/app/modules/nemea/events/events.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
 import { EventsService } from './events.service';
 
 import { EventItemComponent } from './event-item/event-item.component';
 
-const now = new Date();
-
 @Component({
 	selector: 'nemea-events',
 	templateUrl: './events.component.html',
@@ -16,47 +14,63 @@ const now = new Date();
 export class EventsComponent implements OnInit {
 
 	events : any;
-	remaining : Object = {total : (-1)};
-	query : Object = {
-        from : "12:00",
-        to : "",
-		date : {
-			year: now.getFullYear(),
-			month: now.getMonth() + 1,
-			day: now.getDate()
-		},
-        description : "",
-        category : "",
-        orderby : "DetectTime",
-        dir : 1,
-        limit : 100,
-        srcip : "",
-        dstip : ""
+	remaining : Object = {
+		total : -1
 	}
+
+	private now = new Date();
+
+	query : Object;
+
 	loadBtn = "LOAD";
 	error;
 	totalWhitelisted = 0;
 
-	constructor(private eventsService : EventsService, private router : Router) { }
+	constructor(private eventsService : EventsService,
+				private router : Router,
+				private route : ActivatedRoute) { }
 
 	ngOnInit() {
+		this.reset();
 		this.loadBtn = "LOADING...";
-		this.eventsService.last_events(100).subscribe(
-			(data) => {
-			    this.events = data;
-			    this.loadBtn = "LOAD";
-		        this.countWhitelisted();
-			},
-			(error : Object) => this.processError(error)
-		);
-		this.selectToday();
+
+		this.route.queryParams.subscribe((params : Params) => {
+
+			if (!Object.keys(params).length) {
+				console.debug('should load default');
+
+				this.eventsService.last_events(100).subscribe(
+					(data) => {
+						this.events = data;
+						this.loadBtn = "LOAD";
+						this.countWhitelisted();
+					},
+					(error : Object) => this.processError(error)
+				);
+
+			} else {
+				console.debug('should load by params')
+				console.log(params);
+
+				for(let key in params) {
+					console.log(key, params[key])
+					try {
+						this.query[key] = params[key];
+					} catch (e) {
+						console.log(e);
+						continue;
+					}
+				}
+
+			}
+		});
 	}
 
 	private processData(data : any) {
 		this.remaining = data.pop();
 		this.events = data;
 		this.loadBtn = "LOAD";
-		this.setParams();
+		//this.setParams();
 		this.countWhitelisted();
 	}
 
@@ -64,7 +78,7 @@ export class EventsComponent implements OnInit {
 		this.remaining = data.pop();
 		this.events = this.events.concat(data);
 		this.loadBtn = "LOAD";
-		this.setParams();
+		//this.setParams();
 		this.countWhitelisted();
 	}
 
@@ -76,72 +90,97 @@ export class EventsComponent implements OnInit {
 		this.setParams();
 	}
 
-	private setParams() {
+	/**
+	  * generate params to query and route, this includes navigating to same route which
+	  * doesn't trigger reloading of the route
+	  *
+	  * The dates are kept in miliseconds since we are working in JS and only
+	  * when going to the API they are floored to seconds
+	  */
+	private params() {
 		console.log('setting params');
-		this.router.navigate(['nemea/events'], {queryParams : this.query});
+
+		let fromDate = new Date(this.query['date']['year'],
+						   this.query['date']['month'],
+						   this.query['date']['day'],
+						   this.query['from']['hour'],
+						   this.query['from']['minute']);
+
+		let toDate = new Date(this.query['date']['year'],
+						   this.query['date']['month'],
+						   this.query['date']['day'],
+						   this.query['to']['hour'],
+						   this.query['to']['minute']);
+
+		// Date is ommitted and will be deducted from the 'from' field
+		return {
+			from : fromDate.getTime(),
+			to : toDate.getTime(),
+			description : this.query['description'] || null,
+			category : this.query['category'] || null,
+			orderby : this.query['orderby'] || null,
+			dir : this.query['dir'],
+			limit : this.query['limit'],
+			scrip : this.query['srcip'] || null,
+			dstip : this.query['dstip'] || null
+		}
+
 	}
 
-	selectToday() {
-		this.query['date'] = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
+	/**
+	  * Navigate to same route which doesn't trigger reloading of the route
+	  */
+	private setParams() {
+		this.router.navigate(['nemea/events'], {queryParams : this.params()});
 	}
 
 	reset() {
+		let now = new Date();
 		this.query = {
-			from : "12:00",
-			to : "",
+			from : {
+				hour: (now.getHours() - 1),
+				minute: now.getMinutes()
+			},
+			to : {
+				hour: now.getHours(),
+				minute: now.getMinutes()
+			},
 			date : {
 				year: now.getFullYear(),
-				month: now.getMonth() + 1,
+				month: now.getMonth(),
 				day: now.getDate()
 			},
 			description : "",
 			category : "",
 			orderby : "DetectTime",
-			dir : 1,
+			dir : -1,
 			limit : 100,
 			srcip : "",
 			dstip : ""
 		}
 	}
 
-	private parseHours(time : any) : number {
-		if ((typeof time == "number" && time > 0) || time == undefined)
-			return time;
-
-		if (typeof time == "string" && time == "")
-			return Math.floor(Date.now() / 1000);
-
-		let sTime = time.split(':');
-		let hours = new Date(this.query['date']['year'],
-			this.query['date']['month'] - 1 ,this.query['date']['day']);
-		hours.setHours(Number(sTime[0]));
-		hours.setMinutes(Number(sTime[1]));
-
-		return Math.floor(hours.getTime() / 1000);
-	}
-
 	runQuery(append = false) {
 		this.loadBtn = "LOADING...";
 
-		let queryParams = {
-			from : this.parseHours(this.query['from']),
-			to : this.parseHours(this.query['to']),
-			limit : this.query['limit'],
-			dir : this.query['dir'],
-			orderby : this.query['orderby']
-		}
+		let queryParams = this.params();
+		console.log(queryParams)
+
+		// Convert to unix timestamp (second)
+		queryParams["to"] = Math.floor(queryParams["to"]/1000)
+		queryParams["from"] = Math.floor(queryParams["from"]/1000)
 
 		// Inital load of events and we need deeper history
-		if (this.remaining['total'] == -1 && append) {
-			this.query['to'] = this.query['from'];
-			this.query['from'] = undefined;
+		if (append) {
 			queryParams['dir'] = (-1);
+			queryParams['from'] = null;
 		}
 
 		console.log(queryParams);
 
 		this.eventsService.query(queryParams).subscribe(
 			(data) => {
+			console.log(data[100]);
 				if (append)
 					this.appendData(data);
 				else
@@ -151,8 +190,16 @@ export class EventsComponent implements OnInit {
 	}
 
 	getNext(time : number) {
-		console.info(time);
-		this.query['from'] = Math.floor((time)/1000);
+		console.log("getnext")
+		let date = new Date(time);
+		this.query['date'] = {
+				year: date.getFullYear(),
+				month: date.getMonth(),
+				day: date.getDate()
+			}
+
+		this.query['to']['hour'] = date.getHours();
+		this.query['to']['minute'] = date.getMinutes();
 		this.runQuery(true);
 	}
 

From 16fb843ef42eb778b77aa8010de41056f6010437 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 15 Jun 2017 09:40:27 +0200
Subject: [PATCH 58/78] Move images to assets/img folder

---
 www/src/app/app.component.html                    |   2 +-
 www/src/app/components/login/login.component.html |   2 +-
 www/src/assets/config.json                        |  12 ++++++++++++
 www/src/assets/{ => img}/logo.png                 | Bin
 www/src/assets/{ => img}/logo_old.png             | Bin
 www/src/assets/{ => img}/spin.gif                 | Bin
 6 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 www/src/assets/config.json
 rename www/src/assets/{ => img}/logo.png (100%)
 rename www/src/assets/{ => img}/logo_old.png (100%)
 rename www/src/assets/{ => img}/spin.gif (100%)

diff --git a/www/src/app/app.component.html b/www/src/app/app.component.html
index 0b99dc3..643309c 100644
--- a/www/src/app/app.component.html
+++ b/www/src/app/app.component.html
@@ -2,7 +2,7 @@
 	<div class="sidebar" *ngIf="!isLoginPage">
 
 		<h1 class="user-area">
-			<img src="assets/logo.png" alt="Liberouter GUI">
+			<img src="assets/img/logo.png" alt="Liberouter GUI">
 		</h1>
 
 		<div class="user-area ">
diff --git a/www/src/app/components/login/login.component.html b/www/src/app/components/login/login.component.html
index 1b02608..8c75e27 100644
--- a/www/src/app/components/login/login.component.html
+++ b/www/src/app/components/login/login.component.html
@@ -2,7 +2,7 @@
 	<section class="login box">
 		<h2>
 			<span>Liberouter GUI</span>
-			<img src="assets/logo.png" alt="Liberouter logo" />
+			<img src="assets/img/logo.png" alt="Liberouter logo" />
 		</h2>
 
 		<form>
diff --git a/www/src/assets/config.json b/www/src/assets/config.json
new file mode 100644
index 0000000..5b60c42
--- /dev/null
+++ b/www/src/assets/config.json
@@ -0,0 +1,12 @@
+{
+	"api" : {
+		"path" : "/libapi"
+	},
+	"ftas" : {
+			"url" : "ftas.cesnet.cz",
+			"output" : "1402"
+	},
+	"nerd" : {
+		"url" : "nerd.cesnet.cz/nerd"
+	}
+}
diff --git a/www/src/assets/logo.png b/www/src/assets/img/logo.png
similarity index 100%
rename from www/src/assets/logo.png
rename to www/src/assets/img/logo.png
diff --git a/www/src/assets/logo_old.png b/www/src/assets/img/logo_old.png
similarity index 100%
rename from www/src/assets/logo_old.png
rename to www/src/assets/img/logo_old.png
diff --git a/www/src/assets/spin.gif b/www/src/assets/img/spin.gif
similarity index 100%
rename from www/src/assets/spin.gif
rename to www/src/assets/img/spin.gif

From 05d42e8da2fde186d4dec9de208758d17523b563 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 15 Jun 2017 15:57:19 +0200
Subject: [PATCH 59/78] Config: Add sample config file and update gitignore

---
 www/.gitignore                    | 2 ++
 www/src/assets/config-sample.json | 8 ++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 www/src/assets/config-sample.json

diff --git a/www/.gitignore b/www/.gitignore
index fe6f8a7..35c5fee 100644
--- a/www/.gitignore
+++ b/www/.gitignore
@@ -38,3 +38,5 @@ testem.log
 #System Files
 .DS_Store
 Thumbs.db
+
+config.json
diff --git a/www/src/assets/config-sample.json b/www/src/assets/config-sample.json
new file mode 100644
index 0000000..1a4278d
--- /dev/null
+++ b/www/src/assets/config-sample.json
@@ -0,0 +1,8 @@
+{
+	"api" : {
+		"url" : "/libapi",
+		"host" : null,
+		"port" : null,
+		"proto" : null
+	}
+}

From 63629d2827a245a9fa880137a115ad3f33c56512 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 15 Jun 2017 16:00:21 +0200
Subject: [PATCH 60/78] Configurable HTTP interceptor via config.json file

This ensure there isn't a hardcoded path to API.
The hardcoded value '/libapi' is there only as a backup option
when fetching the config.json fails.

Path to config.json is still specified in environment file.
---
 www/src/app/app.module.ts                | 85 +++++++++++++-----------
 www/src/app/utils/http.interceptor.ts    | 60 ++++++++++++++---
 www/src/assets/config.json               | 12 ----
 www/src/environments/environment.prod.ts |  7 ++
 www/src/environments/environment.ts      |  9 ++-
 www/src/main.ts                          | 29 +++++++-
 6 files changed, 140 insertions(+), 62 deletions(-)
 delete mode 100644 www/src/assets/config.json

diff --git a/www/src/app/app.module.ts b/www/src/app/app.module.ts
index 52c4754..deb0a92 100644
--- a/www/src/app/app.module.ts
+++ b/www/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule, Http, Request, XHRBackend, RequestOptions} from '@angular/http';
 import { RouterModule, Routes, Router } from '@angular/router';
 
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/';
@@ -13,13 +13,15 @@ import { LogoutComponent } from './components/';
 import { SetupComponent } from './components/';
 import { NullComponent } from './components/';
 
-import { AuthGuard } from './utils/index';
-import { HttpInterceptor } from './utils/index';
+import { AuthGuard, HttpInterceptor } from './utils';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
 import { modules } from './modules';
 
-export const appRoutes: Routes = [
+/**
+  * Basic routes of the application
+  */
+const appRoutes: Routes = [
 	{
 		path : 'login',
 		component : LoginComponent
@@ -44,40 +46,49 @@ export const appRoutes: Routes = [
 	}
 ];
 
-export function setFactory (xhrBackend: XHRBackend,
-				requestOptions: RequestOptions,
-				router: Router) {
-	return new HttpInterceptor(xhrBackend, requestOptions, router);
-}
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    LoginComponent,
-    LogoutComponent,
-    SetupComponent,
-    NullComponent
-  ],
-  imports: [
-	modules,
-	SafePipeModule,
-    BrowserModule,
-	FormsModule,
-	HttpModule,
-	NgbModule.forRoot(),
-	RouterModule.forRoot(appRoutes)
-  ],
-  providers: [
-	AuthGuard,
-	SafePipe,
+/**
+  * Initialization function for the whole application
+  *
+  * Used because we need the config before HttpInterceptor is created
+  */
+export function initApp(config : any) {
+	@NgModule({
+	  declarations: [
+		AppComponent,
+		HomeComponent,
+		LoginComponent,
+		LogoutComponent,
+		SetupComponent,
+		NullComponent
+	  ],
+	  imports: [
+		modules,
+		SafePipeModule,
+		BrowserModule,
+		FormsModule,
+		HttpModule,
+		NgbModule.forRoot(),
+		RouterModule.forRoot(appRoutes)
+	  ],
+	  providers: [
+		AuthGuard,
+		SafePipe,
+		{
+			provide : config,
+			useValue : config
+		},
 		{
 			provide : Http,
-			useFactory: setFactory,
-			deps: [XHRBackend, RequestOptions, Router]
+			useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions,
+				router: Router, config : string) => {
+					return new HttpInterceptor(xhrBackend, requestOptions, router, config);
+				},
+			deps: [XHRBackend, RequestOptions, Router, config]
 		}
+	  ],
+	  bootstrap: [AppComponent]
+	})
+	class AppModule { }
 
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+	return AppModule;
+}
diff --git a/www/src/app/utils/http.interceptor.ts b/www/src/app/utils/http.interceptor.ts
index 1b7d8f7..106ec30 100644
--- a/www/src/app/utils/http.interceptor.ts
+++ b/www/src/app/utils/http.interceptor.ts
@@ -1,8 +1,19 @@
+/**
+  * HTTP Interceptor class for liberouterapi backend communication
+  *
+  * The interceptor adds to every request the Authorization header with session
+  * ID (if present) and prefixes each request with API URL (if set)
+  *
+  * Author: Petr Stehlik <stehlik@cesnet.cz>
+  * Date: 15/06/2017
+  */
+
 import { Injectable } from '@angular/core';
 import { Request,
 	XHRBackend,
 	RequestOptions,
 	RequestOptionsArgs,
+	RequestMethod,
 	URLSearchParams,
 	Response,
 	Http,
@@ -15,26 +26,32 @@ import 'rxjs/add/observable/throw';
 
 @Injectable()
 export class HttpInterceptor extends Http {
-	currentUser : Object;
-	headers : Headers = new Headers({ 'Content-Type': 'application/json' });
-	prefixUrl : string = environment.apiUrl;
+	private currentUser : Object;
+	private headers : Headers = new Headers({ 'Content-Type': 'application/json' });
+    private configPath : string = environment.configPath;
+	private prefixUrl : string;
+	private api : Object = {};
+	private promise;
 
 	constructor(backend: XHRBackend,
 		defaultOptions: RequestOptions,
-		private router: Router
-		//private authService: AuthService
-		)
+		private router: Router,
+		private config : Object)
 	{
 		super(backend, defaultOptions);
-		this.prefixUrl = environment.apiUrl;
+		this.api = this.config["api"];
 	}
 
-	// During each request append Authorization header if session is present
+	/**
+	  * For each request add:
+	  *		- Authorization header if session is present
+	  *		- API URL prefix
+	  */
 	request(url: Request,
 		options?: RequestOptionsArgs): Observable<Response>
 	{
-		// Prefix the URL with environment prefix
-		url.url = this.prefixUrl + url.url;
+		// Prefix the URL with environment prefix if set
+		url.url = this.buildUrl(url.url);
 		this.currentUser = this.getCurrentUser();
 
 		if (this.currentUser != undefined) {
@@ -52,6 +69,16 @@ export class HttpInterceptor extends Http {
 		return super.request(url, options).catch(this.catchErrors());
 	}
 
+	/**
+	  * Original GET method caller
+	  * Use only if you know you don't need:
+	  *		- Authorization header added automatically
+	  *		- API URL prefix
+	  */
+	public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
+        return super.get(url, options);
+    }
+
 	private catchErrors() {
 		return (res : Response) => {
 			if (res.status == 401) {
@@ -73,4 +100,17 @@ export class HttpInterceptor extends Http {
 	private getCurrentUser() : Object {
 		return JSON.parse(localStorage.getItem('currentUser'));
 	}
+
+	/**
+	  * Create URL string for the request based on local configuration
+	  */
+	private buildUrl(url : string) {
+		let urlString = "";
+
+		urlString += this.api["proto"] || "";
+		urlString += this.api["host"] || "";
+		urlString += this.api["port"] ? ":" + this.api["port"] : "";
+		urlString += this.api["url"] || environment.apiUrl || "";
+		return urlString + url;
+	}
 }
diff --git a/www/src/assets/config.json b/www/src/assets/config.json
deleted file mode 100644
index 5b60c42..0000000
--- a/www/src/assets/config.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-	"api" : {
-		"path" : "/libapi"
-	},
-	"ftas" : {
-			"url" : "ftas.cesnet.cz",
-			"output" : "1402"
-	},
-	"nerd" : {
-		"url" : "nerd.cesnet.cz/nerd"
-	}
-}
diff --git a/www/src/environments/environment.prod.ts b/www/src/environments/environment.prod.ts
index 152be96..1e5b3ab 100644
--- a/www/src/environments/environment.prod.ts
+++ b/www/src/environments/environment.prod.ts
@@ -1,5 +1,12 @@
 export const environment = {
   production: false,
+  /**
+  	* Path to configuration file
+  	*/
+  configPath : "assets/config.json",
+  /**
+  	* Used only when fetching config.json failed
+  	*/
   apiUrl : "/libapi",
   ftas : {
     /**
diff --git a/www/src/environments/environment.ts b/www/src/environments/environment.ts
index 943a27b..cef03df 100644
--- a/www/src/environments/environment.ts
+++ b/www/src/environments/environment.ts
@@ -5,6 +5,13 @@
 
 export const environment = {
   production: false,
+  /**
+  	* Path to configuration file
+  	*/
+  configPath : "assets/config.json",
+  /**
+  	* Used only when fetching config.json failed
+  	*/
   apiUrl : "/libapi",
   ftas : {
     /**
@@ -22,7 +29,7 @@ export const environment = {
       * Specify which output machines will be used
       * Can be a list (as string): "1,2,5,10"
       */
-    output : "1402"
+    output : "0"
   },
   nerd : {
     /**
diff --git a/www/src/main.ts b/www/src/main.ts
index 46c1c73..b0fd9f0 100644
--- a/www/src/main.ts
+++ b/www/src/main.ts
@@ -1,10 +1,35 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 import { environment } from './environments/environment';
-import { AppModule } from './app/app.module';
+
+import { initApp } from './app/app.module';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+/**
+  * Retrieve config.json from a path specified in environment
+  *
+  * This cannot use the Angular HTTP module, therefore uses good old XMLHttpRequest
+  */
+function getConfig() {
+	return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.open("GET", environment.configPath);
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(xhr.response);
+            } else {
+                reject(xhr.statusText);
+            }
+        };
+        xhr.onerror = () => reject(xhr.statusText);
+        xhr.send();
+    });
+}
+
+// Fetch the config before bootstraping the app
+getConfig().then((data : string) => {
+	platformBrowserDynamic().bootstrapModule(initApp(JSON.parse(data)));
+});

From 27e995726e60f1f31651e01c1d1f96d9e30918e1 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 15 Jun 2017 16:02:29 +0200
Subject: [PATCH 61/78] WIP: Configuration service for modules

This service uses monogdb to manage settings for modules.
---
 www/src/app/app.component.ts                | 10 +++--
 www/src/app/services/config.service.spec.ts | 15 +++++++
 www/src/app/services/config.service.ts      | 47 +++++++++++++++++++++
 www/src/app/services/index.ts               |  1 +
 4 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 www/src/app/services/config.service.spec.ts
 create mode 100644 www/src/app/services/config.service.ts

diff --git a/www/src/app/app.component.ts b/www/src/app/app.component.ts
index 75bf1f6..b2c926c 100644
--- a/www/src/app/app.component.ts
+++ b/www/src/app/app.component.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import { AuthService } from './services';
+import { AuthService, ConfigService } from './services';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  providers : [AuthService]
+  providers : [AuthService, ConfigService]
 })
 export class AppComponent {
 	isLoginPage : boolean = false;
@@ -14,9 +14,13 @@ export class AppComponent {
 	modules : Array<Object> = [];
 	children : Array<Object>= [];
 
-	constructor(private router : Router, private route:ActivatedRoute, private auth : AuthService) {}
+	constructor(private router : Router,
+				private route:ActivatedRoute,
+				private auth : AuthService,
+				private config : ConfigService) {}
 
 	ngOnInit() {
+		this.config.load();
 		this.router.events.subscribe(val => {
 			/* the router will fire multiple events */
 			/* we only want to react if it's the final active route */
diff --git a/www/src/app/services/config.service.spec.ts b/www/src/app/services/config.service.spec.ts
new file mode 100644
index 0000000..a20d4ba
--- /dev/null
+++ b/www/src/app/services/config.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ConfigService } from './config.service';
+
+describe('ConfigService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ConfigService]
+    });
+  });
+
+  it('should be created', inject([ConfigService], (service: ConfigService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/www/src/app/services/config.service.ts b/www/src/app/services/config.service.ts
new file mode 100644
index 0000000..026fc00
--- /dev/null
+++ b/www/src/app/services/config.service.ts
@@ -0,0 +1,47 @@
+import { Inject, Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+import { environment } from 'environments/environment';
+
+@Injectable()
+export class ConfigService {
+
+    private config: Object = null;
+
+    constructor(private http: Http) {}
+
+    /**
+     * Use to get the data found in the second file (config file)
+     */
+    public get(key: any = null) {
+    	console.log(this.config);
+    	if (key != null)
+			return this.config[key];
+		else
+			return this.config;
+    }
+
+    /**
+     * Load configuration of modules from the database.
+     *
+     * Note: The assets/config.json file is used only in the HTTP communication
+     *		and therefore it is unnecessary anywhere else
+     *
+     */
+    public load() {
+        return new Promise((resolve, reject) => {
+            this.http.get("/configuration")
+				.map( res => res.json() )
+            	.catch((error: any):any => {
+					console.log(`Configuration could not be read`);
+					reject(true);
+					return Observable.throw(error.json().error || 'Server error');
+				})
+				.subscribe( (response) => {
+					this.config = response;
+					console.log(this.config)
+					resolve(true);
+				});
+        });
+    }
+}
diff --git a/www/src/app/services/index.ts b/www/src/app/services/index.ts
index 2a719d1..54213b9 100644
--- a/www/src/app/services/index.ts
+++ b/www/src/app/services/index.ts
@@ -1 +1,2 @@
 export * from './auth.service';
+export * from './config.service';

From ed85c48374456025ed7cb9d681c160e13912f419 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 15 Jun 2017 16:05:25 +0200
Subject: [PATCH 62/78] Add source for app.module bootstraping

---
 www/src/app/app.module.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/www/src/app/app.module.ts b/www/src/app/app.module.ts
index deb0a92..7102e9e 100644
--- a/www/src/app/app.module.ts
+++ b/www/src/app/app.module.ts
@@ -50,6 +50,7 @@ const appRoutes: Routes = [
   * Initialization function for the whole application
   *
   * Used because we need the config before HttpInterceptor is created
+  * Inspired by: https://stackoverflow.com/questions/40909822/how-to-use-httpinterceptor-and-configservice-both-at-the-same-time-in-angular2
   */
 export function initApp(config : any) {
 	@NgModule({

From 39553b3f649a03dec1da09552be0d0a5d29a0d83 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Thu, 15 Jun 2017 16:12:18 +0200
Subject: [PATCH 63/78] Base for configuration API

---
 api/liberouterapi/modules/configuration.py | 31 ++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 api/liberouterapi/modules/configuration.py

diff --git a/api/liberouterapi/modules/configuration.py b/api/liberouterapi/modules/configuration.py
new file mode 100644
index 0000000..5b0cf40
--- /dev/null
+++ b/api/liberouterapi/modules/configuration.py
@@ -0,0 +1,31 @@
+from liberouterapi import auth, dbConnector
+from .module import Module
+from bson import json_util as json
+
+connector = dbConnector()
+conf_db = connector.db["configuration"]
+
+conf = Module('configuration', __name__, url_prefix='/configuration', no_version = True)
+
+@conf.route('', methods=['GET'])
+@auth.required()
+def get_conf():
+	res = list(conf_db.find())
+	return (json.dumps(res))
+
+@conf.route('/:module', methods=['GET'])
+def get_module_conf(module):
+	res = list(conf_db.find())
+	return (json.dumps(res))
+
+@conf.route('/:module', methods=['PUT'])
+def update_conf(module):
+	pass
+
+@conf.route('', methods=['POST'])
+def insert_conf():
+	pass
+
+@conf.route('/:module', methods=['DELETE'])
+def remove_conf(module):
+ 	pass

From 209204717a10995844e6d35f21ae88c000341945 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Fri, 16 Jun 2017 09:14:25 +0200
Subject: [PATCH 64/78] ng couldn't find entry module

---
 www/src/tsconfig.app.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/www/src/tsconfig.app.json b/www/src/tsconfig.app.json
index 5a810e3..9062fb7 100644
--- a/www/src/tsconfig.app.json
+++ b/www/src/tsconfig.app.json
@@ -18,5 +18,8 @@
   "exclude": [
     "test.ts",
     "**/*.spec.ts"
-  ]
+  ],
+	"angularCompilerOptions" : {
+		"entryModule" : "./app/app.module#AppModule"
+	}
 }

From 15db2674cb1b6ef44f29ffda08bd27ab83539a16 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Fri, 16 Jun 2017 10:49:00 +0200
Subject: [PATCH 65/78] Configuration API full implementation

---
 api/liberouterapi/modules/configuration.py | 132 +++++++++++++++++++--
 1 file changed, 123 insertions(+), 9 deletions(-)

diff --git a/api/liberouterapi/modules/configuration.py b/api/liberouterapi/modules/configuration.py
index 5b0cf40..ab2678e 100644
--- a/api/liberouterapi/modules/configuration.py
+++ b/api/liberouterapi/modules/configuration.py
@@ -1,31 +1,145 @@
+"""
+Configuration REST API
+
+Configuration is separated into documents where each document is identified by
+name of the module, where 'liberoutergui' module is reserved for future use
+in case we need something globally configurable in the Liberouter GUI.
+
+When inserting a configuration 'name' must be unique.
+"""
+
+from flask import request
+
 from liberouterapi import auth, dbConnector
+from liberouterapi.error import ApiException
 from .module import Module
 from bson import json_util as json
+from pymongo import ReturnDocument
+
+class ConfError(ApiException):
+	status_code = 400
 
+# Initialize connector to the configuration collection
 connector = dbConnector()
 conf_db = connector.db["configuration"]
 
 conf = Module('configuration', __name__, url_prefix='/configuration', no_version = True)
 
 @conf.route('', methods=['GET'])
-@auth.required()
+#@auth.required()
 def get_conf():
 	res = list(conf_db.find())
 	return (json.dumps(res))
 
-@conf.route('/:module', methods=['GET'])
+def unprotected_get_module_conf(module):
+	"""
+	Get module's configuration specified by the module's name
+
+	Prevent from storing module liberoutergui (reserved for future use).
+
+	Each module name is converted to lowercase
+	"""
+	if module == 'liberoutergui':
+		raise ConfError("'liberoutergui' module name is reserved", status_code=409)
+
+	res = conf_db.find_one({
+		'name' : module.lower()
+		})
+
+	if not res:
+		raise ConfError("Module '%s' not found" % module, status_code=404)
+
+	return(res)
+
+
+@conf.route('/<string:module>', methods=['GET'])
 def get_module_conf(module):
-	res = list(conf_db.find())
-	return (json.dumps(res))
+	"""
+	Get module by its name using the unprotected function
+	"""
+	return (json.dumps(unprotected_get_module_conf(module)))
 
-@conf.route('/:module', methods=['PUT'])
+@conf.route('/<string:module>', methods=['PUT'])
 def update_conf(module):
-	pass
+	"""
+	Update a module's configuration specified by its name
+
+	'name' mustn't be specified in data and data must be non-empty
+	"""
+
+	data = request.get_json()
+
+	if not data:
+		raise ConfError("Nothing to update")
+
+	if "name" in data:
+		raise ConfError("Changing name is not allowed", status_code=403)
+
+	res = conf_db.find_one_and_update({
+		"name" : str(module).lower()
+		},
+		{
+			"$set" : data
+		},
+		return_document=ReturnDocument.AFTER)
+
+	if not res:
+		raise ConfError("Can't update module '%s'" % str(module).lower())
+
+	return(json.dumps(res))
 
 @conf.route('', methods=['POST'])
 def insert_conf():
-	pass
+	"""
+	Insert module's configuration, the configuration name mustn't be present in
+	the collection
+
+	'name' is a mandatory key
+	"""
+
+	conf = request.get_json()
+	res = {}
+
+	if 'name' not in conf:
+		raise ConfError("'name' must be specified in configuration")
+
+	try:
+		# We expect it to raise ConfError (config not found)
+		res = unprotected_get_module_conf(conf['name'])
+	except ConfError:
+		# Name must be lowercase
+		conf['name'] = conf['name'].lower()
+
+		res = conf_db.insert_one(conf)
 
-@conf.route('/:module', methods=['DELETE'])
+		try:
+			res = conf_db.find_one({
+				"_id" : res.inserted_id
+				})
+		except Exception as e:
+			raise ConfError(str(e))
+	else:
+		raise ConfError("Configuration with name '%s' already exists" % conf['name'])
+
+	return(json.dumps(res))
+
+@conf.route('/<string:module>', methods=['DELETE'])
 def remove_conf(module):
- 	pass
+	"""
+	Remove specified module from db
+
+	Module is identified by its name in lowercase
+	"""
+
+	# Get the original document
+	orig_config = unprotected_get_module_conf(module)
+
+	res = conf_db.delete_one({
+		'name' : str(module).lower()
+		})
+
+	if res.deleted_count != 1:
+		raise ConfError("Module '%s' wasn't deleted" % module, status_code=404)
+
+	return(json.dumps(orig_config))
+

From 27500685179a3b0e76860d41237bb31edf05c2b5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Fri, 16 Jun 2017 14:09:44 +0200
Subject: [PATCH 66/78] FTAS: add configuration

---
 .../ftas/ftas-modal/ftas-modal.component.html |  80 ++++++++++
 .../ftas/ftas-modal/ftas-modal.component.scss |   0
 .../ftas-modal/ftas-modal.component.spec.ts   |  25 ++++
 .../ftas/ftas-modal/ftas-modal.component.ts   |  36 +++++
 www/src/app/modules/ftas/ftas.component.html  |   9 +-
 www/src/app/modules/ftas/ftas.component.ts    | 140 ++++++++++++++----
 www/src/app/modules/ftas/ftas.module.ts       |  14 +-
 www/src/environments/environment.ts           |  18 ---
 8 files changed, 270 insertions(+), 52 deletions(-)
 create mode 100644 www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
 create mode 100644 www/src/app/modules/ftas/ftas-modal/ftas-modal.component.scss
 create mode 100644 www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts
 create mode 100644 www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts

diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
new file mode 100644
index 0000000..56a0b05
--- /dev/null
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
@@ -0,0 +1,80 @@
+{{ backup | json }}
+
+<div class="modal-header">
+	<h4 class="modal-title">FTAS Settings</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">URL</label>
+			<input type="text"
+				class="form-control col"
+				name="url"
+				placeholder="FTAS URL"
+				#url
+				[(ngModel)]="backup.url" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Full URL</label>
+			<input type="text"
+				class="form-control col"
+				name="fullUrl"
+				placeholder="Full URL"
+				#fullUrl
+				[(ngModel)]="backup.fullUrl" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Output</label>
+			<input type="number"
+				class="form-control col"
+				name="output"
+				placeholder="0"
+				#output
+				required
+				[(ngModel)]="backup.output"/>
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-4">Generated URL</label>
+			<div class="btn-group" data-toggle="buttons">
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 1}"
+						title="Show">
+						<input type="radio" data-toggle="tooltip"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="1"
+							[(ngModel)]="backup.showUrl">
+						Show
+					</label>
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 0}"
+						title="Hide">
+						<input type="radio"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="0"
+							[(ngModel)]="backup.showUrl">
+						Hide
+					</label>
+				</div>
+
+		</div>
+
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">Cancel</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
+
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.scss b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts
new file mode 100644
index 0000000..4834f14
--- /dev/null
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FtasModalComponent } from './ftas-modal.component';
+
+describe('FtasModalComponent', () => {
+  let component: FtasModalComponent;
+  let fixture: ComponentFixture<FtasModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FtasModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FtasModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
new file mode 100644
index 0000000..d471df8
--- /dev/null
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-ftas-modal',
+  templateUrl: './ftas-modal.component.html',
+  styleUrls: ['./ftas-modal.component.scss']
+})
+export class FtasModalComponent implements OnInit {
+
+	data;
+	private backup;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		console.log(result);
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		console.log(result);
+		this.activeModal.dismiss(result);
+	}
+}
diff --git a/www/src/app/modules/ftas/ftas.component.html b/www/src/app/modules/ftas/ftas.component.html
index 57534be..75bb89a 100644
--- a/www/src/app/modules/ftas/ftas.component.html
+++ b/www/src/app/modules/ftas/ftas.component.html
@@ -1,14 +1,19 @@
 <section class="box">
     <h4 *ngIf="ftasMsg.length > 0">{{ ftasMsg }}</h4>
     <base target="_blank">
-    <iframe [src]="url | safe" class="frame" (onload)="iframeLoaded()">
+    <iframe [src]="url | safe" class="frame" (onload)="iframeLoaded()" *ngIf="url">
 		<div class="alert alert-danger">
 			Your browser doesn't support iframes
 		</div>
 	</iframe>
 </section>
 
-<section class="box">
+<section class="box" *ngIf="config?.showUrl == 1">
     <em> Generated URL:</em> <input type="text" [(value)] ="url">
     <small>If an error occurs, you can use this URL to access ftas directly</small>
 </section>
+
+<button class="btn btn-primary" (click)="openSettings()">Settings</button>
+
+{{ config | json }}
+
diff --git a/www/src/app/modules/ftas/ftas.component.ts b/www/src/app/modules/ftas/ftas.component.ts
index 54aa9e8..a05d452 100644
--- a/www/src/app/modules/ftas/ftas.component.ts
+++ b/www/src/app/modules/ftas/ftas.component.ts
@@ -1,9 +1,26 @@
+/**
+  * Config items:
+  * 'url' : simple URL (without protocol) to FTAS instance
+  * 'fullUrl' : Full URL to filtering script (usually "example.com/ftas/stat.pl")
+  * Specify URL without URL (https is forced)
+  *		If this option is not set, url must be.
+  *		If both are set, fullUrl is used.
+  * 'output' : Specify which output machines will be used
+  * Can be a list (as string): "1,2,5,10"
+  */
+
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { URLSearchParams } from '@angular/http';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
-import { environment } from 'environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { ConfigService } from 'app/services';
+
+import { environment as env } from 'environments/environment';
+
+import { FtasModalComponent } from './ftas-modal/ftas-modal.component'
 
 
 @Component({
@@ -13,34 +30,44 @@ import { environment } from 'environments/environment';
 })
 export class FtasComponent implements OnInit {
 
-    baseUrl : string = "https://";  // FTAS URL for iframe
+    baseUrl : string;  // FTAS URL for iframe
     url: SafeResourceUrl;           // Sanitizied URL for iframe
     filter : string;                // Advanced filter field for FTAS
     iframeInit : Boolean = false;   // Flag for iframe initialization routine
     ftasMsg : string = "";          // The loading message
     params : Object;
+    config : Object;
+    output : number;
+    modalRef;
 
     /**
       * Construct the FTAS URL from environment variables
       */
-    constructor( private route : ActivatedRoute ) {
-        /**
-          * Environment can set full url of the FTAS instance
-          */
-        if (environment.ftas.fullUrl) {
-            this.baseUrl = environment.ftas.fullUrl
-        } else if (environment.ftas.url) {
-            this.baseUrl += environment.ftas.url + "/ftas/stat.pl";
-        } else {
-            console.warn("FTAS URL isn't set.");
-        }
-    }
+    constructor(private route : ActivatedRoute,
+    		   private configService : ConfigService,
+    		   private modalService : NgbModal,
+    		   private router : Router) {}
 
     /**
       * Get URL params and prepare the advanced query field for FTAS iframe
       */
     ngOnInit() {
-        this.route.params.subscribe(params => {
+    	console.log(this.url)
+    	this.configService.getModule('ftas').subscribe(
+    		config => {
+    			this.config = config;
+    			this.fetchParams();
+    		},
+			error => { console.log(error)});
+    }
+
+	/**
+	  * Fetch parameters from the route and create filter from them
+	  *
+	  * Then set URL for iframe
+	  */
+    private fetchParams() {
+		this.route.params.subscribe(params => {
         	this.params = params;
             for (var key in params) {
             	if (key != 'first' && key != 'last') {
@@ -52,21 +79,54 @@ export class FtasComponent implements OnInit {
 					}
 				}
             }
+			this.setUrl();
+        });
+    }
 
-            /**
-              * Setup FTAS URL
-              * If params are set we can do some filtering
-              */
-            if (this.filter == undefined)
-                this.url = this.baseUrl;
-            else {
-                this.url = this.baseUrl + '?'
-                    + this.generateQueryBase()
-                    + "&advanced_query="
-                    + encodeURIComponent(this.filter);
-            }
+	/**
+	  * Setup FTAS URL
+	  * If params are set we can do some filtering
+	  *
+	  * Fall-through model for setting the baseUrl where preferred method
+	  * is from configuration.
+	  */
+    private setUrl() {
+    	console.log('setting url');
+    	this.baseUrl = "https://";
+    	if (this.config['fullUrl']) {
+			this.baseUrl += this.config['fullUrl']
+		} else if (this.config['url']) {
+            this.baseUrl += this.config['url'] + "/ftas/stat.pl";
+        }
 
-        });
+        this.output = +this.config['output'] || -1;
+
+        if (this.output == -1 || this.baseUrl == "https://") {
+            console.warn("FTAS output or URL isn't set. Should trigger settings menu");
+            this.modalRef = this.modalService.open(FtasModalComponent);
+            this.modalRef.componentInstance.data = this.config;
+            this.modalRef.result.then(
+				(result) => {
+					// The modal was closed and we shall redirect
+					this.setUrl();
+					this.configService.update('ftas', this.config).subscribe(
+						(data) => { this.config = data },
+						(error) => { console.error(error) });
+					//this.router.navigate(['ftas']);
+				},
+				(reason) => {
+					//dismissal
+				});
+        } else {
+			if (this.filter == undefined)
+				this.url = this.baseUrl;
+			else {
+				this.url = this.baseUrl + '?'
+					+ this.generateQueryBase()
+					+ "&advanced_query="
+					+ encodeURIComponent(this.filter);
+			}
+		}
     }
 
     /**
@@ -84,6 +144,26 @@ export class FtasComponent implements OnInit {
         this.iframeInit = !this.iframeInit;
     }
 
+    openSettings() {
+		this.modalRef = this.modalService.open(FtasModalComponent);
+		this.modalRef.componentInstance.data = this.config;
+            this.modalRef.result.then(
+				(result) => {
+					// The modal was closed and we shall redirect
+					this.configService.update('ftas', this.config).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => { console.error(error) });
+					//this.router.navigate(['ftas']);
+				},
+				(reason) => {
+					//dismissal
+				});
+
+    }
+
     /**
       * Set filtering parameters base for FTAS
       * Filtering something in FTAS requires a lot of parameters to set.
@@ -93,7 +173,7 @@ export class FtasComponent implements OnInit {
     private generateQueryBase() : URLSearchParams {
         let queryBase = new URLSearchParams();
 
-        queryBase.set("select_output", environment.ftas.output);
+        queryBase.set("select_output", String(this.output));
         queryBase.set("select_output-use", "yes");
         queryBase.set("query_style", "advanced");
         //this.query.set("advanced_query", "dst_ip%3D193.170.227.139");
diff --git a/www/src/app/modules/ftas/ftas.module.ts b/www/src/app/modules/ftas/ftas.module.ts
index 609ed9e..d0143c9 100644
--- a/www/src/app/modules/ftas/ftas.module.ts
+++ b/www/src/app/modules/ftas/ftas.module.ts
@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
+import { FormsModule }		from '@angular/forms';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
-import { FtasComponent } from './ftas.component'
+import { FtasComponent } from './ftas.component';
+import { FtasModalComponent } from './ftas-modal/ftas-modal.component'
 
 const ftasRoutes : Routes = [{
     path : 'ftas',
@@ -22,14 +26,20 @@ const ftasRoutes : Routes = [{
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     SafePipeModule,
+    NgbModule.forRoot(),
     RouterModule.forChild(ftasRoutes)
   ],
   declarations: [
-    FtasComponent
+    FtasComponent,
+    FtasModalComponent
   ],
   providers : [
     SafePipe
+  ],
+  entryComponents : [
+	FtasModalComponent
   ]
 })
 export class FtasModule { }
diff --git a/www/src/environments/environment.ts b/www/src/environments/environment.ts
index cef03df..097ecd7 100644
--- a/www/src/environments/environment.ts
+++ b/www/src/environments/environment.ts
@@ -13,24 +13,6 @@ export const environment = {
   	* Used only when fetching config.json failed
   	*/
   apiUrl : "/libapi",
-  ftas : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "ftas.cesnet.cz",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-    /**
-      * Specify which output machines will be used
-      * Can be a list (as string): "1,2,5,10"
-      */
-    output : "0"
-  },
   nerd : {
     /**
       * simple URL (without protocol) to FTAS instance

From db163d5572709c7f68c80576058232a8c44dc383 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Fri, 16 Jun 2017 14:10:21 +0200
Subject: [PATCH 67/78] Config: do not force absence of name

---
 api/liberouterapi/modules/configuration.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/api/liberouterapi/modules/configuration.py b/api/liberouterapi/modules/configuration.py
index ab2678e..c52a517 100644
--- a/api/liberouterapi/modules/configuration.py
+++ b/api/liberouterapi/modules/configuration.py
@@ -73,7 +73,10 @@ def update_conf(module):
 		raise ConfError("Nothing to update")
 
 	if "name" in data:
-		raise ConfError("Changing name is not allowed", status_code=403)
+		del data["name"]
+
+	if "_id" in data:
+		del data["_id"]
 
 	res = conf_db.find_one_and_update({
 		"name" : str(module).lower()

From 4f3054059f11f8bffa21ccd1c952fb9b433159fe Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Fri, 16 Jun 2017 14:10:56 +0200
Subject: [PATCH 68/78] Config: all needed methods in service

---
 www/src/app/services/config.service.ts | 49 +++++++++++++++++++-------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/www/src/app/services/config.service.ts b/www/src/app/services/config.service.ts
index 026fc00..c79e78e 100644
--- a/www/src/app/services/config.service.ts
+++ b/www/src/app/services/config.service.ts
@@ -7,20 +7,10 @@ import { environment } from 'environments/environment';
 export class ConfigService {
 
     private config: Object = null;
+    private baseUrl : string = "/configuration";
 
     constructor(private http: Http) {}
 
-    /**
-     * Use to get the data found in the second file (config file)
-     */
-    public get(key: any = null) {
-    	console.log(this.config);
-    	if (key != null)
-			return this.config[key];
-		else
-			return this.config;
-    }
-
     /**
      * Load configuration of modules from the database.
      *
@@ -30,7 +20,7 @@ export class ConfigService {
      */
     public load() {
         return new Promise((resolve, reject) => {
-            this.http.get("/configuration")
+            this.http.get(this.baseUrl)
 				.map( res => res.json() )
             	.catch((error: any):any => {
 					console.log(`Configuration could not be read`);
@@ -44,4 +34,39 @@ export class ConfigService {
 				});
         });
     }
+
+    public getModule(name : string) {
+		return this.http.get(this.baseUrl + '/' + name)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public get() {
+		return this.http.get(this.baseUrl)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public update(name : string, data : Object) {
+    	console.log(data);
+		return this.http.put(this.baseUrl + '/' + name, data)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public add(data : Object) {
+		return this.http.post(this.baseUrl, data)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    public remove(name : string) {
+		return this.http.delete(this.baseUrl + '/' + name)
+			.map( res => res.json())
+			.catch(this.handleError);
+    }
+
+    private handleError(err : Response | any) {
+		return Promise.reject(err);
+	}
 }

From 42c55c20d2ed3f01f29a046ada2366b317062a73 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 10:12:19 +0200
Subject: [PATCH 69/78] FTAS: refactoring of modal triggering

Also remove debug info from views and console
---
 .../ftas/ftas-modal/ftas-modal.component.html |   9 +-
 .../ftas/ftas-modal/ftas-modal.component.ts   |   5 +-
 www/src/app/modules/ftas/ftas.component.html  |   4 -
 www/src/app/modules/ftas/ftas.component.ts    | 107 +++++++++---------
 4 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
index 56a0b05..c493b9b 100644
--- a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.html
@@ -1,5 +1,3 @@
-{{ backup | json }}
-
 <div class="modal-header">
 	<h4 class="modal-title">FTAS Settings</h4>
 	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
@@ -14,7 +12,6 @@ <h4 class="modal-title">FTAS Settings</h4>
 				class="form-control col"
 				name="url"
 				placeholder="FTAS URL"
-				#url
 				[(ngModel)]="backup.url" />
 		</div>
 
@@ -24,7 +21,6 @@ <h4 class="modal-title">FTAS Settings</h4>
 				class="form-control col"
 				name="fullUrl"
 				placeholder="Full URL"
-				#fullUrl
 				[(ngModel)]="backup.fullUrl" />
 		</div>
 
@@ -34,7 +30,6 @@ <h4 class="modal-title">FTAS Settings</h4>
 				class="form-control col"
 				name="output"
 				placeholder="0"
-				#output
 				required
 				[(ngModel)]="backup.output"/>
 		</div>
@@ -71,7 +66,9 @@ <h4 class="modal-title">FTAS Settings</h4>
 	</form>
 </div>
 <div class="modal-footer">
-	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">Cancel</button>
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">
+		Cancel
+	</button>
 	<button class="btn btn-primary" (click)="close($event)">
 		Save
 	</button>
diff --git a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
index d471df8..3035843 100644
--- a/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
+++ b/www/src/app/modules/ftas/ftas-modal/ftas-modal.component.ts
@@ -8,7 +8,10 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 })
 export class FtasModalComponent implements OnInit {
 
+	// Model data
 	data;
+
+	// Backup of model data detached from ngModel
 	private backup;
 
 	constructor(public activeModal: NgbActiveModal) { }
@@ -21,7 +24,6 @@ export class FtasModalComponent implements OnInit {
 	  * Closing a modal with a button => save the state
 	  */
 	close(result : any) : void {
-		console.log(result);
 		this.data = Object.assign(this.data,this.backup);
 		this.activeModal.close(result);
 	}
@@ -30,7 +32,6 @@ export class FtasModalComponent implements OnInit {
 	  * Dismissal of a modal window => don't save the state
 	  */
 	dismiss(result : any) : void {
-		console.log(result);
 		this.activeModal.dismiss(result);
 	}
 }
diff --git a/www/src/app/modules/ftas/ftas.component.html b/www/src/app/modules/ftas/ftas.component.html
index 75bb89a..6c46812 100644
--- a/www/src/app/modules/ftas/ftas.component.html
+++ b/www/src/app/modules/ftas/ftas.component.html
@@ -1,6 +1,5 @@
 <section class="box">
     <h4 *ngIf="ftasMsg.length > 0">{{ ftasMsg }}</h4>
-    <base target="_blank">
     <iframe [src]="url | safe" class="frame" (onload)="iframeLoaded()" *ngIf="url">
 		<div class="alert alert-danger">
 			Your browser doesn't support iframes
@@ -14,6 +13,3 @@ <h4 *ngIf="ftasMsg.length > 0">{{ ftasMsg }}</h4>
 </section>
 
 <button class="btn btn-primary" (click)="openSettings()">Settings</button>
-
-{{ config | json }}
-
diff --git a/www/src/app/modules/ftas/ftas.component.ts b/www/src/app/modules/ftas/ftas.component.ts
index a05d452..b60c718 100644
--- a/www/src/app/modules/ftas/ftas.component.ts
+++ b/www/src/app/modules/ftas/ftas.component.ts
@@ -1,4 +1,6 @@
 /**
+  * FTAS as an iframe module with configuration
+  *
   * Config items:
   * 'url' : simple URL (without protocol) to FTAS instance
   * 'fullUrl' : Full URL to filtering script (usually "example.com/ftas/stat.pl")
@@ -10,7 +12,7 @@
   */
 
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { URLSearchParams } from '@angular/http';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
@@ -18,8 +20,6 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { ConfigService } from 'app/services';
 
-import { environment as env } from 'environments/environment';
-
 import { FtasModalComponent } from './ftas-modal/ftas-modal.component'
 
 
@@ -29,30 +29,41 @@ import { FtasModalComponent } from './ftas-modal/ftas-modal.component'
   styleUrls : ['./ftas.component.scss']
 })
 export class FtasComponent implements OnInit {
+	// FTAS URL for iframe
+    baseUrl : string;
+
+    // Sanitizied URL for iframe
+    url: SafeResourceUrl;
+
+    // Advanced filter field for FTAS
+    filter : string;
 
-    baseUrl : string;  // FTAS URL for iframe
-    url: SafeResourceUrl;           // Sanitizied URL for iframe
-    filter : string;                // Advanced filter field for FTAS
-    iframeInit : Boolean = false;   // Flag for iframe initialization routine
-    ftasMsg : string = "";          // The loading message
+    // Flag for iframe initialization routine
+    iframeInit : Boolean = false;
+    // The loading message
+    ftasMsg : string = "";
+
+    // URL parameters
     params : Object;
+
+    // Configuration fetched froms backend
     config : Object;
+
+    // Output ID
     output : number;
+
+    // Reference to modal window
     modalRef;
 
-    /**
-      * Construct the FTAS URL from environment variables
-      */
     constructor(private route : ActivatedRoute,
     		   private configService : ConfigService,
-    		   private modalService : NgbModal,
-    		   private router : Router) {}
+    		   private modalService : NgbModal) {}
 
     /**
-      * Get URL params and prepare the advanced query field for FTAS iframe
+      * Get configruation and URL params and prepare the advanced query field
+      * for FTAS iframe
       */
     ngOnInit() {
-    	console.log(this.url)
     	this.configService.getModule('ftas').subscribe(
     		config => {
     			this.config = config;
@@ -84,17 +95,16 @@ export class FtasComponent implements OnInit {
     }
 
 	/**
-	  * Setup FTAS URL
+	  * Set FTAS URL
 	  * If params are set we can do some filtering
 	  *
 	  * Fall-through model for setting the baseUrl where preferred method
-	  * is from configuration.
+	  * is fullUrl -> url -> show modal with settings
 	  */
     private setUrl() {
-    	console.log('setting url');
     	this.baseUrl = "https://";
     	if (this.config['fullUrl']) {
-			this.baseUrl += this.config['fullUrl']
+			this.baseUrl = this.config['fullUrl']
 		} else if (this.config['url']) {
             this.baseUrl += this.config['url'] + "/ftas/stat.pl";
         }
@@ -102,22 +112,12 @@ export class FtasComponent implements OnInit {
         this.output = +this.config['output'] || -1;
 
         if (this.output == -1 || this.baseUrl == "https://") {
-            console.warn("FTAS output or URL isn't set. Should trigger settings menu");
-            this.modalRef = this.modalService.open(FtasModalComponent);
-            this.modalRef.componentInstance.data = this.config;
-            this.modalRef.result.then(
-				(result) => {
-					// The modal was closed and we shall redirect
-					this.setUrl();
-					this.configService.update('ftas', this.config).subscribe(
-						(data) => { this.config = data },
-						(error) => { console.error(error) });
-					//this.router.navigate(['ftas']);
-				},
-				(reason) => {
-					//dismissal
-				});
+            console.warn("FTAS output or URL isn't set.");
+
+			// Open modal window
+            this.openSettings();
         } else {
+        	// Set URL params
 			if (this.filter == undefined)
 				this.url = this.baseUrl;
 			else {
@@ -133,6 +133,8 @@ export class FtasComponent implements OnInit {
       * Outputs loading message if iframe is loaded but not its contents
       * (load) fires two times: first time when iframe element is loaded
       * and second time when its content is loaded.
+      *
+      * Not used in current setup, because (load) is fired nondeterministically
       */
     iframeLoaded() {
         if (!this.iframeInit) {
@@ -144,31 +146,33 @@ export class FtasComponent implements OnInit {
         this.iframeInit = !this.iframeInit;
     }
 
+	/**
+	  * open modal window with settings
+	  *
+	  * on close, save settings and regenerate URL
+	  * on dismissal do nothing
+	  */
     openSettings() {
 		this.modalRef = this.modalService.open(FtasModalComponent);
 		this.modalRef.componentInstance.data = this.config;
-            this.modalRef.result.then(
-				(result) => {
-					// The modal was closed and we shall redirect
-					this.configService.update('ftas', this.config).subscribe(
-						(data) => {
-							this.config = data;
-							this.setUrl();
-						},
-						(error) => { console.error(error) });
-					//this.router.navigate(['ftas']);
-				},
-				(reason) => {
-					//dismissal
-				});
-
+		this.modalRef.result.then(
+			(result) => {
+				// The modal was closed, save settings
+				this.configService.update('ftas', this.config).subscribe(
+					(data) => {
+						this.config = data;
+						this.setUrl();
+					},
+					(error) => { console.error(error) });
+			},
+			(reason) => {
+				// dismissal, do nothing
+			});
     }
 
     /**
       * Set filtering parameters base for FTAS
       * Filtering something in FTAS requires a lot of parameters to set.
-      *
-      * TODO: Reflect correctly time in "first" and "last" fields
       */
     private generateQueryBase() : URLSearchParams {
         let queryBase = new URLSearchParams();
@@ -209,7 +213,6 @@ export class FtasComponent implements OnInit {
         queryBase.append("viewer_requested_fields", "last");
 
         return queryBase;
-
     }
 
 }

From af9e21a0171223634e96af7fc1ed008550c25e30 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 11:08:21 +0200
Subject: [PATCH 70/78] NERD: add configuration to module

---
 .../nerd/nerd-modal/nerd-modal.component.html |  67 ++++++++
 .../nerd/nerd-modal/nerd-modal.component.scss |   0
 .../nerd-modal/nerd-modal.component.spec.ts   |  25 +++
 .../nerd/nerd-modal/nerd-modal.component.ts   |  37 ++++
 www/src/app/modules/nerd/nerd.component.html  |  10 +-
 www/src/app/modules/nerd/nerd.component.ts    | 161 +++++++++++++++---
 www/src/app/modules/nerd/nerd.module.ts       |  14 +-
 www/src/environments/environment.prod.ts      |  13 --
 www/src/environments/environment.ts           |  13 --
 9 files changed, 282 insertions(+), 58 deletions(-)
 create mode 100644 www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html
 create mode 100644 www/src/app/modules/nerd/nerd-modal/nerd-modal.component.scss
 create mode 100644 www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts
 create mode 100644 www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts

diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html
new file mode 100644
index 0000000..b8ff504
--- /dev/null
+++ b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.html
@@ -0,0 +1,67 @@
+<div class="modal-header">
+	<h4 class="modal-title">NERD Settings</h4>
+	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+<div class="modal-body form-control">
+	<form novalidate class="container">
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">URL</label>
+			<input type="text"
+				class="form-control col"
+				name="url"
+				placeholder="NERD URL"
+				[(ngModel)]="backup.url" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-2">Full URL</label>
+			<input type="text"
+				class="form-control col"
+				name="fullUrl"
+				placeholder="Full URL"
+				[(ngModel)]="backup.fullUrl" />
+		</div>
+
+		<div class="form-group row">
+			<label class="col-form-label col-sm-4">Generated URL</label>
+			<div class="btn-group" data-toggle="buttons">
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 1}"
+						title="Show">
+						<input type="radio" data-toggle="tooltip"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="1"
+							[(ngModel)]="backup.showUrl">
+						Show
+					</label>
+					<label class="btn btn-primary"
+						[ngClass]="{'active' : backup.showUrl == 0}"
+						title="Hide">
+						<input type="radio"
+							name="options"
+							id="option1"
+							autocomplete="off"
+							[value]="0"
+							[(ngModel)]="backup.showUrl">
+						Hide
+					</label>
+				</div>
+
+		</div>
+
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-outline-primary" (click)="activeModal.dismiss()">
+		Cancel
+	</button>
+	<button class="btn btn-primary" (click)="close($event)">
+		Save
+	</button>
+
+</div>
+
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.scss b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts
new file mode 100644
index 0000000..90ed742
--- /dev/null
+++ b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NerdModalComponent } from './nerd-modal.component';
+
+describe('NerdModalComponent', () => {
+  let component: NerdModalComponent;
+  let fixture: ComponentFixture<NerdModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NerdModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NerdModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts
new file mode 100644
index 0000000..b8601cf
--- /dev/null
+++ b/www/src/app/modules/nerd/nerd-modal/nerd-modal.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-nerd-modal',
+  templateUrl: './nerd-modal.component.html',
+  styleUrls: ['./nerd-modal.component.scss']
+})
+export class NerdModalComponent implements OnInit {
+
+	// Model data
+	data;
+
+	// Backup of model data detached from ngModel
+	private backup;
+
+	constructor(public activeModal: NgbActiveModal) { }
+
+	ngOnInit() {
+		this.backup = Object.assign({}, this.data);
+	}
+
+	/**
+	  * Closing a modal with a button => save the state
+	  */
+	close(result : any) : void {
+		this.data = Object.assign(this.data,this.backup);
+		this.activeModal.close(result);
+	}
+
+	/**
+	  * Dismissal of a modal window => don't save the state
+	  */
+	dismiss(result : any) : void {
+		this.activeModal.dismiss(result);
+	}
+}
diff --git a/www/src/app/modules/nerd/nerd.component.html b/www/src/app/modules/nerd/nerd.component.html
index a024337..8227188 100644
--- a/www/src/app/modules/nerd/nerd.component.html
+++ b/www/src/app/modules/nerd/nerd.component.html
@@ -1,9 +1,15 @@
 <section class="box">
     <h4 *ngIf="msg.length > 0">{{ msg }}</h4>
-    <iframe [src]="url | safe" class="frame"></iframe>
+    <iframe *ngIf="url" [src]="url | safe" class="frame">
+		<div class="alert alert-danger">
+			Your browser doesn't support iframes
+		</div>
+	</iframe>
 </section>
 
-<section class="box">
+<section class="box" *ngIf="config?.showUrl == 1">
     <em> Generated URL:</em> <input type="text" [(value)] ="url">
     <small>If an error occurs, you can use this URL to access ftas directly</small>
 </section>
+
+<button class="btn btn-primary" (click)="openSettings()">Settings</button>
diff --git a/www/src/app/modules/nerd/nerd.component.ts b/www/src/app/modules/nerd/nerd.component.ts
index acc5d65..6d6ad64 100644
--- a/www/src/app/modules/nerd/nerd.component.ts
+++ b/www/src/app/modules/nerd/nerd.component.ts
@@ -1,9 +1,23 @@
+/**
+  * simple URL (without protocol) to NERD instance
+  * url : "nerd.cesnet.cz/nerd",
+  *
+  * 'fullUrl': Full URL to filtering script (usually "example.com/nerd")
+  * Specify URL without URL (https is forced)
+  * If this option is not set, url must be.
+  * If both are set, fullUrl is used.
+  */
+
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { URLSearchParams } from '@angular/http';
 import { SafeResourceUrl } from '@angular/platform-browser';
 
-import { environment } from 'environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { ConfigService } from 'app/services';
+
+import { NerdModalComponent } from './nerd-modal/nerd-modal.component'
 
 
 @Component({
@@ -13,46 +27,93 @@ import { environment } from 'environments/environment';
 })
 export class NerdComponent implements OnInit {
 
-    baseUrl : string = "https://";  // FTAS URL for iframe
-    url: SafeResourceUrl;           // Sanitizied URL for iframe
-    filter : string;                // Advanced filter field for FTAS
-    iframeInit : Boolean = false;   // Flag for iframe initialization routine
-    msg : string = "";          // The loading message
+    // NERD URL for iframe
+    baseUrl : string;
+
+    // Sanitizied URL for iframe
+    url: SafeResourceUrl;
+
+    // Flag for iframe initialization routine
+    iframeInit : Boolean = false;
+    // The loading message
+    msg : string = "";
+
+    // URL parameters
+    params : Object;
+
+    // Configuration fetched froms backend
+    config : Object = {};
+
+    // Reference to modal window
+    modalRef;
 
     /**
       * Construct the FTAS URL from environment variables
       */
-    constructor( private route : ActivatedRoute ) {
-        /**
-          * Environment can set full url of the FTAS instance
-          */
-        if (environment.nerd.fullUrl) {
-            this.baseUrl = environment.nerd.fullUrl
-        } else if (environment.nerd.url) {
-            this.baseUrl += environment.nerd.url;
-        } else {
-            console.warn("NERD URL isn't set.");
-        }
+    constructor(private route : ActivatedRoute,
+				private configService : ConfigService,
+				private modalService : NgbModal) {
     }
 
     /**
-      * Get URL params and prepare the advanced query field for FTAS iframe
+      * Get URL params and prepare the advanced query field for NERD iframe
       */
     ngOnInit() {
-        this.route.params.subscribe(params => {
-            /**
-              * Setup NERD URL
-              * If params are set we can do some filtering
-              */
-            if (params["ip"] == undefined)
-                this.url = this.baseUrl;
-            else {
-                this.url = this.baseUrl + "/ip/" + params["ip"];
-            }
+    	this.configService.getModule('nerd').subscribe(
+    		config => {
+    			this.config = config;
+    			this.fetchParams();
+    		},
+			error => {
+				// Config for module doesn't exist
+				if (error.status == 404) {
+					console.log(error);
+					this.openSettings(false);
+				}
+			}
+		);
+    }
 
+	/**
+	  * Fetch parameters from the route and create filter from them
+	  *
+	  * Then set URL for iframe
+	  */
+    private fetchParams() {
+		this.route.params.subscribe(params => {
+        	this.params = params;
+			this.setUrl();
         });
     }
 
+	/**
+	  * Set NERD URL
+	  * If params are set we can do IP filtering
+	  *
+	  * Fall-through model for setting the baseUrl where preferred method
+	  * is fullUrl -> url -> show modal with settings
+	  */
+    private setUrl() {
+    	this.baseUrl = "https://";
+
+   		if (this.config['fullUrl']) {
+			this.baseUrl = this.config['fullUrl']
+		} else if (this.config['url']) {
+            this.baseUrl += this.config['url'];
+        }
+
+        if (this.baseUrl == 'https://') {
+			this.openSettings();
+        }
+
+		if (!this.params["ip"])
+			this.url = this.baseUrl;
+		else {
+			this.url = this.baseUrl + "/ip/" + this.params["ip"];
+		}
+    }
+
+
     /**
       * Outputs loading message if iframe is loaded but not its contents
       * (load) fires two times: first time when iframe element is loaded
@@ -67,4 +128,48 @@ export class NerdComponent implements OnInit {
 
         this.iframeInit = !this.iframeInit;
     }
+
+	/**
+	  * open modal window with settings
+	  *
+	  * on close, save settings and regenerate URL
+	  * on dismissal check if the HTTP Status is 404, which means the config
+	  * for such module doesn't exist, in that case reopen with new params.
+	  */
+    openSettings(update : boolean = true) {
+		this.modalRef = this.modalService.open(NerdModalComponent);
+		this.modalRef.componentInstance.data = this.config;
+		this.modalRef.result.then(
+			(result) => {
+				// The modal was closed, save settings
+				if (update) {
+					this.configService.update('nerd', this.config).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+							if (error.status == 404) {
+								this.openSettings(false);
+							}
+						});
+				} else {
+					let newconfig = Object.assign({}, this.config);
+					newconfig["name"] = "nerd";
+					this.configService.add(newconfig).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+						});
+				}
+			},
+			(reason) => {
+				// dismissal, do nothing
+			});
+    }
+
 }
diff --git a/www/src/app/modules/nerd/nerd.module.ts b/www/src/app/modules/nerd/nerd.module.ts
index 24d8997..0f386bb 100644
--- a/www/src/app/modules/nerd/nerd.module.ts
+++ b/www/src/app/modules/nerd/nerd.module.ts
@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule} from '@angular/router';
+import { FormsModule }		from '@angular/forms';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AuthGuard } from  'app/utils/auth.guard';
 import { SafePipe, SafePipeModule } from 'app/utils/safe.pipe';
 
-import { NerdComponent } from './nerd.component'
+import { NerdComponent } from './nerd.component';
+import { NerdModalComponent } from './nerd-modal/nerd-modal.component'
 
 const routes : Routes = [{
     path : 'nerd',
@@ -22,14 +26,20 @@ const routes : Routes = [{
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     SafePipeModule,
+    NgbModule.forRoot(),
     RouterModule.forChild(routes)
   ],
   declarations: [
-    NerdComponent
+    NerdComponent,
+    NerdModalComponent
   ],
   providers : [
     SafePipe
+  ],
+  entryComponents : [
+	NerdModalComponent
   ]
 })
 export class NerdModule { }
diff --git a/www/src/environments/environment.prod.ts b/www/src/environments/environment.prod.ts
index 1e5b3ab..968878c 100644
--- a/www/src/environments/environment.prod.ts
+++ b/www/src/environments/environment.prod.ts
@@ -26,19 +26,6 @@ export const environment = {
       */
     output : "1402"
   },
-  nerd : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "nerd.cesnet.cz/nerd",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-  },
   securityCloud : {
     /**
       * simple URL (without protocol) to FTAS instance
diff --git a/www/src/environments/environment.ts b/www/src/environments/environment.ts
index 097ecd7..80e9a0a 100644
--- a/www/src/environments/environment.ts
+++ b/www/src/environments/environment.ts
@@ -13,19 +13,6 @@ export const environment = {
   	* Used only when fetching config.json failed
   	*/
   apiUrl : "/libapi",
-  nerd : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "nerd.cesnet.cz/nerd",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-  },
   securityCloud : {
     /**
       * simple URL (without protocol) to FTAS instance

From a5fdf33a7d5eb1560ff5c1a0637d23c91e18f4ac Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 11:09:03 +0200
Subject: [PATCH 71/78] FTAS: add initial config setup

---
 www/src/app/modules/ftas/ftas.component.ts | 43 +++++++++++++++++-----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/www/src/app/modules/ftas/ftas.component.ts b/www/src/app/modules/ftas/ftas.component.ts
index b60c718..2f01138 100644
--- a/www/src/app/modules/ftas/ftas.component.ts
+++ b/www/src/app/modules/ftas/ftas.component.ts
@@ -69,7 +69,14 @@ export class FtasComponent implements OnInit {
     			this.config = config;
     			this.fetchParams();
     		},
-			error => { console.log(error)});
+			error => {
+				// Config for module doesn't exist
+				if (error.status == 404) {
+					console.log(error);
+					this.openSettings(false);
+				}
+			}
+		);
     }
 
 	/**
@@ -152,18 +159,36 @@ export class FtasComponent implements OnInit {
 	  * on close, save settings and regenerate URL
 	  * on dismissal do nothing
 	  */
-    openSettings() {
+    openSettings(update : boolean = true) {
 		this.modalRef = this.modalService.open(FtasModalComponent);
 		this.modalRef.componentInstance.data = this.config;
 		this.modalRef.result.then(
 			(result) => {
-				// The modal was closed, save settings
-				this.configService.update('ftas', this.config).subscribe(
-					(data) => {
-						this.config = data;
-						this.setUrl();
-					},
-					(error) => { console.error(error) });
+				if (update) {
+					// The modal was closed, save settings
+					this.configService.update('ftas', this.config).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+							if (error.status == 404) {
+								this.openSettings(false);
+							}
+						});
+				} else {
+					let newconfig = Object.assign({}, this.config);
+					newconfig["name"] = "ftas";
+					this.configService.add(newconfig).subscribe(
+						(data) => {
+							this.config = data;
+							this.setUrl();
+						},
+						(error) => {
+							console.error(error);
+						});
+				}
 			},
 			(reason) => {
 				// dismissal, do nothing

From 3bec37b33d67bb90dce561460c6973cc54e3b151 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 11:09:53 +0200
Subject: [PATCH 72/78] FTAS: remove ftas from environment

---
 www/src/environments/environment.prod.ts | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/www/src/environments/environment.prod.ts b/www/src/environments/environment.prod.ts
index 968878c..afb2324 100644
--- a/www/src/environments/environment.prod.ts
+++ b/www/src/environments/environment.prod.ts
@@ -8,24 +8,6 @@ export const environment = {
   	* Used only when fetching config.json failed
   	*/
   apiUrl : "/libapi",
-  ftas : {
-    /**
-      * simple URL (without protocol) to FTAS instance
-      */
-    url : "ftas.cesnet.cz",
-    /**
-      * Full URL to filtering script (usually "example.com/ftas/stat.pl")
-      * Specify URL without URL (https is forced)
-      * If this option is not set, url must be.
-      * If both are set, fullUrl is used.
-      */
-    fullUrl : undefined,
-    /**
-      * Specify which output machines will be used
-      * Can be a list (as string): "1,2,5,10"
-      */
-    output : "1402"
-  },
   securityCloud : {
     /**
       * simple URL (without protocol) to FTAS instance

From 25068491a1820dadb9c705bd2fa5838d194bc84e Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 12:21:41 +0200
Subject: [PATCH 73/78] Rename getConfig function to main

---
 www/src/main.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/www/src/main.ts b/www/src/main.ts
index b0fd9f0..b650363 100644
--- a/www/src/main.ts
+++ b/www/src/main.ts
@@ -13,7 +13,7 @@ if (environment.production) {
   *
   * This cannot use the Angular HTTP module, therefore uses good old XMLHttpRequest
   */
-function getConfig() {
+export function main() {
 	return new Promise((resolve, reject) => {
         let xhr = new XMLHttpRequest();
         xhr.open("GET", environment.configPath);
@@ -30,6 +30,8 @@ function getConfig() {
 }
 
 // Fetch the config before bootstraping the app
-getConfig().then((data : string) => {
+main().then((data : string) => {
 	platformBrowserDynamic().bootstrapModule(initApp(JSON.parse(data)));
 });
+
+

From 43436f12909de428f74b308db10a0b67a8356a24 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 12:21:59 +0200
Subject: [PATCH 74/78] Update to @angular/cli@1.1.2

---
 www/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/package.json b/www/package.json
index 9e795db..248aace 100644
--- a/www/package.json
+++ b/www/package.json
@@ -14,6 +14,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^4.0.0",
+    "@angular/cli": "^1.1.2",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
@@ -34,7 +35,6 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.0",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
     "@types/jasmine": "2.5.45",
@@ -45,13 +45,13 @@
     "karma": "~1.7.0",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "^2.2.2"
   },
   "description": "Web interface for Liberouter GUI. Built using webpack.",
   "repository": {

From 5e493c4bbfc3e4f1380dfb7d1b41a64470b85283 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 12:25:43 +0200
Subject: [PATCH 75/78] Add steps to build production

---
 www/README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/www/README.md b/www/README.md
index 14b91d4..86fb151 100644
--- a/www/README.md
+++ b/www/README.md
@@ -22,6 +22,9 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
 
-## Further help
+## Building production Liberouter GUI
+Because of some weird bug in Angular CLI or TypeScript one has to build the production version of Liberouter GUI like this:
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+1. run `ng build --prod --bh="/liberouter-gui/www/dist/" --aot=false -w` This will give you an error `ERROR in AppModule is not an NgModule`
+2. Trigger the watch routine of Angular CLI (i.e. open and save some file inside the src folder).
+3. Build finishes sucessfully.

From 93e0798750e8901467782301bb1d17a455cf937a Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 12:32:26 +0200
Subject: [PATCH 76/78] Copy FA fonts to assets folder

---
 www/.angular-cli.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/www/.angular-cli.json b/www/.angular-cli.json
index f62b814..98334ad 100644
--- a/www/.angular-cli.json
+++ b/www/.angular-cli.json
@@ -10,7 +10,8 @@
 			"outDir": "dist",
 			"assets": [
 				"assets",
-				"favicon.ico"
+				"favicon.ico",
+				"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
 			],
 			"index": "index.html",
 			"main": "main.ts",

From d36643ffe50605c9c20a2cd6a3b06a294b188fd2 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 12:48:25 +0200
Subject: [PATCH 77/78] Update paths to FA and .htaccess

Also angular cli now copies .htaccess to the dist folder
---
 www/.angular-cli.json    | 5 +----
 www/.htaccess            | 4 ++--
 www/src/styles/main.scss | 3 +++
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/www/.angular-cli.json b/www/.angular-cli.json
index 98334ad..3a76d08 100644
--- a/www/.angular-cli.json
+++ b/www/.angular-cli.json
@@ -11,6 +11,7 @@
 			"assets": [
 				"assets",
 				"favicon.ico",
+				".htaccess",
 				"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
 			],
 			"index": "index.html",
@@ -22,7 +23,6 @@
 			"prefix": "app",
 			"styles": [
 				"styles/main.scss",
-				"../node_modules/font-awesome/css/font-awesome.css",
 				"../node_modules/bootstrap/dist/css/bootstrap.min.css",
 				"../node_modules/codemirror/lib/codemirror.css"
 			],
@@ -34,9 +34,6 @@
 			}
 		}
 	],
-	"addons" : [
-		"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
-	],
 	"sassCompiler" : {
 		"includePaths": ["src/styles"]
 	},
diff --git a/www/.htaccess b/www/.htaccess
index 4081df4..e7e7a52 100644
--- a/www/.htaccess
+++ b/www/.htaccess
@@ -1,9 +1,9 @@
 <IfModule mod_rewrite.c>
   RewriteEngine On
-  RewriteRule ^$ /liberouter-gui/www/dist [L]
+  RewriteRule ^$ / [L]
   RewriteBase /dist
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
-  RewriteRule . /liberouter-gui/www/dist/index.html [L]
+  RewriteRule . /index.html [L]
 </IfModule>
diff --git a/www/src/styles/main.scss b/www/src/styles/main.scss
index c52549b..3d9d929 100644
--- a/www/src/styles/main.scss
+++ b/www/src/styles/main.scss
@@ -1,3 +1,6 @@
+$fa-font-path: "../../node_modules/font-awesome/fonts";
+@import "../../node_modules/font-awesome/scss/font-awesome.scss";
+
 @import "variables";
 @import "typography";
 //@import "mixins";

From 0c1bc016f7439b0c0b23a9b3f2496ceabb1837f5 Mon Sep 17 00:00:00 2001
From: Petr Stehlik <xstehl14@stud.fit.vutbr.cz>
Date: Mon, 19 Jun 2017 12:49:47 +0200
Subject: [PATCH 78/78] Bump to version 0.3.0

---
 www/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/package.json b/www/package.json
index 248aace..793db03 100644
--- a/www/package.json
+++ b/www/package.json
@@ -1,6 +1,6 @@
 {
   "name": "liberouter-gui",
-  "version": "0.2.0-beta",
+  "version": "0.3.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {