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

API 상태 지연 필터 및 UI/로직 개선:

Browse Source 
- 장애·지연 구분 및 집계 로직 추가 대응
- 지연 유형 반영 색상/태그/레이블/UI 경로 업데이트
This commit is contained in:
Rinjae
2026-08-03 15:33:21 +09:00
parent 35621b5174
commit 4916bdf4af
21 changed files with 842 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+106 -6
View File
@@ -11163,16 +11163,28 @@ body.index-page-body {
.api-card:active .api-card-desc {
color: #ffffff;
}
.api-card-badge {
.api-card {
/* 그룹 배지 + 현재 상태 태그를 한 줄에 둔다.
기존 그룹 배지가 갖고 있던 절대 위치(top 39 / left 32)를 이 래퍼가 이어받는다 */
}
.api-card-badges {
position: absolute;
top: 39px;
left: 32px;
right: 32px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.api-card-badge {
background-color: #f2f2f3;
border-radius: 10px;
padding: 2px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.api-card-badge span {
font-size: 14px;
@@ -11180,6 +11192,44 @@ body.index-page-body {
font-weight: 500;
color: #1b4ab7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.api-card {
/* 현재 상태 태그. 색 규격은 API Status 화면(.as-badge)과 동일.
상태를 못 받았을 때(빈 값)는 자리만 차지하지 않도록 숨긴다 */
}
.api-card-status {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 3px 12px;
border-radius: 10px;
font-size: 12px;
font-family: "Spoqa Han Sans Neo", sans-serif;
font-weight: 600;
white-space: nowrap;
background: #eef1f5;
color: #4b5563;
}
.api-card-status:empty {
display: none;
}
.api-card-status.is-outage {
background: #feeae7;
color: #c8362f;
}
.api-card-status.is-maintenance {
background: #e7f0fb;
color: #0a66c2;
}
.api-card-status.is-degraded {
background: #fef3c7;
color: #c77800;
}
.api-card-status.is-normal {
background: #e7f6ec;
color: #1b8c4a;
}
.api-card-title {
position: absolute;
@@ -11499,7 +11549,7 @@ body.index-page-body {
}
}
/* "기본 정보" 헤더: 좌측 제목 + 우측 "API 사용 신청" 버튼 */
/* "기본 정보" 헤더: 좌측 제목 + 우측 현재 상태/상태 이력 */
.api-basic-info-header {
display: flex;
align-items: center;
@@ -11508,6 +11558,55 @@ body.index-page-body {
flex-wrap: wrap;
}
/* 현재 상태 배지 + "상태 이력 확인" 버튼.
색 규격은 API Status 화면(.as-badge)과 동일하게 맞춘다 */
.api-status-inline {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.api-status-inline .api-status-inline__label {
font-size: 13px;
font-weight: 500;
color: #4b5563;
}
.api-status-inline .api-status-inline__badge {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
letter-spacing: 0.02em;
white-space: nowrap;
background: #eef1f5;
color: #4b5563;
}
.api-status-inline .api-status-inline__badge.is-outage {
background: #feeae7;
color: #c8362f;
}
.api-status-inline .api-status-inline__badge.is-maintenance {
background: #e7f0fb;
color: #0a66c2;
}
.api-status-inline .api-status-inline__badge.is-degraded {
background: #fef3c7;
color: #c77800;
}
.api-status-inline .api-status-inline__badge.is-normal {
background: #e7f6ec;
color: #1b8c4a;
}
.api-status-inline .api-status-inline__badge.is-loading {
color: #6b7280;
}
.api-status-inline .api-status-inline__badge.is-muted {
background: #eef1f5;
color: #6b7280;
}
/* 하단 중앙 "API 사용 신청" 버튼 */
.api-apply-footer {
display: flex;
@@ -27003,7 +27102,7 @@ input[type=checkbox]:checked + .custom-checkbox {
.api-status .as-legend .as-sw.is-none {
background: var(--as-none-bg);
}
.api-status .as-legend .as-sw.is-both {
.api-status .as-legend .as-sw.is-mixed, .api-status .as-legend .as-sw.is-both {
background: var(--as-both);
}
.api-status .as-my-apis table {
@@ -27248,10 +27347,13 @@ input[type=checkbox]:checked + .custom-checkbox {
.api-status .as-index-cell.has-incident {
background: var(--as-err);
}
.api-status .as-index-cell.has-degraded {
background: var(--as-warn);
}
.api-status .as-index-cell.has-maintenance {
background: var(--as-info);
}
.api-status .as-index-cell.has-both {
.api-status .as-index-cell.has-mixed, .api-status .as-index-cell.has-both {
background: var(--as-both);
}
.api-status .as-index-cell.is-selected {
@@ -28512,5 +28614,3 @@ input[type=checkbox]:checked + .custom-checkbox {
white-space: nowrap;
border: 0;
}
/*# sourceMappingURL=main.css.map */
src/main/resources/static/js/djb/api-status-issues.js
+21 -2
View File
@@ -128,15 +128,21 @@
indexBar.innerHTML = entries.map(function (entry) {
const hasIncident = entry.incCount > 0;
const hasDelay = entry.dlyCount > 0;
const hasMaintenance = entry.mntCount > 0;
// 유형이 2종 이상 섞인 날은 개별 색 대신 복합 색으로 표시한다
const kindCount = (hasIncident ? 1 : 0) + (hasDelay ? 1 : 0) + (hasMaintenance ? 1 : 0);
let cls = '';
if (hasIncident && hasMaintenance) cls = ' has-both';
if (kindCount > 1) cls = ' has-mixed';
else if (hasIncident) cls = ' has-incident';
else if (hasDelay) cls = ' has-degraded';
else if (hasMaintenance) cls = ' has-maintenance';
if (state.date && state.date === entry.date) cls += ' is-selected';
const parts = [];
if (hasIncident) parts.push('장애 ' + entry.incCount + '건');
if (hasDelay) parts.push('지연 ' + entry.dlyCount + '건');
if (hasMaintenance) parts.push('점검 ' + entry.mntCount + '건');
const tooltip = entry.date + (parts.length ? ' · ' + parts.join(' · ') : ' · 이슈 없음');
@@ -382,7 +388,20 @@
applyFilters(true);
});
apiInput.addEventListener('focus', function () { openApiList(''); });
// readonly 자동완성 차단 트릭: 브라우저 autofill 은 readonly 입력을 후보에서 제외한다.
// 사용자가 실제로 만지는 순간에만 readonly 를 풀어 입력을 허용한다 (모바일은 touchstart 가 먼저 온다).
function unlockApiInput() {
if (apiInput.hasAttribute('readonly')) {
apiInput.removeAttribute('readonly');
}
}
apiInput.addEventListener('touchstart', unlockApiInput, { passive: true });
apiInput.addEventListener('mousedown', unlockApiInput);
apiInput.addEventListener('focus', function () {
unlockApiInput();
openApiList('');
});
apiInput.addEventListener('input', function () { openApiList(apiInput.value); });
src/main/resources/static/js/popup/custom-popups.js
+7 -3
View File
@@ -142,7 +142,11 @@ const customPopups = {
$('#passwordPopupMessage').html(customPopups._sanitizeHtml(message));
// 입력 필드 및 에러 초기화 (placeholder 는 호출부 커스텀 허용)
$('#passwordPopupInput').val('').removeClass('error').attr('placeholder', placeholder);
// type 은 열려 있는 동안만 password 로 전환한다.
// 상주 DOM 에 password 입력이 있으면 브라우저가 페이지의 다른 텍스트 입력을
// 아이디 칸으로 오인해 계정 자동완성을 띄우기 때문 (닫을 때 text 로 복원).
$('#passwordPopupInput').val('').removeClass('error')
.attr('type', 'password').attr('placeholder', placeholder);
$('#passwordPopupError').removeClass('show').text('');
// 팝업 표시 (modal 구조 사용)
@@ -219,8 +223,8 @@ const customPopups = {
// Body 스크롤 복원
$('body').css('overflow', '');
// 입력 필드 초기화
$('#passwordPopupInput').val('').removeClass('error');
// 입력 필드 초기화 (type 도 text 로 복원 — 상주 password 로 남기지 않는다)
$('#passwordPopupInput').val('').removeClass('error').attr('type', 'text');
$('#passwordPopupError').removeClass('show').text('');
// 이벤트 리스너 제거
src/main/resources/static/sass/pages/_api-market.scss
+73 -2
View File
@@ -467,16 +467,27 @@
}
}
&-badge {
/* 그룹 배지 + 현재 상태 태그를 한 줄에 둔다.
기존 그룹 배지가 갖고 있던 절대 위치(top 39 / left 32)를 이 래퍼가 이어받는다 */
&-badges {
position: absolute;
top: 39px;
left: 32px;
right: 32px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
&-badge {
background-color: #f2f2f3;
border-radius: 10px;
padding: 2px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
span {
font-size: 14px;
@@ -484,9 +495,34 @@
font-weight: 500;
color: #1b4ab7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* 현재 상태 태그. 색 규격은 API Status 화면(.as-badge)과 동일.
상태를 못 받았을 때(빈 값)는 자리만 차지하지 않도록 숨긴다 */
&-status {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 3px 12px;
border-radius: 10px;
font-size: 12px;
font-family: 'Spoqa Han Sans Neo', sans-serif;
font-weight: 600;
white-space: nowrap;
background: #eef1f5;
color: #4b5563;
&:empty { display: none; }
&.is-outage { background: #feeae7; color: #c8362f; }
&.is-maintenance { background: #e7f0fb; color: #0a66c2; }
&.is-degraded { background: #fef3c7; color: #c77800; }
&.is-normal { background: #e7f6ec; color: #1b8c4a; }
}
&-title {
position: absolute;
top: 86px;
@@ -846,7 +882,7 @@
}
// API Overview Card (Flat Style)
/* "기본 정보" 헤더: 좌측 제목 + 우측 "API 사용 신청" 버튼 */
/* "기본 정보" 헤더: 좌측 제목 + 우측 현재 상태/상태 이력 */
.api-basic-info-header {
display: flex;
align-items: center;
@@ -855,6 +891,41 @@
flex-wrap: wrap;
}
/* 현재 상태 배지 + "상태 이력 확인" 버튼.
색 규격은 API Status 화면(.as-badge)과 동일하게 맞춘다 */
.api-status-inline {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
.api-status-inline__label {
font-size: 13px;
font-weight: 500;
color: #4b5563;
}
.api-status-inline__badge {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
letter-spacing: 0.02em;
white-space: nowrap;
background: #eef1f5;
color: #4b5563;
&.is-outage { background: #feeae7; color: #c8362f; }
&.is-maintenance { background: #e7f0fb; color: #0a66c2; }
&.is-degraded { background: #fef3c7; color: #c77800; }
&.is-normal { background: #e7f6ec; color: #1b8c4a; }
&.is-loading { color: #6b7280; }
&.is-muted { background: #eef1f5; color: #6b7280; }
}
}
/* 하단 중앙 "API 사용 신청" 버튼 */
.api-apply-footer {
display: flex;
src/main/resources/static/sass/pages/_api-status.scss
+5
View File
@@ -384,6 +384,8 @@
&.is-maintenance { background: var(--as-info); }
&.is-degraded { background: var(--as-warn); }
&.is-none { background: var(--as-none-bg); }
// 장애·지연·점검 중 2종 이상이 겹친 날
&.is-mixed,
&.is-both { background: var(--as-both); }
}
}
@@ -601,7 +603,10 @@
transition: opacity 0.15s;
&.has-incident { background: var(--as-err); }
&.has-degraded { background: var(--as-warn); }
&.has-maintenance { background: var(--as-info); }
// 유형이 2종 이상 섞인 날
&.has-mixed,
&.has-both { background: var(--as-both); }
&.is-selected { outline: 2px solid var(--as-text-2); outline-offset: 1px; }
&:hover { opacity: 0.75; }
src/main/resources/templates/views/apps/apis/mainApiDetail.html
+55 -1
View File
@@ -69,9 +69,18 @@
<div class="tab-content" th:classappend="${activeTab == 'testbed'} ? '' : 'active'" id="api-info-tab">
<!-- API Overview Card (Merged with Additional Information) -->
<div class="api-overview-card">
<!--/* 현재 상태는 게시된 장애·점검 공지 기준(/apistatus/current.json). 조회 실패해도 화면은 유지 */-->
<div class="org-section-header org-section-header--agreement api-basic-info-header">
<h3>기본 정보</h3>
<button type="button" class="btn-action-primary md api-apply-btn">API 사용 신청</button>
<div class="api-status-inline" id="apiStatusInline"
th:attr="data-api-id=${apiSpecInfo.apiId},
data-status-url=@{/apistatus/current.json}">
<span class="api-status-inline__label">현재 상태</span>
<span class="api-status-inline__badge is-loading" id="apiStatusBadge">조회 중</span>
<!--/* apiName 은 표시용 - 이슈 이력 화면 필터는 apiId 로 동작한다 */-->
<a class="btn-action-primary md"
th:href="@{/apistatus/issues(apiId=${apiSpecInfo.apiId},apiName=${apiSpecInfo.apiName})}">상태 이력 확인</a>
</div>
</div>
<div class="api-overview-header">
<div class="api-method-badge" th:text="${apiSpecInfo.apiMethod}">GET</div>
@@ -475,6 +484,51 @@
btn.addEventListener('click', requestApiUse);
});
// ===== 기본 정보: 현재 상태 =====
// 게시된 장애·점검 공지 기준(/apistatus/current.json). 상태 이력은 /apistatus/issues?apiId= 로 이어진다.
(function loadApiCurrentStatus() {
const box = document.getElementById('apiStatusInline');
const badge = document.getElementById('apiStatusBadge');
if (!box || !badge) return;
const apiId = box.getAttribute('data-api-id');
const statusUrl = box.getAttribute('data-status-url');
if (!apiId || !statusUrl) return;
const BADGE_CLASS = {
OUTAGE: 'is-outage',
DEGRADED: 'is-degraded',
MAINTENANCE: 'is-maintenance',
NORMAL: 'is-normal'
};
function paint(cls, text, tooltip) {
badge.className = 'api-status-inline__badge ' + cls;
badge.textContent = text;
if (tooltip) badge.setAttribute('title', tooltip);
else badge.removeAttribute('title');
}
fetch(statusUrl + '?apiId=' + encodeURIComponent(apiId), { credentials: 'same-origin' })
.then(function (r) {
if (!r.ok) throw new Error('HTTP ' + r.status);
return r.json();
})
.then(function (status) {
const tooltip = [
status.activeIncidentTitle,
status.statusSince ? '시작 ' + status.statusSince : null,
status.expectedEndAt ? '종료 예정 ' + status.expectedEndAt : null
].filter(Boolean).join('\n');
paint(BADGE_CLASS[status.currentStatus] || 'is-muted',
status.currentStatusLabel || '정상', tooltip);
})
.catch(function (e) {
console.error('API 현재 상태 조회 실패', e);
paint('is-muted', '상태 확인 불가');
});
})();
// ===== DJPGPT0001: 앱 인증 정보 자동 주입 =====
const DEFAULT_TOKEN_API_ID = 'default-token-api-spec';
const appsSelect = document.getElementById('apps');
src/main/resources/templates/views/apps/apis/mainApiList.html
+67 -4
View File
@@ -75,13 +75,20 @@
</div>
<!-- API Cards Grid -->
<div class="api-card-grid" th:if="${apis != null and !apis.isEmpty()}">
<div class="api-card-grid" th:if="${apis != null and !apis.isEmpty()}"
th:attr="data-status-url=@{/apistatus/current-list.json}">
<div class="api-card" th:each="api : ${apis}" th:data-href="@{/apis/detail(id=${api.apiId})}" role="button"
tabindex="0">
<!-- Group Badge -->
<div class="api-card-badge">
<span th:text="${api.apiGroupName}">그룹 이름</span>
<!-- Group Badge + 현재 상태 태그 -->
<div class="api-card-badges">
<div class="api-card-badge">
<span th:text="${api.apiGroupName}">그룹 이름</span>
</div>
<!--/* 상태 태그 노출은 PTL_PROPERTY(djb.apistatus.api-list-status-badge) 로 제어.
값은 로드 후 JS가 채우며, 비어 있는 동안은 CSS(:empty)로 숨긴다 */-->
<span th:if="${apiStatusBadgeEnabled}" class="api-card-status"
th:attr="data-api-id=${api.apiId}"></span>
</div>
<!-- API Name -->
@@ -152,6 +159,62 @@
});
});
// ===== 카드 현재 상태 태그 =====
// 게시된 장애·점검 공지 기준(/apistatus/current-list.json). 태그 자체는 PTL_PROPERTY 로 노출 제어된다.
(function loadApiCardStatuses() {
const grid = document.querySelector('.api-card-grid');
if (!grid) return;
const statusUrl = grid.getAttribute('data-status-url');
const slots = Array.prototype.slice.call(grid.querySelectorAll('.api-card-status[data-api-id]'));
if (!statusUrl || !slots.length) return;
const BADGE_CLASS = {
OUTAGE: 'is-outage',
DEGRADED: 'is-degraded',
MAINTENANCE: 'is-maintenance',
NORMAL: 'is-normal'
};
const CHUNK = 50; // 서버 일괄 조회 상한(100) 이내로 나눠 요청
// 같은 API 가 여러 카드에 나올 수 있어 apiId → 슬롯 목록으로 묶는다
const slotsByApiId = {};
slots.forEach(function (el) {
const apiId = el.getAttribute('data-api-id');
if (!apiId) return;
(slotsByApiId[apiId] = slotsByApiId[apiId] || []).push(el);
});
const apiIds = Object.keys(slotsByApiId);
function paint(list) {
(list || []).forEach(function (status) {
const targets = slotsByApiId[status.apiId];
const cls = BADGE_CLASS[status.currentStatus];
if (!targets || !cls) return;
targets.forEach(function (el) {
el.className = 'api-card-status ' + cls;
el.textContent = status.currentStatusLabel || '';
if (status.activeIncidentTitle) el.setAttribute('title', status.activeIncidentTitle);
});
});
}
for (let index = 0; index < apiIds.length; index += CHUNK) {
const query = apiIds.slice(index, index + CHUNK).map(function (apiId) {
return 'apiId=' + encodeURIComponent(apiId);
}).join('&');
fetch(statusUrl + '?' + query, { credentials: 'same-origin' })
.then(function (r) {
if (!r.ok) throw new Error('HTTP ' + r.status);
return r.json();
})
.then(paint)
// 상태 조회 실패는 목록 자체를 막지 않는다 (태그는 비어 있는 채로 숨겨진다)
.catch(function (e) { console.error('API 현재 상태 조회 실패', e); });
}
})();
// Category/Service Selection
const menuTitles = document.querySelectorAll('.js-menu-trigger');
menuTitles.forEach(function (title) {
src/main/resources/templates/views/djb/apistatus/index.html
+2 -1
View File
@@ -36,7 +36,7 @@
<div class="as-card-head">
<div>
<h2 th:text="|최근 ${windowDays}일 서비스 상태|">최근 90일 서비스 상태</h2>
<p class="as-desc">막대 1개 = 하루 · 장애나 점검이 있던 날만 색으로 표시됩니다.
<p class="as-desc">막대 1개 = 하루 · 장애·지연·점검이 있던 날만 색으로 표시됩니다.
막대를 클릭하면 그 날짜의 이슈 이력으로 이동합니다.</p>
</div>
</div>
@@ -50,6 +50,7 @@
<div class="as-legend">
<span><span class="as-sw is-ok"></span>정상</span>
<span><span class="as-sw is-outage"></span>장애</span>
<span><span class="as-sw is-degraded"></span>지연</span>
<span><span class="as-sw is-maintenance"></span>점검</span>
</div>
</section>
src/main/resources/templates/views/djb/apistatus/issues.html
+7 -5
View File
@@ -47,8 +47,9 @@
<div class="as-legend">
<span><span class="as-sw is-none"></span>정상 (이슈 없음)</span>
<span><span class="as-sw is-outage"></span>장애만</span>
<span><span class="as-sw is-degraded"></span>지연만</span>
<span><span class="as-sw is-maintenance"></span>점검만</span>
<span><span class="as-sw is-both"></span>장애 + 점검</span>
<span><span class="as-sw is-mixed"></span>복합 (2종 이상)</span>
</div>
</section>
@@ -67,10 +68,11 @@
<div class="as-filter-field as-combo" id="apiCombo">
<label class="as-filter-label" for="filterApiInput">API</label>
<div class="as-field-control">
<!-- type=search: 레이아웃에 비밀번호 팝업(input[type=password])이 늘 포함돼 있어
일반 text 입력은 브라우저가 계정 자동완성 대상으로 오인한다 -->
<input type="search" id="filterApiInput" name="issueApiKeyword" class="as-input"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
<!-- 레이아웃에 비밀번호 팝업(input[type=password])이 늘 포함돼 있어 브라우저가
이 입력을 계정(아이디) 칸으로 오인한다. autocomplete=off 는 Chrome 이 무시하므로
new-password + 초기 readonly(focus 시 해제, JS) 조합으로 자동완성을 차단한다 -->
<input type="search" id="filterApiInput" class="as-input" readonly
autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false"
data-lpignore="true" data-1p-ignore data-form-type="other"
placeholder="전체 API (API 명 입력)" aria-expanded="false"
role="combobox" aria-controls="filterApiList">
src/main/resources/templates/views/fragment/popup/passwordInputPopup.html
+5 -1
View File
@@ -25,10 +25,14 @@
</p>
<!-- Password Input Field -->
<!-- 초기 type=text: 이 팝업은 모든 페이지 DOM 에 상주하므로 type=password 로 두면
브라우저가 페이지의 다른 텍스트 입력을 아이디 칸으로 오인해 계정 자동완성을 띄운다.
팝업을 열 때 JS(custom-popups.js)가 password 로 전환하고 닫을 때 되돌린다. -->
<div class="pop_input_group">
<input type="password"
<input type="text"
id="passwordPopupInput"
class="pop_input_field"
autocomplete="new-password"
placeholder="비밀번호를 입력하세요">
<div id="passwordPopupError" class="error-message"></div>
</div>