init studio admin frontend
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw } 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 { formatDateTime } from '../../lib/date-format';
|
||||
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
|
||||
import {
|
||||
createLauncherBuildJob,
|
||||
listLauncherBuildJobs,
|
||||
listLauncherVersions,
|
||||
type LauncherBuildJob,
|
||||
type LauncherVersion
|
||||
} from './launcher-api';
|
||||
|
||||
const r2PublicBaseUrl = import.meta.env.VITE_R2_PUBLIC_BASE_URL ?? '';
|
||||
const r2ArtifactPrefix = import.meta.env.VITE_R2_ARTIFACT_PREFIX ?? 'studio-artifacts';
|
||||
|
||||
function formatDate(value: string) {
|
||||
return formatDateTime(value);
|
||||
}
|
||||
|
||||
function statusText(status: LauncherBuildJob['status']) {
|
||||
if (status === 'SUCCEEDED') return '성공';
|
||||
if (status === 'RUNNING') return '실행 중';
|
||||
if (status === 'PENDING') return '대기';
|
||||
if (status === 'FAILED') return '실패';
|
||||
if (status === 'CANCELED') return '취소';
|
||||
return status;
|
||||
}
|
||||
|
||||
function statusTone(status: LauncherBuildJob['status']): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
|
||||
if (status === 'SUCCEEDED') return 'green';
|
||||
if (status === 'RUNNING') return 'blue';
|
||||
if (status === 'PENDING') return 'amber';
|
||||
if (status === 'FAILED') return 'red';
|
||||
return 'neutral';
|
||||
}
|
||||
|
||||
function jobTime(job: LauncherBuildJob) {
|
||||
const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
|
||||
return Number.isNaN(value) ? 0 : value;
|
||||
}
|
||||
|
||||
const launcherBuildJobPageSize = 3;
|
||||
|
||||
function sanitizeObjectKeyPart(value: string) {
|
||||
return value
|
||||
.trim()
|
||||
.replace(/^\/+|\/+$/g, '')
|
||||
.replace(/[^a-zA-Z0-9._@+=-]+/g, '-')
|
||||
|| 'unknown';
|
||||
}
|
||||
|
||||
function encodeObjectKey(key: string) {
|
||||
return key.split('/').map(encodeURIComponent).join('/');
|
||||
}
|
||||
|
||||
function launcherArtifactKey(version: string, branch: string, commitSha: string, artifactName: string) {
|
||||
const revision = commitSha.trim().slice(0, 7) || 'latest';
|
||||
return [
|
||||
r2ArtifactPrefix,
|
||||
'launcher',
|
||||
version || '0.0.0',
|
||||
branch || 'release',
|
||||
revision,
|
||||
artifactName,
|
||||
].map(sanitizeObjectKeyPart).join('/');
|
||||
}
|
||||
|
||||
export function LauncherBuildPage() {
|
||||
const { toast } = useToast();
|
||||
const [versions, setVersions] = useState<LauncherVersion[]>([]);
|
||||
const [version, setVersion] = useState('');
|
||||
const [branch, setBranch] = useState('release');
|
||||
const [commitSha, setCommitSha] = useState('');
|
||||
const [jobs, setJobs] = useState<LauncherBuildJob[]>([]);
|
||||
const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const loadingVisible = useMinimumLoading(loading);
|
||||
|
||||
const activeVersion = useMemo(() => versions.find((item) => item.isActive) ?? versions[0], [versions]);
|
||||
const artifactName = `autonomy-studio-launcher-${version || activeVersion?.version || '0.0.0'}.deb`;
|
||||
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 totalPages = Math.max(1, Math.ceil(sortedJobs.length / launcherBuildJobPageSize));
|
||||
const currentPage = Math.min(page, totalPages);
|
||||
const pageStart = (currentPage - 1) * launcherBuildJobPageSize;
|
||||
const pagedJobs = sortedJobs.slice(pageStart, pageStart + launcherBuildJobPageSize);
|
||||
|
||||
const refresh = () => {
|
||||
setLoading(true);
|
||||
Promise.all([listLauncherVersions(), listLauncherBuildJobs()])
|
||||
.then(([nextVersions, nextJobs]) => {
|
||||
setVersions(nextVersions);
|
||||
setJobs(nextJobs);
|
||||
const nextVersion = nextVersions.find((item) => item.isActive) ?? nextVersions[0];
|
||||
setVersion(nextVersion?.version ?? '');
|
||||
setBranch(nextVersion?.branch ?? 'release');
|
||||
setCommitSha(nextVersion?.commitSha ?? '');
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '런처 버전 조회 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, []);
|
||||
|
||||
const createJob = () => {
|
||||
setLoading(true);
|
||||
createLauncherBuildJob({
|
||||
target: 'launcher-client',
|
||||
repository: activeVersion?.repository ?? undefined,
|
||||
branch,
|
||||
commitSha: commitSha.trim() || undefined,
|
||||
version: version.trim(),
|
||||
uploadPath,
|
||||
artifact: artifactName,
|
||||
downloadUrl: r2PublicBaseUrl ? downloadUrl : undefined
|
||||
})
|
||||
.then(({ job }) => {
|
||||
setJobs((prev) => [job, ...prev]);
|
||||
setPage(1);
|
||||
setSelectedJob(job);
|
||||
toast({ type: 'success', title: '빌드 작업', message: '런처 빌드 작업이 생성되었습니다.' });
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '빌드 작업 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
eyebrow="런처 운영"
|
||||
title="빌드 관리"
|
||||
description="런처 설치 파일을 만들고 내부 파일 서버 업로드 위치를 관리합니다."
|
||||
actions={
|
||||
<Button className="h-8 px-3 text-[13px]" onClick={createJob} disabled={!version.trim()}>
|
||||
<Play className="size-4" />
|
||||
실행
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
|
||||
<Card className="min-w-0 overflow-hidden">
|
||||
<CardHeader title="빌드 요청" description="브랜치와 커밋 기준으로 런처 설치 파일을 생성합니다." />
|
||||
<div className="space-y-4 p-5">
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium text-muted-foreground">버전</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">
|
||||
<span className="text-xs font-medium text-muted-foreground">브랜치</span>
|
||||
<select 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={branch} onChange={(event) => setBranch(event.target.value)}>
|
||||
<option value="develop">develop</option>
|
||||
<option value="release">release</option>
|
||||
<option value="main">main</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium text-muted-foreground">Commit SHA</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0 overflow-hidden">
|
||||
<CardHeader title="빌드 작업 목록" description="생성된 런처 빌드 작업과 업로드 계획입니다." />
|
||||
<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'} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-3 p-4">
|
||||
{jobs.length === 0 ? (
|
||||
<div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
|
||||
빌드 작업이 없습니다.
|
||||
</div>
|
||||
) : null}
|
||||
{pagedJobs.map((job, index) => (
|
||||
<div key={job.id} className="rounded-md border border-border bg-background/70 p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-xs font-medium text-muted-foreground">No. {sortedJobs.length - (pageStart + index)}</span>
|
||||
<Badge tone={statusTone(job.status)}>{statusText(job.status)}</Badge>
|
||||
<span className="font-medium">{job.target}</span>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
||||
<span>브랜치 <b className="text-foreground">{job.branch}</b></span>
|
||||
<span>커밋 <b className="font-mono text-foreground">{job.commitSha || '-'}</b></span>
|
||||
<span>생성 <b className="text-foreground">{formatDate(job.createdAt)}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-3 grid gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
|
||||
<div className="min-w-0">
|
||||
<p className="text-muted-foreground">산출물</p>
|
||||
<p className="mt-1 truncate font-mono font-medium">{job.artifact}</p>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-muted-foreground">다운로드 URL</p>
|
||||
<p className="mt-1 truncate font-mono font-medium">{job.downloadUrl || '-'}</p>
|
||||
</div>
|
||||
<div className="min-w-0 md:col-span-2">
|
||||
<p className="text-muted-foreground">R2 Object Key</p>
|
||||
<p className="mt-1 truncate font-mono font-medium">{job.uploadPath}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{loading ? '불러오는 중' : `총 ${sortedJobs.length}건 · ${currentPage} / ${totalPages}`}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-8 px-3 text-[13px]"
|
||||
disabled={currentPage <= 1}
|
||||
onClick={() => setPage((prev) => Math.max(1, prev - 1))}
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
이전
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-8 px-3 text-[13px]"
|
||||
disabled={currentPage >= totalPages}
|
||||
onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
|
||||
>
|
||||
다음
|
||||
<ChevronRight className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
open={Boolean(selectedJob)}
|
||||
title="런처 빌드 로그"
|
||||
onClose={() => setSelectedJob(null)}
|
||||
className="log-modal-shell"
|
||||
footer={<Button variant="outline" onClick={() => setSelectedJob(null)}>닫기</Button>}
|
||||
>
|
||||
<pre className="whitespace-pre-wrap bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
|
||||
{selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
|
||||
</pre>
|
||||
</Modal>
|
||||
<LoadingModal open={loadingVisible} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user