{label}

+ ); +} + +function useMinimumLoading(loading: boolean, minimumMs = 500) { + const [visible, setVisible] = useState(loading); + const startedAtRef = useRef(loading ? Date.now() : null); + + useEffect(() => { + if (loading) { + startedAtRef.current = Date.now(); + setVisible(true); + return; + } + + if (!visible) return; + + const elapsed = startedAtRef.current ? Date.now() - startedAtRef.current : minimumMs; + const remaining = Math.max(minimumMs - elapsed, 0); + const timer = window.setTimeout(() => { + startedAtRef.current = null; + setVisible(false); + }, remaining); + + return () => window.clearTimeout(timer); + }, [loading, minimumMs, visible]); + + return visible; +} + +function Topbar({ + menuSearch, + onMenuSearchChange, + currentAdmin, + onLogout +}: { + menuSearch: string; + onMenuSearchChange: (value: string) => void; + currentAdmin: CurrentAdmin | null; + onLogout: () => void; +}) { + const [profileOpen, setProfileOpen] = useState(false); + const profileRef = useRef(null); + const accountLabel = currentAdmin?.email ?? '관리자'; + const avatarLetter = accountLabel.trim().charAt(0).toUpperCase() || 'A'; + + useEffect(() => { + const closeProfile = (event: MouseEvent) => { + if (!profileRef.current?.contains(event.target as Node)) setProfileOpen(false); + }; + document.addEventListener('mousedown', closeProfile); + return () => document.removeEventListener('mousedown', closeProfile); + }, []); + + return ( +

+ +

+ + onMenuSearchChange(event.target.value)} + /> +

+ +

+ + {profileOpen ? ( +

{currentAdmin?.name || accountLabel}

{accountLabel}

+ +

+ ) : null} +

+ ); +} + +function LoginPage({ onLogin }: { onLogin: (admin: CurrentAdmin) => void }) { + const savedEmail = localStorage.getItem('studio-admin-saved-email') ?? ''; + const [email, setEmail] = useState(savedEmail); + const [password, setPassword] = useState(''); + const [rememberEmail, setRememberEmail] = useState(Boolean(savedEmail)); + const [loginLoading, setLoginLoading] = useState(false); + const [loginError, setLoginError] = useState(false); + + const submitLogin = (event: FormEvent) => { + event.preventDefault(); + if (!email.trim() || !password.trim()) return; + + setLoginLoading(true); + setLoginError(false); + fetch(`${apiBaseUrl}/auth/admin/login`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email: email.trim(), password }) + }) + .then((response) => { + if (!response.ok) throw new Error('Admin login failed'); + return response.json() as Promise<{ token: string; expiresAt: string; admin: { email: string; name: string; role: string } }>; + }) + .then((data) => { + localStorage.setItem('studio-admin-token', data.token); + localStorage.setItem('studio-admin', JSON.stringify(data.admin)); + if (rememberEmail) { + localStorage.setItem('studio-admin-saved-email', email.trim()); + } else { + localStorage.removeItem('studio-admin-saved-email'); + } + setLoginLoading(false); + onLogin(data.admin); + }) + .catch(() => { + setLoginLoading(false); + setLoginError(true); + }); + }; + + return ( +

관리자 로그인

계정 정보를 입력해 주세요.

+ +

+ ); +} + +function isActiveStatus(status?: string | null) { + return ['활성', 'ACTIVE', 'READY', 'RUNNING', 'SUCCEEDED'].includes(status ?? ''); +} + +function getLatestReleaseByApp(releases: ApiAppRelease[]) { + return releases.reduce>((acc, release) => { + const current = acc[release.appId]; + if (!current || new Date(release.createdAt).getTime() > new Date(current.createdAt).getTime()) { + acc[release.appId] = release; + } + return acc; + }, {}); +} + +function isRuntimeResourceHealthy(resource: DashboardRuntimeResource) { + if (['Error', 'CrashLoopBackOff', 'Failed'].includes(resource.status)) return false; + if (!resource.ready.includes('/')) return ['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(resource.status); + const [ready, total] = resource.ready.split('/').map((value) => Number(value)); + return Number.isFinite(ready) && Number.isFinite(total) && total > 0 && ready === total; +} + +function formatJobStatus(status?: string | null) { + const labels: Record = { + PENDING: '대기', + RUNNING: '실행 중', + SUCCEEDED: '성공', + FAILED: '실패', + CANCELED: '취소' + }; + + return status ? labels[status] ?? status : '-'; +} + +function SkeletonBlock({ className }: { className?: string }) { + return ( +

+ ); +} + +function MetricCards({ + apps: dashboardApps, + sessions, + runtimeResources, + loading +}: { + apps: ApiApp[]; + sessions: UserSessionRow[]; + runtimeResources: DashboardRuntimeResource[]; + loading: boolean; +}) { + const activeApps = dashboardApps.filter((app) => isActiveStatus(app.status)).length; + const activeSessions = sessions.filter((session) => session.state === '활성').length; + const healthyRuntimeCount = runtimeResources.filter(isRuntimeResourceHealthy).length; + const runtimeRate = runtimeResources.length ? Math.round((healthyRuntimeCount / runtimeResources.length) * 100) : null; + const cards = [ + { + label: '활성 앱', + value: loading ? '-' : String(activeApps), + delta: `${dashboardApps.length}개 등록`, + hint: '앱 관리 등록 기준', + tone: 'green' as const + }, + { + label: '접속 사용자', + value: loading ? '-' : String(activeSessions), + delta: `${sessions.length}개 세션`, + hint: '활성 사용자 세션 기준', + tone: 'green' as const + }, + { + label: '라이센스 사용률', + value: '-', + delta: '연동 필요', + hint: '라이센스 백엔드 집계 API 필요', + tone: 'neutral' as const + }, + { + label: '런타임 정상률', + value: loading || runtimeRate === null ? '-' : `${runtimeRate}%`, + delta: runtimeResources.length ? `${healthyRuntimeCount}/${runtimeResources.length}` : '리소스 없음', + hint: 'namespace 리소스 Ready 기준', + tone: runtimeRate !== null && runtimeRate < 80 ? 'red' as const : 'green' as const + } + ]; + + return ( +

+ {cards.map((metric) => ( + + {loading ? ( +

{metric.label}

+ +

{metric.hint}

+ ) : ( + <> +

{metric.label}

+ {metric.delta} +

{metric.value}

{metric.hint}

+ + )} + + ))} +

+ ); +} + +function LauncherPanel({ versions, loading, onOpen }: { versions: ApiLauncherVersion[]; loading: boolean; onOpen: () => void }) { + const activeVersion = versions.find((version) => version.isActive) ?? versions[0]; + + return ( + + } + /> +

+ {loading ? ( +

Studio Launcher

+ +

배포 파일

+ +

다운로드 URL

+ +

릴리즈 노트

+ +

+ ) : activeVersion ? ( +

Studio Launcher

+ {activeVersion.isActive ? '활성' : '비활성'} +

+ 최신 {activeVersion.version} · 최소 지원 {activeVersion.minimumVersion ?? '-'} +

배포 파일

{activeVersion.artifact}

다운로드 URL

{activeVersion.downloadUrl}

릴리즈 노트

{activeVersion.releaseNotes || '릴리즈 노트가 없습니다.'}

+ ) : ( +

+ 등록된 런처 버전이 없습니다. +

+ )} +

런처 상태 요약

+ {loading ? ( + Array.from({ length: 3 }).map((_, index) => ( +

+ + +

+ )) + ) : [ + `${versions.length}개 런처 버전 등록`, + activeVersion?.repository ? `소스 연결 ${activeVersion.repository}` : '런처 소스 연결 확인 필요', + activeVersion?.downloadUrl ? '다운로드 URL 등록됨' : '다운로드 URL 확인 필요' + ].map((label) => ( +

+ +

{label}

+ ))} +

+ + ); +} + +function SessionsPanel({ sessions, loading, onMore }: { sessions: UserSessionRow[]; loading: boolean; onMore: () => void }) { + return ( + + + + + } + /> +

+ {loading ? ( + Array.from({ length: 4 }).map((_, index) => ( +

+ + +

+ +

+ )) + ) : sessions.length === 0 ? ( +

표시할 사용자 세션이 없습니다.

+ ) : null} + {!loading && sessions.map((session) => ( +

{session.user}

+ {session.state} +

+ {session.email} · {session.role} +

+ {formatDateTime(session.lastSeen)} +

+ ))} +

+ + ); +} + +function DashboardLinkButton({ onClick, label }: { onClick: () => void; label: string }) { + return ( + + ); +} + +function AppRegistryTable({ + apps: dashboardApps, + releases, + loading, + onOpen +}: { + apps: ApiApp[]; + releases: ApiAppRelease[]; + loading: boolean; + onOpen: () => void; +}) { + const latestReleaseByApp = getLatestReleaseByApp(releases); + + return ( + + } + /> +

+ + + + + + + + + + + + + {loading ? ( + Array.from({ length: 5 }).map((_, index) => ( + + + + + + + + + )) + ) : dashboardApps.length === 0 ? ( + + + + ) : null} + {!loading && dashboardApps.map((app) => { + const latestRelease = latestReleaseByApp[app.id]; + const firstRepository = app.components?.find((component) => component.repository)?.repository; + const workloadCount = app.components?.filter((component) => ['CONTAINER', 'DATABASE', 'MIGRATION'].includes(component.type)).length ?? 0; + + return ( + + + + + + + + + ); + })} + +

앱	상태	릴리즈	저장소/경로	워크로드	구성요소
+ + +	+ +	+ +	+ +	+ +	+ +
등록된 앱이 없습니다.
+ {app.name} + {app.key} · {app.namespace ?? '네임스페이스 없음'} +	+ {app.status} +	{latestRelease ? `${latestRelease.version} · ${formatJobStatus(latestRelease.status)}` : '-'}	+ + {firstRepository ?? '-'} + {firstRepository ? : null} + +	{workloadCount}	{app.components?.length ?? 0}

앱

상태

릴리즈

저장소/경로

워크로드

구성요소

+ + +

+ +

등록된 앱이 없습니다.

{app.name}

{app.key} · {app.namespace ?? '네임스페이스 없음'}

+ {app.status} +

{latestRelease ? `${latestRelease.version} · ${formatJobStatus(latestRelease.status)}` : '-'}

+ + {firstRepository ?? '-'} + {firstRepository ? : null} + +

{workloadCount}

{app.components?.length ?? 0}

+ + ); +} + +function ContainerPanel({ resources, loading, onOpen }: { resources: DashboardRuntimeResource[]; loading: boolean; onOpen: () => void }) { + return ( + + } + /> +

+ {loading ? ( + Array.from({ length: 3 }).map((_, index) => ( +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ )) + ) : resources.length === 0 ? ( +

표시할 런타임 리소스가 없습니다.

+ ) : null} + {!loading && resources.slice(0, 8).map((item) => ( +

{item.kind}/{item.name}

+ {item.status} +

{item.appName} · {item.namespace}

+ +

+ {item.cpu ? 'CPU' : 'Ready'} + {item.cpu || item.ready || '-'} +

+ +

+ {item.memory ? '메모리' : '재시작'} + {item.memory || (item.restarts ?? '-')} +

+ 0 ? 'amber' : 'primary'} /> +

+ ))} +

