connect tailscale node status through platform gateway

src/pages/common-apps/CommonAppComponentsPage.tsx

@@ -0,0 +1,329 @@
+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} />
+    </>
+  );
+}