scenario trends (#307)

ludeknovy · Feb 27, 2023 · 64ddd9b · 64ddd9b
1 parent 1c22b12
commit 64ddd9b
Show file tree

Hide file tree

Showing 16 changed files with 482 additions and 50 deletions.
diff --git a/src/app/graphs/item-detail.ts b/src/app/graphs/item-detail.ts
@@ -26,7 +26,7 @@ export const commonGraphSettings: any = (text) => {
       },
     },
     title: {
-      text: ""
+      text: "",
     },
     colors: ["#5DADE2", "#2ECC71", "#F4D03F", "#D98880",
       "#707B7C", "#7DCEA0", "#21618C", "#873600", "#AF7AC5", "#B7950B"],

diff --git a/src/app/graphs/scenario-trends.ts b/src/app/graphs/scenario-trends.ts
@@ -194,4 +194,73 @@ export const customScenarioTrends = () => {
   };
 };
 
-
+export const labelTrends: any = (text, title = "") => {
+  return {
+    chart: {
+      type: "line",
+      zoomType: "x",
+      marginTop: 50,
+      className: "chart-sync",
+    },
+    time: {
+      getTimezoneOffset: function (timestamp) {
+        const d = new Date();
+        const timezoneOffset = d.getTimezoneOffset();
+        return timezoneOffset;
+      }
+    },
+    exporting: {
+      buttons: {
+        contextButton: {
+          enabled: false
+        },
+      },
+    },
+    title: {
+      text: title,
+    },
+    colors: ["#5DADE2", "#2ECC71", "#F4D03F", "#D98880",
+      "#707B7C", "#7DCEA0", "#21618C", "#873600", "#AF7AC5", "#B7950B"],
+    tooltip: {
+      split: true,
+      crosshairs: [true],
+      valueSuffix: ` ${text}`,
+      valueDecimals: 2,
+    },
+    plotOptions: {
+      series: {
+        connectNulls: true,
+      },
+      line: {
+        lineWidth: 1.5,
+        states: {
+          hover: {
+            lineWidth: 1.5
+          }
+        },
+        marker: {
+          enabled: false
+        },
+      }
+    },
+    xAxis: {
+      lineWidth: 0,
+      type: "category",
+      uniqueNames: true,
+      crosshair: {
+        snap: true
+      },
+      labels: {
+        enabled: false
+      }
+    },
+    yAxis: [{
+      gridLineColor: "#f2f2f2",
+      lineWidth: 0,
+      title: {
+        text
+      },
+    },
+    ],
+  };
+};
diff --git a/src/app/item-detail/label-chart/label-chart.component.ts b/src/app/item-detail/label-chart/label-chart.component.ts
@@ -113,7 +113,6 @@ export class LabelChartComponent implements OnChanges {
       this.componentRef.chart = null;
     }
     this.labelChartOptions = deepmerge(this.labelCharts.get(this.chartMetric), {});
-    console.log(this.labelChartOptions)
     this.updateLabelChartFlag = true;
   }
 

diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts
@@ -176,6 +176,29 @@ export interface ScenarioTrendsData {
   id: string;
 }
 
