From 020c3b6c39261098322b08c5ceda7c4545791e6b Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Fri, 11 Oct 2019 09:54:26 +0200 Subject: [PATCH] make the drop down for "combine with" dynamic --- pdb-js/src/app/app.module.ts | 2 + .../app/help-page/help-page.component.html | 22 ++++--- pdb-js/src/app/plot.service.ts | 63 +++++++++++++++---- .../visualization-page.component.html | 8 ++- .../visualization-page.component.ts | 36 +++++++++-- pdb-js/src/styles.scss | 4 +- 6 files changed, 102 insertions(+), 33 deletions(-) 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 @@

- -