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,5 +1,5 @@
|
||||
import { useEffect, useMemo, useState, type MouseEvent } from 'react';
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Square, Trash2 } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Square, Trash2, Upload } from 'lucide-react';
|
||||
import { Button, Card, CardHeader, Modal } from '../../components/ui';
|
||||
import { Requester } from '../../components/requester';
|
||||
import { useToast } from '../../components/toast';
|
||||
@@ -7,7 +7,7 @@ import { PageTitle } from '../../layout/AppLayout';
|
||||
import type { BuildJob, SourceComponent } from '../../types/application';
|
||||
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
|
||||
import { AppSelector, StatusBadge, formatDate, isBuildDone, useApps } from './ApplicationControls';
|
||||
import { cancelBuildJob, createBuildJob, deleteBuildJob, listBuildJobsPage, listSources } from './application-api';
|
||||
import { cancelBuildJob, createBuildJob, createQuickDeployment, deleteBuildJob, listBuildJobsPage, listSources } from './application-api';
|
||||
import { getStoredSelectedComponentId, selectedComponentChangedEventName, setStoredSelectedComponentId } from '../../lib/selected-app';
|
||||
|
||||
function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
|
||||
@@ -29,7 +29,7 @@ function buildTargetForType(type?: string | null) {
|
||||
|
||||
function predictedArtifact(component: SourceComponent | undefined, branch: string, commitSha: string) {
|
||||
if (!component) return '-';
|
||||
const suffix = commitSha.trim() ? commitSha.trim().slice(0, 7) : branch;
|
||||
const suffix = commitSha.trim() ? commitSha.trim().slice(0, 7) : '<commit-sha>';
|
||||
if (component.type === 'ELECTRON') return `${component.name}-${suffix}.AppImage`;
|
||||
if (component.type === 'DATABASE' || component.type === 'MIGRATION') return `${component.name}:${branch}:migration-check`;
|
||||
return `localhost:5000/${component.name}:${suffix}`;
|
||||
@@ -64,6 +64,12 @@ function resultArtifact(job: BuildJob) {
|
||||
return job.image || job.artifact || '-';
|
||||
}
|
||||
|
||||
function isQuickDeployable(job: BuildJob) {
|
||||
return job.status === 'SUCCEEDED'
|
||||
&& Boolean(job.image)
|
||||
&& ['CONTAINER', 'STATIC_WEB'].includes(job.component.type);
|
||||
}
|
||||
|
||||
function jobTime(job: BuildJob) {
|
||||
const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
|
||||
return Number.isNaN(value) ? 0 : value;
|
||||
@@ -95,9 +101,12 @@ export function BuildManagementPage() {
|
||||
const [commitSha, setCommitSha] = useState('');
|
||||
const [selectedJob, setSelectedJob] = useState<BuildJob | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<BuildJob | null>(null);
|
||||
const [quickDeployTarget, setQuickDeployTarget] = useState<BuildJob | null>(null);
|
||||
const [quickDeployNamespace, setQuickDeployNamespace] = useState('');
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [deletingJob, setDeletingJob] = useState(false);
|
||||
const [quickDeploying, setQuickDeploying] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [range, setRange] = useState<BuildRange>('week');
|
||||
const [totalJobs, setTotalJobs] = useState(0);
|
||||
@@ -276,6 +285,29 @@ export function BuildManagementPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const openQuickDeploy = (job: BuildJob) => {
|
||||
setQuickDeployTarget(job);
|
||||
setQuickDeployNamespace(job.component.app.namespace || '');
|
||||
};
|
||||
|
||||
const quickDeploy = async () => {
|
||||
if (!quickDeployTarget || !quickDeployNamespace.trim() || quickDeploying) return;
|
||||
setQuickDeploying(true);
|
||||
try {
|
||||
await createQuickDeployment({
|
||||
buildJobId: quickDeployTarget.id,
|
||||
environment: 'prod',
|
||||
namespace: quickDeployNamespace.trim()
|
||||
});
|
||||
toast({ type: 'success', message: '빠른 배포 작업이 실행되었습니다.' });
|
||||
setQuickDeployTarget(null);
|
||||
} catch (error) {
|
||||
toast({ type: 'error', message: error instanceof Error ? error.message : '빠른 배포에 실패했습니다.' });
|
||||
} finally {
|
||||
setQuickDeploying(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
@@ -404,6 +436,11 @@ export function BuildManagementPage() {
|
||||
<RotateCcw className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
{isQuickDeployable(job) ? (
|
||||
<Button variant="outline" className="size-8 px-0" title="빠른 배포" aria-label="빠른 배포" onClick={() => openQuickDeploy(job)}>
|
||||
<Upload className="size-4" />
|
||||
</Button>
|
||||
) : null}
|
||||
{isBuildDone(job.status) ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -506,6 +543,34 @@ export function BuildManagementPage() {
|
||||
<p className="text-muted-foreground">삭제된 빌드 작업 이력과 로그는 목록에서 사라집니다.</p>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={Boolean(quickDeployTarget)}
|
||||
title="빠른 배포"
|
||||
onClose={() => {
|
||||
if (!quickDeploying) setQuickDeployTarget(null);
|
||||
}}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" disabled={quickDeploying} onClick={() => setQuickDeployTarget(null)}>취소</Button>
|
||||
<Button disabled={quickDeploying || !quickDeployNamespace.trim()} onClick={quickDeploy}>
|
||||
<Upload className="size-4" />
|
||||
{quickDeploying ? '배포 중' : '배포'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-3 text-sm">
|
||||
<p className="text-muted-foreground">릴리즈를 만들지 않고 선택한 빌드 이미지로 현재 워크로드를 교체합니다. 런처 앱 버전은 갱신하지 않습니다.</p>
|
||||
<div className="grid gap-2 rounded-md border border-border bg-muted/20 p-4 text-xs">
|
||||
<div className="flex items-center justify-between gap-4"><span className="text-muted-foreground">구성요소</span><span className="font-medium">{quickDeployTarget?.component.name ?? '-'}</span></div>
|
||||
<div className="min-w-0"><p className="text-muted-foreground">이미지</p><p className="mt-1 truncate font-mono font-medium">{quickDeployTarget?.image ?? '-'}</p></div>
|
||||
</div>
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium text-muted-foreground">네임스페이스 <b className="text-foreground">*</b></span>
|
||||
<input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm outline-none" value={quickDeployNamespace} disabled={quickDeploying} onChange={(event) => setQuickDeployNamespace(event.target.value)} />
|
||||
</label>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={confirmOpen}
|
||||
title="빌드 실행 확인"
|
||||
|
||||
Reference in New Issue
Block a user