[pinpoint-apm#7559] Add Avg/Max chart

emeroad · Jan 19, 2021 · 0d761cb · 0d761cb
1 parent b39af45
commit 0d761cb
Show file tree

Hide file tree

Showing 36 changed files with 1,205 additions and 73 deletions.
diff --git a/web/src/main/angular/src/app/core/components/info-per-server/index.ts b/web/src/main/angular/src/app/core/components/info-per-server/index.ts
@@ -4,7 +4,9 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from 'app/shared';
 import { ScatterChartModule } from 'app/core/components/scatter-chart';
 import { ResponseSummaryChartModule } from 'app/core/components/response-summary-chart';
+import { ResponseAvgMaxChartModule } from 'app/core/components/response-avg-max-chart';
 import { LoadChartModule } from 'app/core/components/load-chart';
+import { LoadAvgMaxChartModule } from 'app/core/components/load-avg-max-chart';
 import { ServerListModule } from 'app/core/components/server-list';
 import { InfoPerServerContainerComponent } from './info-per-server-container.component';
 import { InfoPerServerForFilteredMapContainerComponent } from './info-per-server-for-filtered-map-container.component';
@@ -19,7 +21,9 @@ import { ServerErrorPopupModule } from 'app/core/components/server-error-popup';
         SharedModule,
         ScatterChartModule,
         ResponseSummaryChartModule,
+        ResponseAvgMaxChartModule,
         LoadChartModule,
+        LoadAvgMaxChartModule,
         ServerListModule,
         ServerErrorPopupModule
     ],

diff --git a/.../angular/src/app/core/components/info-per-server/info-per-server-container.component.html b/.../angular/src/app/core/components/info-per-server/info-per-server-container.component.html
@@ -11,7 +11,11 @@
             <hr/>
             <pp-response-summary-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-response-summary-chart-container>
             <hr/>
+            <pp-response-avg-max-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-response-avg-max-chart-container>
+            <hr/>
             <pp-load-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-load-chart-container>
+            <hr/>
+            <pp-load-avg-max-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-load-avg-max-chart-container>
         </div>
     </div>
 </div>

diff --git a/...in/angular/src/app/core/components/info-per-server/info-per-server-container.component.ts b/...in/angular/src/app/core/components/info-per-server/info-per-server-container.component.ts
@@ -108,7 +108,8 @@ export class InfoPerServerContainerComponent implements OnInit, OnDestroy {
                         this.storeHelperService.dispatch(new Actions.ChangeAgentForServerList({
                             agent: this.selectedAgent,
                             responseSummary: this.agentHistogramData['agentHistogram'][this.selectedAgent],
-                            load: this.agentHistogramData['agentTimeSeriesHistogram'][this.selectedAgent]
+                            load: this.agentHistogramData['agentTimeSeriesHistogram'][this.selectedAgent],
+                            responseStatistics: this.agentHistogramData['agentResponseStatistics'][this.selectedAgent]
                         }));
                     })
                 );
@@ -156,7 +157,8 @@ export class InfoPerServerContainerComponent implements OnInit, OnDestroy {
         this.storeHelperService.dispatch(new Actions.ChangeAgentForServerList({
             agent,
             responseSummary: this.agentHistogramData['agentHistogram'][agent],
-            load: this.agentHistogramData['agentTimeSeriesHistogram'][agent]
+            load: this.agentHistogramData['agentTimeSeriesHistogram'][agent],
+            responseStatistics: this.agentHistogramData['agentResponseStatistics'][agent]
         }));
         this.selectedAgent = agent;
     }

diff --git a/...core/components/info-per-server/info-per-server-for-filtered-map-container.component.html b/...core/components/info-per-server/info-per-server-for-filtered-map-container.component.html
@@ -11,7 +11,11 @@
             <hr/>
             <pp-response-summary-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-response-summary-chart-container>
             <hr/>
+            <pp-response-avg-max-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-response-avg-max-chart-container>
+            <hr/>
             <pp-load-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-load-chart-container>
+            <hr/>
+            <pp-load-avg-max-chart-container [sourceType]="'INFO_PER_SERVER'"></pp-load-avg-max-chart-container>
         </div>
     </div>
 </div>

