kubeops 0.1.0

package/src/app/clusters/[clusterId]/namespaces/[namespace]/secrets/[name]/page.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { useResourceDetail } from '@/hooks/use-resource-detail';
+import { LoadingSkeleton } from '@/components/shared/loading-skeleton';
+import { ErrorDisplay } from '@/components/shared/error-display';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { AgeDisplay } from '@/components/shared/age-display';
+import { ConfirmDialog } from '@/components/shared/confirm-dialog';
+import { ArrowLeft, Trash2, Eye, EyeOff, Copy } from 'lucide-react';
+import { apiClient } from '@/lib/api-client';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import * as yaml from 'js-yaml';
+
+export default function SecretDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const clusterId = params.clusterId as string;
+  const namespace = params.namespace as string;
+  const name = params.name as string;
+  const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set());
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const { data: secret, error, isLoading, mutate } = useResourceDetail({
+    clusterId: decodeURIComponent(clusterId),
+    namespace,
+    resourceType: 'secrets',
+    name,
+  });
+
+  if (isLoading) return <LoadingSkeleton />;
+  if (error) return <ErrorDisplay error={error} onRetry={() => mutate()} />;
+  if (!secret) return null;
+
+  const metadata = secret.metadata || {};
+  const data = secret.data || {};
+  const labels = metadata.labels || {};
+
+  const toggleReveal = (key: string) => {
+    setRevealedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const decodeValue = (value: string) => {
+    try { return atob(value); } catch { return value; }
+  };
+
+  const copyValue = (value: string) => {
+    navigator.clipboard.writeText(decodeValue(value));
+    toast.success('Copied to clipboard');
+  };
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try {
+      await apiClient.delete(`/api/clusters/${clusterId}/resources/${namespace}/secrets/${name}`);
+      toast.success(`${name} deleted`);
+      router.back();
+    } catch (err: any) {
+      toast.error(`Delete failed: ${err.message}`);
+    } finally {
+      setDeleting(false);
+      setDeleteOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => router.back()}>
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-2xl font-bold">{name}</h1>
+          <p className="text-sm text-muted-foreground">
+            Secret in {namespace} - Type: {secret.type || 'Opaque'}
+          </p>
+        </div>
+        <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
+          <Trash2 className="h-4 w-4 mr-1" />
+          Delete
+        </Button>
+      </div>
+
+      <Tabs defaultValue="data">
+        <TabsList>
+          <TabsTrigger value="data">Data ({Object.keys(data).length})</TabsTrigger>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="yaml">YAML</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="data" className="mt-4">
+          <div className="rounded-md border divide-y">
+            {Object.entries(data).length > 0 ? (
+              Object.entries(data).map(([key, value]) => {
+                const isRevealed = revealedKeys.has(key);
+                const decoded = decodeValue(value as string);
+                return (
+                  <div key={key} className="p-3 space-y-1">
+                    <div className="flex items-center justify-between">
+                      <span className="font-mono text-sm font-medium">{key}</span>
+                      <div className="flex items-center gap-1">
+                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => copyValue(value as string)} title="Copy decoded value">
+                          <Copy className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => toggleReveal(key)} title={isRevealed ? 'Hide' : 'Reveal'}>
+                          {isRevealed ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="font-mono text-xs bg-muted rounded px-2 py-1.5 break-all">
+                      {isRevealed ? decoded : '••••••••••••••••'}
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="p-4 text-sm text-muted-foreground text-center">No data</div>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="overview" className="space-y-4 mt-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">Metadata</h3>
+              <div className="rounded-md border p-3 space-y-2 text-sm">
+                <div className="flex justify-between"><span className="text-muted-foreground">Name</span><span className="font-mono">{metadata.name}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Namespace</span><span className="font-mono">{metadata.namespace}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Type</span><span>{secret.type || 'Opaque'}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Keys</span><span>{Object.keys(data).length}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Age</span><AgeDisplay timestamp={metadata.creationTimestamp} /></div>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">Labels</h3>
+              <div className="rounded-md border p-3 flex flex-wrap gap-1">
+                {Object.entries(labels).length > 0 ? (
+                  Object.entries(labels).map(([k, v]) => (
+                    <Badge key={k} variant="secondary" className="text-xs font-mono">{k}={v as string}</Badge>
+                  ))
+                ) : (
+                  <span className="text-sm text-muted-foreground">No labels</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="yaml" className="mt-4">
+          <pre className="rounded-md border bg-muted p-4 overflow-auto max-h-[600px] text-xs font-mono whitespace-pre">
+            {yaml.dump(secret, { lineWidth: -1 })}
+          </pre>
+        </TabsContent>
+      </Tabs>
+
+      <ConfirmDialog open={deleteOpen} onOpenChange={setDeleteOpen} title={`Delete ${name}?`} description={`This will permanently delete the secret "${name}".`} confirmLabel="Delete" variant="destructive" onConfirm={handleDelete} loading={deleting} />
+    </div>
+  );
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/secrets/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceListPage } from '@/components/resources/resource-list-page';
+export default function SecretsPage() {
+  return <ResourceListPage resourceType="secrets" />;
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/serviceaccounts/[name]/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceDetailPage } from '@/components/resources/resource-detail-page';
+export default function ServiceAccountDetailPage() {
+  return <ResourceDetailPage resourceType="serviceaccounts" />;
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/serviceaccounts/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceListPage } from '@/components/resources/resource-list-page';
+export default function ServiceAccountsPage() {
+  return <ResourceListPage resourceType="serviceaccounts" />;
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/services/[name]/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceDetailPage } from '@/components/resources/resource-detail-page';
+export default function ServiceDetailPage() {
+  return <ResourceDetailPage resourceType="services" />;
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/services/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceListPage } from '@/components/resources/resource-list-page';
+export default function ServicesPage() {
+  return <ResourceListPage resourceType="services" />;
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/statefulsets/[name]/page.tsx

@@ -0,0 +1,302 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { useResourceDetail } from '@/hooks/use-resource-detail';
+import { useResourceList } from '@/hooks/use-resource-list';
+import { LoadingSkeleton } from '@/components/shared/loading-skeleton';
+import { ErrorDisplay } from '@/components/shared/error-display';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { StatusBadge } from '@/components/shared/status-badge';
+import { AgeDisplay } from '@/components/shared/age-display';
+import { ScaleDialog } from '@/components/resources/scale-dialog';
+import { ConfirmDialog } from '@/components/shared/confirm-dialog';
+import { YamlEditor } from '@/components/shared/yaml-editor';
+import { PodMetricsCharts } from '@/components/shared/metrics-charts';
+import { ArrowLeft, Trash2, Scaling, Terminal, ScrollText, RotateCcw } from 'lucide-react';
+import { apiClient } from '@/lib/api-client';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePanelStore } from '@/stores/panel-store';
+import { PortForwardBtn } from '@/components/shared/port-forward-btn';
+import { ResourceTreeView } from '@/components/shared/resource-tree';
+import { useResourceTree } from '@/hooks/use-resource-tree';
+
+export default function StatefulSetDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const clusterId = params.clusterId as string;
+  const namespace = params.namespace as string;
+  const name = params.name as string;
+  const [scaleOpen, setScaleOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [restarting, setRestarting] = useState(false);
+  const { addTab } = usePanelStore();
+
+  const decodedClusterId = decodeURIComponent(clusterId);
+
+  const { data: sts, error, isLoading, mutate } = useResourceDetail({
+    clusterId: decodedClusterId,
+    namespace,
+    resourceType: 'statefulsets',
+    name,
+  });
+
+  // Resource tree
+  const { nodes: treeNodes, edges: treeEdges, isLoading: treeLoading } = useResourceTree({
+    clusterId: decodedClusterId,
+    namespace,
+    rootKind: 'StatefulSet',
+    rootName: name,
+  });
+
+  // Get pods belonging to this statefulset
+  const { data: podsData } = useResourceList({
+    clusterId: decodedClusterId,
+    namespace,
+    resourceType: 'pods',
+  });
+
+  if (isLoading) return <LoadingSkeleton />;
+  if (error) return <ErrorDisplay error={error} onRetry={() => mutate()} clusterId={clusterId} />;
+  if (!sts) return null;
+
+  const metadata = sts.metadata || {};
+  const spec = sts.spec || {};
+  const status = sts.status || {};
+  const labels = metadata.labels || {};
+
+  // Filter pods by statefulset ownership
+  const stsPods = (podsData?.items || []).filter((p: any) =>
+    p.metadata?.ownerReferences?.some((ref: any) => ref.kind === 'StatefulSet' && ref.name === name)
+    || p.metadata?.name?.startsWith(`${name}-`)
+  );
+
+  const handleRestart = async () => {
+    setRestarting(true);
+    try {
+      await apiClient.patch(`/api/clusters/${clusterId}/resources/${namespace}/statefulsets/${name}`, {
+        spec: { template: { metadata: { annotations: { 'kubectl.kubernetes.io/restartedAt': new Date().toISOString() } } } }
+      });
+      toast.success(`${name} restarting...`);
+      mutate();
+    } catch (err: any) {
+      toast.error(`Restart failed: ${err.message}`);
+    } finally { setRestarting(false); }
+  };
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try {
+      await apiClient.delete(`/api/clusters/${clusterId}/resources/${namespace}/statefulsets/${name}`);
+      toast.success(`${name} deleted`);
+      router.back();
+    } catch (err: any) {
+      toast.error(`Delete failed: ${err.message}`);
+    } finally {
+      setDeleting(false);
+      setDeleteOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => router.back()}>
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <h1 className="text-2xl font-bold">{name}</h1>
+            <StatusBadge status={status.readyReplicas === spec.replicas ? 'Ready' : 'Pending'} />
+          </div>
+          <p className="text-sm text-muted-foreground">StatefulSet in {namespace} - Ready: {status.readyReplicas || 0}/{spec.replicas || 0}</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={handleRestart} disabled={restarting}>
+            <RotateCcw className={`h-4 w-4 mr-1 ${restarting ? 'animate-spin' : ''}`} />
+            {restarting ? 'Restarting...' : 'Restart'}
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => setScaleOpen(true)}>
+            <Scaling className="h-4 w-4 mr-1" />
+            Scale
+          </Button>
+          <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
+            <Trash2 className="h-4 w-4 mr-1" />
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="yaml">YAML</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4 mt-4">
+          {/* Resource Tree */}
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold">Resource Tree</h3>
+            <ResourceTreeView
+              treeNodes={treeNodes}
+              treeEdges={treeEdges}
+              isLoading={treeLoading}
+              height={300}
+            />
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">StatefulSet Info</h3>
+              <div className="rounded-md border p-3 space-y-2 text-sm">
+                <div className="flex justify-between"><span className="text-muted-foreground">Replicas</span><span>{spec.replicas || 0}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Ready</span><span>{status.readyReplicas || 0}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Current</span><span>{status.currentReplicas || 0}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Service Name</span><span className="font-mono">{spec.serviceName || '-'}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Update Strategy</span><span>{spec.updateStrategy?.type || '-'}</span></div>
+                <div className="flex justify-between"><span className="text-muted-foreground">Age</span><AgeDisplay timestamp={metadata.creationTimestamp} /></div>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">Labels</h3>
+              <div className="rounded-md border p-3 flex flex-wrap gap-1">
+                {Object.entries(labels).length > 0 ? (
+                  Object.entries(labels).map(([k, v]) => (
+                    <Badge key={k} variant="secondary" className="text-xs font-mono">{k}={v as string}</Badge>
+                  ))
+                ) : (
+                  <span className="text-sm text-muted-foreground">No labels</span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Pod Metrics */}
+          {stsPods.length > 0 && (
+            <PodMetricsCharts
+              clusterId={decodedClusterId}
+              namespace={namespace}
+              podName={stsPods[0].metadata?.name}
+              nodeName={stsPods[0].spec?.nodeName}
+            />
+          )}
+
+          {/* Containers & Ports */}
+          {(spec.template?.spec?.containers || []).length > 0 && (
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">Containers</h3>
+              {(spec.template?.spec?.containers || []).map((ctr: any, idx: number) => (
+                <div key={idx} className="rounded-md border p-3 space-y-2 text-sm">
+                  <div className="flex justify-between items-center">
+                    <span className="font-semibold">{ctr.name}</span>
+                    <span className="font-mono text-xs text-muted-foreground break-all text-right max-w-[300px]">{ctr.image}</span>
+                  </div>
+                  {ctr.ports && ctr.ports.length > 0 && (
+                    <div className="flex flex-wrap gap-2 pt-1">
+                      {ctr.ports.map((p: any, pi: number) => (
+                        <div key={pi} className="inline-flex items-center gap-1.5">
+                          <Badge variant="outline" className="font-mono text-[11px] font-normal">
+                            {p.containerPort}/{p.protocol || 'TCP'}
+                            {p.name && <span className="text-muted-foreground ml-1">({p.name})</span>}
+                          </Badge>
+                          {stsPods.length > 0 && (
+                            <PortForwardBtn
+                              clusterId={decodedClusterId}
+                              namespace={namespace}
+                              resourceType="pod"
+                              resourceName={stsPods[0].metadata?.name}
+                              port={p.containerPort}
+                            />
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Pods */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold">Pods ({stsPods.length})</h3>
+            {stsPods.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No pods found for this StatefulSet.</p>
+            ) : (
+              <div className="rounded-md border overflow-hidden">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50">
+                    <tr>
+                      <th className="px-3 py-2 text-left font-medium">Name</th>
+                      <th className="px-3 py-2 text-left font-medium">Status</th>
+                      <th className="px-3 py-2 text-left font-medium">Restarts</th>
+                      <th className="px-3 py-2 text-left font-medium">Node</th>
+                      <th className="px-3 py-2 text-left font-medium">Age</th>
+                      <th className="px-3 py-2 text-left font-medium w-[80px]"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {stsPods.map((pod: any) => {
+                      const pName = pod.metadata?.name;
+                      const pPhase = pod.metadata?.deletionTimestamp ? 'Terminating' : (pod.status?.phase || 'Unknown');
+                      const restarts = (pod.status?.containerStatuses || []).reduce((s: number, c: any) => s + (c.restartCount || 0), 0);
+                      const firstContainer = pod.spec?.containers?.[0]?.name;
+
+                      return (
+                        <tr key={pName} className="border-t hover:bg-muted/30">
+                          <td className="px-3 py-2">
+                            <Link href={`/clusters/${clusterId}/namespaces/${namespace}/pods/${pName}`} className="text-primary hover:underline font-medium">
+                              {pName}
+                            </Link>
+                          </td>
+                          <td className="px-3 py-2"><StatusBadge status={pPhase} /></td>
+                          <td className="px-3 py-2">{restarts > 0 ? <span className="text-red-500 font-medium">{restarts}</span> : 0}</td>
+                          <td className="px-3 py-2 font-mono text-muted-foreground text-xs">{pod.spec?.nodeName?.split('.')[0] || '-'}</td>
+                          <td className="px-3 py-2"><AgeDisplay timestamp={pod.metadata?.creationTimestamp} /></td>
+                          <td className="px-3 py-2">
+                            <div className="flex gap-1">
+                              <Button variant="ghost" size="icon" className="h-7 w-7" title="Logs" onClick={() => firstContainer && addTab({ id: `logs-${pName}-${firstContainer}`, type: 'logs', title: `Logs: ${pName}`, clusterId, namespace, podName: pName, container: firstContainer })}>
+                                <ScrollText className="h-3.5 w-3.5" />
+                              </Button>
+                              <Button variant="ghost" size="icon" className="h-7 w-7" title="Exec" onClick={() => firstContainer && addTab({ id: `exec-${pName}-${firstContainer}`, type: 'exec', title: `Exec: ${pName}`, clusterId, namespace, podName: pName, container: firstContainer })}>
+                                <Terminal className="h-3.5 w-3.5" />
+                              </Button>
+                              <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive" title="Delete Pod" onClick={async () => {
+                                if (!confirm(`Delete pod ${pName}?`)) return;
+                                try {
+                                  await apiClient.delete(`/api/clusters/${clusterId}/resources/${namespace}/pods/${pName}`);
+                                  toast.success(`${pName} deleted`);
+                                } catch (err: any) { toast.error(err.message); }
+                              }}>
+                                <Trash2 className="h-3.5 w-3.5" />
+                              </Button>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="yaml" className="mt-4">
+          <YamlEditor
+            data={sts}
+            apiUrl={`/api/clusters/${clusterId}/resources/${namespace}/statefulsets/${name}`}
+            onSaved={() => mutate()}
+          />
+        </TabsContent>
+      </Tabs>
+
+      <ScaleDialog open={scaleOpen} onOpenChange={setScaleOpen} clusterId={decodedClusterId} namespace={namespace} resourceType="statefulsets" name={name} currentReplicas={spec.replicas || 0} onScaled={() => mutate()} />
+      <ConfirmDialog open={deleteOpen} onOpenChange={setDeleteOpen} title={`Delete ${name}?`} description={`This will permanently delete the statefulset "${name}".`} confirmLabel="Delete" variant="destructive" onConfirm={handleDelete} loading={deleting} />
+    </div>
+  );
+}

package/src/app/clusters/[clusterId]/namespaces/[namespace]/statefulsets/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceListPage } from '@/components/resources/resource-list-page';
+export default function StatefulSetsPage() {
+  return <ResourceListPage resourceType="statefulsets" />;
+}

package/src/app/clusters/[clusterId]/nodes/[nodeName]/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceDetailPage } from '@/components/resources/resource-detail-page';
+export default function NodeDetailPage() {
+  return <ResourceDetailPage resourceType="nodes" clusterScoped={true} />;
+}

package/src/app/clusters/[clusterId]/nodes/page.tsx

@@ -0,0 +1,5 @@
+'use client';
+import { ResourceListPage } from '@/components/resources/resource-list-page';
+export default function NodesPage() {
+  return <ResourceListPage resourceType="nodes" clusterScoped={true} />;
+}