kubeops 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kubeops",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A modern desktop client for Kubernetes cluster management",
   "main": "electron/main.js",
   "repository": {

package/src/app/api/clusters/[clusterId]/crds/[...path]/route.ts

@@ -0,0 +1,182 @@
+import { NextRequest, NextResponse } from 'next/server';
+import * as k8s from '@kubernetes/client-node';
+import { getKubeConfigForContext } from '@/lib/k8s/kubeconfig-manager';
+
+export const dynamic = 'force-dynamic';
+
+interface RouteParams {
+  params: Promise<{
+    clusterId: string;
+    path: string[]; // [group, version, plural] or [group, version, plural, name]
+  }>;
+}
+
+function extractK8sError(error: any): { status: number; message: string } {
+  const raw = error?.statusCode || error?.response?.statusCode || error?.code;
+  const status = typeof raw === 'number' && raw >= 200 && raw <= 599 ? raw : 500;
+  let body = error?.body;
+  if (typeof body === 'string') {
+    try { body = JSON.parse(body); } catch { /* keep as string */ }
+  }
+  const message = body?.message || error?.message || 'Request failed';
+  return { status, message };
+}
+
+function buildApiPath(group: string, version: string, plural: string, namespace?: string, name?: string): string {
+  const base = `/apis/${group}/${version}`;
+  if (namespace && namespace !== '_' && namespace !== '_all') {
+    const path = `${base}/namespaces/${namespace}/${plural}`;
+    return name ? `${path}/${name}` : path;
+  }
+  const path = `${base}/${plural}`;
+  return name ? `${path}/${name}` : path;
+}
+
+async function makeK8sRequest(
+  contextName: string,
+  method: string,
+  apiPath: string,
+  body?: any
+): Promise<{ status: number; data: any }> {
+  const kc = getKubeConfigForContext(contextName);
+  const cluster = kc.getCurrentCluster();
+  if (!cluster) throw new Error('Cluster not found');
+
+  const opts: any = {};
+  await kc.applyToHTTPSOptions(opts);
+
+  const https = require('https');
+  const urlObj = new URL(`${cluster.server}${apiPath}`);
+
+  return new Promise((resolve, reject) => {
+    const reqData = body ? JSON.stringify(body) : undefined;
+    const contentType = method === 'PATCH'
+      ? 'application/merge-patch+json'
+      : 'application/json';
+
+    const reqOpts: any = {
+      hostname: urlObj.hostname,
+      port: urlObj.port || 443,
+      path: urlObj.pathname + urlObj.search,
+      method,
+      headers: {
+        'Content-Type': contentType,
+        Accept: 'application/json',
+        ...(reqData ? { 'Content-Length': Buffer.byteLength(reqData) } : {}),
+      },
+      ca: opts.ca,
+      cert: opts.cert,
+      key: opts.key,
+      rejectUnauthorized: !(cluster as any).skipTLSVerify,
+    };
+
+    // Apply auth headers (bearer token, etc.)
+    if (opts.headers) {
+      Object.assign(reqOpts.headers, opts.headers);
+    }
+
+    const request = https.request(reqOpts, (res: any) => {
+      let responseBody = '';
+      res.on('data', (chunk: string) => { responseBody += chunk; });
+      res.on('end', () => {
+        try {
+          const parsed = JSON.parse(responseBody);
+          resolve({ status: res.statusCode, data: parsed });
+        } catch {
+          resolve({ status: res.statusCode, data: responseBody });
+        }
+      });
+    });
+    request.on('error', reject);
+    if (reqData) request.write(reqData);
+    request.end();
+  });
+}
+
+export async function GET(req: NextRequest, { params }: RouteParams) {
+  const { clusterId, path } = await params;
+  const contextName = decodeURIComponent(clusterId);
+  const [group, version, plural, name] = path;
+
+  if (!group || !version || !plural) {
+    return NextResponse.json({ error: 'Path must be: group/version/plural[/name]' }, { status: 400 });
+  }
+
+  const namespace = req.nextUrl.searchParams.get('namespace') || undefined;
+
+  try {
+    const apiPath = buildApiPath(group, version, plural, namespace, name);
+    const { status, data } = await makeK8sRequest(contextName, 'GET', apiPath);
+
+    if (status >= 200 && status < 300) {
+      return NextResponse.json(data);
+    }
+    return NextResponse.json(
+      { error: data?.message || 'Request failed' },
+      { status }
+    );
+  } catch (error: any) {
+    const { status, message } = extractK8sError(error);
+    console.error(`[K8s API] GET CR ${group}/${version}/${plural}${name ? `/${name}` : ''}: ${status} ${message}`);
+    return NextResponse.json({ error: message }, { status });
+  }
+}
+
+export async function PUT(req: NextRequest, { params }: RouteParams) {
+  const { clusterId, path } = await params;
+  const contextName = decodeURIComponent(clusterId);
+  const [group, version, plural, name] = path;
+
+  if (!group || !version || !plural || !name) {
+    return NextResponse.json({ error: 'Path must be: group/version/plural/name' }, { status: 400 });
+  }
+
+  const namespace = req.nextUrl.searchParams.get('namespace') || undefined;
+
+  try {
+    const body = await req.json();
+    const apiPath = buildApiPath(group, version, plural, namespace, name);
+    const { status, data } = await makeK8sRequest(contextName, 'PUT', apiPath, body);
+
+    if (status >= 200 && status < 300) {
+      return NextResponse.json(data);
+    }
+    return NextResponse.json(
+      { error: data?.message || 'Update failed' },
+      { status }
+    );
+  } catch (error: any) {
+    const { status, message } = extractK8sError(error);
+    console.error(`[K8s API] PUT CR ${group}/${version}/${plural}/${name}: ${status} ${message}`);
+    return NextResponse.json({ error: message }, { status });
+  }
+}
+
+export async function DELETE(req: NextRequest, { params }: RouteParams) {
+  const { clusterId, path } = await params;
+  const contextName = decodeURIComponent(clusterId);
+  const [group, version, plural, name] = path;
+
+  if (!group || !version || !plural || !name) {
+    return NextResponse.json({ error: 'Path must be: group/version/plural/name' }, { status: 400 });
+  }
+
+  const namespace = req.nextUrl.searchParams.get('namespace') || undefined;
+
+  try {
+    const apiPath = buildApiPath(group, version, plural, namespace, name);
+    const { status, data } = await makeK8sRequest(contextName, 'DELETE', apiPath);
+
+    if (status >= 200 && status < 300) {
+      return NextResponse.json(data);
+    }
+    return NextResponse.json(
+      { error: data?.message || 'Delete failed' },
+      { status }
+    );
+  } catch (error: any) {
+    const { status, message } = extractK8sError(error);
+    console.error(`[K8s API] DELETE CR ${group}/${version}/${plural}/${name}: ${status} ${message}`);
+    return NextResponse.json({ error: message }, { status });
+  }
+}

package/src/app/api/clusters/[clusterId]/crds/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server';
+import * as k8s from '@kubernetes/client-node';
+import { getKubeConfigForContext } from '@/lib/k8s/kubeconfig-manager';
+
+export const dynamic = 'force-dynamic';
+
+interface RouteParams {
+  params: Promise<{ clusterId: string }>;
+}
+
+export async function GET(req: NextRequest, { params }: RouteParams) {
+  const { clusterId } = await params;
+  const contextName = decodeURIComponent(clusterId);
+
+  try {
+    const kc = getKubeConfigForContext(contextName);
+    const client = kc.makeApiClient(k8s.ApiextensionsV1Api);
+    const result = await client.listCustomResourceDefinition();
+
+    // Transform CRD list into a more frontend-friendly format
+    const crds = (result.items || []).map((crd: any) => {
+      const spec = crd.spec || {};
+      const names = spec.names || {};
+      const servingVersion = (spec.versions || []).find((v: any) => v.served && v.storage)
+        || (spec.versions || [])[0]
+        || {};
+      const printerColumns = servingVersion.additionalPrinterColumns || [];
+
+      return {
+        name: crd.metadata?.name,
+        group: spec.group,
+        kind: names.kind,
+        plural: names.plural,
+        singular: names.singular,
+        scope: spec.scope, // Namespaced or Cluster
+        version: servingVersion.name,
+        versions: (spec.versions || [])
+          .filter((v: any) => v.served)
+          .map((v: any) => v.name),
+        printerColumns,
+      };
+    });
+
+    return NextResponse.json({ items: crds });
+  } catch (error: any) {
+    const status = error?.statusCode || error?.response?.statusCode || 500;
+    const message = error?.body?.message || error?.message || 'Failed to list CRDs';
+    console.error(`[K8s API] GET CRDs: ${status} ${message}`);
+    return NextResponse.json({ error: message }, { status });
+  }
+}

package/src/app/clusters/[clusterId]/app-map/page.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import { useState } from 'react';
 import { useParams } from 'next/navigation';
 import { useNamespaceStore } from '@/stores/namespace-store';
 import { useResourceTree } from '@/hooks/use-resource-tree';
 import { ResourceTreeView } from '@/components/shared/resource-tree';
 import { LoadingSkeleton } from '@/components/shared/loading-skeleton';
+import { Badge } from '@/components/ui/badge';
+import { Tag, X } from 'lucide-react';
 
 export default function AppMapPage() {
   const params = useParams();
@@ -12,24 +15,59 @@ export default function AppMapPage() {
   const decodedClusterId = decodeURIComponent(clusterId);
   const { getActiveNamespace } = useNamespaceStore();
   const namespace = getActiveNamespace(decodedClusterId);
+  const [appFilter, setAppFilter] = useState<string | undefined>();
 
-  const { nodes, edges, isLoading } = useResourceTree({
+  const { nodes, edges, isLoading, appLabels } = useResourceTree({
     clusterId: decodedClusterId,
     namespace: namespace === '_all' ? 'default' : namespace,
+    appFilter,
   });
 
   if (isLoading && nodes.length === 0) return <LoadingSkeleton />;
 
   return (
     <div className="flex flex-col gap-4 p-6 h-full">
-      <div>
-        <h1 className="text-2xl font-bold">App Map</h1>
-        <p className="text-sm text-muted-foreground">
-          Resource relationships in {namespace === '_all' ? 'default' : namespace} namespace
-          {' · '}{nodes.length} resources
-        </p>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">App Map</h1>
+          <p className="text-sm text-muted-foreground">
+            Resource relationships in {namespace === '_all' ? 'default' : namespace} namespace
+            {' · '}{nodes.length} resources
+          </p>
+        </div>
       </div>
 
+      {/* App label filter chips */}
+      {appLabels.length > 0 && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <Tag className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <button
+            onClick={() => setAppFilter(undefined)}
+            className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
+              !appFilter
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground hover:bg-accent'
+            }`}
+          >
+            All
+          </button>
+          {appLabels.map((label) => (
+            <button
+              key={label}
+              onClick={() => setAppFilter(appFilter === label ? undefined : label)}
+              className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors flex items-center gap-1 ${
+                appFilter === label
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-accent'
+              }`}
+            >
+              {label}
+              {appFilter === label && <X className="h-3 w-3" />}
+            </button>
+          ))}
+        </div>
+      )}
+
       <ResourceTreeView
         treeNodes={nodes}
         treeEdges={edges}

