add launcher components management page
This commit is contained in:
@@ -0,0 +1,325 @@
|
||||
import { Database, FileArchive, RotateCcw, Server, TerminalSquare } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
|
||||
import { useToast } from '../../components/toast';
|
||||
import { PageTitle } from '../../layout/AppLayout';
|
||||
import { cn } from '../../lib/utils';
|
||||
import type { RuntimeResource } from '../../types/runtime';
|
||||
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
|
||||
import {
|
||||
listLauncherBuildJobs,
|
||||
listLauncherVersions,
|
||||
loadLauncherComponentLogs,
|
||||
loadLauncherRuntimeResources,
|
||||
restartLauncherComponent,
|
||||
type LauncherBuildJob,
|
||||
type LauncherVersion
|
||||
} from './launcher-api';
|
||||
|
||||
const LAUNCHER_NAMESPACE = 'studio-system';
|
||||
|
||||
type LauncherComponentDefinition = {
|
||||
key: string;
|
||||
name: string;
|
||||
description: string;
|
||||
type: 'client' | 'backend' | 'database';
|
||||
kind?: string;
|
||||
workloadName?: string;
|
||||
serviceName?: string;
|
||||
};
|
||||
|
||||
const launcherComponents: LauncherComponentDefinition[] = [
|
||||
{
|
||||
key: 'launcher-client',
|
||||
name: '런처 클라이언트',
|
||||
description: '사용자 PC에 설치되는 Electron .deb 패키지입니다.',
|
||||
type: 'client'
|
||||
},
|
||||
{
|
||||
key: 'launcher-be',
|
||||
name: '런처 백엔드',
|
||||
description: '로그인, 앱 목록, 업데이트, handoff API를 제공하는 서버입니다.',
|
||||
type: 'backend',
|
||||
kind: 'Deployment',
|
||||
workloadName: 'studio-launcher-be',
|
||||
serviceName: 'studio-launcher-be'
|
||||
},
|
||||
{
|
||||
key: 'launcher-db',
|
||||
name: '런처 DB',
|
||||
description: '런처 앱, 버전, 사용자 앱 권한 데이터를 저장하는 PostgreSQL입니다.',
|
||||
type: 'database',
|
||||
kind: 'StatefulSet',
|
||||
workloadName: 'studio-launcher-db',
|
||||
serviceName: 'studio-launcher-db'
|
||||
}
|
||||
];
|
||||
|
||||
function statusTone(status?: string): 'green' | 'amber' | 'red' | 'neutral' {
|
||||
if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(status ?? '')) return 'green';
|
||||
if (['Pending', 'ContainerCreating'].includes(status ?? '')) return 'amber';
|
||||
if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return 'red';
|
||||
return 'neutral';
|
||||
}
|
||||
|
||||
function componentIcon(type: LauncherComponentDefinition['type']) {
|
||||
if (type === 'client') return FileArchive;
|
||||
if (type === 'database') return Database;
|
||||
return Server;
|
||||
}
|
||||
|
||||
function apiKind(kind?: string) {
|
||||
return (kind ?? '').toLowerCase();
|
||||
}
|
||||
|
||||
function stripAnsi(value: string) {
|
||||
return value.replace(/(?:\x1B|\u241B)\[[0-?]*[ -/]*[@-~]/g, '');
|
||||
}
|
||||
|
||||
function findResource(resources: RuntimeResource[], kind?: string, name?: string) {
|
||||
if (!kind || !name) return undefined;
|
||||
return resources.find((resource) => resource.kind === kind && resource.name === name);
|
||||
}
|
||||
|
||||
function serviceResource(resources: RuntimeResource[], name?: string) {
|
||||
if (!name) return undefined;
|
||||
return resources.find((resource) => resource.kind === 'Service' && resource.name === name);
|
||||
}
|
||||
|
||||
function relatedResources(resources: RuntimeResource[], component: LauncherComponentDefinition) {
|
||||
if (component.type === 'client') return [];
|
||||
const names = new Set([component.workloadName, component.serviceName].filter(Boolean));
|
||||
return resources.filter((resource) => {
|
||||
if (names.has(resource.name)) return true;
|
||||
return component.workloadName ? resource.name.includes(component.workloadName) : false;
|
||||
});
|
||||
}
|
||||
|
||||
export function LauncherComponentsPage() {
|
||||
const { toast } = useToast();
|
||||
const [versions, setVersions] = useState<LauncherVersion[]>([]);
|
||||
const [buildJobs, setBuildJobs] = useState<LauncherBuildJob[]>([]);
|
||||
const [resources, setResources] = useState<RuntimeResource[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [actionKey, setActionKey] = useState('');
|
||||
const [logTarget, setLogTarget] = useState<LauncherComponentDefinition | null>(null);
|
||||
const [logs, setLogs] = useState('');
|
||||
const [logLoading, setLogLoading] = useState(false);
|
||||
const loadingVisible = useMinimumLoading(loading || logLoading);
|
||||
|
||||
const activeVersion = useMemo(() => versions.find((version) => version.isActive) ?? versions[0], [versions]);
|
||||
const latestBuild = useMemo(() => buildJobs[0], [buildJobs]);
|
||||
|
||||
const refresh = () => {
|
||||
setLoading(true);
|
||||
Promise.all([
|
||||
listLauncherVersions().catch(() => []),
|
||||
listLauncherBuildJobs().catch(() => []),
|
||||
loadLauncherRuntimeResources(LAUNCHER_NAMESPACE)
|
||||
])
|
||||
.then(([nextVersions, nextBuildJobs, runtime]) => {
|
||||
setVersions(nextVersions);
|
||||
setBuildJobs(nextBuildJobs);
|
||||
setResources(runtime.resources ?? []);
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '런처 구성요소 조회 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, []);
|
||||
|
||||
const openLogs = (component: LauncherComponentDefinition) => {
|
||||
if (!component.kind || !component.workloadName) return;
|
||||
setLogTarget(component);
|
||||
setLogs('');
|
||||
setLogLoading(true);
|
||||
loadLauncherComponentLogs(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
|
||||
.then((result) => setLogs(stripAnsi(result.logs || '로그가 없습니다.')))
|
||||
.catch((error: Error) => setLogs(`[warn] 로그 조회 실패\n${error.message}`))
|
||||
.finally(() => setLogLoading(false));
|
||||
};
|
||||
|
||||
const restart = (component: LauncherComponentDefinition) => {
|
||||
if (!component.kind || !component.workloadName) return;
|
||||
setActionKey(component.key);
|
||||
restartLauncherComponent(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
|
||||
.then(() => {
|
||||
toast({ type: 'success', message: `${component.name} 재시작을 요청했습니다.` });
|
||||
refresh();
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '재시작 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setActionKey(''));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
eyebrow="런처 운영"
|
||||
title="구성요소"
|
||||
description="런처 클라이언트, 백엔드, DB의 배포 기준과 런타임 상태를 한 화면에서 확인합니다."
|
||||
actions={
|
||||
<Button className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
|
||||
<RotateCcw className={cn('size-4', loading && 'animate-spin')} />
|
||||
새로고침
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
<Card className="p-5">
|
||||
<p className="text-sm text-muted-foreground">런처 최신 버전</p>
|
||||
<p className="mt-3 text-2xl font-semibold">{activeVersion?.version ?? '-'}</p>
|
||||
<p className="mt-1 truncate text-xs text-muted-foreground">{activeVersion?.downloadUrl ?? '등록된 릴리즈 없음'}</p>
|
||||
</Card>
|
||||
<Card className="p-5">
|
||||
<p className="text-sm text-muted-foreground">최근 클라이언트 빌드</p>
|
||||
<p className="mt-3 text-2xl font-semibold">{latestBuild?.version ?? '-'}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{latestBuild?.status ?? '빌드 이력 없음'}</p>
|
||||
</Card>
|
||||
<Card className="p-5">
|
||||
<p className="text-sm text-muted-foreground">Namespace</p>
|
||||
<p className="mt-3 text-2xl font-semibold">{LAUNCHER_NAMESPACE}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{resources.length}개 관련 리소스 조회</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4">
|
||||
{launcherComponents.map((component) => {
|
||||
const Icon = componentIcon(component.type);
|
||||
const workload = findResource(resources, component.kind, component.workloadName);
|
||||
const service = serviceResource(resources, component.serviceName);
|
||||
const details = relatedResources(resources, component);
|
||||
const isClient = component.type === 'client';
|
||||
const status = isClient ? (activeVersion ? '배포 등록' : '미등록') : workload?.status ?? 'NotFound';
|
||||
|
||||
return (
|
||||
<Card key={component.key} className="overflow-hidden">
|
||||
<CardHeader
|
||||
title={component.name}
|
||||
description={component.description}
|
||||
action={<Badge tone={isClient ? (activeVersion ? 'green' : 'neutral') : statusTone(status)}>{status}</Badge>}
|
||||
/>
|
||||
<div className="grid gap-5 p-5 xl:grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)]">
|
||||
<div className="rounded-md border border-border bg-background p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
<Icon className="size-5" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-semibold">{component.key}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{isClient ? 'Client Package' : `${component.kind}/${component.workloadName}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-3 text-sm">
|
||||
{isClient ? (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Artifact</p>
|
||||
<p className="mt-1 break-all font-mono text-xs">{activeVersion?.artifact ?? '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Repository</p>
|
||||
<p className="mt-1 truncate font-medium">{activeVersion?.repository ?? '-'}</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Ready</p>
|
||||
<p className="mt-1 font-medium">{workload?.ready ?? '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Service</p>
|
||||
<p className="mt-1 font-medium">{service ? `${service.status} · ${service.detail}` : '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Image</p>
|
||||
<p className="mt-1 break-all font-mono text-xs text-muted-foreground">{workload?.detail ?? '-'}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isClient ? (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<Button variant="outline" onClick={() => openLogs(component)} disabled={!workload}>
|
||||
<TerminalSquare className="size-4" />
|
||||
로그
|
||||
</Button>
|
||||
<Button onClick={() => restart(component)} disabled={!workload || actionKey === component.key}>
|
||||
<RotateCcw className={cn('size-4', actionKey === component.key && 'animate-spin')} />
|
||||
재시작
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-md border border-border">
|
||||
<table className="w-full min-w-[680px] text-left text-sm">
|
||||
<thead className="border-b border-border bg-muted/30 text-xs text-muted-foreground">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-medium">Kind</th>
|
||||
<th className="px-4 py-3 font-medium">Name</th>
|
||||
<th className="px-4 py-3 font-medium">Status</th>
|
||||
<th className="px-4 py-3 font-medium">Ready</th>
|
||||
<th className="px-4 py-3 font-medium">Age</th>
|
||||
<th className="px-4 py-3 font-medium">Detail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{isClient ? (
|
||||
<tr>
|
||||
<td className="px-4 py-3">Release</td>
|
||||
<td className="px-4 py-3 font-mono text-xs">{activeVersion?.version ?? '-'}</td>
|
||||
<td className="px-4 py-3">{activeVersion?.isActive ? 'Active' : '-'}</td>
|
||||
<td className="px-4 py-3">-</td>
|
||||
<td className="px-4 py-3">{activeVersion?.createdAt ? new Date(activeVersion.createdAt).toLocaleString() : '-'}</td>
|
||||
<td className="max-w-[320px] truncate px-4 py-3 font-mono text-xs text-muted-foreground">{activeVersion?.downloadUrl ?? '-'}</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{!isClient && details.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">관련 리소스가 없습니다.</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{!isClient && details.map((resource) => (
|
||||
<tr key={`${resource.kind}-${resource.name}`} className="hover:bg-muted/20">
|
||||
<td className="px-4 py-3 font-semibold">{resource.kind}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs">{resource.name}</td>
|
||||
<td className="px-4 py-3"><Badge tone={statusTone(resource.status)}>{resource.status}</Badge></td>
|
||||
<td className="px-4 py-3">{resource.ready}</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{resource.age}</td>
|
||||
<td className="max-w-[360px] truncate px-4 py-3 font-mono text-xs text-muted-foreground">{resource.detail || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={Boolean(logTarget)}
|
||||
title={logTarget ? `${logTarget.name} 로그` : '로그'}
|
||||
onClose={() => setLogTarget(null)}
|
||||
className="!max-w-5xl"
|
||||
>
|
||||
<pre className="max-h-[62vh] overflow-auto rounded-md bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
|
||||
{logs || (logLoading ? '로그를 불러오는 중...' : '로그가 없습니다.')}
|
||||
</pre>
|
||||
</Modal>
|
||||
|
||||
<LoadingModal open={loadingVisible} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user