{view === 'sitesettings' ? (
) : view === 'site' ? (
) : (
setNotifications(list => list.map(n => n.id === id ? { ...n, read: true } : n))}
onMarkAllRead={() => setNotifications(list => list.map(n => ({ ...n, read: true })))}
onClear={() => setNotifications([])}
onItemClick={(n) => {
if (n.projectId) setActiveProject(n.projectId);
if (n.link?.section) setSettingsSection(n.link.section);
if (n.link?.tab) setTab(n.link.tab);
if (view !== 'project') setView('project');
}}
/>
{view === 'project' && (
{/* Tabs */}
{view === 'sitesettings' ? (
⚙
Site settings · {site?.name}
name · environment · database · password
All projects
{site?.name} · {projects.length} projects · site-wide overview
{(() => {
/* Active-run dot — 사이드바와 동일 정책. 활성 run 이 있을 때만 켜지고
mode 에 따라 cutover=빨강 / rehearsal=주황. */
const ar = window.getActiveRun?.(project.id);
if (!ar) return ;
const c = ar.mode === 'cutover' ? '#F87171' : '#FB923C';
return (
);
})()}
)}
{project.name.split('/').slice(-1)[0].trim()}
{project.phase && (() => {
const ph = project.phase;
const bg = window.getPhaseBg?.(ph) || 'var(--panel-2)';
const fg = window.getPhaseColor?.(ph) || 'var(--text-3)';
return (
{window.getPhaseLabel?.(ph) || ph}
);
})()}
{project.src}
{/* AS-IS 뱃지 — CSV 파싱 + 도구 내장 AS-IS DB 적재/스키마 일치 상태를
두 점으로 합쳐 표시. 클릭 시 AS-IS 섹션으로 점프. */}
{(() => {
const csv = project.csvSource;
const stg = project.staging;
const csvDot = !csv ? 'var(--text-4)'
: csv.parseStatus === 'ok' ? 'var(--green)'
: csv.parseStatus === 'failed' ? 'var(--red)'
: csv.parseStatus === 'pending' ? 'var(--amber)'
: 'var(--text-4)';
const stgDot = !stg ? 'var(--text-4)'
: stg.schemaMatch === 'ok' && stg.loaded ? 'var(--green)'
: stg.schemaMatch === 'mismatch' ? 'var(--red)'
: 'var(--amber)';
const csvLabel = !csv ? '미설정'
: csv.parseStatus === 'ok' ? `파싱 완료 · ${(csv.recordCount || 0).toLocaleString()}행`
: csv.parseStatus === 'failed' ? `파싱 실패 · ${csv.parseError || ''}`
: csv.parseStatus === 'pending' ? '도착 — 파싱 미실행'
: '미도착';
const stgLabel = !stg ? '미설정'
: !stg.loaded ? '미적재'
: stg.schemaMatch === 'ok' ? `적재 완료 · ${stg.tables}개 테이블 · 스키마 일치`
: stg.schemaMatch === 'mismatch' ? `적재 완료 · 스키마 불일치`
: `적재 완료 · 스키마 검증 대기`;
const tooltip = `CSV: ${csvLabel}\nAS-IS DB: ${stgLabel}`;
return (
);
})()}
{(() => {
const c = project.connections?.tobe;
const dotColor = !c || c.status === 'untested' ? 'var(--text-4)'
: c.status === 'ok' ? 'var(--green)'
: c.status === 'failed' ? 'var(--red)'
: c.status === 'testing' ? 'var(--amber)'
: c.status === 'stale' ? 'var(--amber)'
: 'var(--text-4)';
const tooltip = !c ? '' :
c.status === 'ok' ? `Connected · latency ${c.latencyMs}ms · last tested ${c.lastTestedAt}` :
c.status === 'failed' ? `Failed · ${c.error} · ${c.lastTestedAt}` :
c.status === 'testing' ? 'Testing connection…' :
c.status === 'stale' ? `Stale · last tested ${c.lastTestedAt}` :
'Not tested yet';
return (
);
})()}
)}
/
{site?.name.toLowerCase().replace(/\s+/g,'-')}
/
site settings
) : (
{(view === 'site' ? [
{ k: 'overview', l: 'Site overview', c: `${projects.length}` },
{ k: 'export', l: 'Site export', c: 'all' },
] : tabs).map(t => {
const active = tab === t.k;
const disabled = project.isNew && (t.k === 'artifacts');
return (
);
})}
)}
{/* Tab body */}
{view === 'sitesettings'
? setView('project')}
onSave={(patch) => setSites(list => list.map(s => s.id === site.id ? { ...s, ...patch } : s))}
onDelete={() => {
const remaining = sites.filter(s => s.id !== site.id);
setSites(remaining);
if (remaining[0]) setActiveSite(remaining[0].id);
setView('project');
}}/>
: view === 'site'
? (tab === 'export'
?
: { setActiveProject(id); setView('project'); if (goTab) setTab(goTab); else setTab('dashboard'); }}
onExportSite={() => alert('Generating site-wide bundle (zip)…')}
onOpenExportTab={() => setTab('export')}/>)
: project.isNew && tab !== 'settings'
?
: <>
{tab === 'dashboard' && }
{tab === 'mapping' && setFixTarget(null)} onTabChange={setTab}/>}
{tab === 'versions' && }
{tab === 'execution' && }
{tab === 'artifacts' && }
{tab === 'logs' && }
{tab === 'settings' && setProjects(list => list.map(x => x.id === project.id ? { ...x, name: nn } : x))}
onDuplicate={() => {
const copy = { ...project, id: 'p' + Date.now(), name: project.name + ' (copy)', status: 'waiting', isNew: true };
setProjects(list => [copy, ...list]); setActiveProject(copy.id);
}}
onDelete={() => {
const remaining = projects.filter(x => x.id !== project.id);
setProjects(remaining);
if (remaining[0]) setActiveProject(remaining[0].id);
setTab('dashboard');
}}
onDdlChange={(side, meta) => setProjects(list => list.map(x => x.id === project.id ? { ...x, ddl: { ...(x.ddl || { asis: null, tobe: null }), [side]: meta } } : x))}
onTestConnection={(side) => {
/* 1) mark side as 'testing' */
setProjects(list => list.map(x => x.id === project.id ? {
...x, connections: { ...x.connections, [side]: { ...x.connections[side], status: 'testing' } }
} : x));
/* 2) simulate network delay, then set final status — host-based mock: fail if host empty or contains 'bad'/'invalid' */
setTimeout(() => {
setProjects(list => list.map(x => {
if (x.id !== project.id) return x;
const host = side === 'asis' ? (x.config?.srcHost || 'mvs-prod.kdb.internal') : (x.config?.tgtHost || 'pg-core-01.kdb.internal');
const fail = !host.trim() || /bad|invalid|fail/i.test(host);
const prev = x.connections[side] || {};
const next = fail ? {
...prev, status: 'failed', lastTestedAt: 'just now',
latencyMs: null,
error: !host.trim() ? 'Host is empty (mock)' : 'Connection refused — host unreachable (mock)',
} : {
...prev, status: 'ok', lastTestedAt: 'just now',
latencyMs: 15 + Math.floor(Math.random() * 70),
detectedTables: prev.detectedTables || Math.floor(20 + Math.random() * 120),
error: null,
};
return { ...x, connections: { ...x.connections, [side]: next } };
}));
}, 1400);
}}
onCredentialsChange={(side, creds) => setProjects(list => list.map(x => x.id === project.id ? {
...x, connections: { ...x.connections, [side]: { ...x.connections[side], credentials: creds } }
} : x))}
onSimulateFail={(side) => setProjects(list => list.map(x => x.id === project.id ? {
...x, connections: { ...x.connections, [side]: {
...x.connections?.[side], status: 'failed',
lastTestedAt: 'just now', latencyMs: null,
error: 'Connection refused — host unreachable (mock)',
} }
} : x))}/>}
}