528 lines
24 KiB
TypeScript
528 lines
24 KiB
TypeScript
import { Database, FileArchive, Plus, RotateCcw, Server, Settings, TerminalSquare, Trash2 } 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 { cn } from '../../lib/utils';
|
|
import type { RuntimeResource } from '../../types/runtime';
|
|
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
|
|
import {
|
|
listLauncherBuildJobs,
|
|
listLauncherVersions,
|
|
loadLauncherComponentLogs,
|
|
loadLauncherRuntimeResources,
|
|
loadRuntimeWorkloadEnv,
|
|
restartLauncherComponent,
|
|
saveRuntimeWorkloadEnv,
|
|
type LauncherBuildJob,
|
|
type LauncherVersion
|
|
} from './launcher-api';
|
|
|
|
const LAUNCHER_NAMESPACE = 'studio-system';
|
|
|
|
type LauncherComponentDefinition = {
|
|
key: string;
|
|
name: string;
|
|
description: string;
|
|
type: 'client' | 'backend' | 'database';
|
|
kind?: string;
|
|
workloadName?: string;
|
|
serviceName?: string;
|
|
};
|
|
|
|
const launcherComponents: LauncherComponentDefinition[] = [
|
|
{
|
|
key: 'launcher-client',
|
|
name: '런처 클라이언트',
|
|
description: '사용자 PC에 설치되는 Electron .deb 패키지입니다.',
|
|
type: 'client'
|
|
},
|
|
{
|
|
key: 'launcher-be',
|
|
name: '런처 백엔드',
|
|
description: '로그인, 앱 목록, 업데이트, handoff API를 제공하는 서버입니다.',
|
|
type: 'backend',
|
|
kind: 'Deployment',
|
|
workloadName: 'studio-launcher-be',
|
|
serviceName: 'studio-launcher-be'
|
|
},
|
|
{
|
|
key: 'launcher-db',
|
|
name: '런처 DB',
|
|
description: '런처 앱, 버전, 사용자 앱 권한 데이터를 저장합니다.',
|
|
type: 'database',
|
|
kind: 'StatefulSet',
|
|
workloadName: 'studio-launcher-db',
|
|
serviceName: 'studio-launcher-db'
|
|
}
|
|
];
|
|
|
|
function statusTone(status?: string): 'green' | 'amber' | 'red' | 'neutral' {
|
|
if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(status ?? '')) return 'green';
|
|
if (['Pending', 'ContainerCreating'].includes(status ?? '')) return 'amber';
|
|
if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return 'red';
|
|
return 'neutral';
|
|
}
|
|
|
|
function buildStatusText(status?: string) {
|
|
if (status === 'SUCCEEDED') return '성공';
|
|
if (status === 'FAILED') return '실패';
|
|
if (status === 'RUNNING') return '진행 중';
|
|
if (status === 'PENDING') return '대기';
|
|
if (status === 'CANCELED') return '취소';
|
|
return status ?? '빌드 이력 없음';
|
|
}
|
|
|
|
function buildStatusTone(status?: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
|
|
if (status === 'SUCCEEDED') return 'green';
|
|
if (status === 'FAILED' || status === 'CANCELED') return 'red';
|
|
if (status === 'RUNNING') return 'blue';
|
|
if (status === 'PENDING') return 'amber';
|
|
return 'neutral';
|
|
}
|
|
|
|
function componentIcon(type: LauncherComponentDefinition['type']) {
|
|
if (type === 'client') return FileArchive;
|
|
if (type === 'database') return Database;
|
|
return Server;
|
|
}
|
|
|
|
function apiKind(kind?: string) {
|
|
return (kind ?? '').toLowerCase();
|
|
}
|
|
|
|
function stripAnsi(value: string) {
|
|
return value.replace(/(?:\x1B|\u241B)\[[0-?]*[ -/]*[@-~]/g, '');
|
|
}
|
|
|
|
function findResource(resources: RuntimeResource[], kind?: string, name?: string) {
|
|
if (!kind || !name) return undefined;
|
|
return resources.find((resource) => resource.kind === kind && resource.name === name);
|
|
}
|
|
|
|
function serviceResource(resources: RuntimeResource[], name?: string) {
|
|
if (!name) return undefined;
|
|
return resources.find((resource) => resource.kind === 'Service' && resource.name === name);
|
|
}
|
|
|
|
function relatedResources(resources: RuntimeResource[], component: LauncherComponentDefinition) {
|
|
if (component.type === 'client') return [];
|
|
const names = new Set([component.workloadName, component.serviceName].filter(Boolean));
|
|
return resources.filter((resource) => {
|
|
if (names.has(resource.name)) return true;
|
|
return component.workloadName ? resource.name.includes(component.workloadName) : false;
|
|
});
|
|
}
|
|
|
|
function launcherArtifactLabel(version?: LauncherVersion) {
|
|
if (!version) return '등록된 릴리즈 없음';
|
|
if (version.artifact) return version.artifact;
|
|
if (!version.downloadUrl) return '배포 파일 미등록';
|
|
const segments = version.downloadUrl.split('/').filter(Boolean);
|
|
return segments[segments.length - 1] ?? '배포 파일 미등록';
|
|
}
|
|
|
|
function launcherVersionMeta(version?: LauncherVersion) {
|
|
if (!version) return '버전 관리에서 릴리즈를 등록하세요';
|
|
const minimum = version.minimumVersion ? `최소 지원 ${version.minimumVersion}` : '최소 지원 미설정';
|
|
return `${minimum} · ${version.isActive ? '활성' : '비활성'}`;
|
|
}
|
|
|
|
export function LauncherComponentsPage() {
|
|
const { toast } = useToast();
|
|
const [versions, setVersions] = useState<LauncherVersion[]>([]);
|
|
const [buildJobs, setBuildJobs] = useState<LauncherBuildJob[]>([]);
|
|
const [resources, setResources] = useState<RuntimeResource[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [actionKey, setActionKey] = useState('');
|
|
const [logTarget, setLogTarget] = useState<LauncherComponentDefinition | null>(null);
|
|
const [logs, setLogs] = useState('');
|
|
const [logLoading, setLogLoading] = useState(false);
|
|
const [envTarget, setEnvTarget] = useState<LauncherComponentDefinition | null>(null);
|
|
const [envVariables, setEnvVariables] = useState<Array<{ key: string; value: string; isSecret: boolean; editable: boolean; source: string }>>([]);
|
|
const [envLoading, setEnvLoading] = useState(false);
|
|
const [envSaving, setEnvSaving] = useState(false);
|
|
const loadingVisible = useMinimumLoading(loading || logLoading);
|
|
|
|
const activeVersion = useMemo(() => versions.find((version) => version.isActive) ?? versions[0], [versions]);
|
|
const latestBuild = useMemo(() => buildJobs[0], [buildJobs]);
|
|
|
|
const refresh = () => {
|
|
setLoading(true);
|
|
Promise.all([
|
|
listLauncherVersions().catch(() => []),
|
|
listLauncherBuildJobs().catch(() => []),
|
|
loadLauncherRuntimeResources(LAUNCHER_NAMESPACE)
|
|
])
|
|
.then(([nextVersions, nextBuildJobs, runtime]) => {
|
|
setVersions(nextVersions);
|
|
setBuildJobs(nextBuildJobs);
|
|
setResources(runtime.resources ?? []);
|
|
})
|
|
.catch((error: Error) => {
|
|
toast({ type: 'error', title: '런처 구성요소 조회 실패', message: error.message });
|
|
})
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
useEffect(() => {
|
|
refresh();
|
|
}, []);
|
|
|
|
const openLogs = (component: LauncherComponentDefinition) => {
|
|
if (!component.kind || !component.workloadName) return;
|
|
setLogTarget(component);
|
|
setLogs('');
|
|
setLogLoading(true);
|
|
loadLauncherComponentLogs(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
|
|
.then((result) => setLogs(stripAnsi(result.logs || '로그가 없습니다.')))
|
|
.catch((error: Error) => setLogs(`[warn] 로그 조회 실패\n${error.message}`))
|
|
.finally(() => setLogLoading(false));
|
|
};
|
|
|
|
const restart = (component: LauncherComponentDefinition) => {
|
|
if (!component.kind || !component.workloadName) return;
|
|
setActionKey(component.key);
|
|
restartLauncherComponent(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
|
|
.then(() => {
|
|
toast({ type: 'success', message: `${component.name} 재시작을 요청했습니다.` });
|
|
refresh();
|
|
})
|
|
.catch((error: Error) => {
|
|
toast({ type: 'error', title: '재시작 실패', message: error.message });
|
|
})
|
|
.finally(() => setActionKey(''));
|
|
};
|
|
|
|
const openEnv = (component: LauncherComponentDefinition) => {
|
|
if (!component.kind || !component.workloadName) return;
|
|
setEnvTarget(component);
|
|
setEnvVariables([]);
|
|
setEnvLoading(true);
|
|
loadRuntimeWorkloadEnv(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
|
|
.then((result) => {
|
|
setEnvVariables(result.variables ?? []);
|
|
})
|
|
.catch((error: Error) => {
|
|
toast({ type: 'error', title: '설정값 조회 실패', message: error.message });
|
|
})
|
|
.finally(() => setEnvLoading(false));
|
|
};
|
|
|
|
const updateEnvVariable = (index: number, patch: Partial<{ key: string; value: string; isSecret: boolean }>) => {
|
|
setEnvVariables((prev) => prev.map((variable, variableIndex) => (
|
|
variableIndex === index ? { ...variable, ...patch } : variable
|
|
)));
|
|
};
|
|
|
|
const removeEnvVariable = (index: number) => {
|
|
setEnvVariables((prev) => prev.filter((_, variableIndex) => variableIndex !== index));
|
|
};
|
|
|
|
const saveEnv = () => {
|
|
if (!envTarget?.kind || !envTarget.workloadName) return;
|
|
setEnvSaving(true);
|
|
saveRuntimeWorkloadEnv(
|
|
LAUNCHER_NAMESPACE,
|
|
apiKind(envTarget.kind),
|
|
envTarget.workloadName,
|
|
envVariables
|
|
.filter((variable) => variable.editable)
|
|
.map((variable) => ({ key: variable.key.trim(), value: variable.value, isSecret: variable.isSecret }))
|
|
.filter((variable) => variable.key)
|
|
)
|
|
.then((result) => {
|
|
setEnvVariables(result.variables ?? []);
|
|
toast({ type: 'success', title: '설정값 저장', message: `${envTarget.name} 설정값을 반영했습니다.` });
|
|
refresh();
|
|
})
|
|
.catch((error: Error) => {
|
|
toast({ type: 'error', title: '설정값 저장 실패', message: error.message });
|
|
})
|
|
.finally(() => setEnvSaving(false));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageTitle
|
|
eyebrow="런처"
|
|
title="구성요소"
|
|
description="런처 클라이언트, 백엔드, DB의 배포 기준과 런타임 상태를 한 화면에서 확인합니다."
|
|
actions={
|
|
<Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
|
|
<RotateCcw className={cn('size-4', loading && 'animate-spin')} />
|
|
새로고침
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<div className="grid gap-4 xl:grid-cols-3">
|
|
<Card className="p-5">
|
|
<p className="text-sm text-muted-foreground">런처 최신 버전</p>
|
|
<p className="mt-3 text-2xl font-semibold">{activeVersion?.version ?? '-'}</p>
|
|
<p className="mt-1 truncate text-xs font-medium text-foreground">{launcherArtifactLabel(activeVersion)}</p>
|
|
<p className="mt-1 truncate text-xs text-muted-foreground">{launcherVersionMeta(activeVersion)}</p>
|
|
</Card>
|
|
<Card className="p-5">
|
|
<p className="text-sm text-muted-foreground">최근 클라이언트 빌드</p>
|
|
<p className="mt-3 text-2xl font-semibold">{latestBuild?.version ?? '-'}</p>
|
|
<div className="mt-2">
|
|
<Badge tone={buildStatusTone(latestBuild?.status)}>{buildStatusText(latestBuild?.status)}</Badge>
|
|
</div>
|
|
</Card>
|
|
<Card className="p-5">
|
|
<p className="text-sm text-muted-foreground">Namespace</p>
|
|
<p className="mt-3 text-2xl font-semibold">{LAUNCHER_NAMESPACE}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{resources.length}개 관련 리소스 조회</p>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-4">
|
|
{launcherComponents.map((component) => {
|
|
const Icon = componentIcon(component.type);
|
|
const workload = findResource(resources, component.kind, component.workloadName);
|
|
const service = serviceResource(resources, component.serviceName);
|
|
const details = relatedResources(resources, component);
|
|
const isClient = component.type === 'client';
|
|
const status = isClient ? (activeVersion ? '배포 등록' : '미등록') : workload?.status ?? 'NotFound';
|
|
|
|
return (
|
|
<Card key={component.key} className="overflow-hidden">
|
|
<CardHeader
|
|
title={component.name}
|
|
description={component.description}
|
|
action={<Badge tone={isClient ? (activeVersion ? 'green' : 'neutral') : statusTone(status)}>{status}</Badge>}
|
|
/>
|
|
<div className="grid gap-5 p-5 xl:grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)]">
|
|
<div className="rounded-md border border-border bg-background p-4">
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
|
<Icon className="size-5" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold">{component.key}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{isClient ? 'Client Package' : `${component.kind}/${component.workloadName}`}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-3 text-sm">
|
|
{isClient ? (
|
|
<>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Artifact</p>
|
|
<p className="mt-1 break-all font-mono text-xs">{activeVersion?.artifact ?? '-'}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Repository</p>
|
|
<p className="mt-1 truncate font-medium">{activeVersion?.repository ?? '-'}</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Ready</p>
|
|
<p className="mt-1 font-medium">{workload?.ready ?? '-'}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Service</p>
|
|
<p className="mt-1 font-medium">{service ? `${service.status} · ${service.detail}` : '-'}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Image</p>
|
|
<p className="mt-1 break-all font-mono text-xs text-muted-foreground">{workload?.detail ?? '-'}</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{!isClient ? (
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
<Button variant="outline" onClick={() => openLogs(component)} disabled={!workload}>
|
|
<TerminalSquare className="size-4" />
|
|
로그
|
|
</Button>
|
|
<Button onClick={() => restart(component)} disabled={!workload || actionKey === component.key}>
|
|
<RotateCcw className={cn('size-4', actionKey === component.key && 'animate-spin')} />
|
|
재시작
|
|
</Button>
|
|
{component.type === 'backend' ? (
|
|
<Button variant="outline" onClick={() => openEnv(component)} disabled={!workload}>
|
|
<Settings className="size-4" />
|
|
설정값
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="min-w-0 overflow-x-auto rounded-md border border-border">
|
|
<table className="w-full min-w-[760px] whitespace-nowrap text-left text-sm">
|
|
<thead className="border-b border-border bg-muted/30 text-xs text-muted-foreground">
|
|
<tr>
|
|
<th className="px-4 py-3 font-medium">Kind</th>
|
|
<th className="px-4 py-3 font-medium">Name</th>
|
|
<th className="px-4 py-3 font-medium">Status</th>
|
|
<th className="px-4 py-3 font-medium">Ready</th>
|
|
<th className="px-4 py-3 font-medium">Age</th>
|
|
<th className="px-4 py-3 font-medium">Detail</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{isClient ? (
|
|
<tr>
|
|
<td className="px-4 py-3">Release</td>
|
|
<td className="px-4 py-3 font-mono text-xs">{activeVersion?.version ?? '-'}</td>
|
|
<td className="px-4 py-3">{activeVersion?.isActive ? 'Active' : '-'}</td>
|
|
<td className="px-4 py-3">-</td>
|
|
<td className="px-4 py-3">{activeVersion?.createdAt ? new Date(activeVersion.createdAt).toLocaleString() : '-'}</td>
|
|
<td className="max-w-[320px] truncate px-4 py-3 font-mono text-xs text-muted-foreground">{activeVersion?.downloadUrl ?? '-'}</td>
|
|
</tr>
|
|
) : null}
|
|
{!isClient && details.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">관련 리소스가 없습니다.</td>
|
|
</tr>
|
|
) : null}
|
|
{!isClient && details.map((resource) => (
|
|
<tr key={`${resource.kind}-${resource.name}`} className="hover:bg-muted/20">
|
|
<td className="px-4 py-3 font-semibold">{resource.kind}</td>
|
|
<td className="px-4 py-3 font-mono text-xs">{resource.name}</td>
|
|
<td className="px-4 py-3"><Badge tone={statusTone(resource.status)}>{resource.status}</Badge></td>
|
|
<td className="px-4 py-3">{resource.ready}</td>
|
|
<td className="px-4 py-3 text-muted-foreground">{resource.age}</td>
|
|
<td className="max-w-[360px] truncate px-4 py-3 font-mono text-xs text-muted-foreground">{resource.detail || '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<Modal
|
|
open={Boolean(logTarget)}
|
|
title={logTarget ? `${logTarget.name} 로그` : '로그'}
|
|
onClose={() => setLogTarget(null)}
|
|
className="!max-w-5xl"
|
|
>
|
|
<pre className="max-h-[62vh] overflow-auto rounded-md bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
|
|
{logs || (logLoading ? '로그를 불러오는 중...' : '로그가 없습니다.')}
|
|
</pre>
|
|
</Modal>
|
|
|
|
<Modal
|
|
open={Boolean(envTarget)}
|
|
title={envTarget ? `${envTarget.name} 설정값` : '설정값'}
|
|
onClose={() => setEnvTarget(null)}
|
|
className="!max-w-4xl"
|
|
footer={
|
|
<>
|
|
<Button variant="ghost" onClick={() => setEnvTarget(null)}>닫기</Button>
|
|
<Button onClick={saveEnv} disabled={envLoading || envSaving}>
|
|
{envSaving ? '저장 중' : '저장'}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="text-xs leading-5 text-muted-foreground">
|
|
Secret을 체크하면 Kubernetes Secret에 저장하고 secretKeyRef로 연결합니다. 체크하지 않은 값은 Deployment 환경변수로 저장합니다.
|
|
</p>
|
|
<div className="rounded-md border border-border">
|
|
<table className="w-full table-fixed text-left text-sm">
|
|
<colgroup>
|
|
<col className="w-[26%]" />
|
|
<col />
|
|
<col className="w-20" />
|
|
<col className="w-20" />
|
|
<col className="w-12" />
|
|
</colgroup>
|
|
<thead className="border-b border-border bg-muted/30 text-xs text-muted-foreground">
|
|
<tr>
|
|
<th className="px-3 py-3 font-medium">Key</th>
|
|
<th className="px-3 py-3 font-medium">Value</th>
|
|
<th className="px-3 py-3 font-medium">Secret</th>
|
|
<th className="px-3 py-3 font-medium">Source</th>
|
|
<th className="px-2 py-3 font-medium"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{envLoading ? (
|
|
<tr>
|
|
<td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">설정값을 불러오는 중입니다.</td>
|
|
</tr>
|
|
) : null}
|
|
{!envLoading && envVariables.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">등록된 설정값이 없습니다.</td>
|
|
</tr>
|
|
) : null}
|
|
{!envLoading && envVariables.map((variable, index) => (
|
|
<tr key={`${variable.key}-${index}`}>
|
|
<td className="min-w-0 px-3 py-2.5">
|
|
<input
|
|
className="h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60"
|
|
value={variable.key}
|
|
disabled={!variable.editable}
|
|
onChange={(event) => updateEnvVariable(index, { key: event.target.value })}
|
|
/>
|
|
</td>
|
|
<td className="min-w-0 px-3 py-2.5">
|
|
<input
|
|
className="h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60"
|
|
value={variable.value}
|
|
disabled={!variable.editable}
|
|
onChange={(event) => updateEnvVariable(index, { value: event.target.value })}
|
|
/>
|
|
</td>
|
|
<td className="px-3 py-2.5">
|
|
<label className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<input
|
|
type="checkbox"
|
|
className="size-4 accent-primary"
|
|
checked={variable.isSecret}
|
|
disabled={!variable.editable}
|
|
onChange={(event) => updateEnvVariable(index, { isSecret: event.target.checked })}
|
|
/>
|
|
Secret
|
|
</label>
|
|
</td>
|
|
<td className="px-3 py-2.5">
|
|
<Badge tone={variable.editable ? 'blue' : 'neutral'}>{variable.source}</Badge>
|
|
</td>
|
|
<td className="px-2 py-2.5">
|
|
<Button
|
|
variant="outline"
|
|
className="size-8 px-0"
|
|
disabled={!variable.editable}
|
|
onClick={() => removeEnvVariable(index)}
|
|
aria-label="환경변수 삭제"
|
|
title="환경변수 삭제"
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setEnvVariables((prev) => [...prev, { key: '', value: '', isSecret: false, editable: true, source: 'literal' }])}
|
|
disabled={envLoading}
|
|
>
|
|
<Plus className="size-4" />
|
|
설정값 추가
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
|
|
<LoadingModal open={loadingVisible} />
|
|
</>
|
|
);
|
|
}
|