Initial fleet skill
This commit is contained in:
Azat
34
SKILL.md
Normal file
34
SKILL.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: fleet
|
||||
description: Multi-machine dashboard for VibeStack fleet management
|
||||
metadata:
|
||||
version: "1.0.0"
|
||||
vibestack:
|
||||
main: false
|
||||
requires:
|
||||
- fleet-api
|
||||
---
|
||||
|
||||
# Fleet Dashboard
|
||||
|
||||
Web UI for managing multiple VibeStack machines. Displays registered machines in a sidebar and shows their dashboards in iframes.
|
||||
|
||||
## Features
|
||||
|
||||
- Machine list with status indicators
|
||||
- Iframe embedding for machine dashboards
|
||||
- Real-time status updates (polling every 10s)
|
||||
- Overview page with machine cards
|
||||
|
||||
## Configuration
|
||||
|
||||
- `FLEET_UI_PORT` - UI server port (default: 3000)
|
||||
- `FLEET_API_URL` - Fleet API URL (default: http://localhost:3001)
|
||||
|
||||
## Usage
|
||||
|
||||
1. Deploy fleet-api on the host machine
|
||||
2. Deploy fleet UI on the host machine
|
||||
3. Deploy fleet-client on each worker machine
|
||||
4. Workers register with fleet-api
|
||||
5. View all machines in the fleet dashboard
|
||||
30
scripts/autorun.sh
Normal file
30
scripts/autorun.sh
Normal file
@@ -0,0 +1,30 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
SKILL_DIR="$(dirname "$(dirname "$0")")"
|
||||
UI_DIR="$SKILL_DIR/ui"
|
||||
|
||||
echo "=== Fleet Dashboard Setup ==="
|
||||
|
||||
# Check for Node.js
|
||||
if ! command -v node &>/dev/null; then
|
||||
echo "Installing Node.js..."
|
||||
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
|
||||
apt-get install -y nodejs
|
||||
fi
|
||||
|
||||
echo "Node.js version: $(node --version)"
|
||||
echo "npm version: $(npm --version)"
|
||||
|
||||
# Install UI dependencies
|
||||
cd "$UI_DIR"
|
||||
if [ ! -d "node_modules" ]; then
|
||||
echo "Installing UI dependencies..."
|
||||
npm install
|
||||
fi
|
||||
|
||||
# Build UI
|
||||
echo "Building UI..."
|
||||
npm run build
|
||||
|
||||
echo "Fleet Dashboard setup complete"
|
||||
22
scripts/run.sh
Normal file
22
scripts/run.sh
Normal file
@@ -0,0 +1,22 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
FLEET_UI_PORT="${FLEET_UI_PORT:-3000}"
|
||||
SKILL_DIR="$(dirname "$(dirname "$0")")"
|
||||
UI_DIR="$SKILL_DIR/ui"
|
||||
|
||||
export FLEET_UI_PORT
|
||||
export FLEET_API_URL="${FLEET_API_URL:-http://localhost:3001}"
|
||||
|
||||
echo "Starting Fleet Dashboard on port $FLEET_UI_PORT..."
|
||||
echo "Fleet API: $FLEET_API_URL"
|
||||
|
||||
cd "$UI_DIR"
|
||||
|
||||
if [ "${NODE_ENV:-production}" = "development" ]; then
|
||||
echo "Running in development mode..."
|
||||
exec npm run dev -- --port "$FLEET_UI_PORT" --host
|
||||
else
|
||||
echo "Running in production mode..."
|
||||
exec npm run preview -- --port "$FLEET_UI_PORT" --host
|
||||
fi
|
||||
13
ui/index.html
Normal file
13
ui/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Fleet Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
29
ui/package.json
Normal file
29
ui/package.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "vibestack-fleet",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint src --ext ts,tsx"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"@tanstack/react-query": "^5.17.0",
|
||||
"lucide-react": "^0.303.0",
|
||||
"clsx": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"@vitejs/plugin-react": "^4.2.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"typescript": "^5.3.0",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
6
ui/postcss.config.js
Normal file
6
ui/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
15
ui/src/App.tsx
Normal file
15
ui/src/App.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Routes, Route } from 'react-router-dom'
|
||||
import { Layout } from './components/Layout'
|
||||
import { Overview } from './pages/Overview'
|
||||
import { Machine } from './pages/Machine'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Overview />} />
|
||||
<Route path="machine/:id" element={<Machine />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
13
ui/src/components/Layout.tsx
Normal file
13
ui/src/components/Layout.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { Sidebar } from './Sidebar'
|
||||
|
||||
export function Layout() {
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-auto">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
75
ui/src/components/MachineCard.tsx
Normal file
75
ui/src/components/MachineCard.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Server, Clock, Blocks } from 'lucide-react'
|
||||
import { clsx } from 'clsx'
|
||||
import { Machine, timeSince } from '../lib/api'
|
||||
import { StatusBadge } from './StatusBadge'
|
||||
|
||||
interface MachineCardProps {
|
||||
machine: Machine
|
||||
}
|
||||
|
||||
export function MachineCard({ machine }: MachineCardProps) {
|
||||
return (
|
||||
<Link
|
||||
to={`/machine/${machine.id}`}
|
||||
className="block bg-gray-900 border border-gray-800 rounded-xl p-4 hover:border-gray-700 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={clsx(
|
||||
'w-10 h-10 rounded-lg flex items-center justify-center',
|
||||
machine.status === 'running' && 'bg-green-500/20',
|
||||
machine.status === 'stopped' && 'bg-gray-500/20',
|
||||
machine.status === 'unknown' && 'bg-yellow-500/20'
|
||||
)}>
|
||||
<Server className={clsx(
|
||||
'w-5 h-5',
|
||||
machine.status === 'running' && 'text-green-400',
|
||||
machine.status === 'stopped' && 'text-gray-400',
|
||||
machine.status === 'unknown' && 'text-yellow-400'
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">{machine.name}</h3>
|
||||
<p className="text-xs text-gray-500">{machine.id.slice(0, 8)}...</p>
|
||||
</div>
|
||||
</div>
|
||||
<StatusBadge status={machine.status} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Last seen: {timeSince(machine.lastSeen)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<Blocks className="w-4 h-4" />
|
||||
<span>{machine.skills.length} skills</span>
|
||||
</div>
|
||||
|
||||
{machine.skills.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 pt-1">
|
||||
{machine.skills.slice(0, 4).map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-2 py-0.5 bg-gray-800 rounded text-xs text-gray-400"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
{machine.skills.length > 4 && (
|
||||
<span className="px-2 py-0.5 text-xs text-gray-500">
|
||||
+{machine.skills.length - 4} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-gray-800 text-xs text-gray-500 truncate">
|
||||
{machine.url}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
106
ui/src/components/MachineFrame.tsx
Normal file
106
ui/src/components/MachineFrame.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { useState } from 'react'
|
||||
import { ExternalLink, RefreshCw, AlertCircle } from 'lucide-react'
|
||||
import { Machine } from '../lib/api'
|
||||
import { StatusBadge } from './StatusBadge'
|
||||
|
||||
interface MachineFrameProps {
|
||||
machine: Machine
|
||||
}
|
||||
|
||||
export function MachineFrame({ machine }: MachineFrameProps) {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [hasError, setHasError] = useState(false)
|
||||
|
||||
const handleLoad = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(false)
|
||||
}
|
||||
|
||||
const handleError = () => {
|
||||
setIsLoading(false)
|
||||
setHasError(true)
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
setIsLoading(true)
|
||||
setHasError(false)
|
||||
// Force iframe reload by updating key
|
||||
const iframe = document.getElementById('machine-frame') as HTMLIFrameElement
|
||||
if (iframe) {
|
||||
iframe.src = machine.url
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-gray-900 border-b border-gray-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="font-semibold text-white">{machine.name}</h2>
|
||||
<StatusBadge status={machine.status} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={refresh}
|
||||
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
</button>
|
||||
<a
|
||||
href={machine.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
|
||||
title="Open in new tab"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 relative bg-gray-950">
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-950">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<RefreshCw className="w-5 h-5 animate-spin" />
|
||||
<span>Loading dashboard...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasError && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-950">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
|
||||
<p className="text-gray-400 mb-2">Failed to load dashboard</p>
|
||||
<p className="text-sm text-gray-500 mb-4">{machine.url}</p>
|
||||
<button
|
||||
onClick={refresh}
|
||||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{machine.status === 'unknown' && (
|
||||
<div className="absolute top-0 left-0 right-0 px-4 py-2 bg-yellow-500/10 border-b border-yellow-500/20 text-yellow-400 text-sm text-center">
|
||||
Machine may be offline - last heartbeat was over 60 seconds ago
|
||||
</div>
|
||||
)}
|
||||
|
||||
<iframe
|
||||
id="machine-frame"
|
||||
src={machine.url}
|
||||
className="w-full h-full border-0"
|
||||
onLoad={handleLoad}
|
||||
onError={handleError}
|
||||
title={`${machine.name} dashboard`}
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
83
ui/src/components/Sidebar.tsx
Normal file
83
ui/src/components/Sidebar.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { LayoutDashboard, Server, Circle } from 'lucide-react'
|
||||
import { clsx } from 'clsx'
|
||||
import { fetchMachines, Machine } from '../lib/api'
|
||||
|
||||
const statusColors: Record<Machine['status'], string> = {
|
||||
running: 'text-green-400',
|
||||
stopped: 'text-gray-400',
|
||||
unknown: 'text-yellow-400',
|
||||
}
|
||||
|
||||
export function Sidebar() {
|
||||
const { data: machines = [] } = useQuery({
|
||||
queryKey: ['machines'],
|
||||
queryFn: fetchMachines,
|
||||
})
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-gray-900 border-r border-gray-800 flex flex-col">
|
||||
<div className="p-4 border-b border-gray-800">
|
||||
<h1 className="text-xl font-bold text-white flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<Server className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
Fleet
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-3 space-y-1 overflow-auto">
|
||||
<NavLink
|
||||
to="/"
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
clsx(
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-gray-800 text-white'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-800/50'
|
||||
)
|
||||
}
|
||||
>
|
||||
<LayoutDashboard className="w-5 h-5" />
|
||||
Overview
|
||||
</NavLink>
|
||||
|
||||
<div className="pt-4 pb-2 px-3">
|
||||
<span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Machines ({machines.length})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{machines.map((machine) => (
|
||||
<NavLink
|
||||
key={machine.id}
|
||||
to={`/machine/${machine.id}`}
|
||||
className={({ isActive }) =>
|
||||
clsx(
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-gray-800 text-white'
|
||||
: 'text-gray-400 hover:text-white hover:bg-gray-800/50'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Circle className={clsx('w-2 h-2 fill-current', statusColors[machine.status])} />
|
||||
<span className="truncate">{machine.name}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
|
||||
{machines.length === 0 && (
|
||||
<div className="px-3 py-4 text-sm text-gray-500 text-center">
|
||||
No machines registered
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="p-3 border-t border-gray-800 text-xs text-gray-500">
|
||||
Polling every 10s
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
33
ui/src/components/StatusBadge.tsx
Normal file
33
ui/src/components/StatusBadge.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { clsx } from 'clsx'
|
||||
|
||||
type Status = 'running' | 'stopped' | 'unknown'
|
||||
|
||||
const statusStyles: Record<Status, string> = {
|
||||
running: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
stopped: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
unknown: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
}
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: Status
|
||||
label?: string
|
||||
}
|
||||
|
||||
export function StatusBadge({ status, label }: StatusBadgeProps) {
|
||||
return (
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border',
|
||||
statusStyles[status]
|
||||
)}
|
||||
>
|
||||
<span className={clsx(
|
||||
'w-1.5 h-1.5 rounded-full',
|
||||
status === 'running' && 'bg-green-400 animate-pulse',
|
||||
status === 'stopped' && 'bg-gray-400',
|
||||
status === 'unknown' && 'bg-yellow-400 animate-pulse'
|
||||
)} />
|
||||
{label || status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
5
ui/src/components/index.ts
Normal file
5
ui/src/components/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { Layout } from './Layout'
|
||||
export { Sidebar } from './Sidebar'
|
||||
export { StatusBadge } from './StatusBadge'
|
||||
export { MachineCard } from './MachineCard'
|
||||
export { MachineFrame } from './MachineFrame'
|
||||
11
ui/src/index.css
Normal file
11
ui/src/index.css
Normal file
@@ -0,0 +1,11 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gray-950 text-gray-100;
|
||||
}
|
||||
47
ui/src/lib/api.ts
Normal file
47
ui/src/lib/api.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
const API_BASE = '/api'
|
||||
|
||||
export interface Machine {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
version: string
|
||||
skills: string[]
|
||||
status: 'running' | 'stopped' | 'unknown'
|
||||
lastSeen: number
|
||||
}
|
||||
|
||||
export async function fetchMachines(): Promise<Machine[]> {
|
||||
const res = await fetch(`${API_BASE}/machines`)
|
||||
if (!res.ok) throw new Error('Failed to fetch machines')
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchMachine(id: string): Promise<Machine> {
|
||||
const res = await fetch(`${API_BASE}/machines/${id}`)
|
||||
if (!res.ok) throw new Error('Failed to fetch machine')
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function deleteMachine(id: string): Promise<void> {
|
||||
const res = await fetch(`${API_BASE}/machines/${id}`, { method: 'DELETE' })
|
||||
if (!res.ok) throw new Error('Failed to delete machine')
|
||||
}
|
||||
|
||||
export async function registerMachine(machine: Omit<Machine, 'lastSeen'>): Promise<Machine> {
|
||||
const res = await fetch(`${API_BASE}/machines/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(machine),
|
||||
})
|
||||
if (!res.ok) throw new Error('Failed to register machine')
|
||||
return res.json()
|
||||
}
|
||||
|
||||
// Calculate time since last seen
|
||||
export function timeSince(timestamp: number): string {
|
||||
const seconds = Math.floor(Date.now() / 1000 - timestamp)
|
||||
if (seconds < 60) return `${seconds}s ago`
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`
|
||||
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`
|
||||
return `${Math.floor(seconds / 86400)}d ago`
|
||||
}
|
||||
27
ui/src/main.tsx
Normal file
27
ui/src/main.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1,
|
||||
staleTime: 5000,
|
||||
refetchInterval: 10000, // Poll every 10s for machine updates
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
44
ui/src/pages/Machine.tsx
Normal file
44
ui/src/pages/Machine.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useParams, Navigate } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react'
|
||||
import { fetchMachine } from '../lib/api'
|
||||
import { MachineFrame } from '../components/MachineFrame'
|
||||
|
||||
export function Machine() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
|
||||
const { data: machine, isLoading, error } = useQuery({
|
||||
queryKey: ['machine', id],
|
||||
queryFn: () => fetchMachine(id!),
|
||||
enabled: !!id,
|
||||
})
|
||||
|
||||
if (!id) {
|
||||
return <Navigate to="/" replace />
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<RefreshCw className="w-5 h-5 animate-spin" />
|
||||
<span>Loading machine...</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !machine) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
|
||||
<p className="text-gray-400 mb-2">Machine not found</p>
|
||||
<p className="text-sm text-gray-500">ID: {id}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <MachineFrame machine={machine} />
|
||||
}
|
||||
122
ui/src/pages/Overview.tsx
Normal file
122
ui/src/pages/Overview.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Server, CheckCircle, AlertCircle, HelpCircle } from 'lucide-react'
|
||||
import { fetchMachines, Machine } from '../lib/api'
|
||||
import { MachineCard } from '../components/MachineCard'
|
||||
|
||||
export function Overview() {
|
||||
const { data: machines = [], isLoading, error } = useQuery({
|
||||
queryKey: ['machines'],
|
||||
queryFn: fetchMachines,
|
||||
})
|
||||
|
||||
const stats = {
|
||||
total: machines.length,
|
||||
running: machines.filter((m) => m.status === 'running').length,
|
||||
stopped: machines.filter((m) => m.status === 'stopped').length,
|
||||
unknown: machines.filter((m) => m.status === 'unknown').length,
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-6 text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
|
||||
<p className="text-red-400">Failed to load machines</p>
|
||||
<p className="text-sm text-gray-500 mt-2">Make sure fleet-api is running</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Fleet Overview</h1>
|
||||
<p className="text-gray-400 mt-1">Manage your VibeStack machines</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Server}
|
||||
label="Total Machines"
|
||||
value={stats.total}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle}
|
||||
label="Running"
|
||||
value={stats.running}
|
||||
color="green"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Stopped"
|
||||
value={stats.stopped}
|
||||
color="gray"
|
||||
/>
|
||||
<StatCard
|
||||
icon={HelpCircle}
|
||||
label="Unknown"
|
||||
value={stats.unknown}
|
||||
color="yellow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="bg-gray-900 border border-gray-800 rounded-xl p-4 animate-pulse">
|
||||
<div className="h-12 bg-gray-800 rounded mb-3" />
|
||||
<div className="h-4 bg-gray-800 rounded w-3/4 mb-2" />
|
||||
<div className="h-4 bg-gray-800 rounded w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : machines.length === 0 ? (
|
||||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-12 text-center">
|
||||
<Server className="w-16 h-16 text-gray-700 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-white mb-2">No machines registered</h3>
|
||||
<p className="text-gray-400 max-w-md mx-auto">
|
||||
Deploy fleet-client on your machines to register them with this fleet dashboard.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{machines.map((machine) => (
|
||||
<MachineCard key={machine.id} machine={machine} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface StatCardProps {
|
||||
icon: React.ElementType
|
||||
label: string
|
||||
value: number
|
||||
color: 'blue' | 'green' | 'gray' | 'yellow'
|
||||
}
|
||||
|
||||
const colorStyles = {
|
||||
blue: 'bg-blue-500/20 text-blue-400',
|
||||
green: 'bg-green-500/20 text-green-400',
|
||||
gray: 'bg-gray-500/20 text-gray-400',
|
||||
yellow: 'bg-yellow-500/20 text-yellow-400',
|
||||
}
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
|
||||
return (
|
||||
<div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${colorStyles[color]}`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-white">{value}</p>
|
||||
<p className="text-sm text-gray-400">{label}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
2
ui/src/pages/index.ts
Normal file
2
ui/src/pages/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { Overview } from './Overview'
|
||||
export { Machine } from './Machine'
|
||||
11
ui/tailwind.config.js
Normal file
11
ui/tailwind.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
25
ui/tsconfig.json
Normal file
25
ui/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
ui/tsconfig.node.json
Normal file
10
ui/tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
14
ui/vite.config.ts
Normal file
14
ui/vite.config.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: process.env.FLEET_API_URL || 'http://localhost:3001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user