Skip to content

Commit

Permalink
New Features:
Browse files Browse the repository at this point in the history 
1. Http number of requests
2.Http codes
New Pages:
1. Load Test Chooser Page
Bugs Corrected:
To Be Corrected:
0. On product delete, delete trace results
1. On product delete, delete flamegraph result
  • Loading branch information
@juanfranciscocis
juanfranciscocis committed Sep 18, 2024
1 parent b64eb9c commit aa3b23c
Show file tree
Hide file tree
Showing 12 changed files with 200 additions and 46 deletions.
4 changes: 0 additions & 4 deletions src/app/pages/load_test/load-test-chooser/load-test-chooser.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,5 @@
</ion-card>
</ion-col>
</ion-row>
<app-title [title]="'Status Codes'"></app-title>
<ion-row class="lg:m-10 md:m-10">
</ion-row>

</ion-grid>
</ion-content>
16 changes: 9 additions & 7 deletions src/app/pages/load_test/load-test/load-test.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,17 @@ import { LoadTestPageRoutingModule } from './load-test-routing.module';

import { LoadTestPage } from './load-test.page';
import {ComponentsModule} from "../../../components/components.module";
import {NgxEchartsDirective} from "ngx-echarts";

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LoadTestPageRoutingModule,
ComponentsModule
],
imports: [
CommonModule,
FormsModule,
IonicModule,
LoadTestPageRoutingModule,
ComponentsModule,
NgxEchartsDirective
],
declarations: [LoadTestPage]
})
export class LoadTestPageModule {}
29 changes: 28 additions & 1 deletion src/app/pages/load_test/load-test/load-test.page.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<app-header-return [title]="'Load Test'"></app-header-return>
<app-header-return [title]="'Load Test For '+ productStep"></app-header-return>
<ion-content [fullscreen]="true">
<ion-grid>
<app-title [title]="'New Load Test'"></app-title>
Expand All @@ -12,5 +12,32 @@
<ion-button class="" (click)="sendRequest()" color="primary" size="small">Load Target <ion-icon name="add"></ion-icon></ion-button>
</ion-col>
</ion-row>

<app-title [title]="'Analytics For '+ productStep"></app-title>

<ion-row class="lg:m-10 md:m-10">
<ion-card class="w-full p-6 flex flex-col justify-center items-center">
<ion-card-header>
<ion-card-title class="text-3xl">Total Number of Requests</ion-card-title>
</ion-card-header>
<ion-card-content>
<h1 class="text-2xl text-white">{{ totalNumberOfRequests | number:'1.0-0' }}</h1>
</ion-card-content>
</ion-card>
</ion-row>


<ion-row class="lg:m-10 md:m-10">
<ion-card class="w-full p-6 flex flex-col justify-center items-center">
<ion-card-header>
<ion-card-title class="text-3xl">HTTP Status Codes</ion-card-title>
</ion-card-header>
<ion-card-content class="h-[25em] w-full">
<div id="httpCodesChart" echarts [options]="statusCodesOptions" class="demo-chart h-full w-full"></div>
</ion-card-content>
</ion-card>
</ion-row>


</ion-grid>
</ion-content>
182 changes: 158 additions & 24 deletions src/app/pages/load_test/load-test/load-test.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {ActivatedRoute, Router} from "@angular/router";
import {LoadTestService} from "../../../services/load-test.service";
import {AlertController, LoadingController} from "@ionic/angular";
import {ArtilleryData} from "../../../classes/artillery-data";
import {EChartsOption} from "echarts";

