add launcher components management page

src/pages/launcher/LauncherComponentsPage.tsx

@@ -0,0 +1,325 @@
+import { Database, FileArchive, RotateCcw, Server, TerminalSquare } 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,
+  restartLauncherComponent,
+  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: '런처 앱, 버전, 사용자 앱 권한 데이터를 저장하는 PostgreSQL입니다.',
+    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 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;
+  });
+}
+
+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 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(''));
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="런처 운영"
+        title="구성요소"
+        description="런처 클라이언트, 백엔드, DB의 배포 기준과 런타임 상태를 한 화면에서 확인합니다."
+        actions={
+          <Button 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 text-muted-foreground">{activeVersion?.downloadUrl ?? '등록된 릴리즈 없음'}</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>
+          <p className="mt-1 text-xs text-muted-foreground">{latestBuild?.status ?? '빌드 이력 없음'}</p>
+        </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>
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className="overflow-hidden rounded-md border border-border">
+                  <table className="w-full min-w-[680px] 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>
+
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}

src/pages/launcher/launcher-api.ts

@@ -1,6 +1,7 @@
 import { apiRequest } from '../../lib/api';
 import type { AppRelease, AppWithComponents } from '../../types/application';
 import type { GiteaRepo } from '../../types/application';
+import type { RuntimeResourceResponse, RuntimeWorkloadLogResponse } from '../../types/runtime';
 
 export type LauncherVersion = {
   id: string;
@@ -250,3 +251,20 @@ export function updateLauncherCommonSetting(
 export function deleteLauncherCommonSetting(id: string) {
   return apiRequest<{ deleted: boolean }>(`/launcher/common-settings/${id}`, { method: 'DELETE' });
 }
+
+export function loadLauncherRuntimeResources(namespace = 'studio-system') {
+  return apiRequest<RuntimeResourceResponse>(`/apps/runtime-namespaces/${encodeURIComponent(namespace)}/resources`);
+}
+
+export function loadLauncherComponentLogs(namespace: string, kind: string, name: string, tail = 120) {
+  return apiRequest<RuntimeWorkloadLogResponse>(
+    `/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(kind.toLowerCase())}/${encodeURIComponent(name)}/logs?tail=${tail}`
+  );
+}
+
+export function restartLauncherComponent(namespace: string, kind: string, name: string) {
+  return apiRequest<{ ok: boolean; action: string; target: string; namespace: string }>(
+    `/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(kind.toLowerCase())}/${encodeURIComponent(name)}/restart`,
+    { method: 'POST' }
+  );
+}