feat(ui): add Kubernetes UI dashboard package

Co-Authored-By: Dan Lynch <[email protected]>

Author: devin-ai-integration[bot]

packages/ui/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

packages/ui/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@kubernetesjs/ui",
+  "version": "0.1.0",
+  "author": "Dan Lynch <[email protected]>",
+  "description": "KubernetesJS UI Dashboard",
+  "keywords": [
+    "kubernetes",
+    "k8s",
+    "ui",
+    "dashboard",
+    "typescript",
+    "react",
+    "nextjs",
+    "tailwindcss",
+    "deployment",
+    "container",
+    "orchestration",
+    "devops",
+    "cloud-native"
+  ],
+  "main": "index.js",
+  "homepage": "https://github.com/hyperweb-io/kubernetesjs",
+  "license": "SEE LICENSE IN LICENSE",
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hyperweb-io/kubernetesjs"
+  },
+  "bugs": {
+    "url": "https://github.com/hyperweb-io/kubernetesjs/issues"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "kubernetesjs": "^0.6.0",
+    "next": "^14.1.0",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "monaco-editor": "^0.45.0",
+    "zustand": "^4.4.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.294.0",
+    "tailwind-merge": "^2.1.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.17",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "^14.0.4",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.3"
+  }
+}

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/ui/src/app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

packages/ui/src/app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Sidebar } from '@/components/layout/sidebar';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'KubernetesJS Dashboard',
+  description: 'Modern UI for managing Kubernetes clusters',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="flex h-screen">
+            <Sidebar />
+            <main className="flex-1 overflow-auto p-6">
+              {children}
+            </main>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

packages/ui/src/app/page.tsx

@@ -0,0 +1,11 @@
+import { DashboardHeader } from '@/components/dashboard/dashboard-header';
+import { ClusterOverview } from '@/components/dashboard/cluster-overview';
+
+export default function Home() {
+  return (
+    <div className="space-y-6">
+      <DashboardHeader />
+      <ClusterOverview />
+    </div>
+  );
+}

packages/ui/src/app/resources/deployments/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ResourceHeader } from "@/components/resources/resource-header";
+import { DeploymentList } from "@/components/resources/deployments/deployment-list";
+import { useKubernetes } from "@/hooks/use-kubernetes";
+
+export default function DeploymentsPage() {
+  const { client, namespace } = useKubernetes();
+  const [deployments, setDeployments] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchDeployments() {
+      setIsLoading(true);
+      setError(null);
+      
+      try {
+        const response = await client.listAppsV1NamespacedDeployment({
+          path: { namespace }
+        });
+        
+        setDeployments(response.items || []);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch deployments");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    
+    fetchDeployments();
+  }, [client, namespace]);
+
+  return (
+    <div className="space-y-6">
+      <ResourceHeader 
+        title="Deployments" 
+        description={`Manage deployments in the ${namespace} namespace`}
+        onRefresh={() => {
+          setIsLoading(true);
+          const timer = setTimeout(() => {
+            setIsLoading(false);
+          }, 100);
+          return () => clearTimeout(timer);
+        }}
+      />
+      
+      <DeploymentList 
+        deployments={deployments} 
+        isLoading={isLoading} 
+        error={error} 
+      />
+    </div>
+  );
+}

packages/ui/src/app/resources/pods/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ResourceHeader } from "@/components/resources/resource-header";
+import { PodList } from "@/components/resources/pods/pod-list";
+import { useKubernetes } from "@/hooks/use-kubernetes";
+
+export default function PodsPage() {
+  const { client, namespace } = useKubernetes();
+  const [pods, setPods] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchPods() {
+      setIsLoading(true);
+      setError(null);
+      
+      try {
+        const response = await client.listCoreV1NamespacedPod({
+          path: { namespace }
+        });
+        
+        setPods(response.items || []);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch pods");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    
+    fetchPods();
+  }, [client, namespace]);
+
+  return (
+    <div className="space-y-6">
+      <ResourceHeader 
+        title="Pods" 
+        description={`Manage pods in the ${namespace} namespace`}
+        onRefresh={() => {
+          setIsLoading(true);
+          const timer = setTimeout(() => {
+            setIsLoading(false);
+          }, 100);
+          return () => clearTimeout(timer);
+        }}
+      />
+      
+      <PodList 
+        pods={pods} 
+        isLoading={isLoading} 
+        error={error} 
+      />
+    </div>
+  );
+}

packages/ui/src/app/resources/services/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ResourceHeader } from "@/components/resources/resource-header";
+import { ServiceList } from "@/components/resources/services/service-list";
+import { useKubernetes } from "@/hooks/use-kubernetes";
+
+export default function ServicesPage() {
+  const { client, namespace } = useKubernetes();
+  const [services, setServices] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchServices() {
+      setIsLoading(true);
+      setError(null);
+      
+      try {
+        const response = await client.listCoreV1NamespacedService({
+          path: { namespace }
+        });
+        
+        setServices(response.items || []);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch services");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    
+    fetchServices();
+  }, [client, namespace]);
+
+  return (
+    <div className="space-y-6">
+      <ResourceHeader 
+        title="Services" 
+        description={`Manage services in the ${namespace} namespace`}
+        onRefresh={() => {
+          setIsLoading(true);
+          const timer = setTimeout(() => {
+            setIsLoading(false);
+          }, 100);
+          return () => clearTimeout(timer);
+        }}
+      />
+      
+      <ServiceList 
+        services={services} 
+        isLoading={isLoading} 
+        error={error} 
+      />
+    </div>
+  );
+}