scenario environment filter (#330)

src/app/_interceptors/mock-interceptior.ts → src/app/_interceptors/mock-interceptor.ts

@@ -26,7 +26,18 @@ export class HttpRequestInterceptorMock implements HttpInterceptor {
       request.url.includes("projects/test-project/scenarios/test-scenario/items/test-item/custom-chart-settings")) {
       return of(new HttpResponse({ status: 200 }));
     }
-
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/environment")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/items")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/trends")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/processing-items")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
 
     return next.handle(request);
   }

src/app/_services/environment-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from "@angular/core/testing";
+
+import { EnvironmentService } from "./environment.service";
+
+describe("EnvironmentService", () => {
+  let service: EnvironmentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EnvironmentService);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/environment.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+  providedIn: "root"
+})
+export class EnvironmentService {
+
+  private environment = new BehaviorSubject<string>("");
+  public environment$ = this.environment.asObservable();
+
+
+  setEnvironment(value: string) {
+    this.environment.next(value);
+  }
+}

src/app/administration/api-token/api-keys.component.spec.ts

@@ -8,7 +8,7 @@ import { DeleteTokenComponent } from "./delete-token/delete-token.component";
 import { RouterTestingModule } from "@angular/router/testing";
 import { ReactiveFormsModule } from "@angular/forms";
 import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 
 
 describe("ApiKeysComponent", () => {

src/app/administration/users/users.component.spec.ts

@@ -9,7 +9,7 @@ import { ReactiveFormsModule } from "@angular/forms";
 import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 import { DeleteUserComponent } from "./delete-user/delete-user.component";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 
 
 

src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { FormsModule } from "@angular/forms";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { HighchartsChartModule } from "highcharts-angular";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 import { AddMetricComponent } from "./add-metric/add-metric.component";
 
 import { AnalyzeChartsComponent } from "./analyze-charts.component";

src/app/item-detail/share/share.component.spec.ts

@@ -3,7 +3,7 @@ import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 import { CreateNewShareLinkComponent } from "./create-new-share-link/create-new-share-link.component";
 import { DeleteShareLinkComponent } from "./delete-share-link/delete-share-link.component";
 

src/app/items-api.service.ts

@@ -69,8 +69,8 @@ export class ItemsApiService {
     this.response.next(data);
   }
 
-  fetchProcessingItems(projectName, scenarioName): Observable<[]> {
-    return this.http.get<[]>(`projects/${projectName}/scenarios/${scenarioName}/processing-items`);
+  fetchProcessingItems(projectName, scenarioName, queryParams): Observable<[]> {
+    return this.http.get<[]>(`projects/${projectName}/scenarios/${scenarioName}/processing-items`, { params: queryParams });
   }
 
   fetchItemShareTokens(projectName, scenarioName, itemId): Observable<[]> {

src/app/items.service.ts

@@ -1,14 +1,14 @@
 import { Injectable } from "@angular/core";
-import { BehaviorSubject, interval } from "rxjs";
+import { BehaviorSubject, interval, Observable, Subscription } from "rxjs";
 import { Items } from "./items.service.model";
 import { ItemsApiService } from "./items-api.service";
+import { EnvironmentService } from "./_services/environment.service";
 
 @Injectable({
   providedIn: "root"
 })
 
 export class ItemsService {
-  public interval;
 
   private processingItems = new BehaviorSubject<[]>([]);
   public processingItems$ = this.processingItems.asObservable();
@@ -19,28 +19,50 @@ export class ItemsService {
   private shareTokens = new BehaviorSubject<[]>([]);
   public shareTokens$ = this.shareTokens.asObservable();
 
+  public intervalSubscription: Subscription;
+
+  private environment: string;
+
+
   constructor(
-    private itemsApiService: ItemsApiService
-  ) { }
+    private itemsApiService: ItemsApiService,
+    private environmentService: EnvironmentService,
+  ) {
+    this.environmentService.environment$.subscribe(value => {
+        this.environment = value;
+    })
+  }
 
-  fetchItems(projectName, scenarioName, query = { limit: 15, offset: 0 }) {
-    this.itemsApiService.fetchItems(projectName, scenarioName, query)
+  fetchItems(projectName, scenarioName, query: ItemsQuery = { limit: 15, offset: 0 }) {
+
+    const queryParams = { ...query, environment: this.environment };
+    this.itemsApiService.fetchItems(projectName, scenarioName, queryParams)
       .subscribe(_ => this.items.next(_));
   }
 
-  fetchProcessingItems(projectName, scenarioName) {
-    return this.itemsApiService.fetchProcessingItems(projectName, scenarioName).subscribe((_) => this.processingItems.next(_));
+  fetchProcessingItems(projectName, scenarioName, queryParams) {
+    return this.itemsApiService.fetchProcessingItems(projectName, scenarioName, queryParams).subscribe((_) => this.processingItems.next(_));
   }
 
-  processingItemsInterval(projectName, scenarioName) {
-    this.fetchProcessingItems(projectName, scenarioName);
-    this.interval = interval(5000).subscribe(() => {
-      return this.fetchProcessingItems(projectName, scenarioName);
+  setProcessingItemsIntervalSubscription(projectName, scenarioName) {
+    this.fetchProcessingItems(projectName, scenarioName, { environment: this.environment });
+    if (this.intervalSubscription) {
+      this.intervalSubscription.unsubscribe();
+    }
+    this.intervalSubscription = interval(5000).subscribe(() => {
+      return this.fetchProcessingItems(projectName, scenarioName, { environment: this.environment });
     });
   }
 
   fetchItemShareTokens(projectName, scenarioName, itemId) {
     this.itemsApiService.fetchItemShareTokens(projectName, scenarioName, itemId).subscribe((_) => this.shareTokens.next(_));
   }
 
+
+}
+
+interface ItemsQuery {
+  limit: number,
+  offset: number,
+  environment?: string
 }

src/app/scenario-api.service.ts

@@ -31,9 +31,14 @@ export class ScenarioApiService {
     return this.http.get<IScenarios[]>(`projects/${projectName}/scenarios`);
   }
 
-  fetchScenarioTrend(projectName, scenarioName): Observable<any[]> {
+  fetchScenarioTrend(projectName, scenarioName, params?): Observable<any[]> {
     return this.http.get<any[]>(
-      `projects/${projectName}/scenarios/${scenarioName}/trends`);
+      `projects/${projectName}/scenarios/${scenarioName}/trends`, { params });
+  }
+
+  fetchScenarioEnvironments(projectName, scenarioName): Observable<any> {
+    return this.http.get<any>(
+      `projects/${projectName}/scenarios/${scenarioName}/environment`);
   }
 
   createNewScenario(projectName, body): Observable<Record<string, any>> {

src/app/scenario.service.spec.ts

@@ -2,11 +2,12 @@ import { TestBed } from "@angular/core/testing";
 
 import { ScenarioService } from "./scenario.service";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { HttpClientModule } from "@angular/common/http";
 
 describe("ScenarioService", () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [
-      HttpClientTestingModule
+      HttpClientTestingModule,
     ],
   }));
 

src/app/scenario.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 import { ScenarioNotifications } from "./items.service.model";
 import { ScenarioApiService } from "./scenario-api.service";
+import { EnvironmentService } from "./_services/environment.service";
 
 @Injectable({
   providedIn: "root"
@@ -12,16 +13,26 @@ export class ScenarioService {
   private trends = new BehaviorSubject<Record<string, any>>({});
   public trends$ = this.trends.asObservable();
 
+  private environments = new BehaviorSubject<Array<string>>([]);
+  public environments$ = this.environments.asObservable();
+
   private notifications = new BehaviorSubject<ScenarioNotifications[]>([]);
   public notifications$ = this.notifications.asObservable();
+  private environment: string;
 
   constructor(
-    private scenarioApiService: ScenarioApiService
-  ) { }
+    private scenarioApiService: ScenarioApiService,
+    private environmentService: EnvironmentService
+  ) {
+    this.environmentService.environment$.subscribe(value => {
+      this.environment = value;
+    })
+  }
 
 
   fetchScenarioTrends(projectName, scenarioName) {
-    this.scenarioApiService.fetchScenarioTrend(projectName, scenarioName)
+    const queryParams = { environment: this.environment };
+    this.scenarioApiService.fetchScenarioTrend(projectName, scenarioName, queryParams)
       .subscribe(_ => this.trends.next(_));
   }
 
@@ -30,8 +41,13 @@ export class ScenarioService {
       .subscribe(_ => this.notifications.next(_));
   }
 
+  fetchEnvironments(projectName, scenarioName) {
+    this.scenarioApiService.fetchScenarioEnvironments(projectName, scenarioName)
+      .subscribe(_ => this.environments.next(_));
+  }
+
   updateScenarioTrends(value) {
-    this.trends.next(value)
+    this.trends.next(value);
   }
 
 }

src/app/scenario/add-new-item/add-new-item.component.ts

@@ -107,8 +107,6 @@ export class AddNewItemComponent implements OnInit {
         .pipe(catchError(r => of(r)))
         .subscribe(_ => {
           const message = this.notification.newTestItemNotificationMessage(_);
-          this.itemService.fetchProcessingItems(this.routeParams.projectName, this.routeParams.scenarioName);
-          this.scenarioService.fetchScenarioTrends(this.routeParams.projectName, this.routeParams.scenarioName);
           this.spinner.hide();
           return this.itemsApiService.setData(message);
         });

src/app/scenario/environments/environments.component.html

@@ -0,0 +1,9 @@
+<div ngbDropdown class="d-inline-block" *ngIf="$environments | async; let environments">
+  <button type="button" class="btn btn btn-sm jtl-no-glow" id="dropdownBasic1" ngbDropdownToggle>
+    {{selectedEnvironment || defaultEnvironment}}
+  </button>
+  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+    <button ngbDropdownItem *ngFor="let _ of environments" (click)="filterEnvironment(_)">{{_}}</button>
+    <button ngbDropdownItem (click)="filterEnvironment(defaultEnvironment)">{{defaultEnvironment}}</button>
+  </div>
+</div>

src/app/scenario/environments/environments.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { EnvironmentsComponent } from "./environments.component";
+import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
+import { HttpRequestInterceptorMock } from "../../_interceptors/mock-interceptor";
+
+describe("EnvironmentsComponent", () => {
+  let component: EnvironmentsComponent;
+  let fixture: ComponentFixture<EnvironmentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      declarations: [EnvironmentsComponent],
+      providers: [{
+        provide: HTTP_INTERCEPTORS,
+        useClass: HttpRequestInterceptorMock,
+        multi: true
+      }]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvironmentsComponent);
+    component = fixture.componentInstance;
+    component.params = { projectName: "test-project", scenarioName: "test-scenario" };
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/scenario/environments/environments.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
+import { ScenarioService } from "../../scenario.service";
+import { ItemsService } from "../../items.service";
+import { EnvironmentService } from "../../_services/environment.service";
+
+@Component({
+  selector: "app-environments",
+  templateUrl: "./environments.component.html",
+  styleUrls: ["./environments.component.css"]
+})
+export class EnvironmentsComponent implements OnInit {
+  $environments: Observable<Array<string>>;
+  selectedEnvironment: string;
+  defaultEnvironment = "All Environments";
+
+  @Input() params
+  constructor(
+    private scenarioService: ScenarioService,
+    private itemsService: ItemsService,
+    private environmentService: EnvironmentService,
+  ) {
+    this.$environments = scenarioService.environments$;
+  }
+
+  ngOnInit(): void {
+    this.scenarioService.fetchEnvironments(this.params.projectName, this.params.scenarioName);
+    this.reloadData("")
+
+  }
+  // reload data and set new subscription(s)
+  filterEnvironment(environment: string) {
+    this.selectedEnvironment = environment
+    const env = environment === this.defaultEnvironment ? "" : environment;
+    this.reloadData(env)
+
+  }
+
+  private reloadData(environment) {
+    this.environmentService.setEnvironment(environment)
+    this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: 15, offset: 0 });
+    this.scenarioService.fetchScenarioTrends(this.params.projectName, this.params.scenarioName)
+    this.itemsService.setProcessingItemsIntervalSubscription(this.params.projectName, this.params.scenarioName);
+  }
+
+}

src/app/scenario/external-notification/external-notification.component.spec.ts

@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { ReactiveFormsModule } from "@angular/forms";
 import { RouterTestingModule } from "@angular/router/testing";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 import { AddNewExternalNotificationComponent } from "./add-new-external-notification/add-new-external-notification.component";
 import { DeleteExternalNotificationComponent } from "./delete-external-notification/delete-external-notification.component";
 

src/app/scenario/scenario-settings/scenario-settings.component.ts

@@ -122,7 +122,6 @@ export class SettingsScenarioComponent implements OnInit {
     this.route.params.subscribe(_ => this.params = _);
     this.scenarioApiService.getScenario(this.params.projectName, this.params.scenarioName).subscribe(_ => {
       this.hasBaselineReport = !!_.baselineReport
-      console.log(this.hasBaselineReport)
       if (_.name) {
         this.createFormControls(_);
         this.createForm();

src/app/scenario/scenario-trends/scenario-trends.component.ts

@@ -153,7 +153,6 @@ export class ScenarioTrendsComponent implements OnInit {
     if (!degradationCurve) {
       return;
     }
-    console.log(degradationCurve);
     this.responseTimeDegradationChartOption.series = JSON.parse(JSON.stringify(degradationCurve));
     this.updateDegradationCurveChartFlag = true;
 

src/app/scenario/scenario.component.html

@@ -8,6 +8,7 @@
   <div>
 
     <div class="btn-group">
+      <app-environments [params]="params"></app-environments>
       <app-add-new-item-modal></app-add-new-item-modal>
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
         aria-label="Button group with nested dropdown">