API 통계 작업
This commit is contained in:
Rinjae
+112
@@ -0,0 +1,112 @@
|
||||
package com.eactive.apim.portal.apps.statistics.controller;
|
||||
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsResultDto;
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsSearchDto;
|
||||
import com.eactive.apim.portal.apps.statistics.service.ApiStatisticsService;
|
||||
import com.eactive.apim.portal.common.util.SecurityUtil;
|
||||
import com.eactive.apim.portal.portalorg.entity.PortalOrg;
|
||||
import java.io.IOException;
|
||||
import java.time.LocalDate;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
|
||||
/**
|
||||
* API 통계 Controller
|
||||
*/
|
||||
@Slf4j
|
||||
@Controller
|
||||
@RequestMapping("/statistics/api")
|
||||
@RequiredArgsConstructor
|
||||
public class ApiStatisticsController {
|
||||
|
||||
private final ApiStatisticsService apiStatisticsService;
|
||||
|
||||
/**
|
||||
* 통계 페이지 진입
|
||||
*/
|
||||
@GetMapping
|
||||
public String statisticsPage(Model model) {
|
||||
PortalOrg org = getPortalOrg();
|
||||
if (org == null) {
|
||||
return "redirect:/login";
|
||||
}
|
||||
|
||||
String orgId = org.getId();
|
||||
|
||||
// 앱 목록 조회 (선택용)
|
||||
model.addAttribute("appList", apiStatisticsService.getAppListByOrg(orgId));
|
||||
|
||||
// 기본 조회 (7일 전 ~ 오늘, 전체 앱)
|
||||
ApiStatisticsSearchDto searchDto = new ApiStatisticsSearchDto();
|
||||
searchDto.setStartDate(LocalDate.now().minusDays(7));
|
||||
searchDto.setEndDate(LocalDate.now());
|
||||
searchDto.setClientId(null);
|
||||
|
||||
ApiStatisticsResultDto result = apiStatisticsService.getStatistics(orgId, searchDto);
|
||||
model.addAttribute("summary", result.getSummary());
|
||||
model.addAttribute("details", result.getDetails());
|
||||
model.addAttribute("searchDto", searchDto);
|
||||
|
||||
return "apps/statistics/apiStatistics";
|
||||
}
|
||||
|
||||
/**
|
||||
* 통계 조회 (AJAX)
|
||||
*/
|
||||
@PostMapping("/search")
|
||||
@ResponseBody
|
||||
public ResponseEntity<?> searchStatistics(@RequestBody ApiStatisticsSearchDto searchDto) {
|
||||
PortalOrg org = getPortalOrg();
|
||||
if (org == null) {
|
||||
return ResponseEntity.status(401).build();
|
||||
}
|
||||
|
||||
// 날짜 범위 검증 (최대 40일)
|
||||
if (!searchDto.isValidDateRange()) {
|
||||
return ResponseEntity.badRequest()
|
||||
.body(java.util.Collections.singletonMap("error",
|
||||
"조회 기간은 최대 " + ApiStatisticsSearchDto.MAX_DATE_RANGE_DAYS + "일까지 가능합니다."));
|
||||
}
|
||||
|
||||
String orgId = org.getId();
|
||||
ApiStatisticsResultDto result = apiStatisticsService.getStatistics(orgId, searchDto);
|
||||
return ResponseEntity.ok(result);
|
||||
}
|
||||
|
||||
/**
|
||||
* CSV 다운로드
|
||||
*/
|
||||
@GetMapping("/download")
|
||||
public void downloadCsv(ApiStatisticsSearchDto searchDto, HttpServletResponse response) throws IOException {
|
||||
PortalOrg org = getPortalOrg();
|
||||
if (org == null) {
|
||||
response.sendError(401, "Unauthorized");
|
||||
return;
|
||||
}
|
||||
|
||||
// 날짜 범위 검증 (최대 40일)
|
||||
if (!searchDto.isValidDateRange()) {
|
||||
response.sendError(400, "조회 기간은 최대 " + ApiStatisticsSearchDto.MAX_DATE_RANGE_DAYS + "일까지 가능합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
String orgId = org.getId();
|
||||
apiStatisticsService.downloadCsv(orgId, searchDto, response);
|
||||
}
|
||||
|
||||
private PortalOrg getPortalOrg() {
|
||||
if (SecurityUtil.getPortalAuthenticatedUser() != null) {
|
||||
return SecurityUtil.getPortalAuthenticatedUser().getPortalOrg();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
package com.eactive.apim.portal.apps.statistics.dto;
|
||||
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Data;
|
||||
import lombok.NoArgsConstructor;
|
||||
|
||||
/**
|
||||
* 개별 API 통계 상세 DTO
|
||||
*/
|
||||
@Data
|
||||
@NoArgsConstructor
|
||||
@AllArgsConstructor
|
||||
public class ApiStatisticsDetailDto {
|
||||
|
||||
private String apiId;
|
||||
private String apiName;
|
||||
private Long attemptedCount; // 호출 건
|
||||
private Long completedCount; // 성공 건
|
||||
private Long failedCount; // 실패 건
|
||||
private Double successRate; // 성공율 (%)
|
||||
private Double failureRate; // 실패율 (%)
|
||||
|
||||
/**
|
||||
* Repository 조회용 생성자
|
||||
*/
|
||||
public ApiStatisticsDetailDto(String apiId, String apiName, Long attemptedCount, Long completedCount) {
|
||||
this.apiId = apiId;
|
||||
this.apiName = apiName;
|
||||
this.attemptedCount = attemptedCount != null ? attemptedCount : 0L;
|
||||
this.completedCount = completedCount != null ? completedCount : 0L;
|
||||
}
|
||||
|
||||
/**
|
||||
* 실패건, 성공률, 실패율 계산
|
||||
*/
|
||||
public void calculateRates() {
|
||||
if (attemptedCount == null) {
|
||||
attemptedCount = 0L;
|
||||
}
|
||||
if (completedCount == null) {
|
||||
completedCount = 0L;
|
||||
}
|
||||
|
||||
this.failedCount = attemptedCount - completedCount;
|
||||
|
||||
if (attemptedCount > 0) {
|
||||
this.successRate = Math.round((completedCount * 1000.0) / attemptedCount) / 10.0;
|
||||
this.failureRate = Math.round((failedCount * 1000.0) / attemptedCount) / 10.0;
|
||||
} else {
|
||||
this.successRate = 0.0;
|
||||
this.failureRate = 0.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
package com.eactive.apim.portal.apps.statistics.dto;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Data;
|
||||
import lombok.NoArgsConstructor;
|
||||
|
||||
/**
|
||||
* API 통계 조회 결과 DTO
|
||||
*/
|
||||
@Data
|
||||
@NoArgsConstructor
|
||||
@AllArgsConstructor
|
||||
public class ApiStatisticsResultDto {
|
||||
|
||||
private ApiStatisticsSummaryDto summary;
|
||||
private List<ApiStatisticsDetailDto> details;
|
||||
|
||||
/**
|
||||
* 빈 결과 생성
|
||||
*/
|
||||
public static ApiStatisticsResultDto empty() {
|
||||
return new ApiStatisticsResultDto(
|
||||
ApiStatisticsSummaryDto.empty(),
|
||||
new ArrayList<>()
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
package com.eactive.apim.portal.apps.statistics.dto;
|
||||
|
||||
import java.time.LocalDate;
|
||||
import java.time.temporal.ChronoUnit;
|
||||
import lombok.Data;
|
||||
import org.springframework.format.annotation.DateTimeFormat;
|
||||
|
||||
/**
|
||||
* API 통계 검색 조건 DTO
|
||||
*/
|
||||
@Data
|
||||
public class ApiStatisticsSearchDto {
|
||||
|
||||
/**
|
||||
* 최대 조회 가능 일수
|
||||
*/
|
||||
public static final int MAX_DATE_RANGE_DAYS = 40;
|
||||
|
||||
@DateTimeFormat(pattern = "yyyy-MM-dd")
|
||||
private LocalDate startDate;
|
||||
|
||||
@DateTimeFormat(pattern = "yyyy-MM-dd")
|
||||
private LocalDate endDate;
|
||||
|
||||
/**
|
||||
* 선택된 앱의 clientId (null 또는 빈값이면 전체 앱)
|
||||
*/
|
||||
private String clientId;
|
||||
|
||||
public ApiStatisticsSearchDto() {
|
||||
this.startDate = LocalDate.now().minusDays(7);
|
||||
this.endDate = LocalDate.now();
|
||||
this.clientId = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 특정 앱이 선택되었는지 여부
|
||||
*/
|
||||
public boolean hasSelectedApp() {
|
||||
return clientId != null && !clientId.trim().isEmpty();
|
||||
}
|
||||
|
||||
/**
|
||||
* 날짜 범위가 유효한지 검증 (최대 40일)
|
||||
*/
|
||||
public boolean isValidDateRange() {
|
||||
if (startDate == null || endDate == null) {
|
||||
return false;
|
||||
}
|
||||
if (startDate.isAfter(endDate)) {
|
||||
return false;
|
||||
}
|
||||
long daysBetween = ChronoUnit.DAYS.between(startDate, endDate);
|
||||
return daysBetween <= MAX_DATE_RANGE_DAYS;
|
||||
}
|
||||
|
||||
/**
|
||||
* 조회 기간 일수 반환
|
||||
*/
|
||||
public long getDateRangeDays() {
|
||||
if (startDate == null || endDate == null) {
|
||||
return 0;
|
||||
}
|
||||
return ChronoUnit.DAYS.between(startDate, endDate);
|
||||
}
|
||||
}
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
package com.eactive.apim.portal.apps.statistics.dto;
|
||||
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Data;
|
||||
import lombok.NoArgsConstructor;
|
||||
|
||||
/**
|
||||
* API 전체 통계 요약 DTO
|
||||
*/
|
||||
@Data
|
||||
@NoArgsConstructor
|
||||
@AllArgsConstructor
|
||||
public class ApiStatisticsSummaryDto {
|
||||
|
||||
private Long totalAttempted; // 전체 호출 건
|
||||
private Long totalCompleted; // 전체 성공 건
|
||||
private Long totalFailed; // 전체 실패 건
|
||||
private Double successRate; // 성공율 (%)
|
||||
private Double failureRate; // 실패율 (%)
|
||||
|
||||
/**
|
||||
* Repository 조회용 생성자 (attempted, completed만)
|
||||
*/
|
||||
public ApiStatisticsSummaryDto(Long totalAttempted, Long totalCompleted) {
|
||||
this.totalAttempted = totalAttempted != null ? totalAttempted : 0L;
|
||||
this.totalCompleted = totalCompleted != null ? totalCompleted : 0L;
|
||||
}
|
||||
|
||||
/**
|
||||
* 실패건, 성공률, 실패율 계산
|
||||
*/
|
||||
public void calculateRates() {
|
||||
if (totalAttempted == null) {
|
||||
totalAttempted = 0L;
|
||||
}
|
||||
if (totalCompleted == null) {
|
||||
totalCompleted = 0L;
|
||||
}
|
||||
|
||||
this.totalFailed = totalAttempted - totalCompleted;
|
||||
|
||||
if (totalAttempted > 0) {
|
||||
this.successRate = Math.round((totalCompleted * 1000.0) / totalAttempted) / 10.0;
|
||||
this.failureRate = Math.round((totalFailed * 1000.0) / totalAttempted) / 10.0;
|
||||
} else {
|
||||
this.successRate = 0.0;
|
||||
this.failureRate = 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 빈 통계 생성
|
||||
*/
|
||||
public static ApiStatisticsSummaryDto empty() {
|
||||
ApiStatisticsSummaryDto dto = new ApiStatisticsSummaryDto(0L, 0L);
|
||||
dto.calculateRates();
|
||||
return dto;
|
||||
}
|
||||
}
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
package com.eactive.apim.portal.apps.statistics.repository;
|
||||
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsDetailDto;
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsSummaryDto;
|
||||
import com.eactive.apim.portal.obp.entity.ObpGwMetric;
|
||||
import com.eactive.eai.data.jpa.BaseRepository;
|
||||
import com.eactive.eai.rms.data.EMSDataSource;
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.List;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
import org.springframework.data.repository.query.Param;
|
||||
|
||||
/**
|
||||
* API 통계 Repository
|
||||
* ObpGwMetric 테이블에서 통계 데이터를 조회
|
||||
*/
|
||||
@EMSDataSource
|
||||
public interface ApiStatisticsRepository extends BaseRepository<ObpGwMetric, String> {
|
||||
|
||||
/**
|
||||
* 전체 통계 조회 (특정 기간, 특정 조직의 모든 앱)
|
||||
*/
|
||||
@Query("SELECT new com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsSummaryDto(" +
|
||||
"COALESCE(SUM(m.attemptedCount), 0), COALESCE(SUM(m.completedCount), 0)) " +
|
||||
"FROM ObpGwMetric m " +
|
||||
"WHERE m.orgId = :orgId " +
|
||||
"AND m.timeslice BETWEEN :startTime AND :endTime")
|
||||
ApiStatisticsSummaryDto findSummaryByOrgAndPeriod(
|
||||
@Param("orgId") String orgId,
|
||||
@Param("startTime") LocalDateTime startTime,
|
||||
@Param("endTime") LocalDateTime endTime);
|
||||
|
||||
/**
|
||||
* 전체 통계 조회 (특정 기간, 특정 앱)
|
||||
*/
|
||||
@Query("SELECT new com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsSummaryDto(" +
|
||||
"COALESCE(SUM(m.attemptedCount), 0), COALESCE(SUM(m.completedCount), 0)) " +
|
||||
"FROM ObpGwMetric m " +
|
||||
"WHERE m.orgId = :orgId " +
|
||||
"AND m.clientId = :clientId " +
|
||||
"AND m.timeslice BETWEEN :startTime AND :endTime")
|
||||
ApiStatisticsSummaryDto findSummaryByOrgAndApp(
|
||||
@Param("orgId") String orgId,
|
||||
@Param("clientId") String clientId,
|
||||
@Param("startTime") LocalDateTime startTime,
|
||||
@Param("endTime") LocalDateTime endTime);
|
||||
|
||||
/**
|
||||
* 개별 API 통계 조회 (특정 기간, 특정 조직의 모든 앱)
|
||||
*/
|
||||
@Query("SELECT new com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsDetailDto(" +
|
||||
"m.apiId, m.apiName, " +
|
||||
"COALESCE(SUM(m.attemptedCount), 0), COALESCE(SUM(m.completedCount), 0)) " +
|
||||
"FROM ObpGwMetric m " +
|
||||
"WHERE m.orgId = :orgId " +
|
||||
"AND m.timeslice BETWEEN :startTime AND :endTime " +
|
||||
"GROUP BY m.apiId, m.apiName " +
|
||||
"ORDER BY SUM(m.attemptedCount) DESC")
|
||||
List<ApiStatisticsDetailDto> findDetailByOrgAndPeriod(
|
||||
@Param("orgId") String orgId,
|
||||
@Param("startTime") LocalDateTime startTime,
|
||||
@Param("endTime") LocalDateTime endTime);
|
||||
|
||||
/**
|
||||
* 개별 API 통계 조회 (특정 기간, 특정 앱)
|
||||
*/
|
||||
@Query("SELECT new com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsDetailDto(" +
|
||||
"m.apiId, m.apiName, " +
|
||||
"COALESCE(SUM(m.attemptedCount), 0), COALESCE(SUM(m.completedCount), 0)) " +
|
||||
"FROM ObpGwMetric m " +
|
||||
"WHERE m.orgId = :orgId " +
|
||||
"AND m.clientId = :clientId " +
|
||||
"AND m.timeslice BETWEEN :startTime AND :endTime " +
|
||||
"GROUP BY m.apiId, m.apiName " +
|
||||
"ORDER BY SUM(m.attemptedCount) DESC")
|
||||
List<ApiStatisticsDetailDto> findDetailByOrgAndApp(
|
||||
@Param("orgId") String orgId,
|
||||
@Param("clientId") String clientId,
|
||||
@Param("startTime") LocalDateTime startTime,
|
||||
@Param("endTime") LocalDateTime endTime);
|
||||
}
|
||||
+172
@@ -0,0 +1,172 @@
|
||||
package com.eactive.apim.portal.apps.statistics.service;
|
||||
|
||||
import com.eactive.apim.portal.app.entity.Credential;
|
||||
import com.eactive.apim.portal.app.repository.CredentialRepository;
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsDetailDto;
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsResultDto;
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsSearchDto;
|
||||
import com.eactive.apim.portal.apps.statistics.dto.ApiStatisticsSummaryDto;
|
||||
import com.eactive.apim.portal.apps.statistics.repository.ApiStatisticsRepository;
|
||||
import java.io.IOException;
|
||||
import java.io.OutputStreamWriter;
|
||||
import java.io.PrintWriter;
|
||||
import java.net.URLEncoder;
|
||||
import java.nio.charset.StandardCharsets;
|
||||
import java.time.LocalDateTime;
|
||||
import java.time.LocalTime;
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.springframework.transaction.annotation.Transactional;
|
||||
|
||||
/**
|
||||
* API 통계 Service
|
||||
*/
|
||||
@Slf4j
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
@Transactional(readOnly = true)
|
||||
public class ApiStatisticsService {
|
||||
|
||||
private final CredentialRepository credentialRepository;
|
||||
private final ApiStatisticsRepository apiStatisticsRepository;
|
||||
|
||||
/**
|
||||
* 로그인 사용자 법인의 앱 목록 조회 (전체)
|
||||
*/
|
||||
public List<Credential> getAppListByOrg(String orgId) {
|
||||
return credentialRepository.findAllByOrgid(orgId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 통계 조회
|
||||
*/
|
||||
public ApiStatisticsResultDto getStatistics(String orgId, ApiStatisticsSearchDto searchDto) {
|
||||
LocalDateTime startTime = searchDto.getStartDate().atStartOfDay();
|
||||
LocalDateTime endTime = searchDto.getEndDate().atTime(LocalTime.MAX);
|
||||
|
||||
ApiStatisticsSummaryDto summary;
|
||||
List<ApiStatisticsDetailDto> details;
|
||||
|
||||
if (searchDto.hasSelectedApp()) {
|
||||
// 특정 앱 통계
|
||||
String clientId = searchDto.getClientId();
|
||||
|
||||
// 해당 앱이 조직 소속인지 검증
|
||||
if (!isAppBelongsToOrg(clientId, orgId)) {
|
||||
return ApiStatisticsResultDto.empty();
|
||||
}
|
||||
|
||||
summary = apiStatisticsRepository.findSummaryByOrgAndApp(
|
||||
orgId, clientId, startTime, endTime);
|
||||
details = apiStatisticsRepository.findDetailByOrgAndApp(
|
||||
orgId, clientId, startTime, endTime);
|
||||
} else {
|
||||
// 전체 앱 통계
|
||||
summary = apiStatisticsRepository.findSummaryByOrgAndPeriod(
|
||||
orgId, startTime, endTime);
|
||||
details = apiStatisticsRepository.findDetailByOrgAndPeriod(
|
||||
orgId, startTime, endTime);
|
||||
}
|
||||
|
||||
// null 체크 및 빈 결과 처리
|
||||
if (summary == null) {
|
||||
summary = ApiStatisticsSummaryDto.empty();
|
||||
} else {
|
||||
summary.calculateRates();
|
||||
}
|
||||
|
||||
if (details == null) {
|
||||
details = Collections.emptyList();
|
||||
} else {
|
||||
details.forEach(ApiStatisticsDetailDto::calculateRates);
|
||||
}
|
||||
|
||||
return new ApiStatisticsResultDto(summary, details);
|
||||
}
|
||||
|
||||
/**
|
||||
* 앱이 해당 조직 소속인지 검증
|
||||
*/
|
||||
private boolean isAppBelongsToOrg(String clientId, String orgId) {
|
||||
return credentialRepository.findByClientidAndOrgid(clientId, orgId).isPresent();
|
||||
}
|
||||
|
||||
/**
|
||||
* CSV 다운로드
|
||||
*/
|
||||
public void downloadCsv(String orgId, ApiStatisticsSearchDto searchDto, HttpServletResponse response) throws IOException {
|
||||
ApiStatisticsResultDto result = getStatistics(orgId, searchDto);
|
||||
|
||||
String fileName = String.format("API_Statistics_%s_%s.csv",
|
||||
searchDto.getStartDate().toString(),
|
||||
searchDto.getEndDate().toString());
|
||||
|
||||
response.setContentType("text/csv; charset=UTF-8");
|
||||
response.setHeader("Content-Disposition", "attachment; filename=\"" + URLEncoder.encode(fileName, StandardCharsets.UTF_8.name()) + "\"");
|
||||
|
||||
// BOM for Excel UTF-8 recognition
|
||||
response.getOutputStream().write(0xEF);
|
||||
response.getOutputStream().write(0xBB);
|
||||
response.getOutputStream().write(0xBF);
|
||||
|
||||
try (PrintWriter writer = new PrintWriter(new OutputStreamWriter(response.getOutputStream(), StandardCharsets.UTF_8), true)) {
|
||||
// 조회 조건
|
||||
writer.println("조회 기간," + searchDto.getStartDate() + " ~ " + searchDto.getEndDate());
|
||||
|
||||
String appName = "전체 앱";
|
||||
if (searchDto.hasSelectedApp()) {
|
||||
appName = credentialRepository.findById(searchDto.getClientId())
|
||||
.map(Credential::getClientname)
|
||||
.orElse("선택된 앱");
|
||||
}
|
||||
writer.println("앱 구분," + appName);
|
||||
writer.println();
|
||||
|
||||
// 전체 통계
|
||||
ApiStatisticsSummaryDto summary = result.getSummary();
|
||||
writer.println("[전체 통계]");
|
||||
writer.println("총 호출 건," + summary.getTotalAttempted());
|
||||
writer.println("성공 건," + summary.getTotalCompleted() + "," + summary.getSuccessRate() + "%");
|
||||
writer.println("실패 건," + summary.getTotalFailed() + "," + summary.getFailureRate() + "%");
|
||||
writer.println();
|
||||
|
||||
// API별 통계 헤더
|
||||
writer.println("[API별 통계]");
|
||||
writer.println("API명,호출 건,성공 건,성공율,실패 건,실패율");
|
||||
|
||||
// API별 통계 데이터
|
||||
for (ApiStatisticsDetailDto detail : result.getDetails()) {
|
||||
writer.println(String.format("%s,%d,%d,%s%%,%d,%s%%",
|
||||
escapeCsv(detail.getApiName()),
|
||||
detail.getAttemptedCount(),
|
||||
detail.getCompletedCount(),
|
||||
detail.getSuccessRate(),
|
||||
detail.getFailedCount(),
|
||||
detail.getFailureRate()));
|
||||
}
|
||||
|
||||
// 전체 합계 행
|
||||
writer.println(String.format("전체,%d,%d,%s%%,%d,%s%%",
|
||||
summary.getTotalAttempted(),
|
||||
summary.getTotalCompleted(),
|
||||
summary.getSuccessRate(),
|
||||
summary.getTotalFailed(),
|
||||
summary.getFailureRate()));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* CSV 값 이스케이프 (쉼표, 따옴표 처리)
|
||||
*/
|
||||
private String escapeCsv(String value) {
|
||||
if (value == null) return "";
|
||||
if (value.contains(",") || value.contains("\"") || value.contains("\n")) {
|
||||
return "\"" + value.replace("\"", "\"\"") + "\"";
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
/* API Statistics Page Styles */
|
||||
|
||||
.api-statistics-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
/* Search Section */
|
||||
.statistics-search-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.search-filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.date-range-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
background: #0049B4;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-search:hover {
|
||||
background: #003d99;
|
||||
}
|
||||
|
||||
.btn-search svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
/* Summary Card */
|
||||
.statistics-summary-card {
|
||||
background: #f5f8fc;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.summary-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-select-wrapper {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.app-select {
|
||||
padding: 12px 40px 12px 20px;
|
||||
border-radius: 25px;
|
||||
border: 1px solid #0049B4;
|
||||
background: #fff;
|
||||
color: #0049B4;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230049B4' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 16px center;
|
||||
min-width: 150px;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.app-select:hover {
|
||||
background-color: #f0f5ff;
|
||||
}
|
||||
|
||||
.app-select:focus {
|
||||
border-color: #003d99;
|
||||
box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
|
||||
}
|
||||
|
||||
.summary-info {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.summary-total-text {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.summary-total-text strong {
|
||||
font-size: 24px;
|
||||
color: #0049B4;
|
||||
}
|
||||
|
||||
.summary-detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.summary-detail-item.success .detail-icon {
|
||||
color: #4A90D9;
|
||||
}
|
||||
|
||||
.summary-detail-item.failure .detail-icon {
|
||||
color: #F5A3B5;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #666;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-percent {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Donut Chart */
|
||||
.summary-center {
|
||||
flex: 0 0 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#donutChart {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.donut-segment {
|
||||
transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease;
|
||||
}
|
||||
|
||||
/* Rate Display */
|
||||
.summary-right {
|
||||
flex: 0 0 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.rate-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.rate-display:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rate-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rate-indicator.success {
|
||||
background: #4A90D9;
|
||||
}
|
||||
|
||||
.rate-indicator.failure {
|
||||
background: #F5A3B5;
|
||||
}
|
||||
|
||||
.rate-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.rate-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.success-rate .rate-value {
|
||||
color: #4A90D9;
|
||||
}
|
||||
|
||||
.failure-rate .rate-value {
|
||||
color: #F5A3B5;
|
||||
}
|
||||
|
||||
.rate-percent {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Statistics Table Card */
|
||||
.statistics-table-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
background: #0049B4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-title svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-download:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.statistics-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.statistics-table thead th {
|
||||
padding: 16px 20px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.statistics-table tbody td {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.statistics-table tbody tr:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.api-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.api-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.api-icon svg {
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
.api-icon.total {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.api-icon.total svg {
|
||||
stroke: #0049B4;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-cell {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
height: 12px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-success {
|
||||
background: #4A90D9;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-failure {
|
||||
background: #F5A3B5;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Total Row */
|
||||
.statistics-table tfoot .total-row {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.statistics-table tfoot .total-row td {
|
||||
padding: 16px 20px;
|
||||
font-weight: 600;
|
||||
color: #0049B4;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-row td {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.summary-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.summary-left,
|
||||
.summary-center,
|
||||
.summary-right {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-center {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.summary-right {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.api-statistics-container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.statistics-summary-card {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.app-toggle-buttons {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statistics-table thead th,
|
||||
.statistics-table tbody td,
|
||||
.statistics-table tfoot td {
|
||||
padding: 12px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.progress-cell {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.search-filter-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,431 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
|
||||
|
||||
<body>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
||||
<h1>APP 통계</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<link rel="stylesheet" type="text/css" th:href="@{/css/api-statistics.css}"/>
|
||||
<section class="api-statistics-container">
|
||||
|
||||
<!-- Search Filter -->
|
||||
<div class="statistics-search-section">
|
||||
<div class="search-filter-row">
|
||||
<div class="date-range-picker">
|
||||
<input type="date" id="startDate" class="date-input"
|
||||
th:value="${#temporals.format(searchDto.startDate, 'yyyy-MM-dd')}">
|
||||
<span class="date-separator">-</span>
|
||||
<input type="date" id="endDate" class="date-input"
|
||||
th:value="${#temporals.format(searchDto.endDate, 'yyyy-MM-dd')}">
|
||||
</div>
|
||||
<button type="button" class="btn-search" id="btnSearch">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.35-4.35"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Summary Card -->
|
||||
<div class="statistics-summary-card">
|
||||
<div class="summary-content">
|
||||
<!-- Left: App Select & Summary Info -->
|
||||
<div class="summary-left">
|
||||
<div class="app-select-wrapper">
|
||||
<select id="appSelect" class="app-select">
|
||||
<option value="">전체 앱</option>
|
||||
<option th:each="app : ${appList}"
|
||||
th:value="${app.clientid}"
|
||||
th:text="${app.clientname}"
|
||||
th:selected="${searchDto.clientId != null and searchDto.clientId == app.clientid}">
|
||||
앱 이름
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="summary-info">
|
||||
<p class="summary-total-text">
|
||||
총 API 호출 수는 <strong id="totalAttempted" th:text="${#numbers.formatInteger(summary.totalAttempted, 0, 'COMMA')}">0</strong>건입니다.
|
||||
</p>
|
||||
<div class="summary-detail-list">
|
||||
<div class="summary-detail-item success">
|
||||
<span class="detail-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<circle cx="8" cy="8" r="6"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="detail-label">성공</span>
|
||||
<span class="detail-value" id="totalCompleted" th:text="${#numbers.formatInteger(summary.totalCompleted, 0, 'COMMA')}">0</span>
|
||||
<span class="detail-percent">(<span id="successRateText" th:text="${summary.successRate}">0</span>%)</span>
|
||||
</div>
|
||||
<div class="summary-detail-item failure">
|
||||
<span class="detail-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<circle cx="8" cy="8" r="6"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="detail-label">실패</span>
|
||||
<span class="detail-value" id="totalFailed" th:text="${#numbers.formatInteger(summary.totalFailed, 0, 'COMMA')}">0</span>
|
||||
<span class="detail-percent">(<span id="failureRateText" th:text="${summary.failureRate}">0</span>%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: Donut Chart (SVG) -->
|
||||
<div class="summary-center">
|
||||
<svg id="donutChart" width="200" height="200" viewBox="0 0 200 200">
|
||||
<circle class="donut-bg" cx="100" cy="100" r="70" fill="none" stroke="#e0e0e0" stroke-width="24"/>
|
||||
<circle id="donutSuccess" class="donut-segment" cx="100" cy="100" r="70" fill="none"
|
||||
stroke="#4A90D9" stroke-width="24" stroke-linecap="round"
|
||||
th:attr="stroke-dasharray=${summary.successRate * 4.398} + ' 439.8'"
|
||||
transform="rotate(-90 100 100)"/>
|
||||
<circle id="donutFailure" class="donut-segment" cx="100" cy="100" r="70" fill="none"
|
||||
stroke="#F5A3B5" stroke-width="24" stroke-linecap="round"
|
||||
th:attr="stroke-dasharray=${summary.failureRate * 4.398} + ' 439.8',
|
||||
stroke-dashoffset='-' + ${summary.successRate * 4.398}"
|
||||
transform="rotate(-90 100 100)"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Right: Rate Display -->
|
||||
<div class="summary-right">
|
||||
<div class="rate-display success-rate">
|
||||
<span class="rate-indicator success"></span>
|
||||
<span class="rate-label">성공률</span>
|
||||
<span class="rate-value" id="successRate" th:text="${summary.successRate}">0</span>
|
||||
<span class="rate-percent">%</span>
|
||||
</div>
|
||||
<div class="rate-display failure-rate">
|
||||
<span class="rate-indicator failure"></span>
|
||||
<span class="rate-label">실패률</span>
|
||||
<span class="rate-value" id="failureRate" th:text="${summary.failureRate}">0</span>
|
||||
<span class="rate-percent">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Statistics Table -->
|
||||
<div class="statistics-table-card">
|
||||
<div class="table-header">
|
||||
<h3 class="table-title">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 3v18h18"/>
|
||||
<path d="M18 9l-5 5-4-4-4 4"/>
|
||||
</svg>
|
||||
API별 통계
|
||||
</h3>
|
||||
<a th:href="@{/statistics/api/download(startDate=${searchDto.startDate},endDate=${searchDto.endDate},clientId=${searchDto.clientId})}"
|
||||
class="btn-download" id="btnDownload">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
다운로드
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="statistics-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>API명</th>
|
||||
<th>API호출수</th>
|
||||
<th>성공</th>
|
||||
<th>실패</th>
|
||||
<th>통계</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="statisticsTableBody">
|
||||
<tr th:each="detail : ${details}">
|
||||
<td class="api-name">
|
||||
<span class="api-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span th:text="${detail.apiName}">API 이름</span>
|
||||
</td>
|
||||
<td th:text="${#numbers.formatInteger(detail.attemptedCount, 0, 'COMMA')}">0</td>
|
||||
<td th:text="${#numbers.formatInteger(detail.completedCount, 0, 'COMMA')}">0</td>
|
||||
<td th:text="${#numbers.formatInteger(detail.failedCount, 0, 'COMMA')}">0</td>
|
||||
<td class="progress-cell">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-success" th:style="'width:' + ${detail.successRate} + '%'"></div>
|
||||
<div class="progress-failure" th:style="'width:' + ${detail.failureRate} + '%'"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Empty State -->
|
||||
<tr th:if="${details == null or details.isEmpty()}" class="empty-row">
|
||||
<td colspan="5">데이터가 없습니다.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot id="statisticsTableFoot" th:if="${details != null and !details.isEmpty()}">
|
||||
<tr class="total-row">
|
||||
<td class="api-name">
|
||||
<span class="api-icon total">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 3v18h18"/>
|
||||
<path d="M18 9l-5 5-4-4-4 4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>전체</span>
|
||||
</td>
|
||||
<td th:text="${#numbers.formatInteger(summary.totalAttempted, 0, 'COMMA')}">0</td>
|
||||
<td th:text="${#numbers.formatInteger(summary.totalCompleted, 0, 'COMMA')}">0</td>
|
||||
<td th:text="${#numbers.formatInteger(summary.totalFailed, 0, 'COMMA')}">0</td>
|
||||
<td class="progress-cell">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-success" th:style="'width:' + ${summary.successRate} + '%'"></div>
|
||||
<div class="progress-failure" th:style="'width:' + ${summary.failureRate} + '%'"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:inline="javascript">
|
||||
$(document).ready(function() {
|
||||
// Initial data from server
|
||||
let currentData = {
|
||||
summary: {
|
||||
totalAttempted: [[${summary.totalAttempted}]],
|
||||
totalCompleted: [[${summary.totalCompleted}]],
|
||||
totalFailed: [[${summary.totalFailed}]],
|
||||
successRate: [[${summary.successRate}]],
|
||||
failureRate: [[${summary.failureRate}]]
|
||||
},
|
||||
details: [[${details}]]
|
||||
};
|
||||
|
||||
let selectedClientId = [[${searchDto.clientId}]] || '';
|
||||
const CIRCUMFERENCE = 439.8; // 2 * PI * 70
|
||||
const MAX_DATE_RANGE_DAYS = 40;
|
||||
|
||||
// Update SVG Donut Chart
|
||||
function updateChart() {
|
||||
var successRate = currentData.summary.successRate || 0;
|
||||
var failureRate = currentData.summary.failureRate || 0;
|
||||
|
||||
var successLength = successRate * CIRCUMFERENCE / 100;
|
||||
var failureLength = failureRate * CIRCUMFERENCE / 100;
|
||||
|
||||
$('#donutSuccess').attr('stroke-dasharray', successLength + ' ' + CIRCUMFERENCE);
|
||||
$('#donutFailure').attr('stroke-dasharray', failureLength + ' ' + CIRCUMFERENCE);
|
||||
$('#donutFailure').attr('stroke-dashoffset', -successLength);
|
||||
}
|
||||
|
||||
// Update Summary Display
|
||||
function updateSummaryDisplay() {
|
||||
$('#totalAttempted').text(numberWithCommas(currentData.summary.totalAttempted));
|
||||
$('#totalCompleted').text(numberWithCommas(currentData.summary.totalCompleted));
|
||||
$('#totalFailed').text(numberWithCommas(currentData.summary.totalFailed));
|
||||
$('#successRate, #successRateText').text(currentData.summary.successRate);
|
||||
$('#failureRate, #failureRateText').text(currentData.summary.failureRate);
|
||||
}
|
||||
|
||||
// Update Table
|
||||
function updateTable() {
|
||||
const tbody = $('#statisticsTableBody');
|
||||
const tfoot = $('#statisticsTableFoot');
|
||||
tbody.empty();
|
||||
|
||||
if (currentData.details && currentData.details.length > 0) {
|
||||
currentData.details.forEach(function(detail) {
|
||||
const row = `
|
||||
<tr>
|
||||
<td class="api-name">
|
||||
<span class="api-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>${detail.apiName || '-'}</span>
|
||||
</td>
|
||||
<td>${numberWithCommas(detail.attemptedCount)}</td>
|
||||
<td>${numberWithCommas(detail.completedCount)}</td>
|
||||
<td>${numberWithCommas(detail.failedCount)}</td>
|
||||
<td class="progress-cell">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-success" style="width:${detail.successRate}%"></div>
|
||||
<div class="progress-failure" style="width:${detail.failureRate}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
tbody.append(row);
|
||||
});
|
||||
|
||||
// Update footer
|
||||
if (tfoot.length === 0) {
|
||||
const footerHtml = `
|
||||
<tfoot id="statisticsTableFoot">
|
||||
<tr class="total-row">
|
||||
<td class="api-name">
|
||||
<span class="api-icon total">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 3v18h18"/>
|
||||
<path d="M18 9l-5 5-4-4-4 4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>전체</span>
|
||||
</td>
|
||||
<td>${numberWithCommas(currentData.summary.totalAttempted)}</td>
|
||||
<td>${numberWithCommas(currentData.summary.totalCompleted)}</td>
|
||||
<td>${numberWithCommas(currentData.summary.totalFailed)}</td>
|
||||
<td class="progress-cell">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-success" style="width:${currentData.summary.successRate}%"></div>
|
||||
<div class="progress-failure" style="width:${currentData.summary.failureRate}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
`;
|
||||
tbody.after(footerHtml);
|
||||
} else {
|
||||
tfoot.find('td:eq(1)').text(numberWithCommas(currentData.summary.totalAttempted));
|
||||
tfoot.find('td:eq(2)').text(numberWithCommas(currentData.summary.totalCompleted));
|
||||
tfoot.find('td:eq(3)').text(numberWithCommas(currentData.summary.totalFailed));
|
||||
tfoot.find('.progress-success').css('width', currentData.summary.successRate + '%');
|
||||
tfoot.find('.progress-failure').css('width', currentData.summary.failureRate + '%');
|
||||
}
|
||||
} else {
|
||||
tbody.html('<tr class="empty-row"><td colspan="5">데이터가 없습니다.</td></tr>');
|
||||
tfoot.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Update Download Link
|
||||
function updateDownloadLink() {
|
||||
const startDate = $('#startDate').val();
|
||||
const endDate = $('#endDate').val();
|
||||
let downloadUrl = `/statistics/api/download?startDate=${startDate}&endDate=${endDate}`;
|
||||
if (selectedClientId) {
|
||||
downloadUrl += `&clientId=${selectedClientId}`;
|
||||
}
|
||||
$('#btnDownload').attr('href', downloadUrl);
|
||||
}
|
||||
|
||||
// Number formatting
|
||||
function numberWithCommas(x) {
|
||||
if (x === null || x === undefined) return '0';
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
// Get CSRF token from cookie
|
||||
function getCsrfToken() {
|
||||
var name = 'XSRF-TOKEN=';
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i].trim();
|
||||
if (cookie.indexOf(name) === 0) {
|
||||
return decodeURIComponent(cookie.substring(name.length));
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// Validate date range (max 40 days)
|
||||
function validateDateRange(startDate, endDate) {
|
||||
if (!startDate || !endDate) {
|
||||
return { valid: false, message: '시작일과 종료일을 입력해주세요.' };
|
||||
}
|
||||
var start = new Date(startDate);
|
||||
var end = new Date(endDate);
|
||||
if (start > end) {
|
||||
return { valid: false, message: '시작일이 종료일보다 늦을 수 없습니다.' };
|
||||
}
|
||||
var diffDays = Math.floor((end - start) / (1000 * 60 * 60 * 24));
|
||||
if (diffDays > MAX_DATE_RANGE_DAYS) {
|
||||
return { valid: false, message: '조회 기간은 최대 ' + MAX_DATE_RANGE_DAYS + '일까지 가능합니다.' };
|
||||
}
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
// Search Statistics
|
||||
function searchStatistics() {
|
||||
const startDate = $('#startDate').val();
|
||||
const endDate = $('#endDate').val();
|
||||
|
||||
// Client-side validation
|
||||
var validation = validateDateRange(startDate, endDate);
|
||||
if (!validation.valid) {
|
||||
alert(validation.message);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/statistics/api/search',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
beforeSend: function(xhr) {
|
||||
xhr.setRequestHeader('X-XSRF-TOKEN', getCsrfToken());
|
||||
},
|
||||
data: JSON.stringify({
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
clientId: selectedClientId || null
|
||||
}),
|
||||
success: function(data) {
|
||||
currentData = data;
|
||||
updateSummaryDisplay();
|
||||
updateChart();
|
||||
updateTable();
|
||||
updateDownloadLink();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Search failed:', error);
|
||||
var errorMsg = '통계 조회에 실패했습니다.';
|
||||
if (xhr.responseJSON && xhr.responseJSON.error) {
|
||||
errorMsg = xhr.responseJSON.error;
|
||||
}
|
||||
alert(errorMsg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event Handlers
|
||||
$('#btnSearch').on('click', function() {
|
||||
searchStatistics();
|
||||
});
|
||||
|
||||
// App selection change
|
||||
$('#appSelect').on('change', function() {
|
||||
selectedClientId = $(this).val();
|
||||
searchStatistics();
|
||||
});
|
||||
|
||||
// Enter key search
|
||||
$('#startDate, #endDate').on('keypress', function(e) {
|
||||
if (e.which === 13) {
|
||||
searchStatistics();
|
||||
}
|
||||
});
|
||||
|
||||
// Date change auto search
|
||||
$('#startDate, #endDate').on('change', function() {
|
||||
searchStatistics();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user