-
-
Welcome
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ title }} app is running!
-
-
-
-
-
-
-
-
Resources
-
Here are some links to help you get started:
-
-
-
-
-
Next Steps
-
What do you want to do next with your app?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Run and Watch Tests
-
-
-
-
-
-
Build for Production
-
-
-
-
-
-
ng generate component xyz
-
ng add @angular/material
-
ng add _____
-
ng test
-
ng build --prod
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pdb-js/src/app/app.component.scss b/pdb-js/src/app/app.component.scss
index e69de29..ec7bf38 100644
--- a/pdb-js/src/app/app.component.scss
+++ b/pdb-js/src/app/app.component.scss
@@ -0,0 +1,14 @@
+
+
+#main-toolbar {
+ height: 1.5em;
+ width: 100%;
+ padding-bottom: 0.5em;
+ border-bottom: solid 1px black;
+ background-color: #eee;
+}
+
+.right{
+ position: absolute;
+ right: 0px;
+}
diff --git a/pdb-js/src/app/app.component.ts b/pdb-js/src/app/app.component.ts
index 8e4f396..5b955d6 100644
--- a/pdb-js/src/app/app.component.ts
+++ b/pdb-js/src/app/app.component.ts
@@ -1,4 +1,6 @@
import { Component } from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MatIconRegistry} from '@angular/material/icon';
@Component({
selector: 'app-root',
@@ -7,4 +9,10 @@ import { Component } from '@angular/core';
})
export class AppComponent {
title = 'pdb';
+
+ constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
+ iconRegistry.addSvgIcon(
+ 'home',
+ sanitizer.bypassSecurityTrustResourceUrl('assets/img/home.svg'));
+ }
}
diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 2c3ba29..e2043a2 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -3,10 +3,18 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
+import { MainPageComponent } from './main-page/main-page.component';
+import { HelpPageComponent } from './help-page/help-page.component';
+import { UploadPageComponent } from './upload-page/upload-page.component';
+//import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ MainPageComponent,
+ HelpPageComponent,
+ UploadPageComponent,
+ //VisualizationPageComponent,
],
imports: [
BrowserModule,
diff --git a/pdb-js/src/app/help-page/help-page.component.html b/pdb-js/src/app/help-page/help-page.component.html
new file mode 100644
index 0000000..15a2ca6
--- /dev/null
+++ b/pdb-js/src/app/help-page/help-page.component.html
@@ -0,0 +1,43 @@
+
+
+
Help
+
+This page describes how to use this tool.
+
+
+
Why not use one of the existing monitoring tools?
+
+There are many monitoring tools out there.
+New Relic ,
+Splunk ,
+Kibana (ELK ),
+App Dynamics ,
+Graphite ,
+Prometheus
++ Grafana ,
+Netflix Atlas ,
+RRDtool ,
+Ganglia ,
+InfluxDB
++ Chronograf ,
+OpenTSDB ,
+Nagios /Icinga ,
+Heka,
+Bosun,
+Wavefront,
+Dropwizard,
+Druid.io,
+Bleemo,
+Site24x7,
+Sitescope,
+and many more. None of them provides the visualizations we had in mind. We wanted to plot each value of the time series data individually, so that we can identify the
+response times of a single request. But tools like Splunk, Kibana, Chronograf or Grafana only plot aggregated data (average, min/max, percentiles).
+
+
+
diff --git a/pdb-js/src/app/help-page/help-page.component.scss b/pdb-js/src/app/help-page/help-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/pdb-js/src/app/help-page/help-page.component.spec.ts b/pdb-js/src/app/help-page/help-page.component.spec.ts
new file mode 100644
index 0000000..82f6765
--- /dev/null
+++ b/pdb-js/src/app/help-page/help-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelpPageComponent } from './help-page.component';
+
+describe('HelpPageComponent', () => {
+ let component: HelpPageComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HelpPageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HelpPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/pdb-js/src/app/help-page/help-page.component.ts b/pdb-js/src/app/help-page/help-page.component.ts
new file mode 100644
index 0000000..70b77e5
--- /dev/null
+++ b/pdb-js/src/app/help-page/help-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'pdb-help-page',
+ templateUrl: './help-page.component.html',
+ styleUrls: ['./help-page.component.scss']
+})
+export class HelpPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/pdb-js/src/app/main-page/main-page.component.html b/pdb-js/src/app/main-page/main-page.component.html
new file mode 100644
index 0000000..389f303
--- /dev/null
+++ b/pdb-js/src/app/main-page/main-page.component.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MainPageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MainPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/pdb-js/src/app/main-page/main-page.component.ts b/pdb-js/src/app/main-page/main-page.component.ts
new file mode 100644
index 0000000..4f98267
--- /dev/null
+++ b/pdb-js/src/app/main-page/main-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'pdb-main-page',
+ templateUrl: './main-page.component.html',
+ styleUrls: ['./main-page.component.scss']
+})
+export class MainPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/pdb-js/src/app/upload-page/upload-page.component.html b/pdb-js/src/app/upload-page/upload-page.component.html
new file mode 100644
index 0000000..3289887
--- /dev/null
+++ b/pdb-js/src/app/upload-page/upload-page.component.html
@@ -0,0 +1 @@
+upload-page works!
diff --git a/pdb-js/src/app/upload-page/upload-page.component.scss b/pdb-js/src/app/upload-page/upload-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/pdb-js/src/app/upload-page/upload-page.component.spec.ts b/pdb-js/src/app/upload-page/upload-page.component.spec.ts
new file mode 100644
index 0000000..9549e1a
--- /dev/null
+++ b/pdb-js/src/app/upload-page/upload-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UploadPageComponent } from './upload-page.component';
+
+describe('UploadPageComponent', () => {
+ let component: UploadPageComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ UploadPageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UploadPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/pdb-js/src/app/upload-page/upload-page.component.ts b/pdb-js/src/app/upload-page/upload-page.component.ts
new file mode 100644
index 0000000..276c07e
--- /dev/null
+++ b/pdb-js/src/app/upload-page/upload-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'pdb-upload-page',
+ templateUrl: './upload-page.component.html',
+ styleUrls: ['./upload-page.component.scss']
+})
+export class UploadPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
new file mode 100644
index 0000000..cefb7f9
--- /dev/null
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -0,0 +1,5 @@
+
+
+visualization-page works!
\ No newline at end of file
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss
new file mode 100644
index 0000000..0787be9
--- /dev/null
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss
@@ -0,0 +1,16 @@
+:host{
+ font-weight: bold;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+}
+
+@media screen {
+ * {
+ background-color: #aaa;
+ }
+}
+
+@media screen and (max-width: 800px) {
+
+}
\ No newline at end of file
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts b/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts
new file mode 100644
index 0000000..c8446c6
--- /dev/null
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VisualizationPageComponent } from './visualization-page.component';
+
+describe('VisualizationPageComponent', () => {
+ let component: VisualizationPageComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ VisualizationPageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(VisualizationPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
new file mode 100644
index 0000000..18f87d0
--- /dev/null
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'pdb-visualization-page',
+ templateUrl: './visualization-page.component.html',
+ styleUrls: ['./visualization-page.component.scss']
+})
+export class VisualizationPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 90d4ee0..095db11 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -1 +1,51 @@
/* You can add global styles to this file, and also import other style files */
+/*
+blue
+#CBD7F4
+#B6C1DB
+#96A0B5
+#636A78
+#2C2F36
+
+grey
+0123456789abcdef
+^ ^ ^ ^ ^^
+#000
+#444
+#888
+#bbb
+#eee
+#fff
+*/
+$background-color: #CBD7F4;
+
+
+body {
+ font-family: Arial, sans-serif;
+ font-size: 14px;
+ margin: 0;
+}
+
+.icon-small {
+ max-width: 1.5em;
+ max-height: 1.5em;
+ margin: 0.2em;
+}
+.icon-small:hover {
+ background-color: #eee;
+}
+
+.icon-large {
+ width: 8em;
+ height: 8em;
+ margin: 1em;
+}
+
+a.external-link:after {
+ background: transparent url('/assets/img/external-link.svg') no-repeat center bottom;
+ background-size: 0.8em;
+ display: inline-block;
+ width: 1.1em;
+ height: 1em;
+ content: "";
+}
- 
