djb-eapim/eapim-admin
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Merge branch 'jenkins_with_weblogic' of ssh://192.168.240.178:18081/eapim/eapim-admin into jenkins_with_weblogic

Browse Source
This commit is contained in:
Rinjae
2025-12-10 15:13:29 +09:00
parent a90b481120 cce246831c
commit ad3efb676d
12 changed files with 224 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/dashboard-modern/css/components.css
+22 -22
View File
@@ -1,6 +1,6 @@
/* components.css - 공통 컴포넌트 스타일 정의 */
/* components.css - 공통 컴포넌트 스타일 정의 */
/* 카드 컴포넌트 */
/* 카드 컴포넌트 */
.card {
background-color: white;
border-radius: var(--rounded-md);
@@ -51,7 +51,7 @@
height: 100%;
}
/* 버튼 컴포넌트 */
/* 버튼 컴포넌트 */
.btn {
display: inline-flex;
align-items: center;
@@ -129,7 +129,7 @@
color: white;
}
/* 필터 및 탭 컴포넌트 */
/* 필터 및 탭 컴포넌트 */
.filter-group {
display: flex;
gap: 0.5rem;
@@ -223,7 +223,7 @@
display: block;
}
/* 상태 표시 컴포넌트 */
/* 상태 표시 컴포넌트 */
.server-status-badge,
.status-badge {
display: inline-flex;
@@ -258,7 +258,7 @@
margin-right: 0.25rem;
}
/* 상태 인디케이터 */
/* 상태 인디케이터 */
.instance-status {
display: inline-block;
width: 0.625rem;
@@ -283,7 +283,7 @@
background-color: var(--color-gray-400);
}
/* 테이블 컴포넌트 */
/* 테이블 컴포넌트 */
.instance-table,
.transaction-table,
.adapter-table {
@@ -335,14 +335,14 @@
color: var(--color-gray-800);
}
/* 검색 컴포넌트 */
/* 검색 컴포넌트 */
.search-container {
position: relative;
width: 100%;
max-width: 300px;
}
/* 검색 컴포넌트 */
/* 검색 컴포넌트 */
.search-container {
position: relative;
width: 250px;
@@ -371,7 +371,7 @@
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
/* 차트 컨테이너 */
/* 차트 컨테이너 */
.chart-container {
height: 184px;
width: 100%;
@@ -391,7 +391,7 @@
font-weight: 500;
}
/* 로딩 애니메이션 */
/* 로딩 애니메이션 */
.loading {
position: relative;
}
@@ -427,7 +427,7 @@
z-index: 11;
}
/* 메트릭 컴포넌트 */
/* 메트릭 컴포넌트 */
.metric-group {
display: flex;
align-items: center;
@@ -483,7 +483,7 @@
text-decoration: underline;
}
/* 토글 버튼 */
/* 토글 버튼 */
.toggle-details {
background: none;
border: none;
@@ -507,7 +507,7 @@
transform: rotate(180deg);
}
/* 테이블 컴포넌트 */
/* 테이블 컴포넌트 */
.table-container {
overflow-x: auto;
margin-bottom: 0.75rem;
@@ -540,7 +540,7 @@ table tr:hover td {
background-color: var(--color-gray-50);
}
/* 알림 컴포넌트 */
/* 알림 컴포넌트 */
.alert {
padding: 0.75rem;
border-radius: var(--rounded);
@@ -589,7 +589,7 @@ table tr:hover td {
color: var(--color-danger-dark);
}
/* 로딩 스피너 */
/* 로딩 스피너 */
.spinner {
display: inline-block;
width: 1.5rem;
@@ -606,7 +606,7 @@ table tr:hover td {
}
}
/* 페이지네이션 */
/* 페이지네이션 */
.pagination {
display: flex;
justify-content: center;
@@ -644,7 +644,7 @@ table tr:hover td {
pointer-events: none;
}
/* 툴팁 */
/* 툴팁 */
.tooltip {
position: relative;
display: inline-block;
@@ -685,7 +685,7 @@ table tr:hover td {
opacity: 1;
}
/* 애니메이션 */
/* 애니메이션 */
@keyframes pulse {
0% {
opacity: 1;
@@ -698,12 +698,12 @@ table tr:hover td {
}
}
/* 새로고침 버튼 애니메이션 */
/* 새로고침 버튼 애니메이션 */
.refresh-btn-spin {
animation: spin 1s linear infinite;
}
/* 컴팩트 모드 추가 스타일 */
/* 컴팩트 모드 추가 스타일 */
.compact-mode .card {
padding: 0.5rem;
}
@@ -728,7 +728,7 @@ table tr:hover td {
padding-bottom: 0.4rem;
}
/* peak 필터 스타일 */
/* peak 필터 스타일 */
.peak-filter-group {
display: flex;
gap: 0.5rem;
WebContent/dashboard-modern/css/layout.css
+21 -21
View File
@@ -1,9 +1,9 @@
/* layout.css - 레이아웃 및 구조 스타일 */
/* layout.css - 레이아웃 및 구조 스타일 */
/* 대시보드 메인 그리드 레이아웃 */
/* 대시보드 메인 그리드 레이아웃 */
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr; /* 메인 콘텐츠(2/3), 사이드바(1/3) 비율 */
grid-template-columns: 2fr 1fr; /* 메인 콘텐츠(2/3), 사이드바(1/3) 비율 */
gap: 1.5rem;
margin-bottom: 1rem;
}
@@ -19,7 +19,7 @@
gap: 1.5rem;
}
/* 기본 그리드 레이아웃 */
/* 기본 그리드 레이아웃 */
.dashboard-row {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -27,14 +27,14 @@
margin-bottom: 0.2rem;
}
/* 특별한 그리드 레이아웃 - 배치/피크 섹션용 */
/* 특별한 그리드 레이아웃 - 배치/피크 섹션용 */
.dashboard-row.batch-peak-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
/* 특별한 그리드 레이아웃 - 배치/피크 섹션용에서 중첩 방지 */
/* 특별한 그리드 레이아웃 - 배치/피크 섹션용에서 중첩 방지 */
.dashboard-row.batch-peak-row > .dashboard-batch,
.dashboard-row.batch-peak-row > .dashboard-peak,
.dashboard-row.batch-peak-row > .batch-container,
@@ -43,23 +43,23 @@
margin-bottom: 0;
}
/* 요약 섹션 (1:2 비율) */
/* 요약 섹션 (1:2 비율) */
.dashboard-transactions {
margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
}
/* 어댑터 섹션 */
/* 어댑터 섹션 */
.dashboard-adapters {
margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
}
/* 트랜잭션 섹션 */
/* 트랜잭션 섹션 */
.dashboard-transactions {
margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
}
/* 헤더 */
/* 헤더 */
header {
background-color: white;
padding: 0.8rem 1.5rem;
@@ -104,7 +104,7 @@ header {
color: var(--color-gray-700);
}
/* 자동 새로고침 컨트롤 */
/* 자동 새로고침 컨트롤 */
.refresh-controls {
display: flex;
align-items: center;
@@ -134,7 +134,7 @@ header {
background-color: var(--color-gray-400);
}
/* 푸터 */
/* 푸터 */
footer {
margin-top: 1.5rem;
padding: 1rem 1.5rem 0.5rem 1.5rem;
@@ -169,7 +169,7 @@ footer {
text-decoration: underline;
}
/* 서버-트랜잭션 행 (한 줄에 나오도록) */
/* 서버-트랜잭션 행 (한 줄에 나오도록) */
.dashboard-row.server-transaction-row {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -180,28 +180,28 @@ footer {
width: 100%;
}
/* 어댑터 섹션 컨테이너 */
/* 어댑터 섹션 컨테이너 */
.dashboard-adapters-container {
width: 100%;
margin-bottom: 1rem;
}
/* 기존 대시보드 그리드 스타일은 비활성화 */
/* 기존 대시보드 그리드 스타일은 비활성화 */
.dashboard-grid {
display: none;
}
/* 반응형 디자인 */
/* 반응형 디자인 */
@media (max-width: 1200px) {
.dashboard-row.server-transaction-row {
grid-template-columns: 1fr;
}
}
/* 반응형 디자인 */
/* 반응형 디자인 */
@media (max-width: 1200px) {
.dashboard-grid {
grid-template-columns: 1fr; /* 좁은 화면에서는 세로로 배치 */
grid-template-columns: 1fr; /* 좁은 화면에서는 세로로 배치 */
}
.dashboard-summary {
WebContent/dashboard-modern/css/main.css
+6 -6
View File
@@ -1,16 +1,16 @@
/* main.css - 메인 CSS 파일로 모든 모듈을 가져옵니다 */
/* main.css - 메인 CSS 파일로 모든 모듈을 가져옵니다 */
/* 기본 변수 및 리셋 */
/* 기본 변수 및 리셋 */
@import 'variables.css';
/* 공통 컴포넌트 */
/* 공통 컴포넌트 */
@import 'components.css';
/* 레이아웃 및 구조 */
/* 레이아웃 및 구조 */
@import 'layout.css';
/* 대시보드 섹션별 스타일 */
/* 대시보드 섹션별 스타일 */
@import 'sections.css';
/* 유틸리티 및 반응형 */
/* 유틸리티 및 반응형 */
@import 'utils.css';
WebContent/dashboard-modern/css/sections.css
+12 -12
View File
@@ -1,6 +1,6 @@
/* sections.css - 대시보드 섹션별 스타일 */
/* sections.css - 대시보드 섹션별 스타일 */
/* 공통 섹션 스타일 */
/* 공통 섹션 스타일 */
.dashboard-servers,
.dashboard-transactions,
.dashboard-adapters,
@@ -19,34 +19,34 @@
border-bottom: 1px solid var(--color-gray-200);
}
/* 대시보드 헤더 스타일 - 서버 JSP로 이동됨 */
/* 대시보드 헤더 스타일 - 서버 JSP로 이동됨 */
/* 서버 상태 섹션 - 서버 JSP로 이동됨 */
/* 서버 상태 섹션 - 서버 JSP로 이동됨 */
/* 스파크라인 스타일 - 서버 JSP로 이동됨 */
/* 스파크라인 스타일 - 서버 JSP로 이동됨 */
/* 요약 섹션 - 서버 JSP로 이동됨 */
/* 요약 섹션 - 서버 JSP로 이동됨 */
/* 카드 내부 여백 줄임 */
/* 카드 내부 여백 줄임 */
.card {
padding: 0.6rem;
}
/* 카드 헤더 여백 줄임 */
/* 카드 헤더 여백 줄임 */
.card-header {
margin-bottom: 0.5rem;
padding-bottom: 0.4rem;
}
/* 테이블 여백 줄임 */
/* 테이블 여백 줄임 */
table th,
table td {
padding: 0.3rem 0.4rem;
}
/* 트랜잭션 현황 섹션 스타일 조정 */
/* 트랜잭션 현황 섹션 스타일 조정 */
.transaction-overview-container .card {
height: 100%;
height: 285px; /* 강제로 옆 카드와 높이 맞춤 */
}
/* SMS 섹션 스타일 - 개별 JSP 파일로 이동됨 */
/* SMS 섹션 스타일 - 개별 JSP 파일로 이동됨 */
WebContent/dashboard-modern/css/utils.css
+3 -3
View File
@@ -1,6 +1,6 @@
/* utils.css - 유틸리티 클래스 및 반응형 디자인 */
/* utils.css - 유틸리티 클래스 및 반응형 디자인 */
/* 텍스트 정렬 */
/* 텍스트 정렬 */
.text-left {
text-align: left;
}
@@ -13,7 +13,7 @@
text-align: right;
}
/* 반응형 디자인 */
/* 반응형 디자인 */
@media (max-width: 1200px) {
.dashboard-row {
grid-template-columns: 1fr;
WebContent/dashboard-modern/css/variables.css
+7 -7
View File
@@ -1,8 +1,8 @@
/* variables.css - 모든 CSS 변수와 기본 리셋 스타일 정의 */
/* variables.css - 모든 CSS 변수와 기본 리셋 스타일 정의 */
/* 변수 정의 */
/* 변수 정의 */
:root {
/* 기본 색상 */
/* 기본 색상 */
--color-primary: #4f46e5;
--color-primary-light: #eef2ff;
--color-success: #22c55e;
@@ -12,7 +12,7 @@
--color-danger: #ef4444;
--color-danger-light: #fee2e2;
/* 배경 및 텍스트 색상 */
/* 배경 및 텍스트 색상 */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
@@ -24,7 +24,7 @@
--color-gray-800: #1f2937;
--color-gray-900: #111827;
/* 테두리 및 그림자 */
/* 테두리 및 그림자 */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -35,7 +35,7 @@
--rounded-full: 9999px;
}
/* 기본 리셋 및 공통 스타일 */
/* 기본 리셋 및 공통 스타일 */
* {
margin: 0;
padding: 0;
@@ -72,7 +72,7 @@ p {
margin: 0 auto;
}
/* 애니메이션 */
/* 애니메이션 */
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
WebContent/jsp/dashboard-modern/components/dashboard-adapter.jsp
+10 -3
View File
@@ -105,7 +105,7 @@
/* 어댑터 섹션 스타일 조정 */
.adapters-container .card {
height: 100%;
min-height: 249px;
min-height: 293px;
}
.dashboard-adapter-summary {
@@ -115,10 +115,15 @@
.adapter-summary-card {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.adapter-summary-container {
padding: 0.5rem 1rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.adapter-summary-header {
@@ -130,8 +135,10 @@
}
.adapter-summary-body {
max-height: 300px;
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around; /* 내용을 수직으로 균등 배분 */
}
.adapter-summary-row {
WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp
+68 -21
View File
@@ -481,10 +481,10 @@
border-top: 2px solid #fd7e14;
}
/* 서버 그리드 - 한 줄에 3개씩 표시 */
/* 서버 그리드 - 한 줄에 2개씩 표시 */
.server-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@@ -521,83 +521,130 @@
/* 메트릭 스타일 조정 */
.server-metrics {
padding: 0.3rem 0;
padding: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.0rem;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
}
.metrics-row {
.metrics-row,
.sparklines-row {
display: flex;
justify-content: space-between;
gap: 0.5rem;
justify-content: space-around;
gap: 0;
}
.sparklines-row {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding-top: 0.5rem;
}
.server-metric {
flex: 1;
min-width: 0; /* 오버플로우 방지 */
text-align: center;
padding: 0 0.5rem;
border-right: 1px solid var(--color-gray-200);
}
.server-metric:last-child {
border-right: none;
}
.metric-header {
margin-bottom: 0.2rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column; /* 아이콘과 값을 수직으로 정렬 */
justify-content: center; /* 수직 중앙 정렬 */
align-items: center; /* 수평 중앙 정렬 */
white-space: nowrap;
overflow: hidden;
}
.sparkline {
flex: 1;
min-width: 0; /* 오버플로우 방지 */
min-width: 0;
padding: 0.25rem 0.5rem;
border-right: 1px solid var(--color-gray-200);
}
.sparkline:last-child {
border-right: none;
}
.metric-name {
display: flex;
align-items: center;
margin-bottom: 0.2rem; /* 아이콘과 값 사이 간격 조정 */
}
.metric-value {
margin-left: 0.5rem;
margin-left: 0; /* 이전 margin-left 제거 */
font-size: 1.1rem; /* 값 폰트 크기 약간 키움 */
font-weight: 600; /* 값 폰트 굵기 */
}
/* 인스턴스 테이블 스타일 */
.server-instances {
padding: 0.3rem 0;
padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* 패딩 조정 */
max-height: 120px;
}
.instance-table {
font-size: 0.8rem;
width: 100%; /* 테이블 전체 너비 */
font-size: 0.85rem; /* 폰트 크기 약간 키움 */
border-collapse: collapse;
table-layout: fixed;
}
.instance-table th {
background-color: var(--color-gray-100); /* 헤더 배경색 */
font-weight: 600; /* 헤더 폰트 굵기 */
padding: 0.4rem 0.5rem; /* 헤더 패딩 조정 */
border-bottom: 1px solid var(--color-gray-200); /* 헤더 아래 보더 */
text-align: center; /* 모든 헤더 가운데 정렬 */
width: 33.3333%; /* 인스턴스 th 각 영역 균등하게, 위쪽 요소와 맞춤 */
box-sizing: border-box;
}
.instance-table th,
.instance-table td {
padding: 0.2rem 0.3rem;
padding: 0.4rem 0.5rem; /* 셀 패딩 조정 */
white-space: nowrap;
border-bottom: 1px solid var(--color-gray-100); /* 셀 아래 보더 */
vertical-align: middle;
text-align: center; /* 모든 셀 내용 가운데 정렬 */
white-space: nowrap; /* 줄바꿈 방지 */
overflow: hidden; /* 칸을 넘어가는 글자 숨김 */
text-overflow: ellipsis; /* 넘어가는 글자를 ...으로 표시 */
}
.instance-table tbody tr:nth-child(odd) {
background-color: var(--color-gray-50); /* 홀수 행 배경색 */
}
.instance-table tbody tr:hover {
background-color: var(--color-gray-100); /* 호버 효과 */
}
/* 인스턴스 상태 점 스타일 */
.instance-status {
display: inline-block;
width: 8px;
height: 8px;
width: 10px; /* 크기 키움 */
height: 10px; /* 크기 키움 */
border-radius: 50%;
margin-right: 4px;
margin-right: 6px; /* 간격 조정 */
vertical-align: middle; /* 텍스트와 세로 정렬 */
}
/* 오류 상태일 때 인스턴스 ID 색상 변경 */
/* 오류 상태일 때 인스턴스 ID 색상 변경 - :has()는 구형 브라우저에서 문제를 일으킬 수 있어 주석 처리
tr:has(.status-error) .instance-id,
tr:has(.status-inactive) .instance-id {
color: #dc3545;
font-weight: 600;
}
*/
</style>
<script>
WebContent/jsp/dashboard-modern/components/dashboard-sms.jsp
-1
View File
@@ -36,7 +36,6 @@
}
.sms-table-container {
max-height: 220px;
overflow-y: auto;
}
WebContent/jsp/dashboard-modern/components/dashboard-transactions.jsp
+5 -5
View File
@@ -625,8 +625,8 @@
.dashboard-transactions .card {
border-radius: 0.35rem;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
overflow: hidden;
height: 242px;
/* overflow: hidden; */ /* 스크롤바 제거를 위해 제거 */
/* height: 242px; */ /* 스크롤바 제거를 위해 제거 */
}
.transaction-filters {
@@ -655,8 +655,8 @@
}
.transaction-table-container {
max-height: 300px;
overflow-y: auto;
/* max-height: 300px; */ /* 스크롤바 제거를 위해 제거 */
/* overflow-y: auto; */ /* 스크롤바 제거 */
position: relative;
}
@@ -817,7 +817,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
margin-bottom: 0.5rem;
}
/* 제목과 버튼을 한 줄에 나란히 표시하기 위한 컨테이너 */
WebContent/jsp/dashboard-modern/modern-dashboard.jsp
+70 -34
View File
@@ -126,19 +126,21 @@
</script>
<style>
/* 모든 카드는 7:3 기준으로 수정, 광주은행 요청사항 */
/* 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 */
.first-row {
grid-template-columns: 5fr 3fr;
grid-template-columns: 7fr 3fr;
}
/* 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 */
.second-row {
grid-template-columns: 1fr 1fr;
grid-template-columns: 7fr 3fr;
}
/* 3번 줄 (7:3 비율) - 어댑터 상태, 장애통보(SMS) */
.third-row {
grid-template-columns: 6fr 4fr;
grid-template-columns: 7fr 3fr;
}
/* 컴팩트한 대시보드를 위한 추가 스타일 */
@@ -176,7 +178,7 @@
<div class="container">
<!-- 헤더 영역 -->
<jsp:include page="components/dashboard-header.jsp" />
<!-- 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 -->
<div class="dashboard-row first-row">
<!-- 서버 상태 섹션 (5/8 비율) -->
@@ -186,9 +188,9 @@
</jsp:include>
</div>
<!-- 배치 처리 상태 섹션 (3/8 비율) -->
<div class="batch-container">
<jsp:include page="components/dashboard-batch.jsp" />
<!-- 장애통보(SMS) 섹션 (2/10 비율) -->
<div class="sms-container">
<jsp:include page="components/dashboard-sms.jsp" />
</div>
<!-- 피크 처리 성능 섹션 (1/8 비율) -->
@@ -199,21 +201,6 @@
<!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
<div class="dashboard-row second-row">
<!-- 거래 처리 집계 섹션 (좌측) -->
<div class="transaction-container" style="overflow-y:auto;">
<jsp:include page="components/dashboard-transactions.jsp">
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
</jsp:include>
</div>
<!-- 실시간 트랜잭션 현황 섹션 (우측) -->
<div class="transaction-overview-container">
<jsp:include page="components/dashboard-tran-chart.jsp" />
</div>
</div>
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
<div class="dashboard-row third-row">
<!-- 어댑터 섹션 (8/10 비율) -->
<div class="adapters-container">
<jsp:include page="components/dashboard-adapter.jsp">
@@ -221,9 +208,25 @@
</jsp:include>
</div>
<!-- 장애통보(SMS) 섹션 (2/10 비율) -->
<div class="sms-container">
<jsp:include page="components/dashboard-sms.jsp" />
<!-- 거래 처리 집계 섹션 (우측) -->
<div class="transaction-container" style="overflow-y:auto;">
<jsp:include page="components/dashboard-transactions.jsp">
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
</jsp:include>
</div>
</div>
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
<div class="dashboard-row third-row">
<!-- 실시간 트랜잭션 현황 섹션 (좌측) -->
<div class="transaction-overview-container">
<jsp:include page="components/dashboard-tran-chart.jsp" />
</div>
<!-- 배치 처리 상태 섹션 (3/8 비율) -->
<div class="batch-container">
<jsp:include page="components/dashboard-batch.jsp" />
</div>
</div>
<!-- 인터페이스 로그 조회 모달 -->
@@ -233,19 +236,33 @@
</div>
<script type="text/javascript">
// 서버 데이터 초기화
<%= serverDataJS.toString() %>
// 행의 높이를 맞추는 함수 (카드를 직접 타겟)
function matchRowHeights() {
$('.dashboard-row').each(function() {
var maxHeight = 0;
// 각 행에 있는 .card 요소를 직접 찾음
var $cards = $(this).find('.card');
// 자동 새로고침 타이머 변수 (window 객체에 할당)
window.refreshTimer = null;
window.refreshInterval = 5; // 기본값 10초
if ($cards.length > 1) {
// 자식 요소의 자연 높이를 얻기 위해 min-height 초기화
$cards.css('min-height', '0');
// 숫자 포맷 유틸리티 함수
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// 자식 카드들의 최대 높이를 찾음
$cards.each(function() {
var currentHeight = $(this).outerHeight();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
// 모든 자식 카드에 최대 높이를 min-height로 적용
if (maxHeight > 0) {
$cards.css('min-height', maxHeight + 'px');
}
}
});
}
// 서버 데이터 설정 및 대시보드 초기화
$(document).ready(function() {
// 대시보드 초기화
initDashboard('<%=request.getContextPath()%>');
@@ -269,6 +286,25 @@
// modern-dashboard.js의 함수 호출
window.startRefreshTimer();
window.updateRefreshStatus();
// --- 높이 맞춤 로직 ---
// 초기 렌더링 후 높이 맞춤 (약간의 지연 후)
setTimeout(function() { matchRowHeights(); }, 300);
// 데이터 로딩이 끝날 때마다 높이 다시 맞춤
if (window.DashboardEventManager) {
window.DashboardEventManager.on('loading-end', function() {
// 데이터 렌더링을 위한 약간의 지연 후 높이 맞춤
setTimeout(function() { matchRowHeights(); }, 100);
});
}
// 창 크기 조절 시 높이 다시 맞춤 (디바운싱 적용)
var resizeTimeout;
$(window).on('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() { matchRowHeights(); }, 200);
});
});
</script>
</body>
WebContent/jsp/onl/admin/httpouttlsinfo/httpOutTlsInfoManDetail.jsp
-5
View File
@@ -234,11 +234,6 @@
var postData = $('#ajaxForm').serializeArray();
$clientId.prop('disabled', true);
var key = "${param.clientId}";
//client 를 먼저 삭제 한 경우를 위해 mTls info 삭제 가능하도록 함.
postData.push({name: "clientId", value: key});
postData.push({name: "cmd", value: "DELETE"});