studio/studio-admin-fe
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

split launcher source and build by component

Browse Source
This commit is contained in:
chyoo
2026-07-02 14:47:58 +09:00
parent fedf9481f8
commit d226230b25
3 changed files with 237 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/launcher/LauncherBuildPage.tsx
+53 -20
View File
@@ -7,8 +7,10 @@ import { formatDateTime } from '../../lib/date-format';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import {
createLauncherBuildJob,
getLauncherSource,
listLauncherBuildJobs,
listLauncherVersions,
type LauncherSource,
type LauncherBuildJob,
type LauncherVersion
} from './launcher-api';
@@ -43,6 +45,7 @@ function jobTime(job: LauncherBuildJob) {
}
const launcherBuildJobPageSize = 3;
type BuildTarget = 'launcher-client' | 'launcher-backend';
function sanitizeObjectKeyPart(value: string) {
return value
@@ -70,7 +73,9 @@ function launcherArtifactKey(version: string, branch: string, commitSha: string,
export function LauncherBuildPage() {
const { toast } = useToast();
const [target, setTarget] = useState<BuildTarget>('launcher-client');
const [versions, setVersions] = useState<LauncherVersion[]>([]);
const [source, setSource] = useState<LauncherSource | null>(null);
const [version, setVersion] = useState('');
const [branch, setBranch] = useState('release');
const [commitSha, setCommitSha] = useState('');
@@ -81,10 +86,16 @@ export function LauncherBuildPage() {
const loadingVisible = useMinimumLoading(loading);
const activeVersion = useMemo(() => versions.find((item) => item.isActive) ?? versions[0], [versions]);
const isBackend = target === 'launcher-backend';
const backendSource = source?.backend;
const clientSource = source?.client;
const artifactName = `autonomy-studio-launcher-${version || activeVersion?.version || '0.0.0'}.deb`;
const backendImageName = backendSource?.image || 'localhost:5000/studio-launcher-be';
const backendImageTag = `${backendImageName.replace(/\/$/, '')}:${version || '0.1.0'}`;
const backendDockerfile = backendSource?.dockerfile || 'Dockerfile';
const uploadPath = launcherArtifactKey(version || activeVersion?.version || '0.0.0', branch, commitSha, artifactName);
const downloadUrl = r2PublicBaseUrl ? `${r2PublicBaseUrl.replace(/\/$/, '')}/${encodeObjectKey(uploadPath)}` : '백엔드 R2 설정 기준으로 생성됩니다.';
const sortedJobs = useMemo(() => [...jobs].sort((a, b) => jobTime(b) - jobTime(a)), [jobs]);
const sortedJobs = useMemo(() => [...jobs].filter((job) => job.target === target).sort((a, b) => jobTime(b) - jobTime(a)), [jobs, target]);
const totalPages = Math.max(1, Math.ceil(sortedJobs.length / launcherBuildJobPageSize));
const currentPage = Math.min(page, totalPages);
const pageStart = (currentPage - 1) * launcherBuildJobPageSize;
@@ -93,14 +104,15 @@ export function LauncherBuildPage() {
const refresh = () => {
setLoading(true);
Promise.all([listLauncherVersions(), listLauncherBuildJobs()])
.then(([nextVersions, nextJobs]) => {
Promise.all([listLauncherVersions(), listLauncherBuildJobs(), getLauncherSource()])
.then(([nextVersions, nextJobs, nextSource]) => {
setVersions(nextVersions);
setJobs(nextJobs);
setSource(nextSource.source);
const nextVersion = nextVersions.find((item) => item.isActive) ?? nextVersions[0];
setVersion(nextVersion?.version ?? '');
setBranch(nextVersion?.branch ?? 'release');
setCommitSha(nextVersion?.commitSha ?? '');
setBranch(target === 'launcher-backend' ? nextSource.source.backend?.branch ?? 'release' : nextSource.source.client?.branch ?? nextVersion?.branch ?? 'release');
setCommitSha(target === 'launcher-backend' ? nextSource.source.backend?.commitSha ?? '' : nextSource.source.client?.commitSha ?? nextVersion?.commitSha ?? '');
})
.catch((error: Error) => {
toast({ type: 'error', title: '런처 버전 조회 실패', message: error.message });
@@ -112,6 +124,18 @@ export function LauncherBuildPage() {
refresh();
}, []);
useEffect(() => {
if (!source) return;
if (target === 'launcher-backend') {
setBranch(source.backend?.branch ?? 'release');
setCommitSha(source.backend?.commitSha ?? '');
return;
}
setBranch(source.client?.branch ?? activeVersion?.branch ?? 'release');
setCommitSha(source.client?.commitSha ?? activeVersion?.commitSha ?? '');
}, [activeVersion?.branch, activeVersion?.commitSha, source, target]);
useEffect(() => {
if (!hasActiveJob) return;
const timer = window.setInterval(() => {
@@ -135,14 +159,14 @@ export function LauncherBuildPage() {
const createJob = () => {
setLoading(true);
createLauncherBuildJob({
target: 'launcher-client',
repository: activeVersion?.repository ?? undefined,
target,
repository: isBackend ? backendSource?.repository ?? undefined : clientSource?.repository ?? activeVersion?.repository ?? undefined,
branch,
commitSha: commitSha.trim() || undefined,
version: version.trim(),
uploadPath,
artifact: artifactName,
downloadUrl: r2PublicBaseUrl ? downloadUrl : undefined
uploadPath: isBackend ? backendDockerfile : uploadPath,
artifact: isBackend ? backendImageName.replace(/^localhost:5000\//, '') : artifactName,
downloadUrl: isBackend ? backendImageTag : r2PublicBaseUrl ? downloadUrl : undefined
})
.then(({ job }) => {
setJobs((prev) => [job, ...prev]);
@@ -161,7 +185,7 @@ export function LauncherBuildPage() {
<PageTitle
eyebrow="런처 운영"
title="빌드 관리"
description="런처 설치 파일을 만들고 내부 파일 서버 업로드 위치를 관리합니다."
description="런처 클라이언트 설치 파일과 백엔드 컨테이너 이미지를 구성요소별로 빌드합니다."
actions={
<Button className="h-8 px-3 text-[13px]" onClick={createJob} disabled={!version.trim()}>
<Play className="size-4" />
@@ -170,12 +194,21 @@ export function LauncherBuildPage() {
}
/>
<div className="mb-4 flex flex-wrap gap-2">
<Button variant={target === 'launcher-client' ? 'default' : 'outline'} onClick={() => setTarget('launcher-client')}>
클라이언트
</Button>
<Button variant={target === 'launcher-backend' ? 'default' : 'outline'} onClick={() => setTarget('launcher-backend')}>
백엔드
</Button>
</div>
<div className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
<Card className="min-w-0 overflow-hidden">
<CardHeader title="빌드 요청" description="브랜치와 커밋 기준으로 런처 설치 파일을 생성합니다." />
<CardHeader title="빌드 요청" description={isBackend ? '브랜치와 커밋 기준으로 런처 백엔드 이미지를 빌드하고 레지스트리에 푸시합니다.' : '브랜치와 커밋 기준으로 런처 설치 파일을 생성합니다.'} />
<div className="space-y-4 p-5">
<label className="block">
<span className="text-xs font-medium text-muted-foreground">버전</span>
<span className="text-xs font-medium text-muted-foreground">{isBackend ? '이미지 태그' : '버전'}</span>
<input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={version} onChange={(event) => setVersion(event.target.value)} />
</label>
<label className="block">
@@ -191,18 +224,18 @@ export function LauncherBuildPage() {
<input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring" value={commitSha} onChange={(event) => setCommitSha(event.target.value)} placeholder="비워두면 브랜치 최신 커밋" />
</label>
<div className="rounded-md border border-border bg-background p-3">
<p className="text-xs text-muted-foreground">예상 산출물</p>
<p className="mt-2 break-all font-mono text-xs text-foreground">{artifactName}</p>
<p className="mt-2 text-xs text-muted-foreground">R2 Object Key</p>
<p className="mt-1 break-all font-mono text-xs text-foreground">{uploadPath}</p>
<p className="mt-2 text-xs text-muted-foreground">다운로드 URL</p>
<p className="mt-1 break-all font-mono text-xs text-foreground">{downloadUrl}</p>
<p className="text-xs text-muted-foreground">{isBackend ? '이미지' : '예상 산출물'}</p>
<p className="mt-2 break-all font-mono text-xs text-foreground">{isBackend ? backendImageTag : artifactName}</p>
<p className="mt-2 text-xs text-muted-foreground">{isBackend ? 'Dockerfile' : 'R2 Object Key'}</p>
<p className="mt-1 break-all font-mono text-xs text-foreground">{isBackend ? backendDockerfile : uploadPath}</p>
<p className="mt-2 text-xs text-muted-foreground">{isBackend ? 'Repository' : '다운로드 URL'}</p>
<p className="mt-1 break-all font-mono text-xs text-foreground">{isBackend ? backendSource?.repository || '-' : downloadUrl}</p>
</div>
</div>
</Card>
<Card className="min-w-0 overflow-hidden">
<CardHeader title="빌드 작업 목록" description="생성된 런처 빌드 작업과 업로드 계획입니다." />
<CardHeader title="빌드 작업 목록" description={isBackend ? '런처 백엔드 이미지 빌드 작업입니다.' : '생성된 런처 클라이언트 빌드 작업과 업로드 계획입니다.'} />
<div className="flex justify-end px-4 pt-4">
<Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
<RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />