From 61ebf6a7562441308d91cbfb36a4df9a8a9b8c4a Mon Sep 17 00:00:00 2001
From: Ludek <13610612+ludeknovy@users.noreply.github.com>
Date: Fri, 16 Jul 2021 14:37:20 +0200
Subject: [PATCH] scenario chart refresh on new report/deleted report (#163)

---
 .../item-detail/delete-item/delete-item.component.ts  |  9 ++++++++-
 src/app/scenario.service.ts                           |  2 +-
 .../item-controls/item-controls.component.html        |  2 +-
 .../scenario-trends/scenario-trends.component.ts      | 11 ++++++-----
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/item-detail/delete-item/delete-item.component.ts b/src/app/item-detail/delete-item/delete-item.component.ts
index 2f696560..64db04ae 100644
--- a/src/app/item-detail/delete-item/delete-item.component.ts
+++ b/src/app/item-detail/delete-item/delete-item.component.ts
@@ -9,6 +9,7 @@ import { ProjectService } from 'src/app/project.service';
 import { ItemsApiService } from 'src/app/items-api.service';
 import { Router } from '@angular/router';
 import { ItemsService } from 'src/app/items.service';
+import { ScenarioService } from 'src/app/scenario.service';
 
 @Component({
   selector: 'app-delete-item',
@@ -21,12 +22,14 @@ export class DeleteItemComponent implements OnInit {
   deleteCheck;
 
   @Input() itemData: any;
+  @Input() remoteDelete: boolean;
 
   constructor(
     private modalService: NgbModal,
     private itemsService: ItemsService,
     private itemApiService: ItemsApiService,
     private notification: NotificationMessage,
+    private scenarioService: ScenarioService,
     private router: Router
   ) {
 
@@ -59,8 +62,12 @@ export class DeleteItemComponent implements OnInit {
         .pipe(catchError(r => of(r)))
         .subscribe(_ => {
           if (_.status >= 200 && _.status < 300) {
-            this.itemsService.fetchItems(this.itemData.projectName, this.itemData.scenarioName);
             const message = this.notification.itemDeleted(_);
+            // if deleted from other component than item detail
+            if (this.remoteDelete) {
+              this.itemsService.fetchItems(this.itemData.projectName, this.itemData.scenarioName);
+              this.scenarioService.fetchScenarioTrends(this.itemData.projectName, this.itemData.scenarioName);
+            }
             this.itemApiService.setData(message);
             this.redirect();
           }
diff --git a/src/app/scenario.service.ts b/src/app/scenario.service.ts
index c4ddf34f..690c6d02 100644
--- a/src/app/scenario.service.ts
+++ b/src/app/scenario.service.ts
@@ -23,7 +23,7 @@ export class ScenarioService {
 
   fetchScenarioTrends(projectName, scenarioName) {
     this.scenarioApiService.fetchScenarioTrend(projectName, scenarioName)
-      .subscribe(_ => this.trends.next(scenarioHistoryGraphs(_, projectName, scenarioName)));
+      .subscribe(_ => this.trends.next(_));
   }
 
   fetchScenarioNotifications(projectName, scenarioName) {
diff --git a/src/app/scenario/item-controls/item-controls.component.html b/src/app/scenario/item-controls/item-controls.component.html
index 5c199f0d..8b849b10 100644
--- a/src/app/scenario/item-controls/item-controls.component.html
+++ b/src/app/scenario/item-controls/item-controls.component.html
@@ -4,7 +4,7 @@
     <button class="btn btn-sm jtl-no-glow jtl-control-menu hamburger-menu" ngbDropdownToggle><i class="fas fa-ellipsis-h"></i></button>
     <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>
       <app-edit-item [itemDetailData]="item" [reloadItems]="true"></app-edit-item>
-      <app-delete-item [itemData]="{ id: item.params.id, scenarioName: item.params.scenarioName, projectName: item.params.projectName}"></app-delete-item>
+      <app-delete-item [itemData]="{ id: item.params.id, scenarioName: item.params.scenarioName, projectName: item.params.projectName}" [remoteDelete]="true"></app-delete-item>
     </div>
   </div>
 </div>
diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.ts b/src/app/scenario/scenario-trends/scenario-trends.component.ts
index 9ec1f04d..33de809a 100644
--- a/src/app/scenario/scenario-trends/scenario-trends.component.ts
+++ b/src/app/scenario/scenario-trends/scenario-trends.component.ts
@@ -7,6 +7,7 @@ import { Series } from 'src/app/graphs/series.model';
 import { bytesToMbps } from 'src/app/item-detail/calculations';
 import { ScenarioTrendsData } from 'src/app/items.service.model';
 import { ScenarioApiService } from 'src/app/scenario-api.service';
+import { ScenarioService } from 'src/app/scenario.service';
 
 @Component({
   selector: 'app-scenario-trends',
@@ -23,7 +24,7 @@ export class ScenarioTrendsComponent implements OnInit {
   chartDataMapping;
   itemIds;
 
-  constructor(private scenarioApiService: ScenarioApiService, private router: Router,
+  constructor(private scenarioService: ScenarioService, private router: Router,
   ) {
     this.chartDataMapping = new Map([
       ['percentil', { name: Series.ResponseTimeP90, onLoad: true, color: 'rgb(17,122,139, 0.8)' }],
@@ -38,13 +39,13 @@ export class ScenarioTrendsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.scenarioApiService.fetchScenarioTrend(
-      this.params.projectName,
-      this.params.scenarioName)
-      .subscribe(_ => this.generateChartLines(_));
+    this.scenarioService.trends$.subscribe((_: ScenarioTrendsData[]) => this.generateChartLines(_));
   }
 
   generateChartLines(data: ScenarioTrendsData[]) {
+    if (!Array.isArray(data)) {
+      return;
+    }
     this.itemIds = data.map(_ => _.id);
     const dates = data.map(_ => moment(_.overview.startDate).format('DD. MM. YYYY HH:mm:ss'));
     const series = [];