diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index 62a2e3b..5e547e4 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -10,12 +10,16 @@ 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'; - + +import {MatAutocompleteModule} from '@angular/material/autocomplete'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatSelectModule} from '@angular/material/select'; -import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatFormFieldModule, MatInputModule} from '@angular/material'; +import {MatTooltipModule} from '@angular/material/tooltip'; import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component'; import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component'; +import { LimitByComponent } from './limit-by/limit-by.component'; @NgModule({ declarations: [ @@ -26,14 +30,20 @@ import { QueryAutocompleteComponent } from './query-autocomplete/query-autocompl VisualizationPageComponent, YAxisRangeComponent, QueryAutocompleteComponent, + LimitByComponent, ], imports: [ BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, - MatSelectModule,MatFormFieldModule, MatInputModule, MatAutocompleteModule, + MatButtonModule, + MatCheckboxModule, + MatFormFieldModule, + MatInputModule, + MatSelectModule, + MatTooltipModule, 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 3b38f52..65f77a4 100644 --- a/pdb-js/src/app/help-page/help-page.component.html +++ b/pdb-js/src/app/help-page/help-page.component.html @@ -13,14 +13,37 @@ This page describes how to use this tool.

Why not use one of the existing monitoring tools?

-There are many tools out there that do monitoring in one way or the other. Here are a few: +There are many tools out there that do monitoring in one way or the other. There are complete closed source solutions like New Relic, Splunk, +and App Dynamics. +They bring everything you need, a tool to collect logs or metrics, a database, a UI with dashboards and alerting. +

+

+The OSS community likes to break them down into separate tools. +For example the ELK-stack +consists of Elasticsearch +as database, and Kibana +as the UI. It is usually combined with Logstash +for logfile collection.
+Another popular UI is Grafana +which can be combined with +Loki, +Prometheus, +Graphite or +Metrictank (which is an engine for Graphite). + +
+

Kibana (ELK), App Dynamics, -Graphite, -Prometheus -+ Grafana, +Graphite + (Metrictank), +Prometheus, +Loki, +Grafana, + + Netflix Atlas, RRDtool, Ganglia, @@ -37,7 +60,8 @@ There are many tools out there that do monitoring in one way or the other. Here Bleemo, Site24x7, Datadog, -Sitescope, +Sitescope, +SignalFX, 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/limit-by/limit-by.component.html b/pdb-js/src/app/limit-by/limit-by.component.html new file mode 100644 index 0000000..9df202b --- /dev/null +++ b/pdb-js/src/app/limit-by/limit-by.component.html @@ -0,0 +1,22 @@ + + Limit By: + + no limit + most values + fewest values + max value + min value + + + + + + \ No newline at end of file diff --git a/pdb-js/src/app/limit-by/limit-by.component.scss b/pdb-js/src/app/limit-by/limit-by.component.scss new file mode 100644 index 0000000..e2cbeaa --- /dev/null +++ b/pdb-js/src/app/limit-by/limit-by.component.scss @@ -0,0 +1,9 @@ +#limitBy { + width: 10em; + margin-right: 1ex; +} + +#limit { + width: 5em; + margin-right: 0ex; +} \ No newline at end of file diff --git a/pdb-js/src/app/limit-by/limit-by.component.spec.ts b/pdb-js/src/app/limit-by/limit-by.component.spec.ts new file mode 100644 index 0000000..e95f3c7 --- /dev/null +++ b/pdb-js/src/app/limit-by/limit-by.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LimitByComponent } from './limit-by.component'; + +describe('LimitByComponent', () => { + let component: LimitByComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LimitByComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LimitByComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/limit-by/limit-by.component.ts b/pdb-js/src/app/limit-by/limit-by.component.ts new file mode 100644 index 0000000..2974a75 --- /dev/null +++ b/pdb-js/src/app/limit-by/limit-by.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit, Input} from '@angular/core'; + +@Component({ + selector: 'pdb-limit-by', + templateUrl: './limit-by.component.html', + styleUrls: ['./limit-by.component.scss'] +}) +export class LimitByComponent implements OnInit { + + @Input() limit: number; + + @Input() limitBy: string; + + constructor() { } + + ngOnInit() { + } +} diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index 8362cf7..b21a0d2 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -33,7 +33,6 @@ export class PlotService { this.plotTypes.push(new PlotType("Bar", "bar-chart", false, DataType.Other, DataType.Other)); this.tagFields = new Array(); - } ngOnInit() { diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html index 412345d..ec11857 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html @@ -4,7 +4,8 @@ placeholder="Query" [formControl]="query" [matAutocomplete]="auto" - (keyup)="onKey($event)"/> + (keyup)="onKey($event)" + (focus)="onKey($event)"/> - - - -

-
- - Date Range: - - - - - Type: - - - {{plotType.name}} - - - - - - Combine with: - - - - - {{plotType.name}} - - - - - - Group By: - - {{tagField.name}} - - +
+ + Date Range: + + - - Split By: - - - - {{tagField.name}} - - + + Type: + + + {{plotType.name}} + + + - - Y-Axis: - - Logarithm - Linear - - - - - - -
- - + + Combine with: + + - + + {{plotType.name}} + + + + + Group By: + + {{tagField.name}} + + + + + + + Y-Axis: + + Logarithm + Linear + + + + + + + Gallery + + + Split By: + + {{tagField.name}} + + + Please select a value! + + + + +
+ + +
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss index 25b7512..cdb8d97 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.scss +++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss @@ -14,14 +14,13 @@ grid: "query-box query-box" auto "filters results" 1fr - / 23em 3fr; + / 25em 3fr; } } -@media screen and (max-width: 800px) { +@media screen and (max-width: 1000px) { #visualization { display: grid; - height: 100%; margin: 0; grid: "query-box" auto @@ -29,22 +28,31 @@ "results" 1fr / 1fr; } + #results { + height: 600px; + } } #query-box { grid-area: query-box; - padding: 2px; - border-bottom: 1px solid black; + margin: 1em; } #filters { grid-area: filters; - background-color: #fafafa; +} +#filterpanel { + background-color: #f8f8f8;/*#fafafa;*/ padding: 1em; + margin: 0 1em 1em 1em; + border-radius: 5px; } #results { grid-area: results; } +#plot-button-bar { + text-align: right; +} 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 6db20dc..3693ece 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { PlotService, PlotType } from '../plot.service'; import { Observable } from 'rxjs/Observable'; -import { FormControl } from '@angular/forms'; +import { FormControl, Validators } from '@angular/forms'; + @Component({ selector: 'pdb-visualization-page', @@ -22,12 +23,22 @@ export class VisualizationPageComponent implements OnInit { tagFields: Array; + groupBy: Array = []; + limitBy: string = "NO_LIMIT"; + limit = 10; + yAxis: string; yAxisUnit: string; minYValue: number; maxYValue: number; query: string; + + + enableGallery = true; + splitBy = new FormControl(null, [ + Validators.required + ]); constructor(private plotService: PlotService) { } @@ -47,24 +58,38 @@ export class VisualizationPageComponent implements OnInit { 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"); + + var request = {}; + request['query'] = this.query; + request['height'] = document.getElementById("results").offsetHeight; + request['width'] = document.getElementById("results").offsetWidth; + request['groupBy'] = this.groupBy.map(o => o.name); + request['limitBy'] = this.limitBy; + request['limit'] = this.limit; + request['dateRange'] = this.dateRange.value; + request['axisScale'] = this.yAxis; + request['aggregate'] = this.selectedCombinePlotType.value; + request['keyOutside'] = false; + request['generateThumbnail'] = this.enableGallery; + request['yRangeMin'] = this.minYValue; + request['yRangeMax'] = this.maxYValue; + request['yRangeUnit'] = this.yAxisUnit; + + console.log("plot clicked: "+ JSON.stringify(request)); } } diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.html b/pdb-js/src/app/y-axis-range/y-axis-range.component.html index 49ecc9b..f0ae79c 100644 --- a/pdb-js/src/app/y-axis-range/y-axis-range.component.html +++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.html @@ -1,17 +1,19 @@ - - - - - - - - Unit: - - automatic - milli seconds - seconds - minutes - hours - days - - +
+ + + + + + + + Unit: + + automatic + milli seconds + seconds + minutes + hours + days + + +
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index e46fc26..dd64ac6 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -35,6 +35,10 @@ body { vertical-align: text-bottom; } +button[disabled] .icon-inline { + opacity: 0.5; +} + .icon-small { width: 1.5em; height: 1.5em; @@ -65,6 +69,9 @@ a.external-link:after { content: ""; } +.inline { + display: inline-block; +} body .mat-select-panel { @@ -78,3 +85,5 @@ body .mat-select-panel { mat-form-field { width: 100%; } + +