package/src/app/clusters/[clusterId]/custom-resources/[...resourcePath]/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { CrListPage } from '@/components/custom-resources/cr-list-page';
+import { CrDetailPage } from '@/components/custom-resources/cr-detail-page';
+
+export default function CustomResourcePage() {
+  const params = useParams();
+  const resourcePath = params.resourcePath as string[];
+
+  // [group, version, plural] = list page
+  // [group, version, plural, name] = detail page
+  if (resourcePath.length >= 4) {
+    return <CrDetailPage />;
+  }
+
+  return <CrListPage />;
+}

package/src/app/clusters/[clusterId]/custom-resources/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { CrdBrowser } from '@/components/custom-resources/crd-browser';
+
+export default function CustomResourcesPage() {
+  return <CrdBrowser />;
+}

package/src/components/custom-resources/cr-detail-page.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useCustomResourceDetail } from '@/hooks/use-custom-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 { ArrowLeft, Trash2 } from 'lucide-react';
+import { AgeDisplay } from '@/components/shared/age-display';
+import { YamlEditor } from '@/components/shared/yaml-editor';
+import { ConfirmDialog } from '@/components/shared/confirm-dialog';
+import { apiClient } from '@/lib/api-client';
+import { toast } from 'sonner';
+import { useState } from 'react';
+
+export function CrDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const clusterId = params.clusterId as string;
+  const resourcePath = params.resourcePath as string[];
+  const [group, version, plural, name] = resourcePath || [];
+  const namespace = searchParams.get('ns') || undefined;
+
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const { data, error, isLoading, mutate } = useCustomResourceDetail({
+    clusterId: clusterId ? decodeURIComponent(clusterId) : null,
+    group,
+    version,
+    plural,
+    name,
+    namespace,
+  });
+
+  const nsParam = namespace ? `?namespace=${namespace}` : '';
+  const yamlApiUrl = `/api/clusters/${clusterId}/crds/${group}/${version}/${plural}/${name}${nsParam}`;
+
+  if (isLoading) return <LoadingSkeleton />;
+  if (error) return <ErrorDisplay error={error} onRetry={() => mutate()} clusterId={clusterId} />;
+  if (!data) return null;
+
+  const resource = data;
+  const metadata = resource.metadata || {};
+  const labels = metadata.labels || {};
+  const annotations = metadata.annotations || {};
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try {
+      await apiClient.delete(yamlApiUrl);
+      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">{metadata.name}</h1>
+          <p className="text-sm text-muted-foreground">
+            <span className="font-mono">{group}/{version}</span>
+            {metadata.namespace && ` in ${metadata.namespace}`}
+          </p>
+        </div>
+        <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
+          <Trash2 className="h-4 w-4 mr-1" />
+          Delete
+        </Button>
+      </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">
+          <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>
+                {metadata.namespace && (
+                  <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">UID</span>
+                  <span className="font-mono text-xs">{metadata.uid}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Age</span>
+                  <AgeDisplay timestamp={metadata.creationTimestamp} />
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">API Version</span>
+                  <span className="font-mono text-xs">{resource.apiVersion}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Kind</span>
+                  <span className="font-mono text-xs">{resource.kind}</span>
+                </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>
+
+          {Object.entries(annotations).length > 0 && (
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">Annotations</h3>
+              <div className="rounded-md border p-3 space-y-1">
+                {Object.entries(annotations).map(([k, v]) => (
+                  <div key={k} className="text-xs">
+                    <span className="font-mono text-muted-foreground">{k}</span>
+                    <span className="font-mono ml-2 break-all">{v as string}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="yaml" className="mt-4">
+          <YamlEditor
+            data={resource}
+            apiUrl={yamlApiUrl}
+            onSaved={() => mutate()}
+          />
+        </TabsContent>
+      </Tabs>
+
+      <ConfirmDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title={`Delete ${metadata.name}?`}
+        description={`This will permanently delete "${metadata.name}". This action cannot be undone.`}
+        confirmLabel="Delete"
+        variant="destructive"
+        onConfirm={handleDelete}
+        loading={deleting}
+      />
+    </div>
+  );
+}