+export interface LabelTrendsData {
+  labelStats: [{
+    avgResponseTime: number
+    bytesPerSecond: number
+    bytesSentPerSecond: number
+    connect: number
+    errorRate: number
+    label: string
+    latency: number
+    maxResponseTime: number
+    medianResponseTime: number
+    minResponseTime: number
+    n0: number
+    n5: number
+    n9: number
+    samples: number
+    throughput: number
+  },]
+  id: string,
+  startDate: string
+
+}
+
 export interface ItemHistoryDetail {
   label: string;
   samples: number;
@@ -294,3 +317,12 @@ export interface ResponseTimePerLabelDistribution {
   label: string
   values: number[]
 }
+
+export interface ScenarioTrendsUserSettings {
+  aggregatedTrends: boolean
+  labelMetrics: {
+    errorRate: boolean
+    percentile90: boolean
+    throughput: boolean
+  }
+}
diff --git a/src/app/notification/notification-messages.ts b/src/app/notification/notification-messages.ts
@@ -78,8 +78,8 @@ export class NotificationMessage {
     return this.statusCodeMessage(response, "Link was deleted");
   }
 
-  scenarioThresholdUpdate(response) {
-    return this.statusCodeMessage(response, "Thresholds were updated");
+  scenarioTrendsSettingsNotification(response) {
+    return this.statusCodeMessage(response, "Scenario trend settings updated");
   }
 
   appInitialization(response) {

diff --git a/src/app/scenario-api.service.ts b/src/app/scenario-api.service.ts
@@ -12,11 +12,13 @@ export class ScenarioApiService {
   private response = new BehaviorSubject<any>({});
   public response$ = this.response.asObservable();
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) {
+  }
 
   getScenario(projectName, scenarioName): Observable<Scenario> {
     return this.http.get<Scenario>(`projects/${projectName}/scenarios/${scenarioName}`);
   }
+
   updateScenario(projectName, scenarioName, body): Observable<Record<string, any>> {
     return this.http.put(`projects/${projectName}/scenarios/${scenarioName}`, body, { observe: "response" });
   }
@@ -50,12 +52,8 @@ export class ScenarioApiService {
     return this.http.post(`projects/${projectName}/scenarios/${scenarioName}/notifications`, body, { observe: "response" });
   }
 
-  fetchThresholds(projectName, scenarioName) {
-    return this.http.get(`projects/${projectName}/scenarios/${scenarioName}/thresholds`);
-  }
-
-  updateThresholds(projectName, scenarioName, body) {
-    return this.http.put(`projects/${projectName}/scenarios/${scenarioName}/thresholds`, body, { observe: "response" });
+  updateScenarioTrendsSettings(projectName, scenarioName, body): Observable<unknown> {
+    return this.http.post(`projects/${projectName}/scenarios/${scenarioName}/trends/settings`, body, { observe: "response" });
   }
 
   setData(data) {

diff --git a/src/app/scenario.service.ts b/src/app/scenario.service.ts
@@ -30,4 +30,8 @@ export class ScenarioService {
       .subscribe(_ => this.notifications.next(_));
   }
 
+  updateScenarioTrends(value) {
+    this.trends.next(value)
+  }
+
 }
diff --git a/.../scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.css b/.../scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.css
diff --git a/...scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.html b/...scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.html
@@ -0,0 +1,76 @@
+<ng-template #content let-modal>
+  <div class="modal-header">
+    <h5 class="modal-title" id="modal-basic-title">Scenario Trends Settings</h5>
+    <button type="button" style="outline: none;" class="close" aria-label="Close"
+            (click)="modal.dismiss('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body">
+
+
+    <form [formGroup]="scenarioTrendsSettingsForm" (ngSubmit)="onSubmit()" class="pl-3">
+
+      <div class="form-group pt-3">
+        <h6>Scenario Chart</h6>
+      </div>
+
+      <div class="custom-control custom-radio custom-control-inline">
+        <input type="radio" id="aggregatedTrends" value="true" name="aggregatedTrends" class="custom-control-input"
+               formControlName="aggregatedTrends">
+        <label class="custom-control-label" for="aggregatedTrends">Aggregated Trends</label>
+      </div>
+      <div class="custom-control custom-radio custom-control-inline">
+        <input type="radio" id="labelTrends" value="false" name="aggregatedTrends" class="custom-control-input"
+               formControlName="aggregatedTrends">
+        <label class="custom-control-label" for="labelTrends">Label Trends</label>
+      </div>
+
+
+      <hr class="mt-4">
+
+
+      <div class="form-sub pt-2">
+        <h6>Label Trend Metric</h6>
+        <div class="text-secondary mb-2"><i class="fas fa-info-circle"> </i>
+          <small> Please, choose up to 2 metric you would like to be displayed.</small></div>
+
+        <div class="form-control-feedback"
+             *ngIf="metricsEditable && (scenarioTrendsSettingsForm.dirty || scenarioTrendsSettingsForm.touched)">
+          <p class="form-validation-error" *ngIf="metricsEditable">Please, make sure max 2 metrics are selected.</p>
+        </div>
+
+        <div class="form-group">
+          <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="errorRate"
+                   formControlName="errorRate" (change)="onCheckboxChange()">
+            <label class="custom-control-label" for="errorRate">Error Rate</label>
+          </div>
+
+          <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="percentile"
+                   formControlName="percentile90" (change)="onCheckboxChange()">
+            <label class="custom-control-label" for="percentile">90% Percentile</label>
+          </div>
+          <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="throughput"
+                   formControlName="throughput" (change)="onCheckboxChange()">
+            <label class="custom-control-label" for="throughput">Throughput</label>
+          </div>
+
+        </div>
+      </div>
+
+
+      <div class="modal-footer">
+        <button type="submit" [disabled]="metricsEditable" class="btn btn-primary">Submit</button>
+      </div>
+    </form>
+  </div>
+
+</ng-template>
+
+<button *userRole="'operator'" class="jtl-no-glow add-item jtl-btn-light btn btn-sm" (click)="open(content)"
+        ngbDropdownItem>Settings
+</button>
diff --git a/...nario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.spec.ts b/...nario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.spec.ts
@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { ScenarioTrendsSettingsComponent } from "./scenario-trends-settings.component";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+
+describe("ScenarioTrendsSettingsComponent", () => {
+  let component: ScenarioTrendsSettingsComponent;
+  let fixture: ComponentFixture<ScenarioTrendsSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ScenarioTrendsSettingsComponent],
+      imports: [HttpClientTestingModule]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScenarioTrendsSettingsComponent);
+    component = fixture.componentInstance;
+    component.userSettings = {
+      aggregatedTrends: true,
+      labelMetrics: {
+        percentile90: true,
+        errorRate: true,
+        throughput: false,
+      }
+    }
+    component.params = { scenarioName: "test", projectName: "test" };
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});