diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 79296c7..0448322 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, enableProdMode } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
+import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -26,6 +27,7 @@ import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
imports: [
BrowserModule,
AppRoutingModule,
+ ReactiveFormsModule,
MatSelectModule,MatFormFieldModule, MatInputModule,
BrowserAnimationsModule,
HttpClientModule
diff --git a/pdb-js/src/app/help-page/help-page.component.html b/pdb-js/src/app/help-page/help-page.component.html
index 15a2ca6..3b38f52 100644
--- a/pdb-js/src/app/help-page/help-page.component.html
+++ b/pdb-js/src/app/help-page/help-page.component.html
@@ -13,7 +13,7 @@ This page describes how to use this tool.
Why not use one of the existing monitoring tools?
-There are many monitoring tools out there.
+There are many tools out there that do monitoring in one way or the other. Here are a few:
New Relic ,
Splunk ,
Kibana (ELK ),
@@ -27,15 +27,17 @@ There are many monitoring tools out there.
InfluxDB
+ Chronograf ,
OpenTSDB ,
-Nagios /Icinga ,
-Heka,
-Bosun,
-Wavefront,
-Dropwizard,
-Druid.io,
-Bleemo,
-Site24x7,
-Sitescope,
+Nagios /Icinga ,
+Sentry ,
+Heka ,
+Bosun ,
+Wavefront ,
+Dropwizard ,
+Druid.io ,
+Bleemo ,
+Site24x7 ,
+Datadog ,
+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/plot.service.ts b/pdb-js/src/app/plot.service.ts
index 1bbd130..b8da1fb 100644
--- a/pdb-js/src/app/plot.service.ts
+++ b/pdb-js/src/app/plot.service.ts
@@ -14,18 +14,23 @@ export class PlotService {
constructor(private http: HttpClient) {
this.plotTypes = new Array();
- this.plotTypes.push(new PlotType("Scatter", "scatter-chart2", true));
- this.plotTypes.push(new PlotType("Heatmap", "heatmap", false));
- this.plotTypes.push(new PlotType("Contour", "contour-chart", false));
- this.plotTypes.push(new PlotType("Cumulative Distribution", "cumulative-distribution-chart", true));
- this.plotTypes.push(new PlotType("Histogram", "histogram", false));
- this.plotTypes.push(new PlotType("Ridgelines", "ridgelines", false));
- this.plotTypes.push(new PlotType("Quantile-Quantile", "quantile-quantile", false));
- this.plotTypes.push(new PlotType("Parallel Requests", "parallel-requests-chart", true));
- this.plotTypes.push(new PlotType("Violin", "violin-chart", false));
- this.plotTypes.push(new PlotType("Strip", "strip-chart", false));
- this.plotTypes.push(new PlotType("Pie", "pie-chart", false));
- this.plotTypes.push(new PlotType("Bar", "bar-chart", false));
+ this.plotTypes.push(new PlotType(
+ "Scatter",
+ "scatter-chart2",
+ true,
+ DataType.Time,
+ DataType.Duration));
+ this.plotTypes.push(new PlotType("Heatmap", "heatmap", false, DataType.Other, DataType.Other));
+ this.plotTypes.push(new PlotType("Contour", "contour-chart", false, DataType.Time, DataType.Duration));
+ this.plotTypes.push(new PlotType("Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, DataType.Duration));
+ this.plotTypes.push(new PlotType("Histogram", "histogram", false, DataType.Group, DataType.Duration));
+ this.plotTypes.push(new PlotType("Ridgelines", "ridgelines", false, DataType.Other, DataType.Other));
+ this.plotTypes.push(new PlotType("Quantile-Quantile", "quantile-quantile", false, DataType.Other, DataType.Other));
+ this.plotTypes.push(new PlotType("Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count));
+ this.plotTypes.push(new PlotType("Violin", "violin-chart", false, DataType.Group, DataType.Duration));
+ this.plotTypes.push(new PlotType("Strip", "strip-chart", false, DataType.Group, DataType.Duration));
+ this.plotTypes.push(new PlotType("Pie", "pie-chart", false, DataType.Other, DataType.Other));
+ this.plotTypes.push(new PlotType("Bar", "bar-chart", false, DataType.Other, DataType.Other));
this.tagFields = new Array();
@@ -57,12 +62,35 @@ export class PlotType {
name: string;
icon: string
active: boolean;
+ xAxis: DataType;
+ yAxis: DataType;
- constructor(name: string, icon: string, active: boolean) {
+ constructor(name: string, icon: string, active: boolean, xAxis: DataType, yAxis: DataType) {
this.name = name;
this.icon = icon;
this.active = active;
+ this.xAxis = xAxis;
+ this.yAxis = yAxis;
}
+
+ compatible(other: PlotType) : boolean {
+
+ const xEqual = this.xAxis === other.xAxis;
+ const yEqual = this.yAxis === other.yAxis;
+ const anyIsOther = this.xAxis === DataType.Other
+ || this.yAxis === DataType.Other
+ || other.xAxis === DataType.Other
+ || other.yAxis === DataType.Other;
+
+ var result = xEqual || yEqual;
+
+ // if either dimension is Other, then this plot is not compatible with any other plot
+ result = result && !anyIsOther;
+
+ // is not the same
+ result = result && this.name != other.name;
+ return result;
+ }
}
export class TagField {
@@ -73,4 +101,13 @@ export class TagField {
}
}
+export enum DataType {
+ Time,
+ Duration,
+ Percent,
+ Count,
+ Group,
+ Metric,
+ Other
+}
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index b1a8179..e93fcbc 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -7,19 +7,21 @@
-
+
-
+
Type:
-
+
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
index 70b1e9b..b084cf0 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -1,5 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { PlotService, PlotType } from '../plot.service';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { FormControl } from '@angular/forms';
@Component({
selector: 'pdb-visualization-page',
@@ -8,10 +11,12 @@ import { PlotService, PlotType } from '../plot.service';
})
export class VisualizationPageComponent implements OnInit {
- selectedPlotType: string;
+ availablePlotTypes = {};
+
+ selectedPlotType = new FormControl('');
plotTypes: Array;
- selectedCombinePlotType: string;
+ selectedCombinePlotType = new FormControl('');
combinePlotTypes: Array;
tagFields: Array;
@@ -23,21 +28,42 @@ export class VisualizationPageComponent implements OnInit {
query: string;
- constructor(private plotService: PlotService) {
+ constructor(private plotService: PlotService, private http: HttpClient) {
}
ngOnInit() {
+ const that = this;
this.query = "pod=*";
this.plotTypes = this.plotService.getPlotTypes();
- this.selectedPlotType = this.plotTypes[0].name;
+ this.selectedPlotType.setValue(this.plotTypes[0].name);
- this.combinePlotTypes = this.plotTypes;
+ this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt);
+
+ this.combinePlotTypes = this.getCombinablePlotTypes(this.selectedPlotType.value);
this.tagFields = this.plotService.getTagFields();
this.yAxis = "log";
this.yAxisUnit = "MINUTES";
this.minYValue = 0;
this.maxYValue = 120;
+
+
+ this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
+ that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
+ });
+ }
+
+ getCombinablePlotTypes(selectedMainPlotType) : Array{
+ // get compatible plot types
+ const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
+
+ const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType));
+ console.log(compatiblePlotTypes);
+ return compatiblePlotTypes;
+ }
+
+ plot(){
+ console.log("plot clicked");
}
}
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index c3ef9f2..297b48f 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -36,8 +36,8 @@ body {
}
.icon-small {
- max-width: 1.5em;
- max-height: 1.5em;
+ width: 1.5em;
+ height: 1.5em;
margin: 0.2em;
}
.icon-small:hover {