330 lines
14 KiB
TypeScript
330 lines
14 KiB
TypeScript
import { Plus, RotateCcw, Server, Settings, Trash2 } from 'lucide-react';
|
|
import { useEffect, 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 {
|
|
loadLauncherRuntimeResources,
|
|
loadRuntimeWorkloadEnv,
|
|
saveRuntimeWorkloadEnv
|
|
} from '../launcher/launcher-api';
|
|
import { COMMON_APP_NAMESPACE, commonAppComponents, type CommonAppComponent } from './common-app-utils';
|
|
|
|
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 apiKind(kind: string) {
|
|
return kind.toLowerCase();
|
|
}
|
|
|
|
function findResource(resources: RuntimeResource[], kind: string, name: string) {
|
|
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: CommonAppComponent) {
|
|
const names = new Set([component.workloadName, component.serviceName].filter(Boolean));
|
|
return resources.filter((resource) => {
|
|
if (names.has(resource.name)) return true;
|
|
return resource.name.includes(component.workloadName);
|
|
});
|
|
}
|
|
|
|
type EnvVariable = {
|
|
key: string;
|
|
value: string;
|
|
isSecret: boolean;
|
|
editable: boolean;
|
|
source: string;
|
|
};
|
|
|
|
export function CommonAppComponentsPage() {
|
|
const { toast } = useToast();
|
|
const [resources, setResources] = useState<RuntimeResource[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [envTarget, setEnvTarget] = useState<CommonAppComponent | null>(null);
|
|
const [envVariables, setEnvVariables] = useState<EnvVariable[]>([]);
|
|
const [envLoading, setEnvLoading] = useState(false);
|
|
const [envSaving, setEnvSaving] = useState(false);
|
|
const loadingVisible = useMinimumLoading(loading || envLoading);
|
|
|
|
const refresh = () => {
|
|
setLoading(true);
|
|
loadLauncherRuntimeResources(COMMON_APP_NAMESPACE)
|
|
.then((runtime) => setResources(runtime.resources ?? []))
|
|
.catch((error: Error) => {
|
|
toast({ type: 'error', title: '공통앱 구성요소 조회 실패', message: error.message });
|
|
})
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
useEffect(() => {
|
|
refresh();
|
|
}, []);
|
|
|
|
const openEnv = (component: CommonAppComponent) => {
|
|
setEnvTarget(component);
|
|
setEnvVariables([]);
|
|
setEnvLoading(true);
|
|
loadRuntimeWorkloadEnv(COMMON_APP_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<Pick<EnvVariable, 'key' | 'value' | 'isSecret'>>) => {
|
|
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) return;
|
|
setEnvSaving(true);
|
|
saveRuntimeWorkloadEnv(
|
|
COMMON_APP_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="공통앱 워크로드 상태와 설정값을 관리합니다."
|
|
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">
|
|
{commonAppComponents.map((component) => {
|
|
const workload = findResource(resources, component.kind, component.workloadName);
|
|
const service = serviceResource(resources, component.serviceName);
|
|
const details = relatedResources(resources, component);
|
|
const status = workload?.status ?? 'NotFound';
|
|
|
|
return (
|
|
<Card key={component.key} className="overflow-hidden">
|
|
<CardHeader
|
|
title={component.name}
|
|
description={component.description}
|
|
action={<Badge tone={statusTone(status)}>{status}</Badge>}
|
|
/>
|
|
<div className="grid gap-5 p-5 xl:grid-cols-[minmax(280px,0.75fr)_minmax(0,1.25fr)]">
|
|
<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">
|
|
<Server className="size-5" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold">{component.repository}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{component.kind}/{component.workloadName}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-3 text-sm">
|
|
<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>
|
|
|
|
<div className="mt-4">
|
|
<Button variant="outline" onClick={() => openEnv(component)} disabled={!workload}>
|
|
<Settings className="size-4" />
|
|
설정값
|
|
</Button>
|
|
</div>
|
|
</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">
|
|
{details.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">관련 리소스가 없습니다.</td>
|
|
</tr>
|
|
) : null}
|
|
{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(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">
|
|
<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} />
|
|
</>
|
|
);
|
|
}
|