scenario chart refresh on new report/deleted report (#163)

ludeknovy · Jul 16, 2021 · 61ebf6a · 61ebf6a
1 parent d20df0f
commit 61ebf6a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 = [];