diff --git a/...p/core/components/info-per-server/info-per-server-for-filtered-map-container.component.ts b/...p/core/components/info-per-server/info-per-server-for-filtered-map-container.component.ts
@@ -86,11 +86,12 @@ export class InfoPerServerForFilteredMapContainerComponent implements OnInit, On
             filter(() => this.selectedTarget && this.selectedTarget.isNode),
             filter((visibleState: boolean) => visibleState ? true : (this.hide(), this.cd.detectChanges(), false)),
             map(() => this.serverMapData.getNodeData(this.selectedTarget.node[0])),
-            tap(({serverList, agentHistogram, agentTimeSeriesHistogram, isWas}: INodeInfo | IShortNodeInfo) => {
+            tap(({serverList, agentHistogram, agentTimeSeriesHistogram, agentResponseStatistics, isWas}: INodeInfo | IShortNodeInfo) => {
                 this.agentHistogramData = {
                     serverList,
                     agentHistogram,
                     agentTimeSeriesHistogram,
+                    agentResponseStatistics,
                     isWas
                 };
             })
@@ -100,7 +101,8 @@ export class InfoPerServerForFilteredMapContainerComponent implements OnInit, On
             this.storeHelperService.dispatch(new Actions.ChangeAgentForServerList({
                 agent: this.selectedAgent,
                 responseSummary: this.agentHistogramData['agentHistogram'][this.selectedAgent],
-                load: this.agentHistogramData['agentTimeSeriesHistogram'][this.selectedAgent]
+                load: this.agentHistogramData['agentTimeSeriesHistogram'][this.selectedAgent],
+                responseStatistics: this.agentHistogramData['agentResponseStatistics'][this.selectedAgent]
             }));
             this.cd.detectChanges();
         });
@@ -131,7 +133,8 @@ export class InfoPerServerForFilteredMapContainerComponent implements OnInit, On
         this.storeHelperService.dispatch(new Actions.ChangeAgentForServerList({
             agent,
             responseSummary: this.agentHistogramData['agentHistogram'][agent],
-            load: this.agentHistogramData['agentTimeSeriesHistogram'][agent]
+            load: this.agentHistogramData['agentTimeSeriesHistogram'][agent],
+            responseStatistics: this.agentHistogramData['agentResponseStatistics'][agent]
         }));
         this.selectedAgent = agent;
     }

diff --git a/web/src/main/angular/src/app/core/components/load-avg-max-chart/index.ts b/web/src/main/angular/src/app/core/components/load-avg-max-chart/index.ts
@@ -0,0 +1,22 @@
+
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from 'app/shared';
+import { LoadAvgMaxChartComponent } from './load-avg-max-chart.component';
+import { LoadAvgMaxChartContainerComponent } from './load-avg-max-chart-container.component';
+
+@NgModule({
+    declarations: [
+        LoadAvgMaxChartComponent,
+        LoadAvgMaxChartContainerComponent
+    ],
+    imports: [
+        SharedModule
+    ],
+    exports: [
+        LoadAvgMaxChartContainerComponent
+    ],
+    providers: [
+    ]
+})
+export class LoadAvgMaxChartModule { }
diff --git a/...lar/src/app/core/components/load-avg-max-chart/load-avg-max-chart-container.component.css b/...lar/src/app/core/components/load-avg-max-chart/load-avg-max-chart-container.component.css
@@ -0,0 +1,33 @@
+:host {
+    display: block;
+}
+
+.l-chart-item {
+    height: 253px;
+}
+
+.l-tool-box {
+    padding: 0 25px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 36px;
+}
+
+.l-tool-box .l-title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 600;
+}
+
+.l-tool-box button {
+    font-size: 18px;
+    color: #b3b5b9;
+    margin: 0;
+}
+
+.l-content-section {
+    position: relative;
+    padding: 0 25px;
+    height: calc(100% - 36px);
+}
diff --git a/...ar/src/app/core/components/load-avg-max-chart/load-avg-max-chart-container.component.html b/...ar/src/app/core/components/load-avg-max-chart/load-avg-max-chart-container.component.html
@@ -0,0 +1,14 @@
+<article class="l-chart-item">
+    <div class="l-tool-box">
+        <p class="l-title">Load Avg & Max</p>
+    </div>
+    <div class="l-content-section">
+        <pp-loading [showLoading]="showLoading" [zIndex]="10"></pp-loading>
+        <pp-retry [showRetry]="showRetry" [message]="dataFetchFailedText" (outRetry)="onRetry()"></pp-retry>
+        <pp-load-avg-max-chart
+            [ngClass]="chartVisibility"
+            [chartConfig]="chartConfig"
+            (outRendered)="onRendered()">
+        </pp-load-avg-max-chart>
+    </div>
+</article>