feat(frontend): add Helm chart browser, monitoring, chart-references and values templates pages
Add new frontend pages for the multi-tenant OCDP platform: - Charts page (/charts): Browse Harbor OCI registries to list Helm chart repositories and versions, with deploy modal to launch charts on selected clusters - Monitoring page (/monitoring): Display cluster metrics (CPU/Memory/GPU usage) and per-node details with resource utilization bars - Chart References page (/chart-references): CRUD for chart metadata references - Values Templates page (/templates): CRUD for Helm values templates with version history and rollback support - Sidebar: Add Charts navigation, update Storage and Templates links - api.ts: Add all API client functions (clusterApi, registryApi, instanceApi, monitoringApi, storageApi, chartReferenceApi, valuesTemplateApi, workspaceApi, userApi) with full TypeScript types Note: deploy flow and values template rollback not yet end-to-end tested.
This commit is contained in:
Ivan087
523
frontend/src/app/charts/page.tsx
Normal file
523
frontend/src/app/charts/page.tsx
Normal file
@ -0,0 +1,523 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { registryApi, instanceApi, clusterApi } from '@/lib/api';
|
||||
import { Package, Database, ChevronRight, Search, Rocket, X, Loader2 } from 'lucide-react';
|
||||
|
||||
interface RegistryDTO {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
description?: string;
|
||||
username?: string;
|
||||
insecure: boolean;
|
||||
isShared: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface CreateInstanceRequest {
|
||||
name: string;
|
||||
namespace: string;
|
||||
repository: string;
|
||||
chart: string;
|
||||
version: string;
|
||||
description?: string;
|
||||
values_yaml?: string;
|
||||
registry_id?: string;
|
||||
}
|
||||
|
||||
interface ClusterDTO {
|
||||
id: string;
|
||||
name: string;
|
||||
host: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export default function ChartsPage() {
|
||||
const [registries, setRegistries] = useState<RegistryDTO[]>([]);
|
||||
const [clusters, setClusters] = useState<ClusterDTO[]>([]);
|
||||
const [selectedRegistry, setSelectedRegistry] = useState<RegistryDTO | null>(null);
|
||||
const [repositories, setRepositories] = useState<string[]>([]);
|
||||
const [selectedRepo, setSelectedRepo] = useState<string | null>(null);
|
||||
const [artifacts, setArtifacts] = useState<Artifact[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isLoadingRepos, setIsLoadingRepos] = useState(false);
|
||||
const [isLoadingArtifacts, setIsLoadingArtifacts] = useState(false);
|
||||
const [showDeployModal, setShowDeployModal] = useState(false);
|
||||
const [selectedArtifact, setSelectedArtifact] = useState<Artifact | null>(null);
|
||||
const [isDeploying, setIsDeploying] = useState(false);
|
||||
const [deployError, setDeployError] = useState<string | null>(null);
|
||||
const [deployForm, setDeployForm] = useState({
|
||||
name: '',
|
||||
namespace: 'default',
|
||||
clusterId: '',
|
||||
description: '',
|
||||
valuesYaml: '',
|
||||
});
|
||||
|
||||
const fetchRegistries = async () => {
|
||||
try {
|
||||
const response = await registryApi.list();
|
||||
const data = response.data;
|
||||
setRegistries(Array.isArray(data) ? data : (data?.registries || []));
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch registries:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchClusters = async () => {
|
||||
try {
|
||||
const response = await clusterApi.list();
|
||||
const data = response.data;
|
||||
const clusterList = Array.isArray(data) ? data : (data?.clusters || []);
|
||||
setClusters(clusterList);
|
||||
if (clusterList.length > 0 && !deployForm.clusterId) {
|
||||
setDeployForm(prev => ({ ...prev, clusterId: clusterList[0].id }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch clusters:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRepositories = async (registryId: string) => {
|
||||
setIsLoadingRepos(true);
|
||||
setRepositories([]);
|
||||
setSelectedRepo(null);
|
||||
try {
|
||||
const response = await registryApi.listRepositories(registryId);
|
||||
setRepositories(response.data?.repositories || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch repositories:', error);
|
||||
} finally {
|
||||
setIsLoadingRepos(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchArtifacts = async (registryId: string, repositoryName: string) => {
|
||||
setIsLoadingArtifacts(true);
|
||||
setArtifacts([]);
|
||||
try {
|
||||
const response = await registryApi.listArtifacts(registryId, repositoryName);
|
||||
// Filter to only show chart type artifacts
|
||||
const allArtifacts = Array.isArray(response.data) ? response.data : [];
|
||||
const chartArtifacts = allArtifacts.filter((a: Artifact) => a.type === 'chart');
|
||||
setArtifacts(chartArtifacts);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch artifacts:', error);
|
||||
} finally {
|
||||
setIsLoadingArtifacts(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRegistries();
|
||||
fetchClusters();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRegistry) {
|
||||
fetchRepositories(selectedRegistry.id);
|
||||
}
|
||||
}, [selectedRegistry]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRegistry && selectedRepo) {
|
||||
fetchArtifacts(selectedRegistry.id, selectedRepo);
|
||||
}
|
||||
}, [selectedRepo]);
|
||||
|
||||
const filteredRepos = repositories.filter(repo =>
|
||||
repo.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
// Only show chart repositories (those starting with "charts/")
|
||||
const chartRepos = filteredRepos.filter(repo => repo.startsWith('charts/') || repo.includes('/charts/'));
|
||||
|
||||
const handleDeploy = async () => {
|
||||
if (!selectedArtifact || !deployForm.clusterId || !deployForm.name) {
|
||||
alert('Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsDeploying(true);
|
||||
setDeployError(null);
|
||||
|
||||
try {
|
||||
const request: CreateInstanceRequest = {
|
||||
name: deployForm.name,
|
||||
namespace: deployForm.namespace || 'default',
|
||||
repository: selectedRepo!,
|
||||
chart: selectedRepo!.split('/').pop() || selectedRepo!,
|
||||
version: selectedArtifact.tag,
|
||||
registry_id: selectedRegistry?.id,
|
||||
description: deployForm.description,
|
||||
values_yaml: deployForm.valuesYaml || undefined,
|
||||
};
|
||||
|
||||
await instanceApi.create(deployForm.clusterId, request);
|
||||
alert('Deployment created successfully!');
|
||||
setShowDeployModal(false);
|
||||
setSelectedArtifact(null);
|
||||
setDeployForm({
|
||||
name: '',
|
||||
namespace: 'default',
|
||||
clusterId: clusters[0]?.id || '',
|
||||
description: '',
|
||||
valuesYaml: '',
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
console.error('Failed to deploy:', error);
|
||||
let errorMessage = 'Failed to create deployment';
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const axiosError = error as { response?: { data?: { error?: string; message?: string } } };
|
||||
errorMessage = axiosError.response?.data?.message || axiosError.response?.data?.error || errorMessage;
|
||||
}
|
||||
setDeployError(errorMessage);
|
||||
} finally {
|
||||
setIsDeploying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openDeployModal = (artifact: Artifact) => {
|
||||
setSelectedArtifact(artifact);
|
||||
setDeployForm(prev => ({
|
||||
...prev,
|
||||
name: artifact.tag.replace(/[^\w-]/g, '-').toLowerCase(),
|
||||
}));
|
||||
setShowDeployModal(true);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--primary)]"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[var(--foreground)]">Helm Charts</h1>
|
||||
<p className="text-[var(--muted-foreground)]">Browse and deploy Helm charts from OCI registries</p>
|
||||
</div>
|
||||
|
||||
{/* Registry Selection */}
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="text-sm font-medium text-[var(--foreground)]">Registry:</label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{registries.map((registry) => (
|
||||
<button
|
||||
key={registry.id}
|
||||
onClick={() => {
|
||||
setSelectedRegistry(registry);
|
||||
setSelectedRepo(null);
|
||||
}}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${
|
||||
selectedRegistry?.id === registry.id
|
||||
? 'border-[var(--primary)] bg-[var(--primary)]/10 text-[var(--primary)]'
|
||||
: 'border-[var(--border)] text-[var(--foreground)] hover:border-[var(--primary)]'
|
||||
}`}
|
||||
>
|
||||
<Database className="w-4 h-4" />
|
||||
{registry.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
{selectedRegistry && (
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search charts..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 bg-[var(--card)] border border-[var(--border)] rounded-lg text-[var(--foreground)] placeholder:text-[var(--muted-foreground)]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Breadcrumb */}
|
||||
{selectedRegistry && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedRegistry(null);
|
||||
setSelectedRepo(null);
|
||||
}}
|
||||
className="text-[var(--primary)] hover:underline"
|
||||
>
|
||||
Registries
|
||||
</button>
|
||||
<ChevronRight className="w-4 h-4 text-[var(--muted-foreground)]" />
|
||||
<span className="text-[var(--foreground)]">{selectedRegistry.name}</span>
|
||||
{selectedRepo && (
|
||||
<>
|
||||
<ChevronRight className="w-4 h-4 text-[var(--muted-foreground)]" />
|
||||
<span className="text-[var(--foreground)]">{selectedRepo}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{!selectedRegistry ? (
|
||||
<div className="card text-center py-12">
|
||||
<Package className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
|
||||
<p className="text-[var(--muted-foreground)]">Select a registry to browse Helm charts</p>
|
||||
</div>
|
||||
) : isLoadingRepos ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[var(--primary)]" />
|
||||
</div>
|
||||
) : !selectedRepo ? (
|
||||
/* Chart Repositories List */
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{chartRepos.length === 0 ? (
|
||||
<div className="col-span-full card text-center py-12">
|
||||
<Package className="w-12 h-12 mx-auto text-[var(--muted-foreground)] mb-4" />
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
{searchQuery ? 'No charts found matching your search' : 'No Helm charts found in this registry'}
|
||||
</p>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="mt-4 text-[var(--primary)] hover:underline"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
chartRepos.map((repo) => (
|
||||
<button
|
||||
key={repo}
|
||||
onClick={() => setSelectedRepo(repo)}
|
||||
className="card text-left hover:border-[var(--primary)] transition-all p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Package className="w-6 h-6 text-[var(--primary)]" />
|
||||
<div>
|
||||
<p className="font-semibold text-[var(--foreground)]">
|
||||
{repo.split('/').pop()}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--muted-foreground)]">{repo}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-[var(--muted-foreground)]" />
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
) : isLoadingArtifacts ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[var(--primary)]" />
|
||||
</div>
|
||||
) : (
|
||||
/* Artifact/Version List */
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={() => setSelectedRepo(null)}
|
||||
className="flex items-center gap-2 text-sm text-[var(--primary)] hover:underline"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 rotate-180" />
|
||||
Back to charts
|
||||
</button>
|
||||
|
||||
<h2 className="text-lg font-semibold text-[var(--foreground)]">
|
||||
Versions of {selectedRepo.split('/').pop()}
|
||||
</h2>
|
||||
|
||||
{artifacts.length === 0 ? (
|
||||
<div className="card text-center py-12">
|
||||
<p className="text-[var(--muted-foreground)]">No versions found</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{artifacts.map((artifact, index) => (
|
||||
<div key={index} className="card">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<p className="font-mono text-lg font-bold text-[var(--foreground)]">
|
||||
{artifact.tag}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--muted-foreground)]">
|
||||
{artifact.mediaType}
|
||||
</p>
|
||||
</div>
|
||||
{index === 0 && (
|
||||
<span className="badge badge-success">Latest</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-[var(--muted-foreground)] mb-4">
|
||||
Size: {formatSize(artifact.size)}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => openDeployModal(artifact)}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Rocket className="w-4 h-4" />
|
||||
Deploy
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Deploy Modal */}
|
||||
{showDeployModal && selectedArtifact && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-[var(--card)] rounded-xl p-6 w-full max-w-lg border border-[var(--border)]">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold text-[var(--foreground)]">Deploy Chart</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDeployModal(false);
|
||||
setDeployError(null);
|
||||
}}
|
||||
className="p-1 hover:bg-[var(--secondary)] rounded"
|
||||
>
|
||||
<X className="w-5 h-5 text-[var(--muted-foreground)]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 p-3 bg-[var(--secondary)] rounded-lg">
|
||||
<p className="text-sm text-[var(--muted-foreground)]">Deploying</p>
|
||||
<p className="font-semibold text-[var(--foreground)]">
|
||||
{selectedRepo}:{selectedArtifact.tag}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-1">
|
||||
Release Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deployForm.name}
|
||||
onChange={(e) => setDeployForm({ ...deployForm, name: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
|
||||
placeholder="my-release"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-1">
|
||||
Namespace
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deployForm.namespace}
|
||||
onChange={(e) => setDeployForm({ ...deployForm, namespace: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
|
||||
placeholder="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-1">
|
||||
Cluster *
|
||||
</label>
|
||||
<select
|
||||
value={deployForm.clusterId}
|
||||
onChange={(e) => setDeployForm({ ...deployForm, clusterId: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
|
||||
required
|
||||
>
|
||||
<option value="">Select a cluster</option>
|
||||
{clusters.map((cluster) => (
|
||||
<option key={cluster.id} value={cluster.id}>
|
||||
{cluster.name} ({cluster.host})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={deployForm.description}
|
||||
onChange={(e) => setDeployForm({ ...deployForm, description: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)]"
|
||||
rows={2}
|
||||
placeholder="Optional description..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--foreground)] mb-1">
|
||||
Custom Values (values.yaml)
|
||||
</label>
|
||||
<textarea
|
||||
value={deployForm.valuesYaml}
|
||||
onChange={(e) => setDeployForm({ ...deployForm, valuesYaml: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-[var(--foreground)] font-mono text-sm"
|
||||
rows={4}
|
||||
placeholder="# Optional: Override chart values replicaCount: 2 image: tag: latest"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{deployError && (
|
||||
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-500 text-sm">
|
||||
{deployError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowDeployModal(false);
|
||||
setDeployError(null);
|
||||
}}
|
||||
className="flex-1 px-4 py-2 border border-[var(--border)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)] transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeploy}
|
||||
disabled={isDeploying || !deployForm.name || !deployForm.clusterId}
|
||||
className="flex-1 px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isDeploying && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
{isDeploying ? 'Deploying...' : 'Deploy'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface Artifact {
|
||||
repositoryName: string;
|
||||
tag: string;
|
||||
type: string;
|
||||
mediaType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
}
|
||||
Reference in New Issue
Block a user