feat: multi-cluster management with pool-based load balancing
- Add ClusterPool entity for grouping clusters into named pools - Support 3 deployment modes: manual cluster, pool load-balanced, default fallback - Pool strategies: least-apps (fewest deployed apps) and round-robin - Add pool CRUD API endpoints (admin) and public pool listing - Frontend deploy page: 3-mode cluster selector (Default/Manual/Pool) - Frontend app detail: shows assigned cluster and pool info - Admin pools management page with cluster selection and strategy picker - Application entity extended with poolId field
This commit is contained in:
keyhan
@@ -0,0 +1,326 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '@/lib/api';
|
||||
import toast from 'react-hot-toast';
|
||||
import type { Cluster, ClusterPool } from '@/types';
|
||||
|
||||
export default function AdminPoolsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingPool, setEditingPool] = useState<ClusterPool | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
strategy: 'least-apps' as 'least-apps' | 'round-robin',
|
||||
clusterIds: [] as string[],
|
||||
});
|
||||
|
||||
const { data: pools = [], isLoading } = useQuery<ClusterPool[]>({
|
||||
queryKey: ['admin-pools'],
|
||||
queryFn: () => api.get('/clusters/pools').then((r) => r.data),
|
||||
});
|
||||
|
||||
const { data: clusters = [] } = useQuery<Cluster[]>({
|
||||
queryKey: ['admin-clusters'],
|
||||
queryFn: () => api.get('/clusters').then((r) => r.data),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||
toast.success('Cluster pool created!');
|
||||
resetForm();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toast.error(err?.response?.data?.message || 'Failed to create pool');
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: typeof form }) =>
|
||||
api.patch(`/clusters/pools/${id}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||
toast.success('Cluster pool updated!');
|
||||
resetForm();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
toast.error(err?.response?.data?.message || 'Failed to update pool');
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => api.delete(`/clusters/pools/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
|
||||
toast.success('Cluster pool deleted');
|
||||
},
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
setShowForm(false);
|
||||
setEditingPool(null);
|
||||
setForm({ name: '', description: '', strategy: 'least-apps', clusterIds: [] });
|
||||
};
|
||||
|
||||
const startEdit = (pool: ClusterPool) => {
|
||||
setEditingPool(pool);
|
||||
setForm({
|
||||
name: pool.name,
|
||||
description: pool.description || '',
|
||||
strategy: pool.strategy,
|
||||
clusterIds: pool.clusterIds,
|
||||
});
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (editingPool) {
|
||||
updateMutation.mutate({ id: editingPool.id, data: form });
|
||||
} else {
|
||||
createMutation.mutate(form);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCluster = (clusterId: string) => {
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
clusterIds: prev.clusterIds.includes(clusterId)
|
||||
? prev.clusterIds.filter((id) => id !== clusterId)
|
||||
: [...prev.clusterIds, clusterId],
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Cluster Pools</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Create load-balanced groups of clusters for automatic app distribution
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { showForm ? resetForm() : setShowForm(true); }}
|
||||
className="btn-primary"
|
||||
>
|
||||
{showForm ? 'Cancel' : '+ Create Pool'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create/Edit Form */}
|
||||
{showForm && (
|
||||
<div className="card space-y-4">
|
||||
<h2 className="text-lg font-semibold">
|
||||
{editingPool ? `Edit "${editingPool.name}"` : 'Create New Cluster Pool'}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Pool Name</label>
|
||||
<input
|
||||
className="input-field"
|
||||
placeholder="production-pool"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
|
||||
<select
|
||||
className="input-field"
|
||||
value={form.strategy}
|
||||
onChange={(e) => setForm({ ...form, strategy: e.target.value as any })}
|
||||
>
|
||||
<option value="least-apps">📊 Least Apps — deploy to cluster with fewest apps</option>
|
||||
<option value="round-robin">🔄 Round Robin — rotate across clusters evenly</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
||||
<input
|
||||
className="input-field"
|
||||
placeholder="Load-balanced pool for production workloads"
|
||||
value={form.description}
|
||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cluster selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Select Clusters ({form.clusterIds.length} selected)
|
||||
</label>
|
||||
{clusters.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 py-4 text-center">
|
||||
No clusters registered. Add clusters first.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{clusters.map((cluster) => {
|
||||
const isSelected = form.clusterIds.includes(cluster.id);
|
||||
return (
|
||||
<button
|
||||
key={cluster.id}
|
||||
type="button"
|
||||
onClick={() => toggleCluster(cluster.id)}
|
||||
className={`p-3 rounded-xl border-2 text-left transition-all ${
|
||||
isSelected
|
||||
? 'border-primary-500 bg-primary-50 shadow-sm'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
|
||||
isSelected ? 'border-primary-500 bg-primary-500' : 'border-gray-300'
|
||||
}`}>
|
||||
{isSelected && <span className="text-white text-xs">✓</span>}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-gray-900">
|
||||
{cluster.name}
|
||||
{cluster.isDefault && (
|
||||
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
|
||||
Default
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{cluster.provider || 'Unknown'} · {cluster.region || 'N/A'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
cluster.status === 'active'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-red-100 text-red-700'
|
||||
}`}>
|
||||
{cluster.status}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={
|
||||
!form.name ||
|
||||
form.clusterIds.length === 0 ||
|
||||
createMutation.isPending ||
|
||||
updateMutation.isPending
|
||||
}
|
||||
className="btn-primary disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending || updateMutation.isPending
|
||||
? '⏳ Saving...'
|
||||
: editingPool
|
||||
? 'Update Pool'
|
||||
: 'Create Pool'}
|
||||
</button>
|
||||
<button onClick={resetForm} className="btn-secondary">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pool List */}
|
||||
{isLoading ? (
|
||||
<div className="card text-center py-12 text-gray-500">Loading pools...</div>
|
||||
) : pools.length === 0 ? (
|
||||
<div className="card text-center py-12">
|
||||
<div className="text-4xl mb-3">⚖️</div>
|
||||
<p className="text-gray-500">No cluster pools created yet</p>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
Create a pool to enable load-balanced deployment across multiple clusters
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{pools.map((pool) => {
|
||||
const poolClusters = clusters.filter((c) => pool.clusterIds.includes(c.id));
|
||||
const activeClusters = poolClusters.filter((c) => c.status === 'active');
|
||||
return (
|
||||
<div key={pool.id} className="card">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900">{pool.name}</h3>
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
pool.isActive ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
||||
}`}>
|
||||
{pool.isActive ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
|
||||
{pool.strategy === 'least-apps' ? '📊 Least Apps' : '🔄 Round Robin'}
|
||||
</span>
|
||||
</div>
|
||||
{pool.description && (
|
||||
<p className="text-sm text-gray-500 mb-3">{pool.description}</p>
|
||||
)}
|
||||
|
||||
{/* Cluster chips */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{poolClusters.length > 0 ? poolClusters.map((cluster) => (
|
||||
<div
|
||||
key={cluster.id}
|
||||
className={`inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-medium ${
|
||||
cluster.status === 'active'
|
||||
? 'bg-green-50 text-green-700 border border-green-200'
|
||||
: 'bg-red-50 text-red-700 border border-red-200'
|
||||
}`}
|
||||
>
|
||||
<span>{cluster.status === 'active' ? '✅' : '❌'}</span>
|
||||
<span>{cluster.name}</span>
|
||||
<span className="text-gray-400">
|
||||
({cluster.provider || 'N/A'} · {cluster.region || 'N/A'})
|
||||
</span>
|
||||
</div>
|
||||
)) : (
|
||||
<p className="text-xs text-gray-400">No clusters in this pool (they may have been deleted)</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
{activeClusters.length}/{poolClusters.length} clusters active · Created {new Date(pool.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3 ml-4">
|
||||
<button
|
||||
onClick={() => startEdit(pool)}
|
||||
className="text-sm px-3 py-1.5 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
✏️ Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete pool "${pool.name}"? Apps already assigned to this pool will keep their current cluster.`)) {
|
||||
deleteMutation.mutate(pool.id);
|
||||
}
|
||||
}}
|
||||
className="text-sm text-red-600 hover:text-red-800"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import api from '@/lib/api';
|
||||
import toast from 'react-hot-toast';
|
||||
import type { Application, Deployment, ResourceUsage } from '@/types';
|
||||
import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic } from '@/types';
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
@@ -85,6 +85,16 @@ export default function AppDetailPage() {
|
||||
refetchInterval: showResources ? 5000 : false,
|
||||
});
|
||||
|
||||
const { data: clusters = [] } = useQuery<ClusterPublic[]>({
|
||||
queryKey: ['clusters-public'],
|
||||
queryFn: () => api.get('/clusters/public').then((r) => r.data),
|
||||
});
|
||||
|
||||
const { data: pools = [] } = useQuery<ClusterPoolPublic[]>({
|
||||
queryKey: ['pools-public'],
|
||||
queryFn: () => api.get('/clusters/pools/public').then((r) => r.data),
|
||||
});
|
||||
|
||||
// Sync form when resource data loads
|
||||
useEffect(() => {
|
||||
if (resourceUsage?.configured) {
|
||||
@@ -378,6 +388,22 @@ export default function AppDetailPage() {
|
||||
<dt className="text-sm text-gray-500">Port</dt>
|
||||
<dd className="text-sm font-medium text-gray-900">{app.port}</dd>
|
||||
</div>
|
||||
{app.clusterId && (
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-sm text-gray-500">Cluster</dt>
|
||||
<dd className="text-sm font-medium text-gray-900">
|
||||
🖥️ {clusters.find((c) => c.id === app.clusterId)?.name || 'Unknown'}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
{app.poolId && (
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-sm text-gray-500">Pool</dt>
|
||||
<dd className="text-sm font-medium text-gray-900">
|
||||
⚖️ {pools.find((p) => p.id === app.poolId)?.name || 'Unknown'}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
{app.latestImageTag && (
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-sm text-gray-500">Image</dt>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import api from '@/lib/api';
|
||||
import toast from 'react-hot-toast';
|
||||
import type { CreateApplicationDto } from '@/types';
|
||||
import type { CreateApplicationDto, ClusterPublic, ClusterPoolPublic } from '@/types';
|
||||
|
||||
const steps = ['Basic Info', 'Runtime & Database', 'Resources', 'Review'];
|
||||
|
||||
@@ -34,8 +34,19 @@ export default function DeployPage() {
|
||||
const [zipFile, setZipFile] = useState<File | null>(null);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [clusterMode, setClusterMode] = useState<'default' | 'manual' | 'pool'>('default');
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { data: clusters = [] } = useQuery<ClusterPublic[]>({
|
||||
queryKey: ['clusters-public'],
|
||||
queryFn: () => api.get('/clusters/public').then((r) => r.data),
|
||||
});
|
||||
|
||||
const { data: pools = [] } = useQuery<ClusterPoolPublic[]>({
|
||||
queryKey: ['pools-public'],
|
||||
queryFn: () => api.get('/clusters/pools/public').then((r) => r.data),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (data: CreateApplicationDto) => {
|
||||
const res = await api.post('/applications', data);
|
||||
@@ -367,6 +378,170 @@ export default function DeployPage() {
|
||||
{step === 2 && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-semibold">Resources & Configuration</h2>
|
||||
|
||||
{/* Cluster Assignment Mode */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Cluster Assignment</label>
|
||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClusterMode('default');
|
||||
setForm({ ...form, clusterId: undefined, poolId: undefined });
|
||||
}}
|
||||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||||
clusterMode === 'default'
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">🏠</span>
|
||||
<p className="mt-1 font-semibold text-sm text-gray-900">Default</p>
|
||||
<p className="text-xs text-gray-500">Use default cluster</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClusterMode('manual');
|
||||
setForm({ ...form, poolId: undefined });
|
||||
}}
|
||||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||||
clusterMode === 'manual'
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">🎯</span>
|
||||
<p className="mt-1 font-semibold text-sm text-gray-900">Manual</p>
|
||||
<p className="text-xs text-gray-500">Pick a specific cluster</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClusterMode('pool');
|
||||
setForm({ ...form, clusterId: undefined });
|
||||
}}
|
||||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||||
clusterMode === 'pool'
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">⚖️</span>
|
||||
<p className="mt-1 font-semibold text-sm text-gray-900">Load Balanced</p>
|
||||
<p className="text-xs text-gray-500">Pick a cluster pool</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Manual: show cluster list */}
|
||||
{clusterMode === 'manual' && (
|
||||
<div className="space-y-2">
|
||||
{clusters.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 text-center py-4">No clusters available</p>
|
||||
) : (
|
||||
clusters.map((cluster) => (
|
||||
<button
|
||||
key={cluster.id}
|
||||
type="button"
|
||||
onClick={() => setForm({ ...form, clusterId: cluster.id })}
|
||||
className={`w-full p-3 rounded-xl border-2 text-left transition-colors ${
|
||||
form.clusterId === cluster.id
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">🖥️</span>
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-gray-900">
|
||||
{cluster.name}
|
||||
{cluster.isDefault && (
|
||||
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Default</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{[cluster.provider, cluster.region].filter(Boolean).join(' · ') || 'No region info'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
cluster.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
||||
}`}>
|
||||
{cluster.status}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pool: show pool list */}
|
||||
{clusterMode === 'pool' && (
|
||||
<div className="space-y-2">
|
||||
{pools.length === 0 ? (
|
||||
<div className="text-center py-4">
|
||||
<p className="text-sm text-gray-400">No cluster pools configured</p>
|
||||
<p className="text-xs text-gray-400 mt-1">Ask your admin to create a cluster pool</p>
|
||||
</div>
|
||||
) : (
|
||||
pools.map((pool) => (
|
||||
<button
|
||||
key={pool.id}
|
||||
type="button"
|
||||
onClick={() => setForm({ ...form, poolId: pool.id })}
|
||||
className={`w-full p-3 rounded-xl border-2 text-left transition-colors ${
|
||||
form.poolId === pool.id
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">⚖️</span>
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-gray-900">{pool.name}</p>
|
||||
{pool.description && (
|
||||
<p className="text-xs text-gray-500">{pool.description}</p>
|
||||
)}
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
<span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
|
||||
{pool.strategy === 'least-apps' ? '📊 Least Apps' : '🔄 Round Robin'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{pool.clusters.length} cluster{pool.clusters.length !== 1 ? 's' : ''}:
|
||||
{' '}{pool.clusters.map((c) => c.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Default: info text */}
|
||||
{clusterMode === 'default' && (
|
||||
<div className="p-3 bg-gray-50 rounded-xl border border-gray-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">🏠</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-700">Default cluster will be used</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Your app will be deployed to the platform's default cluster
|
||||
{clusters.find((c) => c.isDefault) && (
|
||||
<> — <strong>{clusters.find((c) => c.isDefault)?.name}</strong></>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">CPU Request</label>
|
||||
@@ -497,6 +672,16 @@ export default function DeployPage() {
|
||||
<span className="text-sm font-medium text-green-600">🔑 Token provided</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">Cluster</span>
|
||||
<span className="text-sm font-medium">
|
||||
{clusterMode === 'manual' && form.clusterId
|
||||
? `🎯 ${clusters.find((c) => c.id === form.clusterId)?.name || form.clusterId}`
|
||||
: clusterMode === 'pool' && form.poolId
|
||||
? `⚖️ ${pools.find((p) => p.id === form.poolId)?.name || 'Pool'} (Load Balanced)`
|
||||
: '🏠 Default Cluster'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">CPU</span>
|
||||
<span className="text-sm font-medium">{form.cpuRequest} / {form.cpuLimit}</span>
|
||||
|
||||
@@ -14,6 +14,7 @@ const userNavItems = [
|
||||
const adminNavItems = [
|
||||
{ href: '/dashboard/admin/users', label: 'Users', icon: '👥' },
|
||||
{ href: '/dashboard/admin/clusters', label: 'Clusters', icon: '🖥️' },
|
||||
{ href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: '⚖️' },
|
||||
];
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
@@ -28,6 +28,7 @@ export interface Application {
|
||||
port: number;
|
||||
userId: string;
|
||||
clusterId?: string;
|
||||
poolId?: string;
|
||||
latestImageTag?: string;
|
||||
subdomain?: string;
|
||||
deployments?: Deployment[];
|
||||
@@ -95,6 +96,37 @@ export interface CreateApplicationDto {
|
||||
memoryLimit?: string;
|
||||
replicas?: number;
|
||||
port?: number;
|
||||
clusterId?: string;
|
||||
poolId?: string;
|
||||
}
|
||||
|
||||
export interface ClusterPublic {
|
||||
id: string;
|
||||
name: string;
|
||||
region?: string;
|
||||
provider?: string;
|
||||
isDefault: boolean;
|
||||
status: 'active' | 'inactive' | 'maintenance';
|
||||
}
|
||||
|
||||
export interface ClusterPoolPublic {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
strategy: 'least-apps' | 'round-robin';
|
||||
clusterIds: string[];
|
||||
isActive: boolean;
|
||||
clusters: Pick<ClusterPublic, 'id' | 'name' | 'region' | 'provider' | 'status'>[];
|
||||
}
|
||||
|
||||
export interface ClusterPool {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
strategy: 'least-apps' | 'round-robin';
|
||||
clusterIds: string[];
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface PodInfo {
|
||||
|
||||
Reference in New Issue
Block a user