From ea19361a34552d0b21e716118f06e331b9c3ba45 Mon Sep 17 00:00:00 2001 From: QooQooDass Date: Wed, 8 Feb 2023 16:30:19 +0900 Subject: [PATCH] [#9317] Use agent-list api for the list on main page --- .../info-per-server-container.component.ts | 3 +- .../components/server-and-agent-list/index.ts | 5 +- .../server-and-agent-list-data.service.ts | 5 +- .../server-and-agent-list.component.ts | 2 +- .../server-list-container.component.html | 21 +++--- .../server-list-container.component.ts | 71 +++++++++++++++--- .../server-list/server-list.component.css | 72 ++++++++----------- .../server-list/server-list.component.html | 29 ++++---- .../server-list/server-list.component.ts | 43 +++++------ 9 files changed, 152 insertions(+), 99 deletions(-) diff --git a/web/src/main/angular/src/app/core/components/info-per-server/info-per-server-container.component.ts b/web/src/main/angular/src/app/core/components/info-per-server/info-per-server-container.component.ts index fe00867144d2..820bcff1671a 100644 --- a/web/src/main/angular/src/app/core/components/info-per-server/info-per-server-container.component.ts +++ b/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']; } diff --git a/web/src/main/angular/src/app/core/components/server-and-agent-list/index.ts b/web/src/main/angular/src/app/core/components/server-and-agent-list/index.ts index 389c14ce5acb..8f388d32ed33 100644 --- a/web/src/main/angular/src/app/core/components/server-and-agent-list/index.ts +++ b/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 { } diff --git a/web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list-data.service.ts b/web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list-data.service.ts index aaac26c4ae34..c30dd740c239 100644 --- a/web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list-data.service.ts +++ b/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 { + getData(applicationName: string, range: number[], sortOption: SortOption = SortOption.ID): Observable { return this.http.get(this.url, this.makeRequestOptionsArgs(applicationName, range, sortOption)); } diff --git a/web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list.component.ts b/web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list.component.ts index f9590912eb06..858cd75975e1 100644 --- a/web/src/main/angular/src/app/core/components/server-and-agent-list/server-and-agent-list.component.ts +++ b/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: diff --git a/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.html b/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.html index 512c66b427dd..ac19bcb9e019 100644 --- a/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.html +++ b/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.html @@ -1,9 +1,12 @@ - - + + + + + diff --git a/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.ts b/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.ts index 1e0cfe85a63d..4fafe8c5fbbf 100644 --- a/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.ts +++ b/web/src/main/angular/src/app/core/components/server-list/server-list-container.component.ts @@ -1,6 +1,11 @@ -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', @@ -8,13 +13,34 @@ import { WebAppSettingDataService } from 'app/shared/services'; 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(); + }); } } @@ -22,17 +48,44 @@ export class ServerListContainerComponent implements OnInit { @Output() outSelectAgent = new EventEmitter(); @Output() outOpenInspector = new EventEmitter(); - serverList = {}; + private unsubscribe = new Subject(); + 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) { diff --git a/web/src/main/angular/src/app/core/components/server-list/server-list.component.css b/web/src/main/angular/src/app/core/components/server-list/server-list.component.css index 042b70bf1f79..d623f43ca88d 100644 --- a/web/src/main/angular/src/app/core/components/server-list/server-list.component.css +++ b/web/src/main/angular/src/app/core/components/server-list/server-list.component.css @@ -1,27 +1,27 @@ :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; @@ -29,58 +29,48 @@ 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; +} \ No newline at end of file diff --git a/web/src/main/angular/src/app/core/components/server-list/server-list.component.html b/web/src/main/angular/src/app/core/components/server-list/server-list.component.html index aa76251ba10d..e5bb01af203e 100644 --- a/web/src/main/angular/src/app/core/components/server-list/server-list.component.html +++ b/web/src/main/angular/src/app/core/components/server-list/server-list.component.html @@ -1,16 +1,21 @@ -
    -
  • -
    {{ serverName }}
    -
      -
    • -
      - - +
        +
      • +
        {{server.groupName}}
        +
          +
        • +
          + + +
          +
          + +
          -
        • diff --git a/web/src/main/angular/src/app/core/components/server-list/server-list.component.ts b/web/src/main/angular/src/app/core/components/server-list/server-list.component.ts index 8d263f352361..59168ad1a023 100644 --- a/web/src/main/angular/src/app/core/components/server-list/server-list.component.ts +++ b/web/src/main/angular/src/app/core/components/server-list/server-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'pp-server-list', @@ -6,7 +6,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; styleUrls: ['./server-list.component.css'], }) export class ServerListComponent implements OnInit { - @Input() serverList: any = {}; + @Input() serverList: IServerAndAgentDataV2[]; @Input() agentData: any = {}; @Input() isWas: boolean; @Input() selectedAgent: string; @@ -16,38 +16,41 @@ export class ServerListComponent implements OnInit { constructor() {} ngOnInit() {} - getServerKeys(): string[] { - return Object.keys(this.serverList).sort(); + getAgentLabel({agentId, agentName}: IAgentDataV2): string { + return `${agentId} (${this.getAgentName({agentName} as IAgentDataV2)})`; } - getAgentKeys(serverName: string): string[] { - return Object.keys(this.serverList[serverName]['instanceList']).sort(); + getAgentName({agentName}: IAgentDataV2): string { + return agentName ? agentName : 'N/A'; } - getAgentName(serverName: string, agentId: string): string { - const agentInfo = this.serverList[serverName]['instanceList'][agentId]; - return agentInfo && agentInfo['agentName'] ? agentInfo['agentName'] : null; - } - - hasError(agent: string): boolean { - return this.agentData[agent] && this.agentData[agent]['Error'] > 0; + hasError({agentId}: IAgentDataV2): boolean { + return this.agentData[agentId] && this.agentData[agentId]['Error'] > 0; } getAlertImgPath(): string { return this.funcImagePath('icon-alert'); } - onSelectAgent(agent: string) { - if (this.selectedAgent !== agent) { - this.outSelectAgent.emit(agent); + onSelectAgent({agentId}: IAgentDataV2) { + if (this.selectedAgent === agentId) { + return; } + + this.outSelectAgent.emit(agentId); } - onOpenInspector(agent: string): void { - this.outOpenInspector.emit(agent); + onOpenInspector({agentId}: IAgentDataV2): void { + this.outOpenInspector.emit(agentId); } - isSelectedAgent(agent: string): boolean { - return this.selectedAgent === agent; + isSelectedAgent({agentId}: IAgentDataV2): boolean { + return this.selectedAgent === agentId; + } + + getLabelMaxWidth(agent: IAgentDataV2): string { + const restWidth = this.hasError(agent) ? '36px' : '20px'; + + return `calc(100% - ${restWidth})`; } }