status codes (#299)

ludeknovy · Jan 21, 2023 · d37e5e7 · d37e5e7
1 parent 1802e4b
commit d37e5e7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 23 deletions.
diff --git a/src/app/_services/item-chart.service.ts b/src/app/_services/item-chart.service.ts
@@ -23,17 +23,19 @@ export class ItemChartService {
       threads, overallTimeResponse,
       overallThroughput, overAllFailRate, overAllNetworkV2,
       responseTime, throughput, networkV2, minResponseTime, maxResponseTime, percentile90,
-      percentile95, percentile99,
+      percentile95, percentile99, statusCodes
     } = plot;
 
     const threadLine = { ...threadLineSettings, name: "virtual users", data: threads, tooltip: { valueSuffix: "" } };
     const errorLine = { ...errorLineSettings, ...overAllFailRate, tooltip: { valueSuffix: " %" } };
     const throughputLine = { ...throughputLineSettings, ...overallThroughput, tooltip: { valueSuffix: " reqs/s" } };
 
-    const chartLines = {   
+    const chartLines = {
       overall: new Map(),
-      labels: new Map()
+      labels: new Map(),
+      statusCodes: new Map()
      }
+     // full chart configs
     const labelCharts = new Map()
 
     if (overAllNetworkV2) {
@@ -44,6 +46,11 @@ export class ItemChartService {
       chartLines.overall.set(Metrics.Network, networkLine);
     }
 
+    // not all reports have status code plot data
+    if (statusCodes) {
+      chartLines.statusCodes.set(Metrics.StatusCodeInTime, { data: statusCodes })
+    }
+
     chartLines.overall.set(Metrics.ResponseTimeAvg, { ...overallTimeResponse, tooltip: { valueSuffix: " ms" } });
     chartLines.overall.set(Metrics.Threads, threadLine);
     chartLines.overall.set(Metrics.ErrorRate, errorLine);

diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
@@ -291,21 +291,14 @@ <h6 class="card-header bg-white border-0">Summary</h6>
 
 
 
-
-
-
-
-
-
-
     <div class="row middle-control">
       <div class="col">
         <ul ngbNav #nav="ngbNav" class="nav-tabs justify-content-center" [destroyOnHide]="false" [(activeId)]="activeId" >
           <li ngbNavItem [ngbNavItem]="1">
             <a ngbNavLink class="nav-link bg-transparent">Overview charts</a>
             <ng-template ngbNavContent>
               <div class="row charts">
-                <div class="col tab-charts">
+                <div class="col tab-charts overallChart">
                   <div class="card overview-chart-card card-shadow">
                     <h6 class="card-header bg-transparent">Overall Chart</h6>
                     <div class="card-body">
@@ -317,6 +310,18 @@ <h6 class="card-header bg-transparent">Overall Chart</h6>
                     </div>
                   </div>
                 </div>
+                <div class="col tab-charts chart" *ngIf="statusChartOptions">
+                  <div class="card overview-chart-card card-shadow">
+                    <h6 class="card-header bg-transparent">Status Codes Chart</h6>
+                    <div class="card-body">
+                      <div class="chart">
+                        <highcharts-chart [Highcharts]="Highcharts" [options]="statusChartOptions" [callbackFunction]="chartCallback"
+                                          [(update)]="updateChartFlag" style="width: 100%; height: 350px; display: block;">
+                        </highcharts-chart>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div class="row">
                 <div class="col tab-charts">

diff --git a/src/app/item-detail/item-detail.component.scss b/src/app/item-detail/item-detail.component.scss
@@ -274,10 +274,6 @@ thead .hd {
   margin-left: 10px;
 }
 
-.overview-chart-card {
-  margin-top: 20px;
-}
-
 .nav-link {
   color: black;
   border: none;
@@ -309,3 +305,7 @@ thead .hd {
 .summary-bold {
   font-weight: 500;
 }
+
+.overallChart {
+  margin-top: 20px;
+}
diff --git a/src/app/item-detail/item-detail.component.ts b/src/app/item-detail/item-detail.component.ts
@@ -6,10 +6,7 @@ import { NgxSpinnerService } from "ngx-spinner";
 import { DecimalPipe } from "@angular/common";
 import * as Highcharts from "highcharts";
 import exporting from "highcharts/modules/exporting";
-
-exporting(Highcharts);
-
-import { overallChartSettings } from "../graphs/item-detail";
+import { commonGraphSettings, overallChartSettings } from "../graphs/item-detail";
 import { catchError, withLatestFrom } from "rxjs/operators";
 import { of } from "rxjs";
 import { SharedMainBarService } from "../shared-main-bar.service";
@@ -20,6 +17,8 @@ import { Metrics } from "./metrics";
 import { AnalyzeChartService } from "../analyze-chart.service";
 import { showZeroErrorWarning } from "../utils/showZeroErrorTolerance";
 import { ItemChartService } from "../_services/item-chart.service";
+exporting(Highcharts);
+
 
 @Component({
   selector: "app-item-detail",
@@ -52,6 +51,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     userSettings: null,
   };
   overallChartOptions;
+  statusChartOptions;
   updateChartFlag = false;
   monitoringChart;
   itemParams;
@@ -108,6 +108,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
         this.itemData = results;
         this.monitoringAlerts();
         this.itemChartService.setCurrentPlot(this.itemData.plot)
+        this.selectedPlotSubscription()
         this.calculateTotalRequests();
         this.spinner.hide();
       });
@@ -121,23 +122,38 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
       ...overallChartSettings("ms")
     };
 
+
+
+
+
+  }
+
+  ngOnDestroy() {
+    this.toastr.clear();
+  }
+
+  private selectedPlotSubscription () {
     this.itemChartService.selectedPlot$.subscribe((value) => {
       this.chartLines = value.chartLines;
 
       if (this.chartLines) {
         const overallChartSeries = Array.from(this.chartLines?.overall?.values());
         this.overallChartOptions.series = JSON.parse(JSON.stringify(overallChartSeries))
 
+        if (this.chartLines?.statusCodes?.has(Metrics.StatusCodeInTime)){
+          // initialize the chart options only when there are the status codes data
+          this.statusChartOptions = {
+            ...commonGraphSettings("")
+          }
+          const statusCodesLines = this.chartLines?.statusCodes.get(Metrics.StatusCodeInTime)
+          this.statusChartOptions.series = JSON.parse(JSON.stringify(statusCodesLines.data))
+        }
       }
 
       this.updateChartFlag = true
     });
   }
 
-  ngOnDestroy() {
-    this.toastr.clear();
-  }
-
   private calculateTotalRequests() {
     this.totalRequests = this.itemData.statistics.reduce((accumulator, currentValue) => {
       return accumulator + currentValue.samples;

diff --git a/src/app/item-detail/metrics.ts b/src/app/item-detail/metrics.ts
@@ -9,4 +9,5 @@ export enum Metrics {
   ResponseTimeP90 = "Response Time [P90]",
   ResponseTimeP95 = "Response Time [P95]",
   ResponseTimeP99 = "Response Time [P99]",
+  StatusCodeInTime = "Status Code In Time"
 }