@Component({
selector: 'app-load-test',
Expand All @@ -21,6 +22,22 @@ export class LoadTestPage implements OnInit {
description: string = '';

loadTestResults: ArtilleryData = {}
statusCodesOptions: EChartsOption = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [] // This will be populated with test titles
},
yAxis: {
type: 'value'
},
series: [
]
}
totalNumberOfRequests: number = 0;

constructor(
private router: Router,
Expand All @@ -37,6 +54,7 @@ export class LoadTestPage implements OnInit {
this.getParams();
await this.getHistoryResults().then(() => {
this.byCodes();
this.totalRequests();
});
}

Expand All @@ -54,14 +72,7 @@ export class LoadTestPage implements OnInit {
}


async getHistoryResults() {
await this.showLoading();
await this.loadTestService.getLoadTestHistory(this.orgName, this.productObjective, this.productStep).then((data) => {
this.loadTestResults = data as ArtilleryData;
console.log(this.loadTestResults);
});
await this.hideLoading();
}



async sendRequest() {
Expand All @@ -85,34 +96,156 @@ export class LoadTestPage implements OnInit {
}


byCodes(){

async getHistoryResults() {
await this.showLoading();
await this.loadTestService.getLoadTestHistory(this.orgName, this.productObjective, this.productStep).then((data) => {
this.loadTestResults = data as ArtilleryData;
console.log(this.loadTestResults);
});
await this.hideLoading();
}
totalRequests() {
let keys = Object.keys(this.loadTestResults);
let requests: Record<string, Record<string, number>> = {};
console.log(keys);
let totalRequests = 0;
// Itera sobre las claves de los resultados del test
for (let key of keys) {
// @ts-ignore: Extrae los contadores de los resultados agregados
let data = this.loadTestResults[key].aggregate.counters;
// @ts-ignore: Extrae la fecha del resultado
let date = this.loadTestResults[key].date;
// Filtra las claves que empiezan con "http.requests."
let httpCodesKeys = Object.keys(data).filter(keyCode => keyCode.startsWith('http.requests'));

for (let keyCode of httpCodesKeys) {
if (!requests[date]) {
requests[date] = {};
}
// Suma los valores si ya existen en la misma fecha
requests[date][keyCode] = (requests[date][keyCode] || 0) + data[keyCode];
}
}

let codes = {};
for (let date of Object.keys(requests)) {
totalRequests += requests[date]['http.requests'];
}
this.totalNumberOfRequests = totalRequests;
console.log(this.totalNumberOfRequests);

}
byCodes() {
let keys = Object.keys(this.loadTestResults);
let codes: Record<string, Record<string, number>> = {};

// Itera sobre las claves de los resultados del test
for (let key of keys) {
// @ts-ignore
// @ts-ignore: Extrae los contadores de los resultados agregados
let data = this.loadTestResults[key].aggregate.counters;
// @ts-ignore
// @ts-ignore: Extrae la fecha del resultado
let date = this.loadTestResults[key].date;
//get all keys that start with http.codes.
let keys = Object.keys(data);

// Filtra las claves que empiezan con "http.codes."
let httpCodesKeys = Object.keys(data).filter(keyCode => keyCode.startsWith('http.codes.'));

for (let keyCode of keys) {
if (keyCode.startsWith('http.codes.')) {
// @ts-ignore
if (!codes[date]) {
// @ts-ignore
codes[date] = {};
for (let keyCode of httpCodesKeys) {
if (!codes[date]) {
codes[date] = {};
}
// @ts-ignore
codes[date][keyCode] = data[keyCode];
// Suma los valores si ya existen en la misma fecha
codes[date][keyCode] = (codes[date][keyCode] || 0) + data[keyCode];
}
}

// Diccionario modificado para agrupar por fecha
const modifiedDict: Record<string, Record<string, number>> = {};

// Agrupa y suma los códigos HTTP por fecha
Object.entries(codes).forEach(([timestamp, codes]) => {
// Extrae solo la fecha (año-mes-día)
const date = timestamp.split('-').slice(0, 3).join('-');

if (!modifiedDict[date]) {
modifiedDict[date] = {};
}

// Suma los códigos HTTP en el nuevo diccionario
Object.entries(codes).forEach(([code, value]) => {
if (modifiedDict[date][code]) {
modifiedDict[date][code] += value;
} else {
if (typeof value === "number") {
modifiedDict[date][code] = value;
}
}
});
});


// Ordena las fechas en modifiedDict
const sortedDates = Object.keys(modifiedDict).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());

// Prepara las series para el gráfico
let statusCodes = new Set<string>();
for (let status in modifiedDict) {
for (let code in modifiedDict[status]) {
statusCodes.add(code);
}
}

// Inicializa las series para el gráfico
this.statusCodesOptions.series = [];
for (let status of statusCodes) {
let seriesData: number[] = [];

// Llena los datos por cada fecha
sortedDates.forEach(date => {
seriesData.push(modifiedDict[date][status] || 0);
});

// Asigna el color en función del rango del código HTTP
let statusCodeNumber = parseInt(status.split('.')[2], 10); // Extraer el número de código HTTP

let color: string;
if (statusCodeNumber < 300) {
color = '#00c600'; // Verde para códigos 2xx
} else if (statusCodeNumber < 400) {
color = '#0080ff'; // Azul para códigos 3xx
} else if (statusCodeNumber < 500) {
color = '#e41313'; // Rojo para códigos 4xx
} else {
color = '#ff7300'; // Naranja para códigos 5xx
}

console.log(codes);
// Añade la serie al gráfico con el color correspondiente
this.statusCodesOptions.series.push({
name: status,
type: 'line',
data: seriesData,
lineStyle: {
color: color
},
itemStyle: {
color: color
}
});
}

// Actualiza las etiquetas del eje X (fechas) con las fechas ordenadas
// @ts-ignore
this.statusCodesOptions.xAxis.data = sortedDates;


// Fuerza la actualización del gráfico
this.statusCodesOptions = { ...this.statusCodesOptions };


//get the eleement by id unitChart
let httpCodesChart = document.getElementById('httpCodesChart');
//change width and height
httpCodesChart!.style.width = '100%';
httpCodesChart!.style.height = '25em';


}

Expand All @@ -126,6 +259,7 @@ export class LoadTestPage implements OnInit {




/**
* Show a loading spinner.
*/
Expand Down
5 changes: 0 additions & 5 deletions src/app/pages/software_testing/software-testing-chooser/software-testing-chooser.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -549,11 +549,6 @@ export class SoftwareTestingChooserPage implements OnInit {
integrationChart!.style.width = '100%';
integrationChart!.style.height = '25em';






}
async graphSystemTests() {
const filteredData = await this.calculateGraphDataSystemTests();
Expand Down
Loading

0 comments on commit aa3b23c

Please sign in to comment.