andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

prepare sending of plot requests

Browse Source 
- values for query and date range were not
  propagated to the model
This commit is contained in:
Andreas Huber
2019-10-26 10:32:11 +02:00
parent 7636781315
commit f235890cc1
7 changed files with 156 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

@@ -1,9 +1,10 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { PlotService, PlotType } from '../plot.service';
import { PlotService, PlotType, PlotRequest, PlotResponse } from '../plot.service';
import { Observable } from 'rxjs/Observable';
import { FormControl, Validators } from '@angular/forms';
import { LimitByComponent } from '../limit-by/limit-by.component';
import { YAxisRangeComponent } from '../y-axis-range/y-axis-range.component';
import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';
@Component({
@@ -35,7 +36,8 @@ export class VisualizationPageComponent implements OnInit {
@ViewChild(YAxisRangeComponent, {static: false})
private yAxisRangeComponent : YAxisRangeComponent;
query: string;
@ViewChild(QueryAutocompleteComponent, {static: false})
query: QueryAutocompleteComponent;
enableGallery = false;
@@ -48,9 +50,8 @@ export class VisualizationPageComponent implements OnInit {
ngOnInit() {
const that = this;
this.query = "pod=*";
this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.setValue(this.plotTypes[0].name);
this.selectedPlotType.setValue(this.plotTypes[0]);
this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt);
@@ -59,41 +60,54 @@ export class VisualizationPageComponent implements OnInit {
this.tagFields = this.plotService.getTagFields();
this.yAxis = "log";
this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
if (!that.combinePlotTypes.includes(that.selectedCombinePlotType.value)){
that.selectedCombinePlotType.setValue('');
}
});
}
changeDate(event){
console.log("changed date: " + JSON.stringify(event));
}
getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
//const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
const mainPlotType = selectedMainPlotType;
const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType));
return compatiblePlotTypes;
}
plot(){
var aggregates = [];
aggregates.push(this.selectedPlotType.value.id);
if (this.selectedCombinePlotType.value){
aggregates.push(this.selectedCombinePlotType.value.id);
}
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.limitbycomponent.limitBy;
request['limit'] = this.limitbycomponent.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.yAxisRangeComponent.minYValue;
request['yRangeMax'] = this.yAxisRangeComponent.maxYValue;
request['yRangeUnit'] = this.yAxisRangeComponent.yAxisUnit;
var request = new PlotRequest();
request.query = this.query.query;
request.height = document.getElementById("results").offsetHeight;
request.width = document.getElementById("results").offsetWidth;
request.groupBy = this.groupBy.map(o => o.name);
request.limitBy = this.limitbycomponent.limitBy;
request.limit = this.limitbycomponent.limit;
request.dateRange = (<HTMLInputElement>document.getElementById("search-date-range")).value;
request.yAxis = this.yAxis;
request.aggregates = aggregates;
request.keyOutside = false;
request.generateThumbnail = this.enableGallery;
request.yRangeMin = this.yAxisRangeComponent.minYValue;
request.yRangeMax = this.yAxisRangeComponent.maxYValue;
request.yRangeUnit = this.yAxisRangeComponent.yAxisUnit;
console.log("plot clicked: "+ JSON.stringify(request));
this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){
console.log("response: " + JSON.stringify(plotResponse));
});
}
}