+ + ); +} + +function NoticePanel({ notices: dashboardNotices, loading, onOpen }: { notices: ApiNotice[]; loading: boolean; onOpen: () => void }) { + return ( + + } + /> +

+ {loading ? ( + Array.from({ length: 4 }).map((_, index) => ( +

+ + +

+ +

+ )) + ) : dashboardNotices.length === 0 ? ( +

등록된 공지사항이 없습니다.

+ ) : null} + {!loading && dashboardNotices.slice(0, 8).map((notice) => ( +

+ {notice.appKey} + {notice.isActive ? '게시' : '비게시'} +

{notice.title}

{notice.linkUrl || notice.body}

+ {formatDateTime(notice.createdAt)} +

+ ))} +

+ + ); +} + +function LauncherManagementPage() { + const [launcherRows, setLauncherRows] = useState([]); + const [launcherRepos, setLauncherRepos] = useState([]); + const [launcherLoading, setLauncherLoading] = useState(true); + const launcherLoadingVisible = useMinimumLoading(launcherLoading); + const [launcherError, setLauncherError] = useState(false); + const [sourceModalOpen, setSourceModalOpen] = useState(false); + const [sourceRepository, setSourceRepository] = useState(''); + const [sourceBranch, setSourceBranch] = useState('release'); + const [sourceCommitSha, setSourceCommitSha] = useState(''); + const [sourceSaveStatus, setSourceSaveStatus] = useState<'idle' | 'saving' | 'error'>('idle'); + const [releaseModalOpen, setReleaseModalOpen] = useState(false); + const [releaseSaveStatus, setReleaseSaveStatus] = useState<'idle' | 'saving' | 'error'>('idle'); + const [newLauncherRelease, setNewLauncherRelease] = useState({ + version: '', + minimumVersion: '', + artifact: '', + downloadUrl: '', + releaseNotes: '', + repository: '', + branch: 'release', + commitSha: '' + }); + const launcher = launcherRows[0]; + + const refreshLauncherVersions = () => { + setLauncherLoading(true); + loadLauncherVersions() + .then((versions) => { + setLauncherRows(versions); + setLauncherError(false); + setLauncherLoading(false); + }) + .catch(() => { + setLauncherRows([]); + setLauncherError(true); + setLauncherLoading(false); + }); + }; + + useEffect(() => { + let mounted = true; + + refreshLauncherVersions(); + loadPlatformRepos() + .then((response) => { + if (!response.ok) throw new Error('Gitea repositories request failed'); + return response.json() as Promise<{ repos: GiteaRepo[] }>; + }) + .then((data) => { + if (!mounted) return; + setLauncherRepos(data.repos ?? []); + }) + .catch(() => { + if (!mounted) return; + setLauncherRepos([]); + }); + + return () => { + mounted = false; + }; + }, []); + + const openSourceModal = () => { + if (!launcher) return; + + setSourceRepository(launcher.repository ?? launcherRepos[0]?.fullName ?? ''); + setSourceBranch(launcher.branch ?? 'release'); + setSourceCommitSha(launcher.commitSha ?? ''); + setSourceSaveStatus('idle'); + setSourceModalOpen(true); + }; + + const saveLauncherSource = () => { + if (!launcher || !sourceRepository.trim()) return; + + setSourceSaveStatus('saving'); + apiFetch(`${apiBaseUrl}/launcher/versions/${launcher.id}/source`, { + method: 'PATCH', + headers: authHeaders({ 'Content-Type': 'application/json' }), + body: JSON.stringify({ + repository: sourceRepository.trim(), + branch: sourceBranch.trim() || undefined, + commitSha: sourceCommitSha.trim() || undefined + }) + }) + .then((response) => { + if (!response.ok) throw new Error('Launcher source link failed'); + return response.json(); + }) + .then(() => { + setSourceModalOpen(false); + setSourceSaveStatus('idle'); + refreshLauncherVersions(); + }) + .catch(() => setSourceSaveStatus('error')); + }; + + const openReleaseModal = () => { + setNewLauncherRelease({ + version: '', + minimumVersion: launcher?.minimumVersion ?? '', + artifact: '', + downloadUrl: '', + releaseNotes: '', + repository: launcher?.repository ?? launcherRepos[0]?.fullName ?? '', + branch: launcher?.branch ?? 'release', + commitSha: '' + }); + setReleaseSaveStatus('idle'); + setReleaseModalOpen(true); + }; + + const createLauncherRelease = () => { + if (!newLauncherRelease.version.trim() || !newLauncherRelease.artifact.trim() || !newLauncherRelease.downloadUrl.trim()) return; + + setReleaseSaveStatus('saving'); + apiFetch(`${apiBaseUrl}/launcher/versions`, { + method: 'POST', + headers: authHeaders({ 'Content-Type': 'application/json' }), + body: JSON.stringify({ + version: newLauncherRelease.version.trim(), + minimumVersion: newLauncherRelease.minimumVersion.trim() || undefined, + artifact: newLauncherRelease.artifact.trim(), + downloadUrl: newLauncherRelease.downloadUrl.trim(), + releaseNotes: newLauncherRelease.releaseNotes.trim() || undefined, + repository: newLauncherRelease.repository || undefined, + branch: newLauncherRelease.branch || undefined, + commitSha: newLauncherRelease.commitSha.trim() || undefined + }) + }) + .then((response) => { + if (!response.ok) throw new Error('Launcher release create failed'); + return response.json(); + }) + .then(() => { + setReleaseModalOpen(false); + setReleaseSaveStatus('idle'); + refreshLauncherVersions(); + }) + .catch(() => setReleaseSaveStatus('error')); + }; + + return ( + <> + + + + + } + /> + + {launcherError ? ( +

+ 런처 버전 데이터를 불러오지 못했습니다. +

+ ) : null} + + {!launcherLoading && !launcher ? ( + + 등록된 런처 버전이 없습니다. + + ) : null} + + {launcher ? ( +

+ + +

Autonomy Studio Launcher

+ {launcher.isActive ? '활성' : '비활성'} +

+ 최신 {launcher.version} · 최소 지원 {launcher.minimumVersion || '-'} +

+ +

배포 파일

{launcher.artifact}

다운로드 URL

{launcher.downloadUrl}

+ +

소스 연결

+ +

+ {launcher.repository ? ( +

Repository

{launcher.repository}

Branch

{launcher.branch || '-'}

Commit

{launcher.commitSha || '-'}

Clone URL

{getHttpCloneUrl(launcher.repository)}

+ +

+ ) : ( +

연결된 Gitea 저장소가 없습니다.

+ )} +

+ +

릴리즈 노트

{launcher.releaseNotes || '-'}

+ + + + +

+ {[ + ['최신 버전', launcher.version], + ['최소 런처 버전', launcher.minimumVersion || '-'] + ].map(([label, value]) => ( +

+ {label} + {value} +

+ ))} +

+ +

+ ) : null} + + {sourceModalOpen && launcher ? ( + + ) : null} + {releaseModalOpen ? ( +

{title}

관리자 로그인

런처 소스 연결

릴리즈 등록