Compare commits

..

7 Commits

Author SHA1 Message Date
chyoo ecee879694 patch..
ci/woodpecker/push/woodpecker Pipeline was successful
2026-08-13 17:58:33 +09:00
chyoo 964472e148 rollback..
ci/woodpecker/push/woodpecker Pipeline was successful
2026-08-13 17:54:17 +09:00
chyoo 44bac0532d fix(admin): filter non-container releases from deployments
ci/woodpecker/push/woodpecker Pipeline was successful
2026-08-13 17:48:49 +09:00
chyoo b65781fd55 add instructor invite code..
ci/woodpecker/push/woodpecker Pipeline was successful
2026-08-07 11:57:38 +09:00
chyoo d746d9d0dc add icon..
ci/woodpecker/push/woodpecker Pipeline was successful
2026-08-07 10:24:27 +09:00
chyoo 4a79dab2f6 feat: display platform agent status and version
ci/woodpecker/push/woodpecker Pipeline was successful
2026-08-06 16:01:33 +09:00
chyoo 4fce1c21a3 feat: add quick deploy for launcher backend builds
ci/woodpecker/push/woodpecker Pipeline was successful
2026-07-15 16:00:53 +09:00
11 changed files with 312 additions and 18 deletions
+50 -5
View File
@@ -1,4 +1,4 @@
import { ChevronDown, ChevronUp, MoreHorizontal, Plus, RefreshCcw, Settings2 } from 'lucide-react'; import { ChevronDown, ChevronUp, MoreHorizontal, Plus, RefreshCcw, Settings2, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { DataTableCard, type DataTableColumn } from '../components/data-table'; import { DataTableCard, type DataTableColumn } from '../components/data-table';
import { Badge, Button, Card, CardHeader, Modal, Progress } from '../components/ui'; import { Badge, Button, Card, CardHeader, Modal, Progress } from '../components/ui';
@@ -331,6 +331,8 @@ export function TailscaleStatusPage() {
const [source, setSource] = useState(''); const [source, setSource] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [deleteTarget, setDeleteTarget] = useState<TailscaleNode | null>(null);
const [deleting, setDeleting] = useState(false);
const online = nodes.filter((node) => node.status === '활성' || node.online).length; const online = nodes.filter((node) => node.status === '활성' || node.online).length;
const subnetRouters = nodes.filter((node) => node.routes && node.routes !== '-').length; const subnetRouters = nodes.filter((node) => node.routes && node.routes !== '-').length;
@@ -353,6 +355,20 @@ export function TailscaleStatusPage() {
refresh(); refresh();
}, []); }, []);
const deleteNode = () => {
if (!deleteTarget) return;
setDeleting(true);
setError('');
apiRequest<{ deleted: boolean }>(`/tailscale/nodes/${encodeURIComponent(deleteTarget.id)}`, { method: 'DELETE' })
.then(() => {
setNodes((current) => current.filter((node) => node.id !== deleteTarget.id));
setDeleteTarget(null);
refresh();
})
.catch((requestError: Error) => setError(requestError.message))
.finally(() => setDeleting(false));
};
return ( return (
<> <>
<PageTitle <PageTitle
@@ -385,13 +401,30 @@ export function TailscaleStatusPage() {
</Card> </Card>
) : null} ) : null}
<div className="mt-4"> <div className="mt-4">
<TailscaleNodeTable nodes={nodes} loading={loading} /> <TailscaleNodeTable nodes={nodes} loading={loading} onDelete={setDeleteTarget} />
</div> </div>
<Modal
open={Boolean(deleteTarget)}
title="노드 삭제"
onClose={() => !deleting && setDeleteTarget(null)}
footer={
<>
<Button variant="outline" disabled={deleting} onClick={() => setDeleteTarget(null)}>취소</Button>
<Button className="bg-rose-600 text-white hover:bg-rose-500" disabled={deleting} onClick={deleteNode}>
{deleting ? '삭제 중...' : '삭제'}
</Button>
</>
}
>
<p className="text-sm text-muted-foreground">
<strong className="text-foreground">{deleteTarget?.name}</strong> 노드를 Headscale에서 삭제합니다. 연결된 기기의 VPN 연결은 즉시 끊기며, 다시 사용하려면 재등록해야 합니다.
</p>
</Modal>
</> </>
); );
} }
function TailscaleNodeTable({ nodes, loading }: { nodes: TailscaleNode[]; loading: boolean }) { function TailscaleNodeTable({ nodes, loading, onDelete }: { nodes: TailscaleNode[]; loading: boolean; onDelete: (node: TailscaleNode) => void }) {
const pageSize = 10; const pageSize = 10;
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const totalPages = Math.max(1, Math.ceil(nodes.length / pageSize)); const totalPages = Math.max(1, Math.ceil(nodes.length / pageSize));
@@ -420,17 +453,18 @@ function TailscaleNodeTable({ nodes, loading }: { nodes: TailscaleNode[]; loadin
<th className="px-5 py-3 font-medium">Routes</th> <th className="px-5 py-3 font-medium">Routes</th>
<th className="px-5 py-3 font-medium">Last Seen</th> <th className="px-5 py-3 font-medium">Last Seen</th>
<th className="px-5 py-3 font-medium">상태</th> <th className="px-5 py-3 font-medium">상태</th>
<th className="px-5 py-3 font-medium"><span className="sr-only">관리</span></th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border"> <tbody className="divide-y divide-border">
{loading && nodes.length === 0 ? ( {loading && nodes.length === 0 ? (
<tr> <tr>
<td colSpan={7} className="px-5 py-10 text-center text-muted-foreground">노드 정보를 불러오는 중입니다.</td> <td colSpan={8} className="px-5 py-10 text-center text-muted-foreground">노드 정보를 불러오는 중입니다.</td>
</tr> </tr>
) : null} ) : null}
{!loading && nodes.length === 0 ? ( {!loading && nodes.length === 0 ? (
<tr> <tr>
<td colSpan={7} className="px-5 py-10 text-center text-muted-foreground">표시할 노드가 없습니다.</td> <td colSpan={8} className="px-5 py-10 text-center text-muted-foreground">표시할 노드가 없습니다.</td>
</tr> </tr>
) : null} ) : null}
{pageNodes.map((node) => ( {pageNodes.map((node) => (
@@ -442,6 +476,17 @@ function TailscaleNodeTable({ nodes, loading }: { nodes: TailscaleNode[]; loadin
<td className="px-5 py-3 text-muted-foreground">{node.routes}</td> <td className="px-5 py-3 text-muted-foreground">{node.routes}</td>
<td className="px-5 py-3 text-muted-foreground">{formatTailscaleLastSeen(node.lastSeen)}</td> <td className="px-5 py-3 text-muted-foreground">{formatTailscaleLastSeen(node.lastSeen)}</td>
<td className="px-5 py-3"><StatusBadge status={node.status} /></td> <td className="px-5 py-3"><StatusBadge status={node.status} /></td>
<td className="px-5 py-3 text-right">
<Button
variant="ghost"
className="size-8 p-0 text-muted-foreground hover:text-rose-600"
title="노드 삭제"
aria-label={`${node.name} 노드 삭제`}
onClick={() => onDelete(node)}
>
<Trash2 className="size-4" />
</Button>
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
+3
View File
@@ -11,6 +11,9 @@ export type PlatformDevice = {
os?: string | null; os?: string | null;
arch?: string | null; arch?: string | null;
distro?: string | null; distro?: string | null;
agentVersion?: string | null;
agentUpdatedAt?: string | null;
agentLastSeenAt?: string | null;
installedAt: string; installedAt: string;
lastProvisionedAt: string; lastProvisionedAt: string;
status: string; status: string;
+68 -3
View File
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState, type MouseEvent } from 'react'; 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 { Button, Card, CardHeader, Modal } from '../../components/ui';
import { Requester } from '../../components/requester'; import { Requester } from '../../components/requester';
import { useToast } from '../../components/toast'; import { useToast } from '../../components/toast';
@@ -7,7 +7,7 @@ import { PageTitle } from '../../layout/AppLayout';
import type { BuildJob, SourceComponent } from '../../types/application'; import type { BuildJob, SourceComponent } from '../../types/application';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import { AppSelector, StatusBadge, formatDate, isBuildDone, useApps } from './ApplicationControls'; 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'; import { getStoredSelectedComponentId, selectedComponentChangedEventName, setStoredSelectedComponentId } from '../../lib/selected-app';
function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) { function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
@@ -29,7 +29,7 @@ function buildTargetForType(type?: string | null) {
function predictedArtifact(component: SourceComponent | undefined, branch: string, commitSha: string) { function predictedArtifact(component: SourceComponent | undefined, branch: string, commitSha: string) {
if (!component) return '-'; 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 === 'ELECTRON') return `${component.name}-${suffix}.AppImage`;
if (component.type === 'DATABASE' || component.type === 'MIGRATION') return `${component.name}:${branch}:migration-check`; if (component.type === 'DATABASE' || component.type === 'MIGRATION') return `${component.name}:${branch}:migration-check`;
return `localhost:5000/${component.name}:${suffix}`; return `localhost:5000/${component.name}:${suffix}`;
@@ -64,6 +64,12 @@ function resultArtifact(job: BuildJob) {
return job.image || job.artifact || '-'; 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) { function jobTime(job: BuildJob) {
const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime(); const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
return Number.isNaN(value) ? 0 : value; return Number.isNaN(value) ? 0 : value;
@@ -95,9 +101,12 @@ export function BuildManagementPage() {
const [commitSha, setCommitSha] = useState(''); const [commitSha, setCommitSha] = useState('');
const [selectedJob, setSelectedJob] = useState<BuildJob | null>(null); const [selectedJob, setSelectedJob] = useState<BuildJob | null>(null);
const [deleteTarget, setDeleteTarget] = 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 [confirmOpen, setConfirmOpen] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [deletingJob, setDeletingJob] = useState(false); const [deletingJob, setDeletingJob] = useState(false);
const [quickDeploying, setQuickDeploying] = useState(false);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [range, setRange] = useState<BuildRange>('week'); const [range, setRange] = useState<BuildRange>('week');
const [totalJobs, setTotalJobs] = useState(0); 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 ( return (
<> <>
<PageTitle <PageTitle
@@ -404,6 +436,11 @@ export function BuildManagementPage() {
<RotateCcw className="size-4" /> <RotateCcw className="size-4" />
</Button> </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) ? ( {isBuildDone(job.status) ? (
<Button <Button
variant="ghost" variant="ghost"
@@ -506,6 +543,34 @@ export function BuildManagementPage() {
<p className="text-muted-foreground">삭제된 빌드 작업 이력과 로그는 목록에서 사라집니다.</p> <p className="text-muted-foreground">삭제된 빌드 작업 이력과 로그는 목록에서 사라집니다.</p>
</div> </div>
</Modal> </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 <Modal
open={confirmOpen} open={confirmOpen}
title="빌드 실행 확인" title="빌드 실행 확인"
@@ -36,11 +36,13 @@ type ImageTags = {
artifacts?: Record<string, string>; artifacts?: Record<string, string>;
}; };
function releaseArtifacts(release?: AppRelease | null) { function releaseArtifacts(release?: AppRelease | null, appName?: string) {
const imageTags = release?.imageTags as ImageTags | null | undefined; const imageTags = release?.imageTags as ImageTags | null | undefined;
const entries = Object.entries(imageTags?.images ?? {}); const entries = Object.entries(imageTags?.images ?? {}).filter(([, image]) => (
!/^(postgres|mysql|mariadb|mongo)(:|@)/i.test(image.trim())
));
if (entries.length) return entries; if (entries.length) return entries;
if (release?.artifact) return [[release.app.name, release.artifact]]; if (release?.artifact) return [[release.app?.name ?? appName ?? 'artifact', release.artifact]];
return []; return [];
} }
@@ -261,7 +263,7 @@ export function DeploymentManagementPage() {
</div> </div>
) : null} ) : null}
{pagedDeployments.map((deployment, index) => { {pagedDeployments.map((deployment, index) => {
const artifacts = releaseArtifacts(deployment.release); const artifacts = releaseArtifacts(deployment.release, deployment.app?.name);
return ( return (
<div key={deployment.id} className="rounded-md border border-border bg-background/70 p-4"> <div key={deployment.id} className="rounded-md border border-border bg-background/70 p-4">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
@@ -270,7 +272,7 @@ export function DeploymentManagementPage() {
<span className="text-xs font-medium text-muted-foreground">No. {totalDeployments - ((currentPage - 1) * deploymentPageSize + index)}</span> <span className="text-xs font-medium text-muted-foreground">No. {totalDeployments - ((currentPage - 1) * deploymentPageSize + index)}</span>
<Badge tone={statusTone(deployment.status)}>{statusLabel(deployment.status)}</Badge> <Badge tone={statusTone(deployment.status)}>{statusLabel(deployment.status)}</Badge>
<span className="text-base font-medium">{deployment.app.name}</span> <span className="text-base font-medium">{deployment.app.name}</span>
<span className="text-base font-medium">{deployment.release?.version || '-'}</span> <span className="text-base font-medium">{deployment.release?.version || '빠른 배포'}</span>
</div> </div>
<div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs"> <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
<span className="text-muted-foreground">환경 <b className="text-foreground">{environmentLabel(deployment.environment)}</b></span> <span className="text-muted-foreground">환경 <b className="text-foreground">{environmentLabel(deployment.environment)}</b></span>
+11
View File
@@ -251,6 +251,17 @@ export function createDeployment(input: {
}); });
} }
export function createQuickDeployment(input: {
buildJobId: string;
environment: string;
namespace: string;
}) {
return apiRequest<{ deploymentJob: DeploymentJob }>('/apps/deployments', {
method: 'POST',
body: JSON.stringify(input)
});
}
export function listMigrations() { export function listMigrations() {
return apiRequest<RuntimeControlJob[]>('/apps/migrations'); return apiRequest<RuntimeControlJob[]>('/apps/migrations');
} }
+100 -4
View File
@@ -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 { useEffect, useMemo, useState } from 'react';
import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui'; import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
import { useToast } from '../../components/toast'; import { useToast } from '../../components/toast';
@@ -7,6 +7,8 @@ import { formatDateTime } from '../../lib/date-format';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import { import {
createLauncherBuildJob, createLauncherBuildJob,
deployLauncherBackend,
getLauncherBackendDeployment,
getLauncherSource, getLauncherSource,
listLauncherBuildEnv, listLauncherBuildEnv,
listLauncherBuildJobs, listLauncherBuildJobs,
@@ -16,6 +18,7 @@ import {
type LauncherSource, type LauncherSource,
type LauncherBuildJob, type LauncherBuildJob,
type LauncherBuildEnvVariable, type LauncherBuildEnvVariable,
type LauncherBackendDeployment,
type LauncherVersion type LauncherVersion
} from './launcher-api'; } from './launcher-api';
@@ -132,6 +135,9 @@ export function LauncherBuildPage() {
const [buildEnv, setBuildEnv] = useState<LauncherBuildEnvVariable[]>([]); const [buildEnv, setBuildEnv] = useState<LauncherBuildEnvVariable[]>([]);
const [buildEnvSaving, setBuildEnvSaving] = useState(false); const [buildEnvSaving, setBuildEnvSaving] = useState(false);
const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null); 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 [confirmOpen, setConfirmOpen] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
@@ -153,6 +159,13 @@ export function LauncherBuildPage() {
const pagedJobs = jobs; const pagedJobs = jobs;
const hasActiveJob = jobs.some((job) => job.status === 'PENDING' || job.status === 'RUNNING'); 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) => ( const loadBuildJobs = (nextPage = page, nextTarget = target, nextRange = range) => (
listLauncherBuildJobsPage({ listLauncherBuildJobsPage({
target: nextTarget, target: nextTarget,
@@ -269,6 +282,31 @@ export function LauncherBuildPage() {
.finally(() => setLoading(false)); .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>) => { const updateBuildEnv = (index: number, patch: Partial<LauncherBuildEnvVariable>) => {
setBuildEnv((prev) => prev.map((variable, variableIndex) => ( setBuildEnv((prev) => prev.map((variable, variableIndex) => (
variableIndex === index ? { ...variable, ...patch } : variable variableIndex === index ? { ...variable, ...patch } : variable
@@ -440,9 +478,22 @@ export function LauncherBuildPage() {
<span>생성 <b className="text-foreground">{formatDate(job.createdAt)}</b></span> <span>생성 <b className="text-foreground">{formatDate(job.createdAt)}</b></span>
</div> </div>
</div> </div>
<Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}> <div className="flex shrink-0 items-center gap-1">
<MoreHorizontal className="size-4" /> {isQuickDeployable(job) ? (
</Button> <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>
<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="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"> <div className="min-w-0">
@@ -500,6 +551,51 @@ export function LauncherBuildPage() {
{selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'} {selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
</pre> </pre>
</Modal> </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 <Modal
open={confirmOpen} open={confirmOpen}
title="빌드 실행 확인" title="빌드 실행 확인"
@@ -136,6 +136,7 @@ export function OrganizationsPage() {
}, },
{ key: 'type', header: '유형', className: 'w-32 px-5 py-3', cell: (row) => <StatusBadge status={organizationTypeLabel(row.type)} tone="blue" /> }, { key: 'type', header: '유형', className: 'w-32 px-5 py-3', cell: (row) => <StatusBadge status={organizationTypeLabel(row.type)} tone="blue" /> },
{ key: 'license', header: '라이센스', className: 'w-36 px-5 py-3', cell: (row) => row.defaultLicenseCode ? <StatusBadge status={row.defaultLicenseName ?? row.defaultLicenseCode} tone="green" /> : <span className="text-xs text-muted-foreground">-</span> }, { key: 'license', header: '라이센스', className: 'w-36 px-5 py-3', cell: (row) => row.defaultLicenseCode ? <StatusBadge status={row.defaultLicenseName ?? row.defaultLicenseCode} tone="green" /> : <span className="text-xs text-muted-foreground">-</span> },
{ key: 'instructorInviteCode', header: '강사 가입 코드', className: 'w-40 px-5 py-3', cell: (row) => <span className="font-mono text-sm font-semibold tracking-[0.08em] text-foreground">{row.instructorInviteCode}</span> },
{ key: 'domain', header: '도메인', className: 'w-56 px-5 py-3', cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.domain || '-'}</span> }, { key: 'domain', header: '도메인', className: 'w-56 px-5 py-3', cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.domain || '-'}</span> },
{ key: 'createdAt', header: '생성', className: 'w-48 px-5 py-3', cell: (row) => <OrganizationCreator organization={row} /> }, { key: 'createdAt', header: '생성', className: 'w-48 px-5 py-3', cell: (row) => <OrganizationCreator organization={row} /> },
{ {
+33 -1
View File
@@ -13,6 +13,7 @@ import {
lockUser, lockUser,
terminateUserSession, terminateUserSession,
unlockUser, unlockUser,
updateLmsInstructor,
type LicensePlan, type LicensePlan,
type Organization, type Organization,
type UserSession type UserSession
@@ -45,6 +46,7 @@ export function UserSessionsPage() {
const [createSaving, setCreateSaving] = useState(false); const [createSaving, setCreateSaving] = useState(false);
const [menuSession, setMenuSession] = useState<{ id: string; x: number; y: number } | null>(null); const [menuSession, setMenuSession] = useState<{ id: string; x: number; y: number } | null>(null);
const [detailSession, setDetailSession] = useState<UserSession | null>(null); const [detailSession, setDetailSession] = useState<UserSession | null>(null);
const [lmsRoleSaving, setLmsRoleSaving] = useState(false);
const loadingVisible = useMinimumLoading(loading); const loadingVisible = useMinimumLoading(loading);
const refresh = () => { const refresh = () => {
@@ -183,6 +185,24 @@ export function UserSessionsPage() {
.finally(() => setCreateSaving(false)); .finally(() => setCreateSaving(false));
}; };
const setLmsInstructor = (isInstructor: boolean) => {
if (!detailSession) return;
setLmsRoleSaving(true);
updateLmsInstructor(detailSession.userId, isInstructor)
.then(() => {
setDetailSession((current) => current ? { ...current, isLmsInstructor: isInstructor } : current);
setSessions((current) => current.map((session) => (
session.userId === detailSession.userId ? { ...session, isLmsInstructor: isInstructor } : session
)));
toast({ type: 'success', title: 'LMS 역할 변경', message: isInstructor ? '강사 권한을 부여했습니다.' : '강사 권한을 해제했습니다.' });
})
.catch((error: Error) => {
toast({ type: 'error', title: 'LMS 역할 변경 실패', message: error.message });
})
.finally(() => setLmsRoleSaving(false));
};
return ( return (
<> <>
<PageTitle <PageTitle
@@ -289,8 +309,20 @@ export function UserSessionsPage() {
</div> </div>
<StatusBadge status={detailSession.state} /> <StatusBadge status={detailSession.state} />
</div> </div>
<div className="grid gap-3 text-sm"> <div className="grid gap-3 text-sm sm:grid-cols-2">
<DetailItem label="사용자 ID" value={detailSession.userId} mono /> <DetailItem label="사용자 ID" value={detailSession.userId} mono />
<label className="block min-w-0">
<span className="text-xs font-medium text-muted-foreground">LMS</span>
<select
className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground outline-none focus:ring-2 focus:ring-ring"
value={detailSession.isLmsInstructor ? 'INSTRUCTOR' : 'STUDENT'}
disabled={lmsRoleSaving}
onChange={(event) => setLmsInstructor(event.target.value === 'INSTRUCTOR')}
>
<option value="STUDENT">수강생</option>
<option value="INSTRUCTOR">강사</option>
</select>
</label>
<DetailItem label="조직" value={detailSession.primaryAffiliation?.organizationName ?? '-'} /> <DetailItem label="조직" value={detailSession.primaryAffiliation?.organizationName ?? '-'} />
<DetailItem label="조직 유형" value={organizationTypeLabel(detailSession.primaryAffiliation?.organizationType)} /> <DetailItem label="조직 유형" value={organizationTypeLabel(detailSession.primaryAffiliation?.organizationType)} />
<DetailItem label="부서" value={detailSession.primaryAffiliation?.department ?? '-'} /> <DetailItem label="부서" value={detailSession.primaryAffiliation?.department ?? '-'} />
+9
View File
@@ -70,6 +70,7 @@ export type UserSession = {
expiresAt?: string | null; expiresAt?: string | null;
lastSeen?: string | null; lastSeen?: string | null;
state: string; state: string;
isLmsInstructor?: boolean;
primaryAffiliation?: { primaryAffiliation?: {
id: string; id: string;
organizationId: string; organizationId: string;
@@ -90,6 +91,7 @@ export type Organization = {
domain?: string | null; domain?: string | null;
defaultLicenseCode?: string | null; defaultLicenseCode?: string | null;
defaultLicenseName?: string | null; defaultLicenseName?: string | null;
instructorInviteCode: string;
createdById?: string | null; createdById?: string | null;
createdByName?: string | null; createdByName?: string | null;
createdByEmail?: string | null; createdByEmail?: string | null;
@@ -257,6 +259,13 @@ export function unlockUser(userId: string) {
}); });
} }
export function updateLmsInstructor(userId: string, isInstructor: boolean) {
return apiRequest<{ userId: string; isInstructor: boolean }>(`/users/${userId}/lms-instructor`, {
method: 'PATCH',
body: JSON.stringify({ isInstructor })
});
}
export function terminateUserSession(sessionId: string) { export function terminateUserSession(sessionId: string) {
return apiRequest(`/users/sessions/${sessionId}`, { return apiRequest(`/users/sessions/${sessionId}`, {
method: 'DELETE' method: 'DELETE'
@@ -22,6 +22,8 @@ type HeadscaleNode = {
type AclRule = { id: string; action: string; sources: string[]; destinations: string[] }; type AclRule = { id: string; action: string; sources: string[]; destinations: string[] };
type PlatformRow = HeadscaleNode & { device?: PlatformDevice; controllers: string[]; no: number }; type PlatformRow = HeadscaleNode & { device?: PlatformDevice; controllers: string[]; no: number };
type DeviceKind = 'agent' | 'launcher' | 'unknown';
function normalize(value?: string | null) { function normalize(value?: string | null) {
return (value ?? '').toLowerCase().replace(/[^a-z0-9]/g, ''); return (value ?? '').toLowerCase().replace(/[^a-z0-9]/g, '');
} }
@@ -41,6 +43,17 @@ function findControllers(node: HeadscaleNode, rules: AclRule[]) {
.flatMap((rule) => rule.sources))]; .flatMap((rule) => rule.sources))];
} }
function getDeviceKind(row: PlatformRow): DeviceKind {
if (!row.device) return 'unknown';
return row.device.agentVersion || row.device.agentLastSeenAt ? 'agent' : 'launcher';
}
function formatDateTime(value?: string | null) {
if (!value) return '-';
const date = new Date(value);
return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString('ko-KR', { hour12: false });
}
export function RuntimeDeviceControlPage() { export function RuntimeDeviceControlPage() {
const [rows, setRows] = useState<PlatformRow[]>([]); const [rows, setRows] = useState<PlatformRow[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -91,6 +104,19 @@ export function RuntimeDeviceControlPage() {
width: 180, width: 180,
cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.ip || '-'}</span>, cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.ip || '-'}</span>,
}, },
{
key: 'deviceKind',
header: '유형',
width: 150,
cell: (row) => {
const kind = getDeviceKind(row);
if (kind === 'agent') {
return <Badge tone="green">에이전트</Badge>;
}
if (kind === 'launcher') return <Badge tone="neutral">런처 클라이언트</Badge>;
return <Badge tone="neutral">미확인</Badge>;
},
},
{ {
key: 'controllers', key: 'controllers',
header: '제어 사용자', header: '제어 사용자',
@@ -155,6 +181,9 @@ export function RuntimeDeviceControlPage() {
<dt className="text-muted-foreground">Workspace</dt><dd className="min-w-0 break-all">{selected?.device?.workspaceRoot || '-'}</dd> <dt className="text-muted-foreground">Workspace</dt><dd className="min-w-0 break-all">{selected?.device?.workspaceRoot || '-'}</dd>
<dt className="text-muted-foreground">SSH 사용자</dt><dd>{selected?.device?.sshUser || '-'}</dd> <dt className="text-muted-foreground">SSH 사용자</dt><dd>{selected?.device?.sshUser || '-'}</dd>
<dt className="text-muted-foreground">사용 유형</dt><dd>{selected?.device?.usageType || '-'}</dd> <dt className="text-muted-foreground">사용 유형</dt><dd>{selected?.device?.usageType || '-'}</dd>
<dt className="text-muted-foreground">장비 유형</dt><dd>{selected ? ({ agent: '에이전트', launcher: '런처 클라이언트', unknown: '미확인' }[getDeviceKind(selected)]) : '-'}</dd>
<dt className="text-muted-foreground">에이전트 버전</dt><dd>{selected?.device?.agentVersion || '-'}</dd>
<dt className="text-muted-foreground">마지막 에이전트 확인</dt><dd>{formatDateTime(selected?.device?.agentLastSeenAt)}</dd>
</dl> </dl>
</Modal> </Modal>
</> </>
+1
View File
@@ -21,6 +21,7 @@ export type BuildJob = {
branch: string; branch: string;
commitSha?: string | null; commitSha?: string | null;
artifact?: string | null; artifact?: string | null;
artifactSha256?: string | null;
image?: string | null; image?: string | null;
status: JobStatus; status: JobStatus;
logs?: string | null; logs?: string | null;