feat: add quick deploy for launcher backend builds
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal, Play, Plus, RotateCcw, Trash2 } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal, Play, Plus, RotateCcw, Trash2, Upload } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
|
||||
import { useToast } from '../../components/toast';
|
||||
@@ -7,6 +7,8 @@ import { formatDateTime } from '../../lib/date-format';
|
||||
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
|
||||
import {
|
||||
createLauncherBuildJob,
|
||||
deployLauncherBackend,
|
||||
getLauncherBackendDeployment,
|
||||
getLauncherSource,
|
||||
listLauncherBuildEnv,
|
||||
listLauncherBuildJobs,
|
||||
@@ -16,6 +18,7 @@ import {
|
||||
type LauncherSource,
|
||||
type LauncherBuildJob,
|
||||
type LauncherBuildEnvVariable,
|
||||
type LauncherBackendDeployment,
|
||||
type LauncherVersion
|
||||
} from './launcher-api';
|
||||
|
||||
@@ -132,6 +135,9 @@ export function LauncherBuildPage() {
|
||||
const [buildEnv, setBuildEnv] = useState<LauncherBuildEnvVariable[]>([]);
|
||||
const [buildEnvSaving, setBuildEnvSaving] = useState(false);
|
||||
const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null);
|
||||
const [quickDeployJob, setQuickDeployJob] = useState<LauncherBuildJob | null>(null);
|
||||
const [backendDeployment, setBackendDeployment] = useState<LauncherBackendDeployment | null>(null);
|
||||
const [quickDeploying, setQuickDeploying] = useState(false);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
@@ -153,6 +159,13 @@ export function LauncherBuildPage() {
|
||||
const pagedJobs = jobs;
|
||||
const hasActiveJob = jobs.some((job) => job.status === 'PENDING' || job.status === 'RUNNING');
|
||||
|
||||
const isQuickDeployable = (job: LauncherBuildJob) => (
|
||||
target === 'launcher-backend'
|
||||
&& job.target === 'launcher-backend'
|
||||
&& job.status === 'SUCCEEDED'
|
||||
&& Boolean(job.downloadUrl)
|
||||
);
|
||||
|
||||
const loadBuildJobs = (nextPage = page, nextTarget = target, nextRange = range) => (
|
||||
listLauncherBuildJobsPage({
|
||||
target: nextTarget,
|
||||
@@ -269,6 +282,31 @@ export function LauncherBuildPage() {
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
const openQuickDeploy = (job: LauncherBuildJob) => {
|
||||
setQuickDeployJob(job);
|
||||
setBackendDeployment(null);
|
||||
getLauncherBackendDeployment()
|
||||
.then(setBackendDeployment)
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '배포 대상 조회 실패', message: error.message });
|
||||
});
|
||||
};
|
||||
|
||||
const quickDeploy = () => {
|
||||
if (!quickDeployJob?.downloadUrl) return;
|
||||
setQuickDeploying(true);
|
||||
deployLauncherBackend(quickDeployJob.downloadUrl)
|
||||
.then(() => {
|
||||
toast({ type: 'success', message: '런처 백엔드를 배포했습니다.' });
|
||||
setQuickDeployJob(null);
|
||||
refresh();
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '백엔드 배포 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setQuickDeploying(false));
|
||||
};
|
||||
|
||||
const updateBuildEnv = (index: number, patch: Partial<LauncherBuildEnvVariable>) => {
|
||||
setBuildEnv((prev) => prev.map((variable, variableIndex) => (
|
||||
variableIndex === index ? { ...variable, ...patch } : variable
|
||||
@@ -440,9 +478,22 @@ export function LauncherBuildPage() {
|
||||
<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 className="flex shrink-0 items-center gap-1">
|
||||
{isQuickDeployable(job) ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="size-8 px-0"
|
||||
title="빠른 배포"
|
||||
aria-label="빠른 배포"
|
||||
onClick={() => openQuickDeploy(job)}
|
||||
>
|
||||
<Upload className="size-4" />
|
||||
</Button>
|
||||
) : null}
|
||||
<Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</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">
|
||||
@@ -500,6 +551,51 @@ export function LauncherBuildPage() {
|
||||
{selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
|
||||
</pre>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={Boolean(quickDeployJob)}
|
||||
title="빠른 배포"
|
||||
onClose={() => !quickDeploying && setQuickDeployJob(null)}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setQuickDeployJob(null)} disabled={quickDeploying}>취소</Button>
|
||||
<Button onClick={quickDeploy} disabled={quickDeploying || !quickDeployJob?.downloadUrl}>
|
||||
<Upload className="size-4" />
|
||||
{quickDeploying ? '배포 중' : '배포'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="rounded-md border border-border bg-muted/20 px-4 py-3">
|
||||
<p className="font-medium">성공한 백엔드 빌드 이미지를 바로 배포합니다.</p>
|
||||
<p className="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
현재 설정된 복제 수와 CPU, 메모리 제한은 변경하지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-2 rounded-md border border-border bg-background p-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">대상</span>
|
||||
<span className="font-mono text-xs font-medium">
|
||||
{backendDeployment ? `${backendDeployment.namespace}/deployment/${backendDeployment.deployment}` : '배포 대상 확인 중'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-muted-foreground">빌드</span>
|
||||
<span className="font-medium">{quickDeployJob?.version || '-'}</span>
|
||||
</div>
|
||||
<div className="grid gap-1 pt-1">
|
||||
<span className="text-muted-foreground">이미지</span>
|
||||
<span className="break-all font-mono text-xs font-medium">{quickDeployJob?.downloadUrl || '-'}</span>
|
||||
</div>
|
||||
{backendDeployment?.currentImage ? (
|
||||
<div className="grid gap-1 border-t border-border pt-3">
|
||||
<span className="text-muted-foreground">현재 이미지</span>
|
||||
<span className="break-all font-mono text-xs text-muted-foreground">{backendDeployment.currentImage}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={confirmOpen}
|
||||
title="빌드 실행 확인"
|
||||
|
||||
Reference in New Issue
Block a user