Merge branch 'devs/app-statistics' into jenkins_with_weblogic
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