[#9518] Add sorting UI for agent-list in inspector page

pinpoint-apm · Jan 19, 2023 · e62784b · e62784b
1 parent 18602c8
commit e62784b
Show file tree

Hide file tree

Showing 19 changed files with 310 additions and 111 deletions.
diff --git a/web/src/main/angular/src/app/core/components/agent-info/agent-info-container.component.ts b/web/src/main/angular/src/app/core/components/agent-info/agent-info-container.component.ts
@@ -46,7 +46,8 @@ export class AgentInfoContainerComponent implements OnInit, OnDestroy {
         this.connectStore();
         this.inspectorPageService.sourceForAgentInfo$.pipe(
             takeUntil(this.unsubscribe),
-            tap(() => this.showLoading = true),
+            filter(Boolean),
+            // tap(() => this.showLoading = true),
             switchMap(({agentId, selectedTime}: ISourceForAgentInfo) => {
                 this.lastRequestParam = [agentId, selectedTime];
                 return this.agentInfoDataService.getData(agentId, selectedTime).pipe(
@@ -70,6 +71,7 @@ export class AgentInfoContainerComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.unsubscribe.next();
         this.unsubscribe.complete();
+        this.inspectorPageService.reset('agentInfo');
     }
 
     private connectStore(): void {

diff --git a/...onents/configuration-agent-statistic/configuration-agent-statistic-container.component.ts b/...onents/configuration-agent-statistic/configuration-agent-statistic-container.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, ComponentFactoryResolver, Injector } from
 import { TranslateService } from '@ngx-translate/core';
 import { Subject, forkJoin, Observable } from 'rxjs';
 import * as moment from 'moment-timezone';
-import { map, tap } from 'rxjs/operators';
+import { map, takeUntil, tap } from 'rxjs/operators';
 
 import { StoreHelperService, AnalyticsService, TRACKED_EVENT_LIST, DynamicPopupService } from 'app/shared/services';
 import { AgentStatisticDataService } from './agent-statistic-data.service';
@@ -78,7 +78,9 @@ export class ConfigurationAgentStatisticContainerComponent implements OnInit, On
         }
 
         this.showProcessing();
-        this.agentStatisticDataService.getData().subscribe((agentList: IAgentList) => {
+        this.agentStatisticDataService.getData().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((agentList: IAgentList) => {
             this.storeHelperService.dispatch(new Actions.UpdateAdminAgentList(agentList));
             this.hideProcessing();
         }, (error: IServerError) => {

diff --git a/...ar/src/app/core/components/inspector-chart/agent-data-source-chart-container.component.ts b/...ar/src/app/core/components/inspector-chart/agent-data-source-chart-container.component.ts
@@ -73,6 +73,7 @@ export class AgentDataSourceChartContainerComponent implements OnInit, OnDestroy
     ngOnDestroy() {
         this.unsubscribe.next();
         this.unsubscribe.complete();
+        this.inspectorPageService.reset('chart');
     }
 
     private initI18nText(): void {
@@ -151,7 +152,8 @@ export class AgentDataSourceChartContainerComponent implements OnInit, OnDestroy
     private initChartData(): void {
         this.inspectorPageService.sourceForChart$.pipe(
             takeUntil(this.unsubscribe),
-            tap(() => this.activeLayer = Layer.LOADING),
+            filter(Boolean),
+            // tap(() => this.activeLayer = Layer.LOADING),
             tap(({range}: ISourceForChart) => this.previousRange = range),
             switchMap(({range}: ISourceForChart) => {
                 return this.inspectorChartDataService.getData(range).pipe(

diff --git a/.../app/core/components/inspector-chart/application-data-source-chart-container.component.ts b/.../app/core/components/inspector-chart/application-data-source-chart-container.component.ts
@@ -62,6 +62,7 @@ export class ApplicationDataSourceChartContainerComponent implements OnInit, OnD
     ngOnDestroy() {
         this.unsubscribe.next();
         this.unsubscribe.complete();
+        this.inspectorPageService.reset('chart');
     }
 
     private initI18nText(): void {
@@ -100,7 +101,8 @@ export class ApplicationDataSourceChartContainerComponent implements OnInit, OnD
     private initChartData(): void {
         this.inspectorPageService.sourceForChart$.pipe(
             takeUntil(this.unsubscribe),
-            tap(() => this.activeLayer = Layer.LOADING),
+            filter(Boolean),
+            // tap(() => this.activeLayer = Layer.LOADING),
             tap(({range}: ISourceForChart) => this.previousRange = range),
             switchMap(({range}: ISourceForChart) => {
                 return this.inspectorChartDataService.getData(range).pipe(

diff --git a/...in/angular/src/app/core/components/inspector-chart/inspector-chart-container.component.ts b/...in/angular/src/app/core/components/inspector-chart/inspector-chart-container.component.ts
@@ -88,6 +88,7 @@ export class InspectorChartContainerComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.unsubscribe.next();
         this.unsubscribe.complete();
+        this.inspectorPageService.reset('chart');
     }
 
     private initI18nText(): void {
@@ -136,7 +137,8 @@ export class InspectorChartContainerComponent implements OnInit, OnDestroy {
     private initChartData(): void {
         this.inspectorPageService.sourceForChart$.pipe(
             takeUntil(this.unsubscribe),
-            tap(() => this.activeLayer = Layer.LOADING),
+            filter(Boolean),
+            // tap(() => this.activeLayer = Layer.LOADING),
             tap(({range}: ISourceForChart) => this.previousRange = range),
             switchMap(({range}: ISourceForChart) => {
                 return this.chartContainer.getData(range).pipe(

diff --git a/web/src/main/angular/src/app/core/components/metric/metric-container.component.ts b/web/src/main/angular/src/app/core/components/metric/metric-container.component.ts
@@ -70,7 +70,7 @@ export class MetricContainerComponent implements OnInit, OnDestroy {
             filter((urlService: NewUrlStateNotificationService) => {
                 return !this.chartConfig || (urlService.isValueChanged(UrlPathId.PERIOD) || urlService.isValueChanged(UrlPathId.END_TIME));
             }),
-            tap(() => this.activeLayer = Layer.LOADING),
+            // tap(() => this.activeLayer = Layer.LOADING),
             switchMap((urlService: NewUrlStateNotificationService) => {
                 const hostGroupName = urlService.getPathValue(UrlPathId.HOST_GROUP);
                 const hostName = urlService.getPathValue(UrlPathId.HOST);

diff --git a/...c/app/core/components/server-and-agent-list/server-and-agent-list-container.component.css b/...c/app/core/components/server-and-agent-list/server-and-agent-list-container.component.css
@@ -1,6 +1,6 @@
 :host {
     display: block;
-    height: calc(100% - 41px); /* 41px: title height */
+    height: calc(100% - 40px); /* 40px: title height */
 }
 
 .guide-text {
@@ -21,6 +21,52 @@
     gap: 7px;
 }
 
+.list-wrapper {
+    width: 100%;
+    position: relative;
+    height: calc(100% - 48px - 32px); /* search area(48px) + sort area(32px) */
+}
+
+.sort-option-wrapper {
+    display: flex;
+    align-items: center;;
+    width: 100%;
+    height: 32px;
+    padding:0px 15px 8px;
+    border-bottom: 1px solid var(--border-primary);
+    gap: 2px;
+}
+
+.sort-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.sort-option-list-wrapper {
+    flex: 1;
+    display: flex;
+    /* gap: 5px; */
+}
+
+.sort-option {
+    font-size: 12px;
+    color: var(--text-secondary);
+    padding: 3px 6px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.sort-option:hover {
+    /* background: var(--background-hover-default); */
+    /* font-weight: bold; */
+    color: var(--primary);
+}
+
+.sort-option.active {
+    font-weight: bold;
+    color: var(--primary);
+}
+
 .search-input-wrapper {
     flex: 1;
     height: 100%;
@@ -56,7 +102,7 @@
     font-size: 12px;
 }
 
-.fa-question-circle {
+.fas {
     color: var(--icon-default);
     font-size: 18px;
 }
diff --git a/.../app/core/components/server-and-agent-list/server-and-agent-list-container.component.html b/.../app/core/components/server-and-agent-list/server-and-agent-list-container.component.html
@@ -10,16 +10,29 @@
     </div>
     <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button>
 </div>
+<div class="sort-option-wrapper">
+    <div class="sort-label">Sort by: </div>
+    <div class="sort-option-list-wrapper">
+        <ng-container *ngFor="let sortOption of sortOptionList">
+            <div class="sort-option" [class.active]="isActiveSortOption(sortOption.key)" (click)="onSelectSortOption(sortOption.key)">{{sortOption.display}}</div>
+        </ng-container>
+    </div>
+</div>
 <ng-container *ngIf="errorMessage || isEmpty; then guideText; else contents"></ng-container>
 <ng-template #guideText>
     <p class="guide-text" [class.error-text]="errorMessage">{{errorMessage ? errorMessage : emptyText$ | async}}</p>
 </ng-template>
 <ng-template #contents>
-    <pp-server-and-agent-list
-        [funcImagePath]="funcImagePath"
-        [serverKeyList]="filteredServerKeyList"
-        [serverList]="filteredServerList"
-        [agentId]="agentId"
-        (outSelectAgent)="onSelectAgent($event)">
-    </pp-server-and-agent-list>
+    <div class="list-wrapper">
+        <pp-server-and-agent-list
+            [funcImagePath]="funcImagePath"
+            [serverKeyList]="filteredServerKeyList"
+            [serverList]="filteredServerList"
+            [agentId]="agentId"
+            [selectedSortOptionKey]="selectedSortOptionKey"
+            (outSelectAgent)="onSelectAgent($event)">
+        </pp-server-and-agent-list>
+        <pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>    
+        <pp-loading [showLoading]="showLoading" [zIndex]="11"></pp-loading>
+    </div>
 </ng-template>