[#9317] Use agent-list api for the list on main page

web/src/main/angular/src/app/core/components/info-per-server/info-per-server-container.component.ts

@@ -14,7 +14,6 @@ import {
     MessageQueueService,
     MESSAGE_TO
 } from 'app/shared/services';
-import { Actions } from 'app/shared/store/reducers';
 import { ServerMapData } from 'app/core/components/server-map/class/server-map-data.class';
 import { ServerErrorPopupContainerComponent } from 'app/core/components/server-error-popup/server-error-popup-container.component';
 
@@ -163,8 +162,10 @@ export class InfoPerServerContainerComponent implements OnInit, OnDestroy {
 
     private getAgentName(agentId: string): string {
         const serverList = Object.keys(this.agentHistogramData['serverList']);
+
         for (let server of serverList) {
             const agentIds = Object.keys(this.agentHistogramData['serverList'][server]['instanceList']);
+
             if (agentIds && agentIds.includes(agentId)) {
                 return this.agentHistogramData['serverList'][server]['instanceList'][agentId]['agentName'];
             }

web/src/main/angular/src/app/core/components/server-and-agent-list/index.ts

@@ -4,7 +4,6 @@ import { SharedModule } from 'app/shared';
 import { ServerAndAgentListComponent } from './server-and-agent-list.component';
 import { ServerAndAgentListContainerComponent } from './server-and-agent-list-container.component';
 import { ServerErrorPopupModule } from 'app/core/components/server-error-popup';
-import { ServerAndAgentListDataService } from './server-and-agent-list-data.service';
 
 @NgModule({
     declarations: [
@@ -18,8 +17,6 @@ import { ServerAndAgentListDataService } from './server-and-agent-list-data.serv
     exports: [
         ServerAndAgentListContainerComponent
     ],
-    providers: [
-        ServerAndAgentListDataService
-    ]
+    providers: []
 })
 export class ServerAndAgentListModule { }

web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list-data.service.ts

@@ -10,15 +10,16 @@ const enum SortOptionParamKey {
     NAME = 'AGENT_NAME_ASC',
     RECENT = 'RECENT'
 }
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class ServerAndAgentListDataService {
     private url = 'agents/search-application.pinpoint';
 
+    // TODO: Agent-list fetch service 일원화
     constructor(
         private http: HttpClient,
     ) {}
 
-    getData(applicationName: string, range: number[], sortOption: SortOption): Observable<IServerAndAgentDataV2[]> {
+    getData(applicationName: string, range: number[], sortOption: SortOption = SortOption.ID): Observable<IServerAndAgentDataV2[]> {
         return this.http.get<IServerAndAgentDataV2[]>(this.url, this.makeRequestOptionsArgs(applicationName, range, sortOption));
     }
 

web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list.component.ts

@@ -96,7 +96,7 @@ export class ServerAndAgentListComponent implements OnInit {
         });
     }
 
-    getAgentLabel({agentId, agentName}: IServerAndAgentData): string {
+    getAgentLabel({agentId, agentName}: IAgentDataV2): string {
         switch (this.selectedSortOptionKey) {
             case SortOption.ID:
             case SortOption.RECENT:

web/src/main/angular/src/app/core/components/server-list/server-list-container.component.html

@@ -1,9 +1,12 @@
-<pp-server-list
-    [serverList]="serverList"
-    [agentData]="agentData"
-    [isWas]="isWas"
-    [selectedAgent]="selectedAgent"
-    [funcImagePath]="funcImagePath"
-    (outSelectAgent)="onSelectAgent($event)"
-    (outOpenInspector)="onOpenInspector($event)">
-</pp-server-list>
+<ng-container *ngIf="serverList">
+    <pp-server-list
+        [serverList]="serverList"
+        [agentData]="agentData"
+        [isWas]="isWas"
+        [selectedAgent]="selectedAgent"
+        [funcImagePath]="funcImagePath"
+        (outSelectAgent)="onSelectAgent($event)"
+        (outOpenInspector)="onOpenInspector($event)">
+    </pp-server-list>
+</ng-container>
+<pp-loading [showLoading]="showLoading" [zIndex]="11"></pp-loading>

web/src/main/angular/src/app/core/components/server-list/server-list-container.component.ts

@@ -1,38 +1,91 @@
-import { Component, OnInit, Output, EventEmitter, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { switchMap, takeUntil, tap } from 'rxjs/operators';
+import { iif, of, Subject } from 'rxjs';
 
-import { WebAppSettingDataService } from 'app/shared/services';
+import { NewUrlStateNotificationService, WebAppSettingDataService } from 'app/shared/services';
+import { ServerAndAgentListDataService } from 'app/core/components/server-and-agent-list/server-and-agent-list-data.service';
+import { UrlPathId } from 'app/shared/models';
+import { isEmpty } from 'app/core/utils/util';
 
 @Component({
     selector: 'pp-server-list-container',
     templateUrl: './server-list-container.component.html',
     styleUrls: ['./server-list-container.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ServerListContainerComponent implements OnInit {
+export class ServerListContainerComponent implements OnInit, OnDestroy {
     @Input()
-    set data({serverList, agentHistogram, isWas}: any) {
-        if (serverList) {
-            this.serverList = serverList;
-            this.agentData = agentHistogram;
-            this.isWas = isWas;
+    set data({agentHistogram, isWas}: any) {
+        if (agentHistogram) {
+            const urlService = this.newUrlStateNotificationService;
+            const app = (urlService.getPathValue(UrlPathId.APPLICATION) as IApplication).getApplicationName();
+            const range = [urlService.getStartTimeToNumber(), urlService.getEndTimeToNumber()];
+
+            iif(() => isEmpty(this.serverList) || this.shouldUpdate,
+                of(null).pipe(
+                    tap(() => this.showLoading = true),
+                    switchMap(() => {
+                        return this.serverAndAgentListDataService.getData(app, range).pipe(
+                            tap((data: IServerAndAgentDataV2[]) => {
+                                this.cachedData = data;
+                                this.showLoading = false;
+                            })
+                        )
+                    })
+                ),
+                of(this.cachedData)
+            ).subscribe((data: IServerAndAgentDataV2[]) => {
+                this.serverList = data;
+                this.agentData = agentHistogram;
+                this.isWas = isWas;
+                this.shouldUpdate = false;
+                this.cd.detectChanges();
+            });
         }
     }
 
     @Input() selectedAgent: string;
     @Output() outSelectAgent = new EventEmitter<string>();
     @Output() outOpenInspector = new EventEmitter<string>();
 
-    serverList = {};
+    private unsubscribe = new Subject<void>();
+    private shouldUpdate: boolean;
+
+    showLoading: boolean;
+    serverList: IServerAndAgentDataV2[];
     agentData = {};
     isWas: boolean;
     funcImagePath: Function;
 
+    private cachedData: IServerAndAgentDataV2[];
+
     constructor(
         private webAppSettingDataService: WebAppSettingDataService,
+        private serverAndAgentListDataService: ServerAndAgentListDataService,
+        private newUrlStateNotificationService: NewUrlStateNotificationService,
+        private cd: ChangeDetectorRef,
     ) {}
 
     ngOnInit() {
         this.funcImagePath = this.webAppSettingDataService.getImagePathMakeFunc();
+        this.newUrlStateNotificationService.onUrlStateChange$.pipe(
+            takeUntil(this.unsubscribe),
+        ).subscribe((urlService: NewUrlStateNotificationService) => {
+            const isAppChanged = urlService.isValueChanged(UrlPathId.APPLICATION);
+            const isPeriodChanged = urlService.isValueChanged(UrlPathId.PERIOD) || urlService.isValueChanged(UrlPathId.END_TIME);
+
+            this.shouldUpdate = isAppChanged || isPeriodChanged;
+
+            if (this.shouldUpdate) {
+                this.serverList = null;
+                this.cd.detectChanges();
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
     }
 
     onSelectAgent(agent: string) {

web/src/main/angular/src/app/core/components/server-list/server-list.component.css

@@ -1,86 +1,76 @@
 :host {
     display: block;
 }
-.l-servers-list {
+.servers-list {
     padding: 0 13px 0 25px;
 }
-.l-server-name {
+.server-name {
     display: block;
     overflow : hidden;
     white-space : nowrap;
     text-overflow : ellipsis;
 }
-.l-servers-list li {
+.servers-list li {
     font-size: 13px;
     color:var(--text-primary);
     font-weight: 600;
 }
-.l-servers-list li {
+.servers-list li {
     margin: 15px 0 0 0;
 }
-.l-servers-list li.first-child {
-    margin:0;
+.servers-list li.first-child {
+    margin: 0;
 }
-.l-servers-list li.first-child:before {
+.servers-list li.first-child:before {
     font-family: FontAwesome;
     content: '\f0ae';
     font-size: 14px;
     margin: 0 8px 0 0;
     color: var(--text-secondary);
     font-weight: normal;
 }
-.l-servers-list li .l-category {
-    margin: 10px 0 0 27px;
+.depth-1 {
+    margin: 10px 0 0 20px;
 }
-.l-servers-list li .l-category span {
-    display: inline-block;
-    padding: 2px 5px;
-    font-size: 10px;
-    color: var(--text-knockout);
-    font-weight: 600;
-}
-.l-servers-list li ul {
-    margin: 13px 0 0 20px;
-}
-.l-servers-list li ul li {
+.depth-1 li {
     font-size: 12px;
     color: var(--text-primary-lightest);
     font-weight: 400;
-    height: 20px;
+    height: 25px;
     margin: 5px 0px;
     color: var(--text-secondary);
+    display: flex;
+    align-items: center;
 }
-.l-servers-list li ul li input {
+.radio-input {
     margin: 0 5px;
 }
-.l-servers-list li ul li div {
-    float: right;
-}
-.l-servers-list li ul li label {
-    display: block;
+.radio-label {
     overflow : hidden;
     white-space : nowrap;
     text-overflow : ellipsis;
 }
-.l-servers-list li ul li:hover {
+.depth-1 li:hover {
     background: var(--background-hover-default);
 }
-.l-text-box {
-    padding: 3px 5px;
+.inspector-btn{
+    padding: 5px 5px;
     font-size: 10px;
     color: var(--text-knockout);
-    margin-left: 13px;
     background-color: var(--primary);
+    border-radius: 2px;
 }
-.l-icon-alert {
+.icon-alert {
     height: 1em;
 }
-.l-servers-list ul li {
-    height: 30px;
-}
-.l-servers-list ul span {
-    cursor: pointer;
-}
-i.fas {
-    margin-right: 4px;
-}
+.label-radio-wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.btn-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}

web/src/main/angular/src/app/core/components/server-list/server-list.component.html

@@ -1,16 +1,21 @@
-<ul class="l-servers-list">
-    <li *ngFor="let serverName of getServerKeys(); let outerIndex = index">
-        <div class="l-server-name" [attr.title]="serverName">{{ serverName }}</div>
-        <ul>
-            <li *ngFor="let agentId of getAgentKeys(serverName); let innerIndex = index">
-                <div>
-                    <span class="l-icon-alert" *ngIf="hasError(agentId)"><img [src]="getAlertImgPath()" alt=""></span>
-                    <button class="l-text-box fas fa-chart-line" (click)="onOpenInspector(agentId)" *ngIf="isWas"></button>
+<ul class="servers-list depth-0">
+    <li *ngFor="let server of serverList; let outerIndex = index">
+        <div class="server-name" [attr.title]="server.groupName">{{server.groupName}}</div>
+        <ul class="depth-1">
+            <li *ngFor="let agent of server.instancesList; let innerIndex = index">
+                <div class="label-radio-wrapper" [style.max-width]="getLabelMaxWidth(agent)">
+                    <input
+                        type="radio"
+                        class="radio-input"
+                        id="step3-category-{{outerIndex}}-{{innerIndex}}"
+                        name="main-server-list-selected-agent" (click)="onSelectAgent(agent)" [checked]="isSelectedAgent(agent)"
+                    >
+                    <label for="step3-category-{{outerIndex}}-{{innerIndex}}" class="radio-label" title="{{getAgentName(agent)}}">{{getAgentLabel(agent)}}</label>
+                </div>
+                <div class="btn-wrapper">
+                    <span class="icon-alert" *ngIf="hasError(agent)"><img [src]="getAlertImgPath()" alt=""></span>
+                    <button class="inspector-btn fas fa-chart-line" (click)="onOpenInspector(agent)" *ngIf="isWas"></button>
                 </div>
-                <label for="step3-category-{{outerIndex}}-{{innerIndex}}" title="{{ getAgentName(serverName, agentId) || 'N/A' }}">
-                    <input type="radio" id="step3-category-{{outerIndex}}-{{innerIndex}}" name="main-server-list-selected-agent" (click)="onSelectAgent(agentId)" [checked]="isSelectedAgent(agentId)">
-                    {{ agentId }} ({{ getAgentName(serverName, agentId) || "N/A" }})
-                </label>
             </li>
         </ul>
     </li>