1f8b926066
[PMS 완성] - core/si_report.py: 일/주/월 보고서 (Excel/HTML/PDF/DOCX/PPTX) - routers/si_report.py: daily|weekly|monthly + 메신저 발송 - routers/deliverables.py: 산출물 CRUD + 제출/검토 - si_issues.py: 이슈→SR 자동 연결 - scheduler.py: 일일 18:00 + 주간 금 17:00 자동 보고서 - models.py: Deliverable 모델 [준수성 자동 점검] - core/compliance_check.py: SC-8개/WA-7개/PI-6개 규칙 - routers/compliance.py: 스캔 + HTML/Excel 보고서 [JMeter 성능 테스트] - routers/jmeter.py: JTL 업로드 + 내장 부하 테스트 + 보고서 [공공기관 필수 기능] - routers/public_checklist.py: 행안부 기준 19개 항목 [UI/브랜드] - 로고(ziologo.png) + Copyright 2026 All Rights Reserved - Nifty 계층형 사이드바 (PMS 서브메뉴) - X-Powered-By + X-Copyright 응답 헤더 - manual/15_UI_Nifty_가이드.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2228 lines
97 KiB
JavaScript
2228 lines
97 KiB
JavaScript
/* ══════════════════════════════════════════════════
|
|
F-4: PWA Service Worker 등록
|
|
══════════════════════════════════════════════════ */
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/static/sw.js', { scope: '/' })
|
|
.then(reg => {
|
|
console.log('[GUARDiA PWA] SW 등록 성공:', reg.scope);
|
|
// 새 버전 감지 시 사용자에게 알림
|
|
reg.addEventListener('updatefound', () => {
|
|
const newSW = reg.installing;
|
|
newSW.addEventListener('statechange', () => {
|
|
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
|
|
console.log('[GUARDiA PWA] 새 버전 사용 가능 — 새로고침하면 업데이트됩니다.');
|
|
}
|
|
});
|
|
});
|
|
})
|
|
.catch(err => console.warn('[GUARDiA PWA] SW 등록 실패:', err));
|
|
});
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
Nifty 사이드바 계층 메뉴 토글
|
|
══════════════════════════════════════════════════ */
|
|
function toggleNavGroup(header) {
|
|
const body = header.nextElementSibling;
|
|
const isOpen = body.classList.contains('open');
|
|
body.classList.toggle('open', !isOpen);
|
|
header.setAttribute('aria-expanded', String(!isOpen));
|
|
}
|
|
|
|
// 현재 URL에 해당하는 메뉴 자동 열기
|
|
(function autoOpenNavGroup() {
|
|
document.querySelectorAll('.nav-group-body .nav-sub-item').forEach(item => {
|
|
const href = item.getAttribute('href') || '';
|
|
if (href && location.pathname.startsWith(href.split('?')[0])) {
|
|
const body = item.closest('.nav-group-body');
|
|
const header = body?.previousElementSibling;
|
|
if (body && header) {
|
|
body.classList.add('open');
|
|
header.setAttribute('aria-expanded', 'true');
|
|
item.classList.add('active');
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
테마 관리 (스크립트 최상단 — FOUC 방지)
|
|
══════════════════════════════════════════════════ */
|
|
function applyTheme(key) {
|
|
document.body.dataset.theme = key;
|
|
localStorage.setItem("guardia_theme", key);
|
|
document.querySelectorAll(".theme-swatch").forEach(b =>
|
|
b.classList.toggle("active", b.dataset.theme === key)
|
|
);
|
|
}
|
|
|
|
/* ─── Auth ───────────────────────────────────────── */
|
|
const _token = localStorage.getItem("guardia_token");
|
|
const _userInfo = JSON.parse(localStorage.getItem("guardia_userinfo") || "{}");
|
|
|
|
// 로그인 안 된 경우 → /login으로
|
|
if (!_token) {
|
|
window.location.replace("/login");
|
|
}
|
|
// 비밀번호 변경 필요 → /change-password로
|
|
if (_userInfo.must_change_pw) {
|
|
window.location.replace("/change-password");
|
|
}
|
|
|
|
/**
|
|
* Bearer 토큰을 자동으로 포함하는 fetch 래퍼.
|
|
* 401 응답 시 로그인 페이지로 리다이렉트.
|
|
*/
|
|
async function authFetch(url, opts = {}) {
|
|
const headers = { "Content-Type": "application/json", ...(opts.headers || {}) };
|
|
if (_token) headers["Authorization"] = `Bearer ${_token}`;
|
|
const res = await fetch(url, { ...opts, headers });
|
|
if (res.status === 401) {
|
|
localStorage.removeItem("guardia_token");
|
|
localStorage.removeItem("guardia_userinfo");
|
|
window.location.replace("/login");
|
|
throw new Error("Unauthorized");
|
|
}
|
|
return res;
|
|
}
|
|
|
|
/** 로그아웃 */
|
|
function logout() {
|
|
localStorage.removeItem("guardia_token");
|
|
localStorage.removeItem("guardia_userinfo");
|
|
window.location.replace("/login");
|
|
}
|
|
|
|
/* ─── State ─────────────────────────────────────── */
|
|
let currentView = "dashboard";
|
|
let srCache = [];
|
|
let statsCache = {};
|
|
let workloadCache = [];
|
|
let dashCache = {}; // 역할별 대시보드 데이터
|
|
|
|
/* ─── Status labels ─────────────────────────────── */
|
|
const STATUS_LABEL = {
|
|
RECEIVED: "접수",
|
|
PARSED: "파싱 완료",
|
|
PENDING_APPROVAL: "승인 대기",
|
|
APPROVED: "승인됨",
|
|
IN_PROGRESS: "진행 중",
|
|
PENDING_PM_VALIDATION: "PM 검증 대기",
|
|
COMPLETED: "완료",
|
|
FAILED_ROLLBACK: "롤백 실패",
|
|
REJECTED: "반려",
|
|
};
|
|
|
|
const TYPE_LABEL = {
|
|
DEPLOY: "배포", RESTART: "재기동", LOG: "로그",
|
|
INQUIRY: "문의", OTHER: "기타",
|
|
};
|
|
|
|
const PRIORITY_LABEL = { CRITICAL: "긴급", HIGH: "높음", MEDIUM: "보통", LOW: "낮음" };
|
|
|
|
const KANBAN_COLS = [
|
|
{ key: "RECEIVED", label: "접수" },
|
|
{ key: "PENDING_APPROVAL", label: "승인 대기" },
|
|
{ key: "APPROVED", label: "승인됨" },
|
|
{ key: "IN_PROGRESS", label: "진행 중" },
|
|
{ key: "PENDING_PM_VALIDATION", label: "PM 검증" },
|
|
{ key: "COMPLETED", label: "완료" },
|
|
{ key: "FAILED_ROLLBACK", label: "롤백 실패" },
|
|
{ key: "REJECTED", label: "반려" },
|
|
];
|
|
|
|
const STATUS_COLORS = {
|
|
RECEIVED: "#8b949e",
|
|
PARSED: "#79c0ff",
|
|
PENDING_APPROVAL: "#e3b341",
|
|
APPROVED: "#56d364",
|
|
IN_PROGRESS: "#58a6ff",
|
|
PENDING_PM_VALIDATION: "#bc8cff",
|
|
COMPLETED: "#3fb950",
|
|
FAILED_ROLLBACK: "#f85149",
|
|
REJECTED: "#da3633",
|
|
};
|
|
|
|
/* ─── Init ──────────────────────────────────────── */
|
|
window.addEventListener("DOMContentLoaded", async () => {
|
|
// 사용자 정보 표시
|
|
const roleLabel = { ADMIN:"관리자", ENGINEER:"엔지니어", PM:"PM", CUSTOMER:"고객" };
|
|
const roleColor = {
|
|
ADMIN:"#818cf8", ENGINEER:"#34d399", PM:"#fbbf24", CUSTOMER:"#a78bfa"
|
|
};
|
|
const role = _userInfo.role || "";
|
|
document.getElementById("user-display-name").textContent =
|
|
_userInfo.display_name || _userInfo.username || "사용자";
|
|
const roleBadge = document.getElementById("user-role-badge");
|
|
roleBadge.textContent = roleLabel[role] || role;
|
|
roleBadge.style.background = (roleColor[role] || "#64748b") + "22";
|
|
roleBadge.style.color = roleColor[role] || "#64748b";
|
|
|
|
// 테마 버튼 active 상태 동기화
|
|
applyTheme(document.body.dataset.theme || "dark");
|
|
|
|
setupNav();
|
|
setupNewSR();
|
|
setupListFilters();
|
|
initChat();
|
|
await loadAll();
|
|
initSSE(); // 실시간 이벤트 연결
|
|
startPoll(); // 30초 폴백 폴링
|
|
});
|
|
|
|
async function loadAll() {
|
|
await Promise.all([loadDashboardMe(), loadSRs(), loadWorkload()]);
|
|
renderCurrentView();
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
SSE 실시간 연결
|
|
══════════════════════════════════════════════════ */
|
|
let _sseSource = null;
|
|
let _sseRetry = 0;
|
|
let _refreshPending = false;
|
|
let _pollTimer = null;
|
|
|
|
function initSSE() {
|
|
if (!_token) return;
|
|
if (_sseSource) { _sseSource.close(); _sseSource = null; }
|
|
|
|
const url = `/api/dashboard/events?token=${encodeURIComponent(_token)}`;
|
|
_sseSource = new EventSource(url);
|
|
|
|
_sseSource.onopen = () => {
|
|
_sseRetry = 0;
|
|
setSseDot(true);
|
|
};
|
|
|
|
_sseSource.onmessage = (e) => {
|
|
if (!e.data || e.data.trim() === "") return;
|
|
try { handleSSEEvent(JSON.parse(e.data)); } catch {}
|
|
};
|
|
|
|
_sseSource.onerror = () => {
|
|
setSseDot(false);
|
|
_sseSource.close();
|
|
_sseSource = null;
|
|
_sseRetry++;
|
|
const delay = Math.min(3000 * _sseRetry, 60000);
|
|
setTimeout(initSSE, delay);
|
|
};
|
|
}
|
|
|
|
function setSseDot(connected) {
|
|
const dot = document.getElementById("sse-dot");
|
|
const lbl = document.getElementById("sse-label");
|
|
if (!dot) return;
|
|
dot.className = `sse-dot ${connected ? "green" : "red"}`;
|
|
if (lbl) lbl.textContent = connected ? "실시간 연결" : "재연결 중…";
|
|
}
|
|
|
|
async function handleSSEEvent(evt) {
|
|
switch (evt.type) {
|
|
case "sr_created":
|
|
showToast(`🆕 새 SR 접수: ${evt.title || evt.sr_id}`, "info");
|
|
debouncedRefresh();
|
|
break;
|
|
case "sr_updated":
|
|
showToast(`📋 ${evt.sr_id} → ${STATUS_LABEL[evt.new_status] || evt.new_status}`, "info");
|
|
debouncedRefresh();
|
|
break;
|
|
case "approval_done": {
|
|
const icon = evt.result === "APPROVED" ? "✅" : "❌";
|
|
showToast(`${icon} ${evt.sr_id} 결재 완료 (${evt.approver})`,
|
|
evt.result === "APPROVED" ? "success" : "warning");
|
|
debouncedRefresh();
|
|
break;
|
|
}
|
|
case "stats":
|
|
await loadDashboardMe();
|
|
if (currentView === "dashboard") renderDashboard();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function debouncedRefresh() {
|
|
if (_refreshPending) return;
|
|
_refreshPending = true;
|
|
setTimeout(async () => {
|
|
await loadAll();
|
|
if (["ADMIN","PM"].includes(_userInfo.role)) loadTrend();
|
|
_refreshPending = false;
|
|
showRefreshIndicator();
|
|
}, 600);
|
|
}
|
|
|
|
function showRefreshIndicator() {
|
|
const el = document.getElementById("topbar-refresh-indicator");
|
|
if (!el) return;
|
|
el.classList.remove("hidden");
|
|
setTimeout(() => el.classList.add("hidden"), 2500);
|
|
}
|
|
|
|
/* 폴백 폴링 (SSE 장애 대비, 30초) */
|
|
function startPoll() {
|
|
if (_pollTimer) clearInterval(_pollTimer);
|
|
_pollTimer = setInterval(async () => {
|
|
if (_sseSource && _sseSource.readyState === EventSource.OPEN) return;
|
|
await loadDashboardMe();
|
|
if (currentView === "dashboard") renderDashboard();
|
|
}, 30000);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
토스트 알림
|
|
══════════════════════════════════════════════════ */
|
|
function showToast(msg, type = "info") {
|
|
const el = document.createElement("div");
|
|
el.className = `toast toast-${type}`;
|
|
el.textContent = msg;
|
|
document.body.appendChild(el);
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => el.classList.add("show"));
|
|
});
|
|
setTimeout(() => {
|
|
el.classList.remove("show");
|
|
setTimeout(() => el.remove(), 350);
|
|
}, 3500);
|
|
}
|
|
|
|
async function loadDashboardMe() {
|
|
try {
|
|
const r = await authFetch("/api/dashboard/me");
|
|
dashCache = await r.json();
|
|
// stats도 함께 채워두기 (호환성)
|
|
if (dashCache.kpi) {
|
|
statsCache = {
|
|
total: dashCache.kpi.total,
|
|
by_status: {},
|
|
by_type: {},
|
|
};
|
|
}
|
|
} catch { dashCache = {}; }
|
|
}
|
|
|
|
/* ─── Nav ───────────────────────────────────────── */
|
|
function setupNav() {
|
|
document.querySelectorAll(".nav-item").forEach(el => {
|
|
el.addEventListener("click", () => {
|
|
const view = el.dataset.view;
|
|
switchView(view);
|
|
});
|
|
});
|
|
}
|
|
|
|
function switchView(view) {
|
|
currentView = view;
|
|
document.querySelectorAll(".nav-item").forEach(el =>
|
|
el.classList.toggle("active", el.dataset.view === view)
|
|
);
|
|
document.querySelectorAll(".view").forEach(el =>
|
|
el.classList.toggle("active", el.id === `view-${view}`)
|
|
);
|
|
const titles = {
|
|
dashboard: "대시보드", board: "칸반 보드",
|
|
list: "SR 목록", audit: "감사 로그", cmdb: "CMDB",
|
|
kb: "기술 문서 KB",
|
|
institutions: "기관 관리", scripts: "스크립트 관리",
|
|
timetable: "작업 타임테이블",
|
|
};
|
|
document.getElementById("page-title").textContent = titles[view] || view;
|
|
renderCurrentView();
|
|
}
|
|
|
|
function renderCurrentView() {
|
|
if (currentView === "dashboard") renderDashboard();
|
|
else if (currentView === "board") renderKanban();
|
|
else if (currentView === "list") renderList();
|
|
else if (currentView === "audit") loadAudit();
|
|
else if (currentView === "cmdb") loadCmdb();
|
|
else if (currentView === "kb") loadKBView();
|
|
else if (currentView === "institutions") loadInstitutions();
|
|
else if (currentView === "scripts") loadScripts();
|
|
else if (currentView === "timetable") loadTimetable();
|
|
}
|
|
|
|
/* ─── Data loading ──────────────────────────────── */
|
|
async function loadWorkload() {
|
|
try {
|
|
const r = await authFetch("/api/assign/workload");
|
|
workloadCache = await r.json();
|
|
renderWorkload();
|
|
} catch { workloadCache = []; }
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const r = await authFetch("/api/tasks/stats");
|
|
statsCache = await r.json();
|
|
} catch { statsCache = {}; }
|
|
}
|
|
|
|
async function loadSRs(params = {}) {
|
|
const qs = new URLSearchParams(params).toString();
|
|
const r = await authFetch(`/api/tasks?limit=200${qs ? "&" + qs : ""}`);
|
|
srCache = await r.json();
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
7일 추이 차트 (순수 SVG)
|
|
══════════════════════════════════════════════════ */
|
|
async function loadTrend() {
|
|
try {
|
|
const r = await authFetch("/api/dashboard/stats/trend");
|
|
const data = await r.json();
|
|
renderTrendChart(data);
|
|
const lbl = document.getElementById("trend-last-updated");
|
|
if (lbl) lbl.textContent = new Date().toLocaleTimeString("ko-KR", { hour:"2-digit", minute:"2-digit" }) + " 기준";
|
|
} catch {}
|
|
}
|
|
|
|
function renderTrendChart(days) {
|
|
const card = document.getElementById("trend-chart-card");
|
|
const el = document.getElementById("trend-chart");
|
|
if (!card || !el || !days?.length) return;
|
|
card.style.display = "";
|
|
|
|
const W = el.clientWidth || 520;
|
|
const H = 130;
|
|
const pad = { t: 16, r: 16, b: 32, l: 36 };
|
|
const cw = W - pad.l - pad.r;
|
|
const ch = H - pad.t - pad.b;
|
|
|
|
const maxVal = Math.max(...days.flatMap(d => [d.created, d.completed]), 1);
|
|
const step = cw / days.length;
|
|
const bw = Math.floor(step * 0.32);
|
|
|
|
// Y 격자선 + 레이블
|
|
const yLines = [0, .5, 1].map(f => {
|
|
const y = pad.t + ch * (1 - f);
|
|
const v = Math.round(maxVal * f);
|
|
return `<line x1="${pad.l}" y1="${y}" x2="${pad.l + cw}" y2="${y}" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
|
|
<text x="${pad.l - 4}" y="${y + 4}" fill="#64748b" font-size="9" text-anchor="end">${v}</text>`;
|
|
}).join("");
|
|
|
|
// 막대 + X 레이블
|
|
const bars = days.map((d, i) => {
|
|
const cx = pad.l + i * step + step * 0.5;
|
|
const x1 = cx - bw - 1;
|
|
const x2 = cx + 1;
|
|
const h1 = Math.max(d.created / maxVal * ch, d.created ? 2 : 0);
|
|
const h2 = Math.max(d.completed / maxVal * ch, d.completed ? 2 : 0);
|
|
const y1 = pad.t + ch - h1;
|
|
const y2 = pad.t + ch - h2;
|
|
return `
|
|
<rect x="${x1}" y="${y1}" width="${bw}" height="${h1}" fill="#818cf8" opacity=".85" rx="3"/>
|
|
<rect x="${x2}" y="${y2}" width="${bw}" height="${h2}" fill="#34d399" opacity=".85" rx="3"/>
|
|
<text x="${cx}" y="${H - 4}" fill="#64748b" font-size="9" text-anchor="middle">${d.label}</text>`;
|
|
}).join("");
|
|
|
|
el.innerHTML = `
|
|
<svg width="100%" height="${H}" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="overflow:visible">
|
|
${yLines}
|
|
<line x1="${pad.l}" y1="${pad.t}" x2="${pad.l}" y2="${pad.t + ch}" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
|
|
<line x1="${pad.l}" y1="${pad.t + ch}" x2="${pad.l + cw}" y2="${pad.t + ch}" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
|
|
${bars}
|
|
</svg>`;
|
|
}
|
|
|
|
/* ─── Dashboard (역할별 분기) ─────────────────────── */
|
|
function renderDashboard() {
|
|
const role = _userInfo.role || "ADMIN";
|
|
const d = dashCache || {};
|
|
const view = document.getElementById("view-dashboard");
|
|
if (!view) return;
|
|
|
|
// 역할 전환 시 이전 역할 전용 동적 요소 정리
|
|
document.getElementById("eng-wl-bar")?.remove();
|
|
document.getElementById("workload-mini-card")?.remove();
|
|
|
|
if (role === "ADMIN") renderDashboardAdmin(d);
|
|
else if (role === "ENGINEER") renderDashboardEngineer(d);
|
|
else if (role === "PM") renderDashboardPM(d);
|
|
else if (role === "CUSTOMER") renderDashboardCustomer(d);
|
|
else renderDashboardAdmin(d);
|
|
}
|
|
|
|
/* ── 공통 헬퍼 ─────────────────────────────────── */
|
|
function _srRow(sr, extra = "") {
|
|
return `
|
|
<div class="recent-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-${sr.status}">${STATUS_LABEL[sr.status] || sr.status}</span>
|
|
${extra}
|
|
</div>`;
|
|
}
|
|
|
|
function _statCard(value, label, color = "accent", sub = "", icon = "") {
|
|
return `<div class="stat-card ${color}">
|
|
${icon ? `<div class="stat-icon">${icon}</div>` : ""}
|
|
<div class="stat-value">${value}</div>
|
|
<div class="stat-label">${label}</div>
|
|
${sub ? `<div class="stat-sub">${sub}</div>` : ""}
|
|
</div>`;
|
|
}
|
|
|
|
function _statusBarChart(byStatus) {
|
|
const total = Object.values(byStatus).reduce((a, b) => a + b, 0) || 1;
|
|
return `<div class="status-bar-list">` +
|
|
Object.entries(byStatus).sort((a,b) => b[1]-a[1]).map(([k,v]) => `
|
|
<div class="status-bar-item">
|
|
<div class="status-bar-label">
|
|
<span>${STATUS_LABEL[k]||k}</span><span>${v}</span>
|
|
</div>
|
|
<div class="status-bar-track">
|
|
<div class="status-bar-fill" style="width:${Math.round(v/total*100)}%;background:${STATUS_COLORS[k]||'#8b949e'}"></div>
|
|
</div>
|
|
</div>`).join("") + `</div>`;
|
|
}
|
|
|
|
/* ── ADMIN 대시보드 ─────────────────────────────── */
|
|
function renderDashboardAdmin(d) {
|
|
const kpi = d.kpi || {};
|
|
document.getElementById("dash-greeting")?.remove();
|
|
|
|
document.getElementById("stats-row").innerHTML = `
|
|
${_statCard(kpi.total || 0, "전체 SR", "accent", "", "📋")}
|
|
${_statCard(kpi.pending_approval || 0, "승인 대기", "yellow", "", "🔔")}
|
|
${_statCard(kpi.in_progress || 0, "진행 중", "cyan", "", "⚙️")}
|
|
${_statCard(kpi.completed_today || 0, "오늘 완료", "green", "", "✅")}
|
|
${_statCard(kpi.failed || 0, "롤백 실패", "red", "", "⚠️")}
|
|
${_statCard((kpi.auto_rate || 0) + "%", "AI 자동처리율","purple", "", "🤖")}
|
|
`;
|
|
|
|
// 최근 SR
|
|
const recent = (d.recent_srs || []).slice(0, 10);
|
|
document.getElementById("recent-list").innerHTML = recent.map(sr => _srRow(sr,
|
|
`<span class="recent-time">${fmtDate(sr.created_at)}</span>`
|
|
)).join("") || '<div style="padding:12px 18px;color:var(--text-muted)">SR이 없습니다.</div>';
|
|
|
|
// 상태별 차트 (srCache 기반)
|
|
const bs = {};
|
|
srCache.forEach(sr => { bs[sr.status] = (bs[sr.status]||0)+1; });
|
|
document.getElementById("status-chart").innerHTML = _statusBarChart(bs);
|
|
|
|
// 7일 추이 차트
|
|
loadTrend();
|
|
|
|
// 승인 대기 목록 (workload 카드에 표시)
|
|
const pendEl = document.getElementById("workload-body");
|
|
const pendList = (d.pending_srs || []);
|
|
const pendHTML = pendList.length
|
|
? pendList.map(sr => `
|
|
<div class="recent-row pending-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-priority-${sr.priority}">${PRIORITY_LABEL[sr.priority]||sr.priority}</span>
|
|
<span style="font-size:11px;color:var(--text-muted)">${esc(sr.requested_by||"")}</span>
|
|
</div>`).join("")
|
|
: '<div style="color:var(--text-muted);font-size:13px;padding:8px">승인 대기 SR 없음</div>';
|
|
|
|
// workload 카드 헤더 변경
|
|
const wlCard = document.getElementById("workload-card");
|
|
if (wlCard) {
|
|
wlCard.querySelector(".card-header").innerHTML = `
|
|
<span>🟡 승인 대기 (${pendList.length}건)</span>
|
|
<span style="font-size:12px;color:var(--text-muted);font-weight:400">클릭하여 상세 확인</span>`;
|
|
if (pendEl) pendEl.innerHTML = pendHTML;
|
|
}
|
|
|
|
// 엔지니어 워크로드 mini (status-chart 하단에 추가)
|
|
renderWorkloadMini(d.workload || workloadCache);
|
|
}
|
|
|
|
function renderWorkloadMini(wl) {
|
|
// 기존 mini 제거
|
|
document.getElementById("workload-mini-card")?.remove();
|
|
const main = document.getElementById("view-dashboard");
|
|
if (!main || !wl?.length) return;
|
|
const div = document.createElement("div");
|
|
div.id = "workload-mini-card";
|
|
div.className = "card";
|
|
div.style.marginTop = "16px";
|
|
div.innerHTML = `
|
|
<div class="card-header">👷 엔지니어 워크로드</div>
|
|
<div class="card-body" style="padding:12px 16px">
|
|
<div class="workload-grid">
|
|
${wl.map(e => {
|
|
const pct = e.utilization || 0;
|
|
const color = pct >= 80 ? "#f85149" : pct >= 50 ? "#e3b341" : "#3fb950";
|
|
return `
|
|
<div class="workload-eng-card" onclick="openAutoAssignModal(event,'${e.username}')">
|
|
<div class="workload-eng-header">
|
|
<div class="eng-avatar">${(e.display_name||"?").charAt(0)}</div>
|
|
<div>
|
|
<div class="eng-name">${esc(e.display_name||e.username)}</div>
|
|
<div style="font-size:10px;color:var(--text-muted)">${(e.skill_types||"").split(",").filter(Boolean).join("·")}</div>
|
|
</div>
|
|
<div class="eng-count" style="color:${color}">${e.active}<span style="color:var(--text-muted);font-size:11px">/${e.max_workload}</span></div>
|
|
</div>
|
|
<div class="workload-bar-track">
|
|
<div class="workload-bar-fill" style="width:${pct}%;background:${color}"></div>
|
|
</div>
|
|
</div>`;
|
|
}).join("")}
|
|
</div>
|
|
</div>`;
|
|
main.appendChild(div);
|
|
}
|
|
|
|
/* ── ENGINEER 대시보드 ──────────────────────────── */
|
|
function renderDashboardEngineer(d) {
|
|
const wl = d.my_workload || {};
|
|
const pct = wl.utilization || 0;
|
|
const barColor = pct >= 80 ? "#f85149" : pct >= 50 ? "#e3b341" : "#3fb950";
|
|
const skills = (wl.skills || "").split(",").filter(Boolean)
|
|
.map(s => ({ DEPLOY:"배포", RESTART:"재기동", LOG:"로그", INQUIRY:"문의" }[s]||s));
|
|
|
|
document.getElementById("stats-row").innerHTML = `
|
|
<div class="stat-card accent" style="flex:2;min-width:200px">
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<div class="eng-avatar" style="width:44px;height:44px;font-size:20px">${(_userInfo.display_name||"E").charAt(0)}</div>
|
|
<div>
|
|
<div class="stat-value" style="font-size:16px">${esc(d.greeting||"")}</div>
|
|
<div class="stat-sub" style="margin-top:4px">${skills.map(s=>`<span class="skill-tag">${s}</span>`).join("")}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${_statCard(wl.active||0, "담당 중", "accent", `최대 ${wl.max||5}건`)}
|
|
${_statCard(wl.completed_month||0, "이번 달 완료", "green")}
|
|
${_statCard(wl.completed_total||0, "누적 완료", "purple")}
|
|
`;
|
|
|
|
// 워크로드 바 (중복 방지)
|
|
document.getElementById("eng-wl-bar")?.remove();
|
|
const statsRowEl = document.getElementById("stats-row");
|
|
statsRowEl.insertAdjacentHTML("afterend", `
|
|
<div id="eng-wl-bar" class="eng-workload-bar-wrap">
|
|
<div style="display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:4px">
|
|
<span>현재 워크로드</span><span>${wl.active||0}/${wl.max||5}건 (${pct}%)</span>
|
|
</div>
|
|
<div class="workload-bar-track" style="height:8px">
|
|
<div class="workload-bar-fill" style="width:${pct}%;background:${barColor};height:8px"></div>
|
|
</div>
|
|
</div>`);
|
|
|
|
// 처리 대기 (APPROVED — 바로 시작 가능)
|
|
const ready = d.action_required || [];
|
|
document.getElementById("recent-list").innerHTML = `
|
|
<div style="font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;
|
|
letter-spacing:.05em;padding:8px 16px;border-bottom:1px solid var(--border)">
|
|
⚡ 즉시 실행 가능 (APPROVED, ${ready.length}건)
|
|
</div>` +
|
|
(ready.map(sr => `
|
|
<div class="recent-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-priority-${sr.priority}">${PRIORITY_LABEL[sr.priority]||sr.priority}</span>
|
|
<button class="btn btn-primary" style="font-size:11px;padding:2px 10px;margin-left:auto"
|
|
onclick="event.stopPropagation();runSimulate('${sr.sr_id}')">▶ 실행</button>
|
|
</div>`).join("") ||
|
|
'<div style="padding:12px 16px;color:var(--text-muted);font-size:13px">처리 대기 SR 없음</div>');
|
|
|
|
// 진행 중
|
|
const inprog = d.in_progress || [];
|
|
document.getElementById("status-chart").innerHTML = `
|
|
<div style="font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;
|
|
letter-spacing:.05em;padding:8px 16px 4px;border-bottom:1px solid var(--border)">
|
|
🔄 진행 중 (${inprog.length}건)
|
|
</div>` +
|
|
(inprog.map(sr => _srRow(sr, `<span class="recent-time">${fmtDate(sr.updated_at)}</span>`)).join("") ||
|
|
'<div style="padding:12px 16px;color:var(--text-muted);font-size:13px">진행 중 SR 없음</div>');
|
|
|
|
// 워크로드 카드: 최근 완료
|
|
const done = d.recent_completed || [];
|
|
const wlEl = document.getElementById("workload-card");
|
|
if (wlEl) {
|
|
wlEl.querySelector(".card-header").innerHTML = `<span>✅ 최근 완료 (${done.length}건)</span>`;
|
|
const body = document.getElementById("workload-body");
|
|
if (body) body.innerHTML = done.map(sr =>
|
|
_srRow(sr, `<span class="recent-time">${fmtDate(sr.updated_at)}</span>`)
|
|
).join("") || '<div style="padding:12px 16px;color:var(--text-muted);font-size:13px">완료 이력 없음</div>';
|
|
}
|
|
}
|
|
|
|
/* ── PM 대시보드 ────────────────────────────────── */
|
|
function renderDashboardPM(d) {
|
|
const pendCnt = d.pending_count || 0;
|
|
document.getElementById("stats-row").innerHTML = `
|
|
<div class="stat-card yellow" style="flex:1.5">
|
|
<div class="stat-value">${pendCnt}</div>
|
|
<div class="stat-label">승인 대기</div>
|
|
${pendCnt > 0 ? '<div class="stat-sub" style="color:#e3b341">즉시 처리 필요</div>' : ""}
|
|
</div>
|
|
${(d.inst_stats||[]).map(i => _statCard(i.total, i.inst_name, "accent", `진행 ${i.active} · 완료 ${i.completed}`)).join("")}
|
|
`;
|
|
|
|
// 승인 대기 큐 (메인 카드)
|
|
const pend = d.pending_srs || [];
|
|
document.getElementById("recent-list").innerHTML = `
|
|
<div style="font-size:11px;font-weight:700;color:var(--yellow);text-transform:uppercase;
|
|
letter-spacing:.05em;padding:8px 16px;border-bottom:1px solid var(--border)">
|
|
🔔 승인 대기 큐 — 결재 필요
|
|
</div>` +
|
|
pend.map(sr => `
|
|
<div class="recent-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-priority-${sr.priority}">${PRIORITY_LABEL[sr.priority]||sr.priority}</span>
|
|
<span style="font-size:11px;color:var(--text-muted);flex-shrink:0">${esc(sr.requested_by||"")}</span>
|
|
<div style="display:flex;gap:4px;margin-left:auto" onclick="event.stopPropagation()">
|
|
<button class="btn btn-approve" style="font-size:11px;padding:2px 8px"
|
|
onclick="quickApprove('${sr.sr_id}','APPROVED')">✅</button>
|
|
<button class="btn btn-reject" style="font-size:11px;padding:2px 8px"
|
|
onclick="quickApprove('${sr.sr_id}','REJECTED')">❌</button>
|
|
</div>
|
|
</div>`).join("") ||
|
|
'<div style="padding:12px 16px;color:var(--text-muted);font-size:13px">승인 대기 SR 없음 ✨</div>';
|
|
|
|
// 엔지니어 워크로드
|
|
const wlEl = document.getElementById("workload-card");
|
|
if (wlEl) {
|
|
wlEl.querySelector(".card-header").innerHTML = `<span>👷 엔지니어 워크로드</span>`;
|
|
const body = document.getElementById("workload-body");
|
|
if (body) body.innerHTML = `<div class="workload-grid">` +
|
|
(d.workload||[]).map(e => {
|
|
const pct = e.utilization||0;
|
|
const color = pct>=80?"#f85149":pct>=50?"#e3b341":"#3fb950";
|
|
return `<div class="workload-eng-card">
|
|
<div class="workload-eng-header">
|
|
<div class="eng-avatar">${(e.display_name||"?").charAt(0)}</div>
|
|
<div><div class="eng-name">${esc(e.display_name||e.username)}</div></div>
|
|
<div class="eng-count" style="color:${color}">${e.active}<span style="color:var(--text-muted);font-size:11px">/${e.max_workload}</span></div>
|
|
</div>
|
|
<div class="workload-bar-track"><div class="workload-bar-fill" style="width:${pct}%;background:${color}"></div></div>
|
|
</div>`;
|
|
}).join("") + `</div>`;
|
|
}
|
|
|
|
// 상태 차트
|
|
const bs = {};
|
|
srCache.forEach(sr => { bs[sr.status] = (bs[sr.status]||0)+1; });
|
|
document.getElementById("status-chart").innerHTML = _statusBarChart(bs);
|
|
|
|
// PM도 추이 차트 표시
|
|
loadTrend();
|
|
}
|
|
|
|
/* ── CUSTOMER 대시보드 ──────────────────────────── */
|
|
function renderDashboardCustomer(d) {
|
|
const st = d.stats || {};
|
|
document.getElementById("stats-row").innerHTML = `
|
|
<div class="stat-card accent" style="flex:2">
|
|
<div style="font-size:13px;color:var(--text-muted);margin-bottom:4px">소속 기관</div>
|
|
<div class="stat-value" style="font-size:18px">${esc(d.inst_name||d.inst_code||"—")}</div>
|
|
</div>
|
|
${_statCard(st.total||0, "전체 SR")}
|
|
${_statCard(st.active||0, "진행 중", "accent")}
|
|
${_statCard(st.completed||0, "완료", "green")}
|
|
${d.avg_rating != null ? _statCard("★".repeat(Math.round(d.avg_rating||0)) + ` ${d.avg_rating}`, "평균 만족도", "yellow") : ""}
|
|
`;
|
|
|
|
// 진행 중 SR
|
|
const activeSRs = d.active_srs || [];
|
|
document.getElementById("recent-list").innerHTML = `
|
|
<div style="font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;
|
|
letter-spacing:.05em;padding:8px 16px;border-bottom:1px solid var(--border)">
|
|
🔄 진행 중인 요청 (${activeSRs.length}건)
|
|
</div>` +
|
|
activeSRs.map(sr => `
|
|
<div class="recent-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-${sr.status}">${STATUS_LABEL[sr.status]||sr.status}</span>
|
|
<span style="font-size:11px;color:var(--text-muted)">${esc(sr.assigned_to||"처리 중")}</span>
|
|
</div>`).join("") ||
|
|
'<div style="padding:12px 16px;color:var(--text-muted);font-size:13px">진행 중인 요청이 없습니다.</div>';
|
|
|
|
// 상태 현황
|
|
const bs = {};
|
|
srCache.forEach(sr => { bs[sr.status] = (bs[sr.status]||0)+1; });
|
|
document.getElementById("status-chart").innerHTML = _statusBarChart(bs);
|
|
|
|
// 워크로드 카드: 최근 완료
|
|
const done = d.recent_completed || [];
|
|
const wlEl = document.getElementById("workload-card");
|
|
if (wlEl) {
|
|
wlEl.querySelector(".card-header").innerHTML = `<span>✅ 최근 완료된 요청</span>`;
|
|
const body = document.getElementById("workload-body");
|
|
if (body) body.innerHTML = done.map(sr => `
|
|
<div class="recent-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-COMPLETED">완료</span>
|
|
<span class="recent-time">${fmtDate(sr.updated_at)}</span>
|
|
</div>`).join("") ||
|
|
'<div style="padding:12px 16px;color:var(--text-muted);font-size:13px">완료된 요청 없음</div>';
|
|
}
|
|
}
|
|
|
|
/* ── PM 빠른 승인/반려 ──────────────────────────── */
|
|
async function quickApprove(srId, result) {
|
|
const actor = _userInfo.display_name || _userInfo.username || "PM";
|
|
const r = await authFetch(`/api/approvals/${srId}`, {
|
|
method: "POST",
|
|
body: JSON.stringify({ approver: actor, result, comment: "대시보드 빠른 처리" }),
|
|
});
|
|
if (r.ok) { await loadAll(); }
|
|
else { const e = await r.json().catch(()=>({})); alert(e.detail||"처리 실패"); }
|
|
}
|
|
|
|
/* ─── 엔지니어 워크로드 패널 ─────────────────────── */
|
|
function renderWorkload() {
|
|
const el = document.getElementById("workload-body");
|
|
if (!el) return;
|
|
|
|
if (!workloadCache.length) {
|
|
el.innerHTML = '<div style="color:var(--text-muted);font-size:13px;padding:8px 0">등록된 엔지니어 프로필 없음</div>';
|
|
return;
|
|
}
|
|
|
|
const skillLabel = { DEPLOY:"배포", RESTART:"재기동", LOG:"로그", INQUIRY:"문의", OTHER:"기타" };
|
|
const canAssign = ["ADMIN","PM"].includes(_userInfo.role || "");
|
|
|
|
el.innerHTML = `
|
|
<div class="workload-grid">
|
|
${workloadCache.map(eng => {
|
|
const pct = eng.utilization;
|
|
const color = pct >= 80 ? "#f85149" : pct >= 50 ? "#e3b341" : "#3fb950";
|
|
const skills = (eng.skill_types || "").split(",").filter(Boolean)
|
|
.map(s => `<span class="skill-tag">${skillLabel[s]||s}</span>`).join("");
|
|
const aff = (eng.inst_affinity || "").split(",").filter(Boolean)
|
|
.map(a => `<span class="skill-tag inst-tag">${a}</span>`).join("");
|
|
const assignBtn = canAssign
|
|
? `<button class="btn btn-secondary" style="font-size:11px;padding:3px 8px;margin-top:4px"
|
|
onclick="openAutoAssignModal(event,'${eng.username}')">배정 중인 SR 보기</button>`
|
|
: "";
|
|
return `
|
|
<div class="workload-eng-card">
|
|
<div class="workload-eng-header">
|
|
<div class="eng-avatar">${eng.display_name.charAt(0)}</div>
|
|
<div>
|
|
<div class="eng-name">${esc(eng.display_name)}</div>
|
|
<div style="font-size:11px;color:var(--text-muted)">${eng.username}</div>
|
|
</div>
|
|
<div class="eng-count" style="color:${color}">
|
|
${eng.active}<span style="color:var(--text-muted);font-size:11px">/${eng.max_workload}</span>
|
|
</div>
|
|
</div>
|
|
<div class="workload-bar-track">
|
|
<div class="workload-bar-fill" style="width:${pct}%;background:${color}"></div>
|
|
</div>
|
|
<div class="workload-tags">${skills}${aff}</div>
|
|
<div style="font-size:11px;color:var(--text-muted);margin-top:2px">완료 ${eng.completed}건</div>
|
|
${assignBtn}
|
|
</div>`;
|
|
}).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
function openAutoAssignModal(e, username) {
|
|
e.stopPropagation();
|
|
const eng = workloadCache.find(e => e.username === username);
|
|
if (!eng) return;
|
|
const active = srCache.filter(sr =>
|
|
sr.assigned_to === username &&
|
|
!["COMPLETED","FAILED_ROLLBACK","REJECTED"].includes(sr.status)
|
|
);
|
|
const html = active.length
|
|
? active.map(sr => `
|
|
<div class="recent-row" onclick="openDetail('${sr.sr_id}')">
|
|
<span class="recent-sr-id">${sr.sr_id}</span>
|
|
<span class="recent-title">${esc(sr.title)}</span>
|
|
<span class="badge badge-${sr.status}">${STATUS_LABEL[sr.status]||sr.status}</span>
|
|
</div>`).join("")
|
|
: '<div style="color:var(--text-muted);font-size:13px;padding:12px">현재 담당 중인 SR 없음</div>';
|
|
|
|
document.getElementById("modal-body").innerHTML = `
|
|
<div class="modal-title">👷 ${esc(eng.display_name)} 담당 SR</div>
|
|
<div style="font-size:13px;color:var(--text-muted);margin-bottom:12px">
|
|
활성 ${eng.active}건 | 완료 ${eng.completed}건 | 이용률 ${eng.utilization}%
|
|
</div>
|
|
${html}`;
|
|
document.getElementById("modal-overlay").classList.remove("hidden");
|
|
}
|
|
|
|
/* ─── Kanban ────────────────────────────────────── */
|
|
function renderKanban() {
|
|
const board = document.getElementById("kanban-board");
|
|
board.innerHTML = "";
|
|
KANBAN_COLS.forEach(col => {
|
|
const cards = srCache.filter(sr => sr.status === col.key);
|
|
const colEl = document.createElement("div");
|
|
colEl.className = "kanban-col";
|
|
colEl.innerHTML = `
|
|
<div class="kanban-col-header">
|
|
<span class="badge badge-${col.key}">${col.label}</span>
|
|
<span class="col-count">${cards.length}</span>
|
|
</div>
|
|
<div class="kanban-cards" id="col-${col.key}"></div>`;
|
|
board.appendChild(colEl);
|
|
|
|
const cardsEl = colEl.querySelector(`#col-${col.key}`);
|
|
cards.forEach(sr => {
|
|
const card = document.createElement("div");
|
|
card.className = "kanban-card";
|
|
card.innerHTML = `
|
|
<div class="kanban-card-id">${sr.sr_id}</div>
|
|
<div class="kanban-card-title">${esc(sr.title)}</div>
|
|
<div class="kanban-card-meta">
|
|
<span class="badge badge-type-${sr.sr_type}">${TYPE_LABEL[sr.sr_type] || sr.sr_type}</span>
|
|
<span class="badge badge-priority-${sr.priority}">${PRIORITY_LABEL[sr.priority] || sr.priority}</span>
|
|
</div>`;
|
|
card.addEventListener("click", () => openDetail(sr.sr_id));
|
|
cardsEl.appendChild(card);
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ─── SR List ───────────────────────────────────── */
|
|
function setupListFilters() {
|
|
document.getElementById("search-input").addEventListener("input", renderList);
|
|
document.getElementById("filter-status").addEventListener("change", renderList);
|
|
document.getElementById("filter-type").addEventListener("change", renderList);
|
|
}
|
|
|
|
function renderList() {
|
|
const keyword = document.getElementById("search-input").value.toLowerCase();
|
|
const fStatus = document.getElementById("filter-status").value;
|
|
const fType = document.getElementById("filter-type").value;
|
|
|
|
let rows = srCache;
|
|
if (keyword) rows = rows.filter(r => r.title.toLowerCase().includes(keyword) || r.sr_id.toLowerCase().includes(keyword));
|
|
if (fStatus) rows = rows.filter(r => r.status === fStatus);
|
|
if (fType) rows = rows.filter(r => r.sr_type === fType);
|
|
|
|
document.getElementById("sr-tbody").innerHTML = rows.map(sr => {
|
|
const engInfo = workloadCache.find(e => e.username === sr.assigned_to);
|
|
const engChip = sr.assigned_to
|
|
? `<span class="eng-chip">${esc(engInfo?.display_name || sr.assigned_to)}</span>`
|
|
: `<span style="color:var(--text-muted);font-size:12px">미배정</span>`;
|
|
return `
|
|
<tr onclick="openDetail('${sr.sr_id}')">
|
|
<td><code style="font-size:11px">${sr.sr_id}</code></td>
|
|
<td><span class="badge badge-type-${sr.sr_type}">${TYPE_LABEL[sr.sr_type] || sr.sr_type}</span></td>
|
|
<td>${esc(sr.title)}</td>
|
|
<td><span class="badge badge-${sr.status}">${STATUS_LABEL[sr.status] || sr.status}</span></td>
|
|
<td><span class="badge badge-priority-${sr.priority}">${PRIORITY_LABEL[sr.priority] || sr.priority}</span></td>
|
|
<td>${engChip}</td>
|
|
<td>${esc(sr.requested_by || "")}</td>
|
|
<td style="font-size:12px;color:var(--text-muted)">${fmtDate(sr.created_at)}</td>
|
|
</tr>`;
|
|
}).join("") || `<tr><td colspan="8" style="color:var(--text-muted);text-align:center;padding:20px">결과 없음</td></tr>`;
|
|
}
|
|
|
|
const WORK_ACTION_LABEL = {
|
|
CMDB_CHECK:"🔍 자산 확인", SSH_CONNECT:"🔗 SSH 접속",
|
|
SSH_EXEC:"⚡ 명령 실행", SOURCE_MOD:"📦 파일 배포",
|
|
HEALTH_CHECK:"💓 헬스체크", RESULT:"📋 결과 기록", COMPLETE:"✅ 완료 처리",
|
|
};
|
|
|
|
/* ─── 첨부파일 헬퍼 ────────────────────────────── */
|
|
function _fileIcon(name) {
|
|
const ext = (name.split(".").pop() || "").toLowerCase();
|
|
return {
|
|
pdf:"📄", png:"🖼️", jpg:"🖼️", jpeg:"🖼️", gif:"🖼️", webp:"🖼️",
|
|
xlsx:"📊", xls:"📊", docx:"📝", doc:"📝", pptx:"📊", ppt:"📊",
|
|
zip:"🗜️", tar:"🗜️", gz:"🗜️",
|
|
sh:"⚙️", sql:"🗄️", json:"📋", yaml:"📋", yml:"📋", md:"📋",
|
|
log:"📜", txt:"📜", csv:"📊",
|
|
}[ext] || "📎";
|
|
}
|
|
|
|
function _fmtSize(bytes) {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
function _renderAttachments(atts, srId) {
|
|
if (!atts || atts.length === 0)
|
|
return `<div style="color:var(--text-muted);font-size:13px">첨부파일 없음</div>`;
|
|
return `<div class="attachment-list">` + atts.map(a => `
|
|
<div class="attachment-item">
|
|
<span class="att-icon">${_fileIcon(a.original_name)}</span>
|
|
<a class="att-name" href="/api/tasks/${srId}/attachments/${a.id}/download"
|
|
download="${esc(a.original_name)}" target="_blank">${esc(a.original_name)}</a>
|
|
<span class="att-size">${_fmtSize(a.file_size)}</span>
|
|
<span class="att-uploader">${esc(a.uploaded_by)}</span>
|
|
<span class="att-date">${fmtDate(a.created_at)}</span>
|
|
<button class="att-del" title="삭제" onclick="deleteAttachment('${srId}',${a.id},this)">🗑️</button>
|
|
</div>`).join("") + `</div>`;
|
|
}
|
|
|
|
async function uploadAttachments(srId, input) {
|
|
if (!input.files.length) return;
|
|
const ffd = new FormData();
|
|
for (const f of input.files) ffd.append("files", f);
|
|
const r = await authFetch(`/api/tasks/${srId}/attachments`, { method: "POST", body: ffd });
|
|
if (r.ok) {
|
|
const newAtts = await authFetch(`/api/tasks/${srId}/attachments`).then(x => x.json()).catch(() => []);
|
|
const el = document.getElementById(`att-list-${srId}`);
|
|
if (el) el.innerHTML = _renderAttachments(newAtts, srId);
|
|
} else {
|
|
const err = await r.json().catch(() => ({}));
|
|
alert(err.detail || "파일 업로드 실패");
|
|
}
|
|
input.value = "";
|
|
}
|
|
|
|
async function deleteAttachment(srId, attId, btn) {
|
|
if (!confirm("첨부파일을 삭제하시겠습니까?")) return;
|
|
const r = await authFetch(`/api/tasks/${srId}/attachments/${attId}`, { method: "DELETE" });
|
|
if (r.ok) {
|
|
const newAtts = await authFetch(`/api/tasks/${srId}/attachments`).then(x => x.json()).catch(() => []);
|
|
const el = document.getElementById(`att-list-${srId}`);
|
|
if (el) el.innerHTML = _renderAttachments(newAtts, srId);
|
|
} else {
|
|
const err = await r.json().catch(() => ({}));
|
|
alert(err.detail || "삭제 실패");
|
|
}
|
|
}
|
|
|
|
/* ─── SR Detail Modal ───────────────────────────── */
|
|
async function openDetail(srId) {
|
|
const sr = srCache.find(s => s.sr_id === srId);
|
|
if (!sr) return;
|
|
|
|
const [approvalsRes, auditRes, workRes, ratingRes, attachmentsRes] = await Promise.all([
|
|
authFetch(`/api/approvals/${srId}`).then(r => r.json()).catch(() => []),
|
|
authFetch(`/api/audit?sr_id=${srId}`).then(r => r.json()).catch(() => []),
|
|
authFetch(`/api/work/${srId}`).then(r => r.json()).catch(() => []),
|
|
authFetch(`/api/rating/${srId}`).then(r => r.ok ? r.json() : null).catch(() => null),
|
|
authFetch(`/api/tasks/${srId}/attachments`).then(r => r.json()).catch(() => []),
|
|
]);
|
|
|
|
const approvalHTML = approvalsRes.length
|
|
? approvalsRes.map(a => `
|
|
<div style="font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)">
|
|
<strong>${esc(a.approver)}</strong>
|
|
<span class="badge badge-${a.result === "APPROVED" ? "COMPLETED" : a.result === "REJECTED" ? "REJECTED" : "PENDING_APPROVAL"}" style="margin-left:8px">
|
|
${a.result === "APPROVED" ? "승인" : a.result === "REJECTED" ? "반려" : "대기"}
|
|
</span>
|
|
${a.comment ? `<span style="color:var(--text-muted);margin-left:8px">${esc(a.comment)}</span>` : ""}
|
|
</div>`).join("")
|
|
: '<div style="color:var(--text-muted);font-size:13px">승인 기록 없음</div>';
|
|
|
|
const auditHTML = auditRes.slice(0, 10).map(log => `
|
|
<div class="timeline-item done">
|
|
<div class="timeline-action">${esc(log.action)} <span style="color:var(--text-muted);font-weight:400">by ${esc(log.actor || "system")}</span></div>
|
|
<div class="timeline-detail">${esc(log.detail || "")} <span class="hash-code">#${(log.log_hash || "").slice(0, 12)}</span></div>
|
|
</div>`).join("") || '<div style="color:var(--text-muted);font-size:13px">기록 없음</div>';
|
|
|
|
const canApprove = sr.status === "PENDING_APPROVAL";
|
|
const canSimulate = !["COMPLETED","FAILED_ROLLBACK","REJECTED"].includes(sr.status);
|
|
const canAssign = ["ADMIN","PM"].includes(_userInfo.role || "");
|
|
|
|
/* 작업 로그 HTML */
|
|
const workHTML = workRes.length
|
|
? `<div class="timeline">` + workRes.map(w => `
|
|
<div class="timeline-item done">
|
|
<div class="timeline-action">${WORK_ACTION_LABEL[w.action_type] || w.action_type}
|
|
<span style="color:var(--text-muted);font-weight:400;font-size:11px"> by ${esc(w.engineer||"AI")}</span>
|
|
</div>
|
|
<div class="timeline-detail">${esc(w.content||"")}
|
|
${w.result ? `<br><code style="font-size:11px;color:#58a6ff">${esc(w.result.slice(0,120))}</code>` : ""}
|
|
</div>
|
|
</div>`).join("") + `</div>`
|
|
: `<div style="color:var(--text-muted);font-size:13px">작업 이력 없음</div>`;
|
|
|
|
/* 별점 HTML */
|
|
const ratingHTML = ratingRes
|
|
? `<div style="font-size:13px;padding:6px 0;color:#e3b341">${"★".repeat(ratingRes.stars)}${"☆".repeat(5-ratingRes.stars)}
|
|
<span style="color:var(--text-muted);margin-left:8px">${esc(ratingRes.customer||"")}
|
|
${ratingRes.comment ? `— ${esc(ratingRes.comment)}` : ""}</span></div>`
|
|
: sr.status === "COMPLETED"
|
|
? `<div id="star-widget" style="margin-top:8px">
|
|
<div style="font-size:12px;color:var(--text-muted);margin-bottom:6px">고객 만족도 평가</div>
|
|
<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
|
|
${[1,2,3,4,5].map(n=>`<button class="btn btn-secondary" style="font-size:18px;padding:4px 8px" onclick="rateFromModal('${srId}',${n})">★${n}</button>`).join("")}
|
|
</div>
|
|
</div>`
|
|
: "";
|
|
|
|
document.getElementById("modal-body").innerHTML = `
|
|
<div class="modal-title">${esc(sr.title)}</div>
|
|
<div class="modal-meta">
|
|
<span class="badge badge-${sr.status}">${STATUS_LABEL[sr.status] || sr.status}</span>
|
|
<span class="badge badge-type-${sr.sr_type}">${TYPE_LABEL[sr.sr_type] || sr.sr_type}</span>
|
|
<span class="badge badge-priority-${sr.priority}">${PRIORITY_LABEL[sr.priority] || sr.priority}</span>
|
|
<code style="font-size:11px;color:var(--text-muted)">${sr.sr_id}</code>
|
|
</div>
|
|
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">요약 정보</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px">
|
|
<div><span style="color:var(--text-muted)">요청자:</span> ${esc(sr.requested_by || "")}</div>
|
|
<div id="assign-cell">
|
|
<span style="color:var(--text-muted)">담당 엔지니어:</span>
|
|
${sr.assigned_to
|
|
? `<span class="eng-chip" style="margin-left:4px">${esc(workloadCache.find(e=>e.username===sr.assigned_to)?.display_name || sr.assigned_to)}</span>`
|
|
: `<span style="color:var(--text-muted);margin-left:4px">미배정</span>`}
|
|
${canAssign ? `<button class="btn btn-secondary" style="font-size:11px;padding:2px 8px;margin-left:6px"
|
|
onclick="openReassignPanel('${sr.sr_id}')">재배정</button>` : ""}
|
|
</div>
|
|
<div><span style="color:var(--text-muted)">대상 서버:</span> ${esc(sr.target_server || "-")}</div>
|
|
<div><span style="color:var(--text-muted)">생성일:</span> ${fmtDate(sr.created_at)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
${sr.description ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">설명</div>
|
|
<div class="modal-desc">${esc(sr.description)}</div>
|
|
</div>` : ""}
|
|
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">승인 현황</div>
|
|
${approvalHTML}
|
|
</div>
|
|
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">🛠️ 작업 실행 이력</div>
|
|
${workHTML}
|
|
${canSimulate ? `
|
|
<div style="margin-top:10px">
|
|
<button class="btn btn-primary" id="btn-simulate-${srId}"
|
|
onclick="runSimulate('${srId}')">⚡ AI 작업 실행 시뮬레이션</button>
|
|
<span id="sim-status-${srId}" style="font-size:12px;color:var(--text-muted);margin-left:8px"></span>
|
|
</div>` : ""}
|
|
</div>
|
|
|
|
${ratingHTML ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">⭐ 고객 만족도</div>
|
|
${ratingHTML}
|
|
</div>` : ""}
|
|
|
|
<div class="modal-section">
|
|
<div class="modal-section-title" style="display:flex;align-items:center;justify-content:space-between">
|
|
<span>📎 첨부파일</span>
|
|
<label class="btn btn-secondary" style="font-size:11px;padding:2px 10px;cursor:pointer">
|
|
파일 추가
|
|
<input type="file" multiple style="display:none"
|
|
accept=".pdf,.txt,.log,.csv,.png,.jpg,.jpeg,.xlsx,.docx,.zip,.sh,.sql,.json,.yaml,.md"
|
|
onchange="uploadAttachments('${srId}', this)">
|
|
</label>
|
|
</div>
|
|
<div id="att-list-${srId}">${_renderAttachments(attachmentsRes, srId)}</div>
|
|
</div>
|
|
|
|
<!-- KB 추천 섹션 (비동기 로드) -->
|
|
<div class="modal-section">
|
|
<div class="modal-section-title" style="display:flex;align-items:center;justify-content:space-between">
|
|
<span>📚 관련 기술 문서 추천</span>
|
|
<button class="btn btn-secondary" style="font-size:11px;padding:2px 8px"
|
|
onclick="loadKBSuggestForSR('${srId}')">새로고침</button>
|
|
</div>
|
|
<div id="kb-suggest-section">
|
|
<div style="color:var(--text-muted);font-size:12px">로딩 중…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">감사 로그</div>
|
|
<div class="timeline">${auditHTML}</div>
|
|
</div>
|
|
|
|
${canApprove ? `
|
|
<div class="modal-actions" id="approval-actions">
|
|
<input type="text" id="approver-name" placeholder="승인자 이름" class="search-box" style="max-width:160px">
|
|
<input type="text" id="approver-comment" placeholder="코멘트(선택)" class="search-box" style="max-width:200px">
|
|
<button class="btn btn-approve" onclick="doApproval('${srId}', 'APPROVED')">✅ 승인</button>
|
|
<button class="btn btn-reject" onclick="doApproval('${srId}', 'REJECTED')">❌ 반려</button>
|
|
</div>` : ""}
|
|
`;
|
|
|
|
document.getElementById("modal-overlay").classList.remove("hidden");
|
|
|
|
// KB 추천 비동기 로드 (모달 렌더 후)
|
|
setTimeout(() => loadKBSuggestForSR(srId), 100);
|
|
}
|
|
|
|
async function doApproval(srId, result) {
|
|
const approver = document.getElementById("approver-name").value.trim();
|
|
const comment = document.getElementById("approver-comment").value.trim();
|
|
if (!approver) { alert("승인자 이름을 입력하세요."); return; }
|
|
|
|
const r = await authFetch(`/api/approvals/${srId}`, {
|
|
method: "POST",
|
|
body: JSON.stringify({ approver, result, comment: comment || null }),
|
|
});
|
|
if (r.ok) {
|
|
document.getElementById("modal-overlay").classList.add("hidden");
|
|
await loadAll();
|
|
} else {
|
|
const err = await r.json().catch(() => ({}));
|
|
alert(err.detail || "처리 중 오류 발생");
|
|
}
|
|
}
|
|
|
|
/* ─── Simulate + Rating from modal ─────────────── */
|
|
async function runSimulate(srId) {
|
|
const btn = document.getElementById(`btn-simulate-${srId}`);
|
|
const lbl = document.getElementById(`sim-status-${srId}`);
|
|
if (btn) { btn.disabled = true; btn.textContent = "⏳ 실행 중…"; }
|
|
if (lbl) lbl.textContent = "CMDB 확인 → SSH 접속 → 작업 수행 중…";
|
|
|
|
const r = await authFetch(`/api/work/${srId}/simulate`, { method: "POST" });
|
|
if (r.ok) {
|
|
if (lbl) lbl.textContent = "✅ 완료! 메신저에 알림이 전송됩니다.";
|
|
await loadAll();
|
|
setTimeout(() => openDetail(srId), 600);
|
|
} else {
|
|
const err = await r.json().catch(() => ({}));
|
|
if (lbl) lbl.textContent = "❌ " + (err.detail || "오류 발생");
|
|
if (btn) { btn.disabled = false; btn.textContent = "⚡ AI 작업 실행 시뮬레이션"; }
|
|
}
|
|
}
|
|
|
|
async function rateFromModal(srId, stars) {
|
|
const customer = prompt("평가자 이름을 입력하세요:", "고객");
|
|
if (!customer) return;
|
|
const r = await authFetch(`/api/rating/${srId}`, {
|
|
method: "POST",
|
|
body: JSON.stringify({ customer, stars, comment: null }),
|
|
});
|
|
if (r.ok) {
|
|
const widget = document.getElementById("star-widget");
|
|
if (widget) widget.innerHTML = `<div style="color:#e3b341;font-size:14px">${"★".repeat(stars)}${"☆".repeat(5-stars)} — 평가 감사합니다!</div>`;
|
|
}
|
|
}
|
|
|
|
document.getElementById("modal-close-btn").addEventListener("click", () =>
|
|
document.getElementById("modal-overlay").classList.add("hidden")
|
|
);
|
|
document.getElementById("modal-overlay").addEventListener("click", e => {
|
|
if (e.target === e.currentTarget) e.currentTarget.classList.add("hidden");
|
|
});
|
|
|
|
/* ─── 엔지니어 재배정 패널 ───────────────────────── */
|
|
async function openReassignPanel(srId) {
|
|
let engineers = [];
|
|
try {
|
|
const r = await authFetch("/api/assign/engineers");
|
|
engineers = await r.json();
|
|
} catch {}
|
|
|
|
const panel = document.createElement("div");
|
|
panel.id = "reassign-panel";
|
|
panel.style.cssText = "margin-top:10px;padding:10px;background:var(--surface-2);border-radius:6px;border:1px solid var(--border)";
|
|
panel.innerHTML = `
|
|
<div style="font-size:12px;color:var(--text-muted);margin-bottom:8px">담당 엔지니어 변경</div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
|
|
<select id="reassign-select" class="filter-select" style="flex:1;min-width:120px">
|
|
<option value="">— 자동 배정 —</option>
|
|
${engineers.map(e => `<option value="${e.username}">${esc(e.display_name)}</option>`).join("")}
|
|
</select>
|
|
<button class="btn btn-primary" style="font-size:12px;padding:5px 12px"
|
|
onclick="submitReassign('${srId}')">배정</button>
|
|
<button class="btn btn-secondary" style="font-size:12px;padding:5px 10px"
|
|
onclick="document.getElementById('reassign-panel')?.remove()">취소</button>
|
|
</div>`;
|
|
|
|
// 기존 패널 있으면 제거
|
|
document.getElementById("reassign-panel")?.remove();
|
|
const assignCell = document.getElementById("assign-cell");
|
|
if (assignCell) assignCell.appendChild(panel);
|
|
}
|
|
|
|
async function submitReassign(srId) {
|
|
const sel = document.getElementById("reassign-select");
|
|
const eng = sel ? sel.value : ""; // "" → 자동 배정
|
|
|
|
const url = `/api/assign/${srId}${eng ? `?engineer=${encodeURIComponent(eng)}` : ""}`;
|
|
const r = await authFetch(url, { method: "POST" });
|
|
if (r.ok) {
|
|
const data = await r.json();
|
|
document.getElementById("reassign-panel")?.remove();
|
|
await loadWorkload();
|
|
await loadAll();
|
|
openDetail(srId);
|
|
} else {
|
|
const err = await r.json().catch(() => ({}));
|
|
alert(err.detail || "배정 실패");
|
|
}
|
|
}
|
|
|
|
/* ─── New SR Modal ──────────────────────────────── */
|
|
function setupNewSR() {
|
|
document.getElementById("btn-new-sr").addEventListener("click", () =>
|
|
document.getElementById("new-sr-overlay").classList.remove("hidden")
|
|
);
|
|
document.getElementById("new-sr-close").addEventListener("click", () =>
|
|
document.getElementById("new-sr-overlay").classList.add("hidden")
|
|
);
|
|
document.getElementById("new-sr-overlay").addEventListener("click", e => {
|
|
if (e.target === e.currentTarget) e.currentTarget.classList.add("hidden");
|
|
});
|
|
// 파일 선택 미리보기
|
|
document.getElementById("sr-file-input").addEventListener("change", e => {
|
|
const files = Array.from(e.target.files || []);
|
|
const txt = document.getElementById("file-upload-text");
|
|
const prev = document.getElementById("file-preview-list");
|
|
txt.textContent = files.length
|
|
? `${files.length}개 파일 선택됨`
|
|
: "첨부파일 선택 (선택사항, 최대 10개 · 파일당 20 MB)";
|
|
prev.innerHTML = files.map(f => `
|
|
<div class="file-preview-item">
|
|
<span class="file-preview-icon">${_fileIcon(f.name)}</span>
|
|
<span class="file-preview-name">${esc(f.name)}</span>
|
|
<span class="file-preview-size">${_fmtSize(f.size)}</span>
|
|
</div>`).join("");
|
|
});
|
|
|
|
document.getElementById("new-sr-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const fd = new FormData(e.target);
|
|
const payload = Object.fromEntries(fd.entries());
|
|
// remove empty optional fields
|
|
if (!payload.description) delete payload.description;
|
|
if (!payload.target_server) delete payload.target_server;
|
|
if (!payload.inst_code) delete payload.inst_code;
|
|
|
|
const r = await authFetch("/api/tasks", {
|
|
method: "POST",
|
|
body: JSON.stringify(payload),
|
|
});
|
|
if (!r.ok) {
|
|
const err = await r.json().catch(() => ({}));
|
|
alert(err.detail || "SR 생성 실패");
|
|
return;
|
|
}
|
|
const sr = await r.json();
|
|
|
|
// 파일 업로드 (선택된 경우)
|
|
const fileInput = document.getElementById("sr-file-input");
|
|
if (fileInput.files.length > 0) {
|
|
const ffd = new FormData();
|
|
for (const f of fileInput.files) ffd.append("files", f);
|
|
const ur = await authFetch(`/api/tasks/${sr.sr_id}/attachments`, {
|
|
method: "POST",
|
|
body: ffd,
|
|
});
|
|
if (!ur.ok) {
|
|
const uerr = await ur.json().catch(() => ({}));
|
|
alert(`SR이 생성되었으나 파일 업로드 실패: ${uerr.detail || "알 수 없는 오류"}`);
|
|
}
|
|
}
|
|
|
|
document.getElementById("new-sr-overlay").classList.add("hidden");
|
|
e.target.reset();
|
|
document.getElementById("file-upload-text").textContent = "첨부파일 선택 (선택사항, 최대 10개 · 파일당 20 MB)";
|
|
document.getElementById("file-preview-list").innerHTML = "";
|
|
await loadAll();
|
|
});
|
|
}
|
|
|
|
/* ─── Audit ─────────────────────────────────────── */
|
|
async function loadAudit() {
|
|
const data = await authFetch("/api/audit?limit=100").then(r => r.json()).catch(() => []);
|
|
document.getElementById("audit-tbody").innerHTML = data.map((log, i) => `
|
|
<tr>
|
|
<td style="color:var(--text-muted)">${i + 1}</td>
|
|
<td><code style="font-size:11px">${esc(log.sr_id || "—")}</code></td>
|
|
<td>${esc(log.actor || "system")}</td>
|
|
<td><strong>${esc(log.action)}</strong></td>
|
|
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(log.detail || "")}</td>
|
|
<td class="hash-code">${(log.log_hash || "").slice(0, 12)}</td>
|
|
<td style="font-size:12px;color:var(--text-muted)">${fmtDate(log.created_at)}</td>
|
|
</tr>`).join("") || `<tr><td colspan="7" style="text-align:center;padding:20px;color:var(--text-muted)">기록 없음</td></tr>`;
|
|
|
|
document.getElementById("btn-verify").addEventListener("click", async () => {
|
|
const res = await authFetch("/api/audit/verify").then(r => r.json());
|
|
const el = document.getElementById("verify-result");
|
|
if (res.intact) {
|
|
el.textContent = "✅ 체인 무결성 확인됨";
|
|
el.className = "ok";
|
|
} else {
|
|
el.textContent = `❌ 변조 감지 (ID: ${res.broken_at_id})`;
|
|
el.className = "fail";
|
|
}
|
|
});
|
|
}
|
|
|
|
/* ─── CMDB ───────────────────────────────────────── */
|
|
async function loadCmdb() {
|
|
const institutions = await authFetch("/api/cmdb/institutions").then(r => r.json()).catch(() => []);
|
|
const grid = document.getElementById("cmdb-grid");
|
|
grid.innerHTML = "";
|
|
|
|
await Promise.all(institutions.map(async inst => {
|
|
const servers = await authFetch(`/api/cmdb/institutions/${inst.inst_code}/servers`)
|
|
.then(r => r.json()).catch(() => []);
|
|
const card = document.createElement("div");
|
|
card.className = "cmdb-card";
|
|
card.innerHTML = `
|
|
<div class="cmdb-card-header">
|
|
<span>${esc(inst.inst_name)}</span>
|
|
<span style="font-size:11px;color:var(--text-muted)">${esc(inst.inst_code)}</span>
|
|
</div>
|
|
<div class="cmdb-servers">
|
|
${servers.map(s => `
|
|
<div class="cmdb-server-row">
|
|
<span class="server-role-badge role-${s.server_role}">${s.server_role}</span>
|
|
<span>${esc(s.server_name)}</span>
|
|
<span style="font-size:11px;color:var(--text-muted)">${esc(s.os_type || "")}</span>
|
|
<span class="${s.is_active ? "server-active" : "server-inactive"}">${s.is_active ? "● 정상" : "● 비활성"}</span>
|
|
</div>`).join("") || '<div style="padding:8px 16px;color:var(--text-muted);font-size:12px">서버 없음</div>'}
|
|
</div>
|
|
${inst.contact_pm ? `<div style="padding:8px 16px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border)">PM: ${esc(inst.contact_pm)}</div>` : ""}
|
|
`;
|
|
grid.appendChild(card);
|
|
}));
|
|
}
|
|
|
|
/* ─── Knowledge Base ────────────────────────────── */
|
|
const KB_CAT_COLOR = {
|
|
JAVA: "#f0883e", MIDDLEWARE: "#58a6ff", DB: "#e3b341",
|
|
WEB: "#3fb950", OS: "#bc8cff", SECURITY: "#f85149",
|
|
};
|
|
|
|
async function loadKBView() {
|
|
// 초기 로드: 전체 목록 표시
|
|
const cat = document.getElementById("kb-category-filter")?.value || "";
|
|
const url = `/api/kb/list${cat ? `?category=${encodeURIComponent(cat)}` : ""}`;
|
|
try {
|
|
const docs = await authFetch(url).then(r => r.json());
|
|
renderKBDocs(docs.map(d => ({ doc: d, score: null, matched_keywords: [] })));
|
|
} catch { document.getElementById("kb-results").innerHTML = '<div style="color:var(--text-muted);padding:20px">로드 실패</div>'; }
|
|
|
|
// 검색 이벤트 연결 (한 번만)
|
|
const inp = document.getElementById("kb-search-input");
|
|
if (inp && !inp._bound) {
|
|
inp._bound = true;
|
|
inp.addEventListener("keydown", e => { if (e.key === "Enter") searchKB(); });
|
|
}
|
|
}
|
|
|
|
async function searchKB() {
|
|
const q = document.getElementById("kb-search-input")?.value.trim();
|
|
const cat = document.getElementById("kb-category-filter")?.value || "";
|
|
const el = document.getElementById("kb-results");
|
|
|
|
if (!q) { loadKBView(); return; }
|
|
|
|
el.innerHTML = '<div style="color:var(--text-muted);padding:20px">검색 중…</div>';
|
|
try {
|
|
const url = `/api/kb?q=${encodeURIComponent(q)}&limit=10`;
|
|
let hits = await authFetch(url).then(r => r.json());
|
|
if (cat) hits = hits.filter(h => h.doc.category === cat);
|
|
renderKBDocs(hits);
|
|
} catch { el.innerHTML = '<div style="color:var(--text-muted);padding:20px">검색 실패</div>'; }
|
|
}
|
|
|
|
function renderKBDocs(hits) {
|
|
const el = document.getElementById("kb-results");
|
|
if (!hits.length) {
|
|
el.innerHTML = '<div style="color:var(--text-muted);padding:20px;text-align:center">관련 문서 없음</div>';
|
|
return;
|
|
}
|
|
el.innerHTML = hits.map(h => renderKBCard(h, false)).join("");
|
|
}
|
|
|
|
function renderKBCard(h, compact = false) {
|
|
const d = h.doc;
|
|
const color = KB_CAT_COLOR[d.category] || "#8b949e";
|
|
const scoreHTML = h.score !== null
|
|
? `<span class="kb-score">관련도 ${Math.round(h.score * 100)}%</span>`
|
|
: "";
|
|
const kwHTML = h.matched_keywords?.length
|
|
? `<div class="kb-keywords">${h.matched_keywords.map(k => `<code>${esc(k)}</code>`).join(" ")}</div>`
|
|
: "";
|
|
|
|
if (compact) {
|
|
// 모달 내 축약형
|
|
return `
|
|
<div class="kb-card-compact" onclick="openKBDetail('${d.doc_id}')">
|
|
<div class="kb-compact-header">
|
|
<span class="kb-cat-badge" style="background:${color}22;color:${color};border-color:${color}44">${d.category}</span>
|
|
<span class="kb-compact-title">${esc(d.title)}</span>
|
|
${scoreHTML}
|
|
</div>
|
|
${kwHTML}
|
|
</div>`;
|
|
}
|
|
|
|
// 전체 카드
|
|
return `
|
|
<div class="kb-card" id="kb-card-${d.doc_id}">
|
|
<div class="kb-card-header" onclick="toggleKBCard('${d.doc_id}')">
|
|
<div style="display:flex;align-items:center;gap:10px;flex:1;min-width:0">
|
|
<span class="kb-cat-badge" style="background:${color}22;color:${color};border-color:${color}44">${d.category}</span>
|
|
<span class="kb-card-title">${esc(d.title)}</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:10px;flex-shrink:0">
|
|
${scoreHTML}
|
|
<span class="kb-toggle-icon">▼</span>
|
|
</div>
|
|
</div>
|
|
${kwHTML ? `<div style="padding:6px 16px 0">${kwHTML}</div>` : ""}
|
|
<div class="kb-card-body" id="kb-body-${d.doc_id}" style="display:none">
|
|
<div class="kb-section">
|
|
<div class="kb-section-label">🔍 증상</div>
|
|
<div class="kb-section-text">${esc(d.symptoms || "-")}</div>
|
|
</div>
|
|
<div class="kb-section">
|
|
<div class="kb-section-label">💡 원인</div>
|
|
<div class="kb-section-text">${esc(d.cause || "-")}</div>
|
|
</div>
|
|
<div class="kb-section">
|
|
<div class="kb-section-label">🛠️ 해결 절차</div>
|
|
<pre class="kb-pre">${esc(d.solution || "-")}</pre>
|
|
</div>
|
|
${d.commands ? `
|
|
<div class="kb-section">
|
|
<div class="kb-section-label">⚡ 점검 명령어</div>
|
|
<pre class="kb-pre cmd">${esc(d.commands)}</pre>
|
|
</div>` : ""}
|
|
<div style="padding-top:6px">
|
|
<span class="kb-doc-id">${d.doc_id}</span>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function toggleKBCard(docId) {
|
|
const body = document.getElementById(`kb-body-${docId}`);
|
|
const icon = document.querySelector(`#kb-card-${docId} .kb-toggle-icon`);
|
|
if (!body) return;
|
|
const open = body.style.display === "none";
|
|
body.style.display = open ? "block" : "none";
|
|
if (icon) icon.textContent = open ? "▲" : "▼";
|
|
}
|
|
|
|
async function openKBDetail(docId) {
|
|
// KB 뷰로 이동 후 해당 카드 펼치기
|
|
switchView("kb");
|
|
await loadKBView();
|
|
setTimeout(() => {
|
|
const card = document.getElementById(`kb-card-${docId}`);
|
|
if (card) {
|
|
card.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
const body = document.getElementById(`kb-body-${docId}`);
|
|
if (body && body.style.display === "none") toggleKBCard(docId);
|
|
}
|
|
}, 400);
|
|
}
|
|
|
|
/* SR 모달 내 KB 추천 렌더링 */
|
|
async function loadKBSuggestForSR(srId) {
|
|
const el = document.getElementById("kb-suggest-section");
|
|
if (!el) return;
|
|
el.innerHTML = '<div style="color:var(--text-muted);font-size:12px">분석 중…</div>';
|
|
try {
|
|
const hits = await authFetch(`/api/kb/suggest/${srId}`).then(r => r.json());
|
|
if (!hits.length) {
|
|
el.innerHTML = '<div style="color:var(--text-muted);font-size:12px">관련 문서 없음</div>';
|
|
return;
|
|
}
|
|
el.innerHTML = hits.map(h => renderKBCard(h, true)).join("");
|
|
} catch {
|
|
el.innerHTML = '<div style="color:var(--text-muted);font-size:12px">추천 로드 실패</div>';
|
|
}
|
|
}
|
|
|
|
/* ─── AI 채팅 어시스턴트 ─────────────────────────── */
|
|
const _CHAT_GREET = [
|
|
"안녕하세요! GUARDiA AI 어시스턴트입니다.",
|
|
"자연어로 ITSM 업무를 처리할 수 있습니다.",
|
|
"예시 명령을 클릭하거나 직접 입력해 보세요.",
|
|
];
|
|
const _CHAT_EXAMPLES = [
|
|
"승인 대기 SR 목록 보여줘",
|
|
"엔지니어 워크로드 현황",
|
|
"KB에서 OOM 검색해줘",
|
|
"전체 현황 요약해줘",
|
|
"긴급 SR 있어?",
|
|
];
|
|
|
|
let _chatHistory = [];
|
|
|
|
function initChat() {
|
|
const fab = document.getElementById("ai-chat-fab");
|
|
const panel = document.getElementById("ai-chat-panel");
|
|
const close = document.getElementById("ai-chat-close");
|
|
const inp = document.getElementById("ai-chat-input");
|
|
const send = document.getElementById("ai-chat-send");
|
|
|
|
fab.addEventListener("click", () => {
|
|
const open = panel.classList.toggle("hidden");
|
|
if (!open && _chatHistory.length === 0) {
|
|
// 첫 오픈 시 인사 메시지
|
|
appendChatMsg("ai", _CHAT_GREET.join("\n"));
|
|
renderSuggestions(_CHAT_EXAMPLES);
|
|
}
|
|
});
|
|
close.addEventListener("click", () => panel.classList.add("hidden"));
|
|
|
|
send.addEventListener("click", sendChat);
|
|
inp.addEventListener("keydown", e => {
|
|
if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
|
|
});
|
|
}
|
|
|
|
function appendChatMsg(role, text, data) {
|
|
const el = document.getElementById("ai-chat-messages");
|
|
const div = document.createElement("div");
|
|
div.className = role === "user" ? "chat-msg chat-user" : "chat-msg chat-ai";
|
|
|
|
// 마크다운-라이크 렌더링 (bold, bullet)
|
|
const rendered = text
|
|
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
|
.replace(/`(.+?)`/g, '<code>$1</code>')
|
|
.replace(/^• /gm, '<span class="chat-bullet">▪</span> ')
|
|
.replace(/\n/g, '<br>');
|
|
|
|
div.innerHTML = rendered;
|
|
|
|
// 데이터 링크 (SR 클릭 가능)
|
|
if (data?.length) {
|
|
const links = data.filter(d => d.sr_id).map(d =>
|
|
`<span class="chat-sr-link" onclick="openDetail('${d.sr_id}')">${d.sr_id}</span>`
|
|
);
|
|
if (links.length) {
|
|
const linksDiv = document.createElement("div");
|
|
linksDiv.className = "chat-links";
|
|
linksDiv.innerHTML = links.join("");
|
|
div.appendChild(linksDiv);
|
|
}
|
|
}
|
|
|
|
el.appendChild(div);
|
|
el.scrollTop = el.scrollHeight;
|
|
_chatHistory.push({ role, text });
|
|
}
|
|
|
|
function renderSuggestions(items) {
|
|
const el = document.getElementById("ai-chat-suggestions");
|
|
el.innerHTML = items.map(s =>
|
|
`<button class="chat-suggestion" onclick="sendChatText('${s.replace(/'/g, "\\'")}')">${esc(s)}</button>`
|
|
).join("");
|
|
}
|
|
|
|
function sendChatText(text) {
|
|
document.getElementById("ai-chat-input").value = text;
|
|
sendChat();
|
|
}
|
|
|
|
async function sendChat() {
|
|
const inp = document.getElementById("ai-chat-input");
|
|
const text = inp.value.trim();
|
|
if (!text) return;
|
|
inp.value = "";
|
|
|
|
document.getElementById("ai-chat-suggestions").innerHTML = "";
|
|
appendChatMsg("user", text);
|
|
|
|
// 로딩 표시
|
|
const loadId = "chat-loading-" + Date.now();
|
|
const el = document.getElementById("ai-chat-messages");
|
|
el.insertAdjacentHTML("beforeend",
|
|
`<div id="${loadId}" class="chat-msg chat-ai" style="color:var(--text-muted)">⏳ 처리 중…</div>`
|
|
);
|
|
el.scrollTop = el.scrollHeight;
|
|
|
|
try {
|
|
const r = await authFetch("/api/nlcmd", {
|
|
method: "POST",
|
|
body: JSON.stringify({ text }),
|
|
});
|
|
const data = await r.json();
|
|
document.getElementById(loadId)?.remove();
|
|
|
|
appendChatMsg("ai", data.response, data.data);
|
|
|
|
// 액션 수행 시 데이터 갱신
|
|
if (data.action_taken) {
|
|
await loadAll();
|
|
}
|
|
|
|
// 후속 제안
|
|
if (data.suggestions?.length) {
|
|
renderSuggestions(data.suggestions);
|
|
} else if (data.intent === "QUERY_SR_LIST" && data.data?.length) {
|
|
const sample = data.data[0];
|
|
renderSuggestions([
|
|
`${sample.sr_id} 상태 알려줘`,
|
|
`${sample.sr_id} 자동 배정해줘`,
|
|
]);
|
|
} else if (data.intent === "SEARCH_KB" && data.data?.length) {
|
|
renderSuggestions(["KB 뷰에서 전체 문서 보기"]);
|
|
}
|
|
} catch {
|
|
document.getElementById(loadId)?.remove();
|
|
appendChatMsg("ai", "❌ 명령 처리 중 오류가 발생했습니다.");
|
|
}
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
기관 관리 뷰
|
|
══════════════════════════════════════════════════ */
|
|
let _instCache = [];
|
|
let _instCurrentCode = null;
|
|
|
|
async function loadInstitutions() {
|
|
try {
|
|
const r = await authFetch("/api/institutions");
|
|
_instCache = await r.json();
|
|
renderInstitutionTable(_instCache);
|
|
} catch { _instCache = []; }
|
|
}
|
|
|
|
function filterInstitutions() {
|
|
const kw = (document.getElementById("inst-search")?.value || "").toLowerCase();
|
|
const region = document.getElementById("inst-region-filter")?.value || "";
|
|
const filtered = _instCache.filter(i => {
|
|
const matchKw = !kw || i.inst_name?.toLowerCase().includes(kw) || i.inst_code?.toLowerCase().includes(kw);
|
|
const matchRegion = !region || i.region === region;
|
|
return matchKw && matchRegion;
|
|
});
|
|
renderInstitutionTable(filtered);
|
|
}
|
|
|
|
function renderInstitutionTable(list) {
|
|
const tbody = document.getElementById("inst-tbody");
|
|
if (!tbody) return;
|
|
// CUSTOMER 역할이면 버튼 숨김
|
|
const canEdit = ["ADMIN", "PM"].includes(_userInfo.role || "");
|
|
if (!list.length) {
|
|
tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;color:var(--text-muted);padding:24px">등록된 기관이 없습니다.</td></tr>';
|
|
return;
|
|
}
|
|
tbody.innerHTML = list.map(inst => {
|
|
const expiry = inst.contract_end ? new Date(inst.contract_end) : null;
|
|
const today = new Date();
|
|
const daysLeft = expiry ? Math.ceil((expiry - today) / 86400000) : null;
|
|
let expiryBadge = expiry ? `<span class="badge" style="background:rgba(99,102,241,.15);color:#818cf8">${inst.contract_end}</span>` : "-";
|
|
if (daysLeft !== null && daysLeft <= 30 && daysLeft > 7) expiryBadge = `<span class="badge badge-PENDING_APPROVAL">D-${daysLeft} ⚠</span>`;
|
|
if (daysLeft !== null && daysLeft <= 7) expiryBadge = `<span class="badge badge-FAILED_ROLLBACK">D-${daysLeft} 🔴</span>`;
|
|
return `<tr onclick="openInstDetail('${esc(inst.inst_code)}')" style="cursor:pointer">
|
|
<td><strong>${esc(inst.inst_code)}</strong></td>
|
|
<td>${esc(inst.inst_name)}</td>
|
|
<td>${esc(inst.region || "-")}</td>
|
|
<td>${expiryBadge}</td>
|
|
<td>${inst.sla_hours}h</td>
|
|
<td style="color:var(--text-muted)">${inst.server_count ?? "-"}대</td>
|
|
<td style="color:var(--text-muted)">${inst.contact_count ?? "-"}명</td>
|
|
<td><span class="badge ${inst.is_active ? "badge-COMPLETED" : "badge-REJECTED"}">${inst.is_active ? "활성" : "비활성"}</span></td>
|
|
<td onclick="event.stopPropagation()">
|
|
${canEdit ? `<button class="btn btn-secondary" style="font-size:11px;padding:3px 8px" onclick="openInstModal('${esc(inst.inst_code)}')">수정</button>` : ""}
|
|
</td>
|
|
</tr>`;
|
|
}).join("");
|
|
}
|
|
|
|
async function openInstDetail(instCode) {
|
|
_instCurrentCode = instCode;
|
|
const inst = _instCache.find(i => i.inst_code === instCode);
|
|
if (!inst) return;
|
|
// 담당자 목록 로드 후 상세 모달 생성
|
|
let contacts = [];
|
|
try {
|
|
const r = await authFetch(`/api/institutions/${instCode}/contacts`);
|
|
contacts = await r.json();
|
|
} catch {}
|
|
// 상세는 SR 상세 모달 재활용
|
|
const canEdit = ["ADMIN", "PM"].includes(_userInfo.role || "");
|
|
const roleLabel = {MANAGER:"담당자",ENGINEER:"엔지니어",PM:"PM",SECURITY:"보안",HELPDESK:"헬프데스크"};
|
|
const html = `
|
|
<div class="modal-section-title">🏢 ${esc(inst.inst_name)} (${esc(inst.inst_code)})</div>
|
|
<div class="detail-grid">
|
|
<div><span class="detail-label">지역</span><span>${esc(inst.region||"-")}</span></div>
|
|
<div><span class="detail-label">SLA</span><span>${inst.sla_hours}시간</span></div>
|
|
<div><span class="detail-label">전화</span><span>${esc(inst.phone||"-")}</span></div>
|
|
<div><span class="detail-label">계약 기간</span><span>${inst.contract_start||"?"} ~ ${inst.contract_end||"?"}</span></div>
|
|
<div><span class="detail-label">주소</span><span>${esc(inst.address||"-")}</span></div>
|
|
<div><span class="detail-label">비고</span><span>${esc(inst.note||"-")}</span></div>
|
|
</div>
|
|
<div class="modal-section-title" style="margin-top:16px;display:flex;align-items:center;justify-content:space-between">
|
|
<span>👤 담당자 (${contacts.length}명)</span>
|
|
${canEdit ? `<button class="btn btn-primary" style="font-size:12px;padding:4px 12px" onclick="openContactModal('${esc(instCode)}')">+ 담당자 추가</button>` : ""}
|
|
</div>
|
|
${contacts.length ? `
|
|
<table class="sr-table" style="margin:0">
|
|
<thead><tr><th>이름</th><th>역할</th><th>부서</th><th>이메일</th><th>전화</th><th>주담</th></tr></thead>
|
|
<tbody>
|
|
${contacts.map(c => `<tr>
|
|
<td>${esc(c.contact_name)}</td>
|
|
<td><span class="badge" style="background:rgba(99,102,241,.15);color:#818cf8">${roleLabel[c.role]||c.role}</span></td>
|
|
<td style="color:var(--text-muted)">${esc(c.dept||"-")}</td>
|
|
<td>${esc(c.email||"-")}</td>
|
|
<td>${esc(c.phone||c.mobile||"-")}</td>
|
|
<td style="text-align:center">${c.is_primary ? "★" : ""}</td>
|
|
</tr>`).join("")}
|
|
</tbody>
|
|
</table>` : `<div style="color:var(--text-muted);font-size:13px;padding:12px">등록된 담당자가 없습니다.</div>`}
|
|
`;
|
|
document.getElementById("modal-body").innerHTML = html;
|
|
document.getElementById("modal-overlay").classList.remove("hidden");
|
|
}
|
|
|
|
// 기관 등록/수정 모달
|
|
let _instEditCode = null;
|
|
function openInstModal(instCode = null) {
|
|
_instEditCode = instCode;
|
|
const overlay = document.getElementById("inst-modal-overlay");
|
|
const form = document.getElementById("inst-form");
|
|
form.reset();
|
|
document.getElementById("inst-modal-title").textContent = instCode ? "기관 수정" : "기관 등록";
|
|
if (instCode) {
|
|
const inst = _instCache.find(i => i.inst_code === instCode);
|
|
if (inst) {
|
|
Object.keys(inst).forEach(k => {
|
|
const el = form.elements[k];
|
|
if (el) el.value = inst[k] ?? "";
|
|
});
|
|
}
|
|
}
|
|
overlay.classList.remove("hidden");
|
|
}
|
|
function closeInstModal() { document.getElementById("inst-modal-overlay").classList.add("hidden"); }
|
|
|
|
async function submitInstForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const data = Object.fromEntries(new FormData(form));
|
|
// 숫자 변환
|
|
if (data.sla_hours) data.sla_hours = parseInt(data.sla_hours);
|
|
// 빈 문자열 null로
|
|
Object.keys(data).forEach(k => { if (data[k] === "") data[k] = null; });
|
|
try {
|
|
let r;
|
|
if (_instEditCode) {
|
|
r = await authFetch(`/api/institutions/${_instEditCode}`, {
|
|
method: "PATCH", body: JSON.stringify(data),
|
|
});
|
|
} else {
|
|
r = await authFetch("/api/institutions", {
|
|
method: "POST", body: JSON.stringify(data),
|
|
});
|
|
}
|
|
if (!r.ok) { const err = await r.json(); showToast(err.detail || "저장 실패", "error"); return; }
|
|
showToast(_instEditCode ? "기관 정보가 수정됐습니다." : "기관이 등록됐습니다.", "success");
|
|
closeInstModal();
|
|
loadInstitutions();
|
|
} catch { showToast("저장 중 오류가 발생했습니다.", "error"); }
|
|
}
|
|
|
|
// 담당자 등록 모달
|
|
let _contactInstCode = null;
|
|
function openContactModal(instCode) {
|
|
_contactInstCode = instCode;
|
|
document.getElementById("contact-form").reset();
|
|
document.getElementById("contact-modal-overlay").classList.remove("hidden");
|
|
}
|
|
function closeContactModal() { document.getElementById("contact-modal-overlay").classList.add("hidden"); }
|
|
|
|
async function submitContactForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const data = Object.fromEntries(new FormData(form));
|
|
data.is_primary = form.elements.is_primary?.checked || false;
|
|
Object.keys(data).forEach(k => { if (data[k] === "") data[k] = null; });
|
|
try {
|
|
const r = await authFetch(`/api/institutions/${_contactInstCode}/contacts`, {
|
|
method: "POST", body: JSON.stringify(data),
|
|
});
|
|
if (!r.ok) { const err = await r.json(); showToast(err.detail || "저장 실패", "error"); return; }
|
|
showToast("담당자가 등록됐습니다.", "success");
|
|
closeContactModal();
|
|
openInstDetail(_contactInstCode);
|
|
} catch { showToast("저장 중 오류가 발생했습니다.", "error"); }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
스크립트 관리 뷰
|
|
══════════════════════════════════════════════════ */
|
|
let _scriptCache = [];
|
|
|
|
const SCRIPT_CATEGORY_KO = {
|
|
SM: "SM", REGULAR: "정기점검", ADHOC: "수시점검",
|
|
DEPLOY: "배포", SECURITY: "보안", MONITORING: "모니터링",
|
|
};
|
|
const SCRIPT_CATEGORY_COLOR = {
|
|
SM: "#818cf8", REGULAR: "#34d399", ADHOC: "#fbbf24",
|
|
DEPLOY: "#38bdf8", SECURITY: "#f87171", MONITORING: "#a78bfa",
|
|
};
|
|
|
|
async function loadScripts() {
|
|
try {
|
|
const r = await authFetch("/api/shell-scripts?limit=200");
|
|
_scriptCache = await r.json();
|
|
renderScriptList(_scriptCache);
|
|
} catch { _scriptCache = []; }
|
|
}
|
|
|
|
function filterScripts() {
|
|
const kw = (document.getElementById("script-search")?.value || "").toLowerCase();
|
|
const cat = document.getElementById("script-category-filter")?.value || "";
|
|
const layer = document.getElementById("script-layer-filter")?.value || "";
|
|
const filtered = _scriptCache.filter(s => {
|
|
const matchKw = !kw || s.script_name?.toLowerCase().includes(kw)
|
|
|| s.description?.toLowerCase().includes(kw)
|
|
|| (s.tags||"").toLowerCase().includes(kw);
|
|
const matchCat = !cat || s.category === cat;
|
|
const matchLayer = !layer || s.target_layer === layer || s.target_layer === "ALL";
|
|
return matchKw && matchCat && matchLayer;
|
|
});
|
|
renderScriptList(filtered);
|
|
}
|
|
|
|
function renderScriptList(list) {
|
|
const body = document.getElementById("script-list-body");
|
|
if (!body) return;
|
|
const canEdit = ["ADMIN", "PM", "ENGINEER"].includes(_userInfo.role || "");
|
|
if (!list.length) {
|
|
body.innerHTML = '<div style="padding:24px;color:var(--text-muted);text-align:center">등록된 스크립트가 없습니다.</div>';
|
|
return;
|
|
}
|
|
body.innerHTML = list.map(s => {
|
|
const catColor = SCRIPT_CATEGORY_COLOR[s.category] || "#818cf8";
|
|
const dangerBadge = s.is_dangerous
|
|
? `<span class="badge" style="background:rgba(248,113,113,.15);color:#f87171">⚠ 위험</span>` : "";
|
|
const approvalBadge = s.requires_approval
|
|
? `<span class="badge" style="background:rgba(251,191,36,.15);color:#fbbf24">승인필요</span>` : "";
|
|
return `
|
|
<div class="script-card" onclick="openScriptDetail(${s.id})">
|
|
<div class="script-card-header">
|
|
<div class="script-card-name">${esc(s.script_name)}</div>
|
|
<div style="display:flex;gap:6px;align-items:center">
|
|
<span class="badge" style="background:${catColor}22;color:${catColor}">${SCRIPT_CATEGORY_KO[s.category]||s.category}</span>
|
|
<span class="badge" style="background:rgba(56,189,248,.15);color:#38bdf8">${esc(s.target_layer)}</span>
|
|
${dangerBadge}${approvalBadge}
|
|
${canEdit ? `<button class="btn btn-secondary" style="font-size:11px;padding:2px 8px" onclick="event.stopPropagation();openScriptModal(${s.id})">수정</button>` : ""}
|
|
</div>
|
|
</div>
|
|
<div class="script-card-desc">${esc(s.description)}</div>
|
|
<div class="script-card-meta">
|
|
<span>버전 ${esc(s.version)}</span>
|
|
<span>사용 ${s.use_count}회</span>
|
|
${s.tags ? `<span>${esc(s.tags).split(",").map(t=>`#${t.trim()}`).join(" ")}</span>` : ""}
|
|
</div>
|
|
</div>`;
|
|
}).join("");
|
|
}
|
|
|
|
function openScriptDetail(scriptId) {
|
|
const s = _scriptCache.find(x => x.id === scriptId);
|
|
if (!s) return;
|
|
const catColor = SCRIPT_CATEGORY_COLOR[s.category] || "#818cf8";
|
|
const html = `
|
|
<div class="modal-section-title">📜 ${esc(s.script_name)}</div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px">
|
|
<span class="badge" style="background:${catColor}22;color:${catColor}">${SCRIPT_CATEGORY_KO[s.category]||s.category}</span>
|
|
<span class="badge" style="background:rgba(56,189,248,.15);color:#38bdf8">${esc(s.target_layer)}</span>
|
|
<span class="badge" style="background:rgba(99,102,241,.15);color:#818cf8">${esc(s.os_type)}</span>
|
|
${s.is_dangerous ? `<span class="badge" style="background:rgba(248,113,113,.15);color:#f87171">⚠ 위험 명령 포함</span>` : ""}
|
|
${s.requires_approval ? `<span class="badge" style="background:rgba(251,191,36,.15);color:#fbbf24">실행 전 승인 필요</span>` : ""}
|
|
</div>
|
|
<div class="detail-grid">
|
|
<div><span class="detail-label">설명</span><span>${esc(s.description)}</span></div>
|
|
<div><span class="detail-label">버전</span><span>${esc(s.version)}</span></div>
|
|
<div><span class="detail-label">작성자</span><span>${esc(s.author||"-")}</span></div>
|
|
<div><span class="detail-label">사용 횟수</span><span>${s.use_count}회</span></div>
|
|
</div>
|
|
<div class="modal-section-title" style="margin-top:16px">스크립트 내용</div>
|
|
<pre class="code-block">${esc(s.script_body)}</pre>
|
|
${s.sample_output ? `<div class="modal-section-title" style="margin-top:12px">예상 출력</div><pre class="code-block">${esc(s.sample_output)}</pre>` : ""}
|
|
`;
|
|
document.getElementById("modal-body").innerHTML = html;
|
|
document.getElementById("modal-overlay").classList.remove("hidden");
|
|
}
|
|
|
|
let _scriptEditId = null;
|
|
function openScriptModal(scriptId = null) {
|
|
_scriptEditId = scriptId;
|
|
const overlay = document.getElementById("script-modal-overlay");
|
|
const form = document.getElementById("script-form");
|
|
form.reset();
|
|
document.getElementById("script-modal-title").textContent = scriptId ? "스크립트 수정" : "스크립트 등록";
|
|
if (scriptId) {
|
|
const s = _scriptCache.find(x => x.id === scriptId);
|
|
if (s) {
|
|
Object.keys(s).forEach(k => {
|
|
const el = form.elements[k];
|
|
if (el) el.value = s[k] ?? "";
|
|
});
|
|
if (s.is_dangerous) form.elements.is_dangerous.checked = true;
|
|
if (s.requires_approval) form.elements.requires_approval.checked = true;
|
|
}
|
|
}
|
|
overlay.classList.remove("hidden");
|
|
}
|
|
function closeScriptModal() { document.getElementById("script-modal-overlay").classList.add("hidden"); }
|
|
|
|
async function submitScriptForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const data = Object.fromEntries(new FormData(form));
|
|
data.is_dangerous = form.elements.is_dangerous?.checked || false;
|
|
data.requires_approval = form.elements.requires_approval?.checked || false;
|
|
Object.keys(data).forEach(k => { if (data[k] === "") data[k] = null; });
|
|
try {
|
|
let r;
|
|
if (_scriptEditId) {
|
|
r = await authFetch(`/api/shell-scripts/${_scriptEditId}`, {
|
|
method: "PATCH", body: JSON.stringify(data),
|
|
});
|
|
} else {
|
|
r = await authFetch("/api/shell-scripts", {
|
|
method: "POST", body: JSON.stringify(data),
|
|
});
|
|
}
|
|
if (!r.ok) { const err = await r.json(); showToast(err.detail || "저장 실패", "error"); return; }
|
|
showToast("스크립트가 저장됐습니다.", "success");
|
|
closeScriptModal();
|
|
loadScripts();
|
|
} catch { showToast("저장 중 오류가 발생했습니다.", "error"); }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
작업 타임테이블 뷰
|
|
══════════════════════════════════════════════════ */
|
|
let _ttCache = [];
|
|
|
|
const WORK_TYPE_KO = {
|
|
REGULAR_CHECK: "정기점검", PM: "예방정비", SR: "SR작업",
|
|
ADHOC: "수시점검", DEPLOY: "배포", EMERGENCY: "긴급대응",
|
|
};
|
|
const WORK_TYPE_COLOR = {
|
|
REGULAR_CHECK: "#34d399", PM: "#818cf8", SR: "#38bdf8",
|
|
ADHOC: "#fbbf24", DEPLOY: "#a78bfa", EMERGENCY: "#f87171",
|
|
};
|
|
const RESULT_STATUS_KO = {
|
|
PENDING: "예정", SUCCESS: "완료", FAILED: "실패",
|
|
PARTIAL: "부분완료", CANCELLED: "취소",
|
|
};
|
|
const RESULT_STATUS_BADGE = {
|
|
PENDING: "badge-PARSED",
|
|
SUCCESS: "badge-COMPLETED",
|
|
FAILED: "badge-FAILED_ROLLBACK",
|
|
PARTIAL: "badge-PENDING_APPROVAL",
|
|
CANCELLED: "badge-REJECTED",
|
|
};
|
|
|
|
async function loadTimetable() {
|
|
try {
|
|
const r = await authFetch("/api/timetable?limit=200");
|
|
_ttCache = await r.json();
|
|
// 기관·스크립트 목록 로드 (모달 select 채우기)
|
|
_populateTimetableSelects();
|
|
renderTimetableTable(_ttCache);
|
|
} catch { _ttCache = []; }
|
|
}
|
|
|
|
async function _populateTimetableSelects() {
|
|
// 기관 select
|
|
const instSel = document.getElementById("tt-inst-select");
|
|
if (instSel && instSel.options.length <= 1) {
|
|
if (!_instCache.length) {
|
|
try { const r = await authFetch("/api/institutions"); _instCache = await r.json(); } catch {}
|
|
}
|
|
_instCache.forEach(i => {
|
|
const opt = document.createElement("option");
|
|
opt.value = i.id; opt.textContent = `${i.inst_code} ${i.inst_name}`;
|
|
instSel.appendChild(opt);
|
|
});
|
|
}
|
|
// 스크립트 select
|
|
const scriptSel = document.getElementById("tt-script-select");
|
|
if (scriptSel && scriptSel.options.length <= 1) {
|
|
if (!_scriptCache.length) {
|
|
try { const r = await authFetch("/api/shell-scripts?limit=200"); _scriptCache = await r.json(); } catch {}
|
|
}
|
|
_scriptCache.forEach(s => {
|
|
const opt = document.createElement("option");
|
|
opt.value = s.id; opt.textContent = `[${s.category}] ${s.script_name}`;
|
|
opt.dataset.body = s.script_body;
|
|
scriptSel.appendChild(opt);
|
|
});
|
|
}
|
|
}
|
|
|
|
function fillScriptBody(sel) {
|
|
const opt = sel.options[sel.selectedIndex];
|
|
const ta = document.querySelector("#tt-form textarea[name='command_or_shell']");
|
|
if (ta && opt?.dataset.body) ta.value = opt.dataset.body;
|
|
else if (ta && !opt?.dataset.body) ta.value = "";
|
|
}
|
|
|
|
function filterTimetable() {
|
|
const kw = (document.getElementById("tt-search")?.value || "").toLowerCase();
|
|
const type = document.getElementById("tt-type-filter")?.value || "";
|
|
const status = document.getElementById("tt-status-filter")?.value || "";
|
|
const filtered = _ttCache.filter(t => {
|
|
const matchKw = !kw || t.title?.toLowerCase().includes(kw) || (t.content||"").toLowerCase().includes(kw);
|
|
const matchType = !type || t.work_type === type;
|
|
const matchStatus = !status || t.result_status === status;
|
|
return matchKw && matchType && matchStatus;
|
|
});
|
|
renderTimetableTable(filtered);
|
|
}
|
|
|
|
function renderTimetableTable(list) {
|
|
const tbody = document.getElementById("tt-tbody");
|
|
if (!tbody) return;
|
|
const canEdit = ["ADMIN", "PM", "ENGINEER"].includes(_userInfo.role || "");
|
|
if (!list.length) {
|
|
tbody.innerHTML = '<tr><td colspan="9" style="text-align:center;color:var(--text-muted);padding:24px">등록된 작업이 없습니다.</td></tr>';
|
|
return;
|
|
}
|
|
const instMap = {};
|
|
_instCache.forEach(i => { instMap[i.id] = i.inst_name; });
|
|
tbody.innerHTML = list.map(t => {
|
|
const typeColor = WORK_TYPE_COLOR[t.work_type] || "#818cf8";
|
|
const instName = t.inst_id ? (instMap[t.inst_id] || "-") : "-";
|
|
return `<tr onclick="openTimetableDetail(${t.id})" style="cursor:pointer">
|
|
<td><span class="badge" style="background:${typeColor}22;color:${typeColor}">${WORK_TYPE_KO[t.work_type]||t.work_type}</span></td>
|
|
<td>${esc(t.title)}</td>
|
|
<td style="color:var(--text-muted)">${esc(instName)}</td>
|
|
<td style="color:var(--text-muted)">${fmtDate(t.scheduled_at)}</td>
|
|
<td style="color:var(--text-muted)">${t.completed_at ? fmtDate(t.completed_at) : "-"}</td>
|
|
<td><span class="badge ${RESULT_STATUS_BADGE[t.result_status]||''}">${RESULT_STATUS_KO[t.result_status]||t.result_status}</span></td>
|
|
<td style="color:var(--text-muted)">${esc(t.assignee||"-")}</td>
|
|
<td style="color:var(--text-muted)">${t.sr_id ? `<a href="#" onclick="event.stopPropagation();openDetail('${esc(t.sr_id)}')">${esc(t.sr_id)}</a>` : "-"}</td>
|
|
<td onclick="event.stopPropagation()">
|
|
${canEdit ? `<button class="btn btn-secondary" style="font-size:11px;padding:3px 8px" onclick="openTimetableModal(${t.id})">수정</button>` : ""}
|
|
</td>
|
|
</tr>`;
|
|
}).join("");
|
|
}
|
|
|
|
function openTimetableDetail(id) {
|
|
const t = _ttCache.find(x => x.id === id);
|
|
if (!t) return;
|
|
const typeColor = WORK_TYPE_COLOR[t.work_type] || "#818cf8";
|
|
const instMap = {};
|
|
_instCache.forEach(i => { instMap[i.id] = i.inst_name; });
|
|
const instName = t.inst_id ? (instMap[t.inst_id] || "-") : "-";
|
|
const duration = (t.started_at && t.completed_at)
|
|
? `${Math.ceil((new Date(t.completed_at) - new Date(t.started_at)) / 60000)}분` : "-";
|
|
const html = `
|
|
<div class="modal-section-title">📅 ${esc(t.title)}</div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px">
|
|
<span class="badge" style="background:${typeColor}22;color:${typeColor}">${WORK_TYPE_KO[t.work_type]||t.work_type}</span>
|
|
<span class="badge ${RESULT_STATUS_BADGE[t.result_status]||''}">${RESULT_STATUS_KO[t.result_status]||t.result_status}</span>
|
|
</div>
|
|
<div class="detail-grid">
|
|
<div><span class="detail-label">기관</span><span>${esc(instName)}</span></div>
|
|
<div><span class="detail-label">처리예정</span><span>${fmtDate(t.scheduled_at)}</span></div>
|
|
<div><span class="detail-label">시작</span><span>${t.started_at ? fmtDate(t.started_at) : "-"}</span></div>
|
|
<div><span class="detail-label">완료</span><span>${t.completed_at ? fmtDate(t.completed_at) : "-"}</span></div>
|
|
<div><span class="detail-label">소요</span><span>${duration}</span></div>
|
|
<div><span class="detail-label">담당자</span><span>${esc(t.assignee||"-")}</span></div>
|
|
<div><span class="detail-label">검토자</span><span>${esc(t.reviewer||"-")}</span></div>
|
|
${t.sr_id ? `<div><span class="detail-label">SR</span><span>${esc(t.sr_id)}</span></div>` : ""}
|
|
</div>
|
|
<div class="modal-section-title" style="margin-top:14px">처리내용</div>
|
|
<div class="detail-text-block">${esc(t.content)}</div>
|
|
${t.command_or_shell ? `<div class="modal-section-title" style="margin-top:14px">명령어/쉘</div><pre class="code-block">${esc(t.command_or_shell)}</pre>` : ""}
|
|
${t.result ? `<div class="modal-section-title" style="margin-top:14px">처리결과</div><div class="detail-text-block">${esc(t.result)}</div>` : ""}
|
|
${t.note ? `<div class="modal-section-title" style="margin-top:12px">비고</div><div style="color:var(--text-muted);font-size:13px">${esc(t.note)}</div>` : ""}
|
|
`;
|
|
document.getElementById("modal-body").innerHTML = html;
|
|
document.getElementById("modal-overlay").classList.remove("hidden");
|
|
}
|
|
|
|
let _ttEditId = null;
|
|
function openTimetableModal(ttId = null) {
|
|
_ttEditId = ttId;
|
|
const overlay = document.getElementById("tt-modal-overlay");
|
|
const form = document.getElementById("tt-form");
|
|
form.reset();
|
|
document.getElementById("tt-modal-title").textContent = ttId ? "작업 수정" : "작업 등록";
|
|
_populateTimetableSelects();
|
|
if (ttId) {
|
|
const t = _ttCache.find(x => x.id === ttId);
|
|
if (t) {
|
|
Object.keys(t).forEach(k => {
|
|
const el = form.elements[k];
|
|
if (!el) return;
|
|
if (k === "scheduled_at" || k === "started_at" || k === "completed_at") {
|
|
el.value = t[k] ? t[k].slice(0,16) : "";
|
|
} else {
|
|
el.value = t[k] ?? "";
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
// 기본값: 지금부터 1시간 후
|
|
const dt = new Date(Date.now() + 3600000);
|
|
const iso = dt.toISOString().slice(0,16);
|
|
const el = form.elements.scheduled_at;
|
|
if (el) el.value = iso;
|
|
}
|
|
overlay.classList.remove("hidden");
|
|
}
|
|
function closeTimetableModal() { document.getElementById("tt-modal-overlay").classList.add("hidden"); }
|
|
|
|
async function submitTimetableForm(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const data = Object.fromEntries(new FormData(form));
|
|
// 빈 문자열 → null, 숫자 변환
|
|
Object.keys(data).forEach(k => { if (data[k] === "") data[k] = null; });
|
|
if (data.inst_id) data.inst_id = parseInt(data.inst_id);
|
|
if (data.script_id) data.script_id = parseInt(data.script_id);
|
|
try {
|
|
let r;
|
|
if (_ttEditId) {
|
|
r = await authFetch(`/api/timetable/${_ttEditId}`, {
|
|
method: "PATCH", body: JSON.stringify(data),
|
|
});
|
|
} else {
|
|
r = await authFetch("/api/timetable", {
|
|
method: "POST", body: JSON.stringify(data),
|
|
});
|
|
}
|
|
if (!r.ok) { const err = await r.json(); showToast(err.detail || "저장 실패", "error"); return; }
|
|
showToast("작업이 저장됐습니다.", "success");
|
|
closeTimetableModal();
|
|
loadTimetable();
|
|
} catch { showToast("저장 중 오류가 발생했습니다.", "error"); }
|
|
}
|
|
|
|
async function exportTimetableExcel() {
|
|
const type = document.getElementById("tt-type-filter")?.value || "";
|
|
const status = document.getElementById("tt-status-filter")?.value || "";
|
|
const params = new URLSearchParams();
|
|
if (type) params.set("work_type", type);
|
|
if (status) params.set("result_status", status);
|
|
try {
|
|
const r = await authFetch(`/api/timetable/export/excel?${params.toString()}`);
|
|
if (!r.ok) { showToast("Excel 생성 실패", "error"); return; }
|
|
const blob = await r.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
const cd = r.headers.get("Content-Disposition") || "";
|
|
const match = cd.match(/filename\*=UTF-8''(.+)/);
|
|
a.download = match ? decodeURIComponent(match[1]) : "GUARDiA_작업이력.xlsx";
|
|
a.href = url;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(url);
|
|
showToast("Excel 다운로드 완료", "success");
|
|
} catch { showToast("다운로드 중 오류가 발생했습니다.", "error"); }
|
|
}
|
|
|
|
/* ─── Helpers ───────────────────────────────────── */
|
|
function esc(s) {
|
|
return String(s ?? "")
|
|
.replace(/&/g, "&").replace(/</g, "<")
|
|
.replace(/>/g, ">").replace(/"/g, """);
|
|
}
|
|
|
|
function fmtDate(iso) {
|
|
if (!iso) return "";
|
|
try {
|
|
return new Date(iso).toLocaleString("ko-KR", {
|
|
month: "2-digit", day: "2-digit",
|
|
hour: "2-digit", minute: "2-digit",
|
|
});
|
|
} catch { return iso; }
|
|
}
|