diff --git a/src/app/graphs/label-trend.ts b/src/app/graphs/label-trend.ts index 1e3bfbde..6afd8263 100644 --- a/src/app/graphs/label-trend.ts +++ b/src/app/graphs/label-trend.ts @@ -1,4 +1,6 @@ -export const labelTrendChartOptions = (data) => { +import { LabelTrend } from "../items.service.model"; + +export const labelTrendChartOptions = (data: LabelTrend) => { return { chart: { type: "column", @@ -18,7 +20,7 @@ export const labelTrendChartOptions = (data) => { xAxis: [{ lineWidth: 0, crosshair: true, - categories: data.timePoints, + categories: data.chartSeries.timePoints, tickInterval: 5, gridLineWidth: 0, }], @@ -88,10 +90,11 @@ export const labelTrendChartOptions = (data) => { series: [ { name: "Response Time [P99]", + visible: data.chartSettings.p99, yAxis: 0, color: "#008DA6", lineWidth: 0, - data: data["n9"], + data: data.chartSeries.p99, tooltip: { valueSuffix: " ms" }, @@ -99,10 +102,11 @@ export const labelTrendChartOptions = (data) => { }, { name: "Response Time [P95]", + visible: data.chartSettings.p95, yAxis: 0, color: "#36B37E", lineWidth: 0, - data: data["n5"], + data: data.chartSeries.p95, tooltip: { valueSuffix: " ms" }, @@ -110,8 +114,9 @@ export const labelTrendChartOptions = (data) => { }, { name: "Response Time [P90]", + visible: data.chartSettings.p90, yAxis: 0, - data: data["n0"], + data: data.chartSeries.p90, color: "#FFC400", lineWidth: 0, tooltip: { @@ -122,8 +127,8 @@ export const labelTrendChartOptions = (data) => { { name: "Response Time [avg]", yAxis: 0, - visible: false, - data: data.avgResponseTime, + visible: data.chartSettings.avgResponseTime, + data: data.chartSeries.avgResponseTime, lineWidth: 0, tooltip: { valueSuffix: " ms" @@ -133,8 +138,8 @@ export const labelTrendChartOptions = (data) => { { name: "Connection [avg]", yAxis: 0, - visible: false, - data: data.connect, + visible: data.chartSettings.avgConnectionTime, + data: data.chartSeries.avgConnectionTime, lineWidth: 0, tooltip: { valueSuffix: " ms" @@ -144,8 +149,8 @@ export const labelTrendChartOptions = (data) => { { name: "Latency [avg]", yAxis: 0, - visible: false, - data: data.latency, + visible: data.chartSettings.avgLatency, + data: data.chartSeries.avgLatency, lineWidth: 0, tooltip: { valueSuffix: " ms" @@ -154,8 +159,8 @@ export const labelTrendChartOptions = (data) => { }, { name: "Throughput", - data: data.throughput, - visible: false, + visible: data.chartSettings.throughput, + data: data.chartSeries.throughput, color: "#CB59E8", tooltip: { valueSuffix: " hits/s" @@ -165,7 +170,8 @@ export const labelTrendChartOptions = (data) => { }, { name: "Error Rate", - data: data.errorRate, + visible: data.chartSettings.errorRate, + data: data.chartSeries.errorRate, tooltip: { valueSuffix: " %" }, @@ -176,7 +182,8 @@ export const labelTrendChartOptions = (data) => { { name: "Virtual Users", type: "spline", - data: data.threads, + data: data.chartSeries.virtualUsers, + visible: data.chartSettings.virtualUsers, tooltip: { valueSuffix: " VU" }, diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.ts b/src/app/item-detail/analyze-charts/analyze-charts.component.ts index 61a0fb52..ee4c8c1d 100644 --- a/src/app/item-detail/analyze-charts/analyze-charts.component.ts +++ b/src/app/item-detail/analyze-charts/analyze-charts.component.ts @@ -9,6 +9,7 @@ import { AnalyzeChartService } from "../../analyze-chart.service"; templateUrl: "./analyze-charts.component.html", styleUrls: ["./analyze-charts.component.css", "../item-detail.component.scss"] }) + export class AnalyzeChartsComponent implements OnInit { @Input() params: { projectName: string, scenarioName: string, id: string }; diff --git a/src/app/item-detail/label-trend/label-trend.component.ts b/src/app/item-detail/label-trend/label-trend.component.ts index 07b3c26f..c90ec6b4 100644 --- a/src/app/item-detail/label-trend/label-trend.component.ts +++ b/src/app/item-detail/label-trend/label-trend.component.ts @@ -66,7 +66,7 @@ export class LabelTrendComponent { virtualUsers } ).subscribe((_) => { - this.labelChartOption = _.timePoints.length >= 2 ? labelTrendChartOptions(_) : emptyChart(); + this.labelChartOption = _.chartSeries.timePoints.length >= 2 ? labelTrendChartOptions(_) : emptyChart(); this.updateFlag = true; }); } diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts index 612ca59f..f542b696 100644 --- a/src/app/items.service.model.ts +++ b/src/app/items.service.model.ts @@ -222,14 +222,31 @@ export interface ProjectsOverallStats { } export interface LabelTrend { - timePoints: string[]; - errorRate: number[]; - id: string; - n0: number[]; - n5: number[]; - n9: number[]; - throughput: number[]; - threads: number[]; + chartSeries: { + timePoints: string[]; + errorRate: number[]; + id: string; + p90: number[]; + p95: number[]; + p99: number[]; + throughput: number[]; + virtualUsers: number[]; + avgLatency: number[], + avgConnectionTime: number[], + avgResponseTime: number[], + }, + chartSettings: { + virtualUsers: boolean, + throughput: boolean, + avgLatency: boolean, + avgConnectionTime: boolean, + avgResponseTime: boolean, + p90: boolean, + p95: boolean, + p99: boolean, + errorRate: boolean, + } + } export interface LabelMaxVu { diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.html b/src/app/scenario/scenario-settings/scenario-settings.component.html index d6837181..9bfd6d2a 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.html +++ b/src/app/scenario/scenario-settings/scenario-settings.component.html @@ -166,6 +166,70 @@
Generate share token automatically
+ + + + + + +
  • + Label Trend Chart Settings + +
    +
    +
    + The selected metrics will get pre-set in label trend chart.
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + + diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.ts b/src/app/scenario/scenario-settings/scenario-settings.component.ts index 3bd3adef..bdcf46bc 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.ts +++ b/src/app/scenario/scenario-settings/scenario-settings.component.ts @@ -19,6 +19,7 @@ export class SettingsScenarioComponent implements OnInit { scenarioSettingsForm: FormGroup; + labelTrendChartSettingsForm: FormGroup; formControls = { scenarioName: null, analysisEnabled: null, @@ -33,8 +34,20 @@ export class SettingsScenarioComponent implements OnInit { term: null, operator: null, }; + labelTrendChartControls = { + virtualUsers: null, + throughput: null, + p90: null, + p95: null, + p99: null, + avgResponseTime: null, + avgConnectionTime: null, + avgLatency: null, + errorRate: null, + } labelFilterControls = {} + params; keepTestRunPeriods = [ @@ -129,6 +142,16 @@ export class SettingsScenarioComponent implements OnInit { this.formControls.generateShareToken = new FormControl(settings.generateShareToken, [ Validators.required ]) + + this.labelTrendChartControls.virtualUsers = new FormControl(settings.labelTrendChartSettings?.virtualUsers, []); + this.labelTrendChartControls.throughput = new FormControl(settings.labelTrendChartSettings?.throughput, []); + this.labelTrendChartControls.avgConnectionTime = new FormControl(settings.labelTrendChartSettings?.avgConnectionTime, []); + this.labelTrendChartControls.avgLatency = new FormControl(settings.labelTrendChartSettings?.avgLatency, []); + this.labelTrendChartControls.avgResponseTime = new FormControl(settings.labelTrendChartSettings?.avgResponseTime, []); + this.labelTrendChartControls.p90 = new FormControl(settings.labelTrendChartSettings?.p90, []); + this.labelTrendChartControls.p95 = new FormControl(settings.labelTrendChartSettings?.p95, []); + this.labelTrendChartControls.p99 = new FormControl(settings.labelTrendChartSettings?.p99, []); + this.labelTrendChartControls.errorRate = new FormControl(settings.labelTrendChartSettings?.errorRate, []); } @@ -145,6 +168,18 @@ export class SettingsScenarioComponent implements OnInit { keepTestRunsPeriod: this.formControls.keepTestRunsPeriod, generateShareToken: this.formControls.generateShareToken, }); + + this.labelTrendChartSettingsForm = new FormGroup({ + virtualUsers: this.labelTrendChartControls.virtualUsers, + throughput: this.labelTrendChartControls.throughput, + avgConnectionTime: this.labelTrendChartControls.avgConnectionTime, + avgLatency: this.labelTrendChartControls.avgLatency, + avgResponseTime: this.labelTrendChartControls.avgResponseTime, + p90: this.labelTrendChartControls.p90, + p95: this.labelTrendChartControls.p95, + p99: this.labelTrendChartControls.p99, + errorRate: this.labelTrendChartControls.errorRate, + }) } open(content) { @@ -152,13 +187,14 @@ export class SettingsScenarioComponent implements OnInit { } onSubmit() { - if (this.scenarioSettingsForm.valid && this.labelFilters.valid) { + if (this.scenarioSettingsForm.valid && this.labelFilters.valid && this.labelTrendChartSettingsForm.valid) { const { scenarioName, analysisEnabled, thresholdEnabled, thresholdErrorRate, thresholdPercentile, thresholdThroughput, deleteSamples, zeroErrorToleranceEnabled, keepTestRunsPeriod, generateShareToken } = this.scenarioSettingsForm.value; + console.log(this.labelTrendChartSettingsForm.value) const { projectName, scenarioName: currentScenarioName } = this.params; const body = { scenarioName, @@ -173,7 +209,8 @@ export class SettingsScenarioComponent implements OnInit { throughput: parseFloat(thresholdThroughput), percentile: parseFloat(thresholdPercentile) }, - labelFilterSettings: this.labelFilters.value.map(filter => ({ labelTerm: filter[0], operator: filter[1] })) + labelFilterSettings: this.labelFilters.value.map(filter => ({ labelTerm: filter[0], operator: filter[1] })), + labelTrendChartSettings: this.labelTrendChartSettingsForm.value }; this.scenarioApiService.updateScenario(projectName, currentScenarioName, body)