ocdp v1
This commit is contained in:
mangomqy
16
frontend/src/features/artifact/index.ts
Normal file
16
frontend/src/features/artifact/index.ts
Normal file
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Artifact Module
|
||||
* 制品模块 - 制品仓库浏览和实例管理
|
||||
*/
|
||||
|
||||
// Registries (Browser) - VSCode-style unified browser
|
||||
export { default as ArtifactBrowserPage } from './registries/pages/ArtifactBrowserPage';
|
||||
export * from './registries/components/RepositoryItem';
|
||||
export * from './registries/components/LaunchModal';
|
||||
export * from './registries/components/TagCard';
|
||||
|
||||
// Instances
|
||||
export { default as InstancesManagementPage } from './instances/pages/InstancesManagementPage';
|
||||
export * from './instances/components/InstanceCard';
|
||||
export * from './instances/components/ModifyModal';
|
||||
export * from './instances/components/EntriesModal';
|
||||
@ -0,0 +1,602 @@
|
||||
/**
|
||||
* Entries Modal Component
|
||||
* 显示实例的入口信息（Services 和 Ingresses）
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { X, Globe, Network, ExternalLink, Copy, CheckCircle, Info } from "lucide-react";
|
||||
import { listInstanceEntries } from "@/api";
|
||||
import type { InstanceEntry, InstanceResponse } from "@/api";
|
||||
import { useToast } from "@/shared";
|
||||
|
||||
interface ServiceEntry {
|
||||
name?: string;
|
||||
namespace?: string;
|
||||
type?: string;
|
||||
cluster_ip?: string;
|
||||
external_ips?: string[];
|
||||
ports?: Array<{
|
||||
name?: string;
|
||||
protocol?: string;
|
||||
port?: number | string;
|
||||
target_port?: number | string;
|
||||
node_port?: number;
|
||||
}>;
|
||||
loadBalancer?: {
|
||||
ingress?: Array<{
|
||||
ip?: string;
|
||||
hostname?: string;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
interface IngressEntry {
|
||||
name?: string;
|
||||
namespace?: string;
|
||||
class_name?: string;
|
||||
rules?: Array<{
|
||||
host?: string;
|
||||
paths?: Array<{
|
||||
path?: string;
|
||||
path_type?: string;
|
||||
backend?: {
|
||||
service?: {
|
||||
name?: string;
|
||||
port?: number | string;
|
||||
};
|
||||
};
|
||||
}>;
|
||||
}>;
|
||||
tls?: Array<{
|
||||
hosts?: string[];
|
||||
secret_name?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
type EntrySource = 'kubernetes' | 'manifest' | 'notes' | 'none';
|
||||
|
||||
interface InstanceEntries {
|
||||
services: ServiceEntry[];
|
||||
ingresses: IngressEntry[];
|
||||
source: EntrySource;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
const NESTED_ENTRY_KEYS = ["entries", "data", "result", "results", "payload", "services", "ingresses"];
|
||||
|
||||
function isPlainObject(value: unknown): value is Record<string, unknown> {
|
||||
return Boolean(value) && typeof value === "object" && !Array.isArray(value);
|
||||
}
|
||||
|
||||
function collectEntryContainers(value: unknown, seen = new Set<unknown>()): Record<string, unknown>[] {
|
||||
if (!isPlainObject(value) || seen.has(value)) {
|
||||
return [];
|
||||
}
|
||||
seen.add(value);
|
||||
const containers: Record<string, unknown>[] = [value];
|
||||
for (const key of NESTED_ENTRY_KEYS) {
|
||||
const nested = (value as Record<string, unknown>)[key];
|
||||
if (isPlainObject(nested)) {
|
||||
containers.push(...collectEntryContainers(nested, seen));
|
||||
}
|
||||
}
|
||||
return containers;
|
||||
}
|
||||
|
||||
function asEntryArray(value: unknown, seen = new Set<unknown>()): InstanceEntry[] | undefined {
|
||||
if (Array.isArray(value)) {
|
||||
return value as InstanceEntry[];
|
||||
}
|
||||
if (isPlainObject(value)) {
|
||||
if (seen.has(value)) {
|
||||
return undefined;
|
||||
}
|
||||
seen.add(value);
|
||||
return (
|
||||
asEntryArray(value.entries, seen) ||
|
||||
asEntryArray(value.items, seen) ||
|
||||
asEntryArray(value.data, seen)
|
||||
);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const ENTRY_SOURCES: EntrySource[] = ["kubernetes", "manifest", "notes", "none"];
|
||||
|
||||
async function getInstanceEntries(clusterId: string, instanceId: string): Promise<InstanceEntries> {
|
||||
const raw = (await listInstanceEntries({ clusterId, instanceId })) as unknown;
|
||||
return buildInstanceEntries(raw);
|
||||
}
|
||||
|
||||
function buildInstanceEntries(raw: unknown): InstanceEntries {
|
||||
const baseState: InstanceEntries = {
|
||||
services: [],
|
||||
ingresses: [],
|
||||
source: "none",
|
||||
};
|
||||
|
||||
if (raw == null) {
|
||||
return baseState;
|
||||
}
|
||||
|
||||
let entriesPayload: InstanceEntry[] | undefined = Array.isArray(raw) ? (raw as InstanceEntry[]) : undefined;
|
||||
let source: EntrySource = "none";
|
||||
let notes: string | undefined;
|
||||
let servicesFromResponse: InstanceEntry[] | undefined;
|
||||
let ingressesFromResponse: InstanceEntry[] | undefined;
|
||||
|
||||
const containers = collectEntryContainers(raw);
|
||||
for (const container of containers) {
|
||||
entriesPayload ||= asEntryArray(container.entries);
|
||||
entriesPayload ||= asEntryArray(container.items);
|
||||
entriesPayload ||= asEntryArray(container.data);
|
||||
servicesFromResponse ||= asEntryArray(container.services);
|
||||
ingressesFromResponse ||= asEntryArray(container.ingresses);
|
||||
if (!notes && typeof container.notes === "string") {
|
||||
notes = container.notes;
|
||||
}
|
||||
if (typeof container.source === "string") {
|
||||
const normalized = normalizeSource(container.source);
|
||||
if (normalized) {
|
||||
source = normalized;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const entries = entriesPayload ?? [];
|
||||
const splitResult = entries.length ? splitEntries(entries) : { services: [], ingresses: [] };
|
||||
const explicitServices = servicesFromResponse?.map(mapServiceEntry) ?? [];
|
||||
const explicitIngresses = ingressesFromResponse?.map(mapIngressEntry) ?? [];
|
||||
const services = explicitServices.length ? explicitServices : splitResult.services;
|
||||
const ingresses = explicitIngresses.length ? explicitIngresses : splitResult.ingresses;
|
||||
const resolvedSource: EntrySource =
|
||||
services.length || ingresses.length
|
||||
? source === "none"
|
||||
? "kubernetes"
|
||||
: source
|
||||
: source;
|
||||
|
||||
return {
|
||||
services,
|
||||
ingresses,
|
||||
source: resolvedSource,
|
||||
notes,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeSource(source: string): EntrySource | null {
|
||||
if (ENTRY_SOURCES.includes(source as EntrySource)) {
|
||||
return source as EntrySource;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function splitEntries(entries: InstanceEntry[]): {
|
||||
services: ServiceEntry[];
|
||||
ingresses: IngressEntry[];
|
||||
} {
|
||||
if (!entries.length) {
|
||||
return { services: [], ingresses: [] };
|
||||
}
|
||||
const services: ServiceEntry[] = [];
|
||||
const ingresses: IngressEntry[] = [];
|
||||
|
||||
entries.forEach((entry) => {
|
||||
const kind = entry.kind?.toLowerCase();
|
||||
const looksLikeIngress =
|
||||
kind === "ingress" ||
|
||||
(!!entry.hosts && entry.hosts.length > 0) ||
|
||||
(!!entry.tls && entry.tls.length > 0);
|
||||
const looksLikeService =
|
||||
kind === "service" ||
|
||||
(!!entry.ports && entry.ports.length > 0) ||
|
||||
!!entry.clusterIP ||
|
||||
!!entry.type;
|
||||
|
||||
if (kind === "ingress" || (looksLikeIngress && !looksLikeService)) {
|
||||
ingresses.push(mapIngressEntry(entry));
|
||||
} else {
|
||||
services.push(mapServiceEntry(entry));
|
||||
}
|
||||
});
|
||||
|
||||
return { services, ingresses };
|
||||
}
|
||||
|
||||
function mapServiceEntry(entry: InstanceEntry): ServiceEntry {
|
||||
return {
|
||||
name: entry.name,
|
||||
namespace: entry.namespace,
|
||||
type: entry.type,
|
||||
cluster_ip: entry.clusterIP,
|
||||
external_ips: entry.externalIPs,
|
||||
ports: entry.ports?.map((port) => ({
|
||||
name: port.name,
|
||||
protocol: port.protocol,
|
||||
port: port.port ?? port.targetPort,
|
||||
target_port: port.targetPort ?? port.port,
|
||||
node_port: port.nodePort,
|
||||
})),
|
||||
loadBalancer: mapLoadBalancer(entry.loadBalancerIngress),
|
||||
};
|
||||
}
|
||||
|
||||
function mapIngressEntry(entry: InstanceEntry): IngressEntry {
|
||||
return {
|
||||
name: entry.name,
|
||||
namespace: entry.namespace,
|
||||
class_name: entry.type,
|
||||
rules: entry.hosts?.map((host) => ({
|
||||
host: host.host,
|
||||
paths: host.paths?.map((path) => ({
|
||||
path: path.path,
|
||||
backend: {
|
||||
service: {
|
||||
name: path.serviceName,
|
||||
port: normalizePort(path.servicePort),
|
||||
},
|
||||
},
|
||||
})),
|
||||
})),
|
||||
tls: entry.tls?.map((tls) => ({
|
||||
hosts: tls.hosts,
|
||||
secret_name: tls.secretName,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
function mapLoadBalancer(values?: string[]) {
|
||||
if (!values || !values.length) {
|
||||
return undefined;
|
||||
}
|
||||
return {
|
||||
ingress: values.map((value) => {
|
||||
if (!value) {
|
||||
return {};
|
||||
}
|
||||
const hasAlpha = /[a-zA-Z]/.test(value);
|
||||
if (hasAlpha) {
|
||||
return { hostname: value };
|
||||
}
|
||||
return { ip: value };
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
function normalizePort(port?: string | number | null): number | string | undefined {
|
||||
if (port == null) {
|
||||
return undefined;
|
||||
}
|
||||
if (typeof port === "number") {
|
||||
return port;
|
||||
}
|
||||
const parsed = Number(port);
|
||||
if (!Number.isNaN(parsed)) {
|
||||
return parsed;
|
||||
}
|
||||
return port;
|
||||
}
|
||||
|
||||
interface EntriesModalProps {
|
||||
instance: InstanceResponse;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const EntriesModal: React.FC<EntriesModalProps> = ({ instance, onClose }) => {
|
||||
const { success } = useToast();
|
||||
const [entries, setEntries] = useState<InstanceEntries | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [copiedText, setCopiedText] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadEntries = async () => {
|
||||
if (!instance.clusterId || !instance.id) {
|
||||
setError("Instance identifier is missing");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await getInstanceEntries(instance.clusterId, instance.id);
|
||||
setEntries(data);
|
||||
} catch (err: unknown) {
|
||||
setError((err as Error).message || "Failed to load entries");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadEntries();
|
||||
}, [instance.clusterId, instance.id]);
|
||||
|
||||
const copyToClipboard = (text: string, label: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopiedText(text);
|
||||
success(`Copied ${label} to clipboard`);
|
||||
setTimeout(() => setCopiedText(null), 2000);
|
||||
};
|
||||
|
||||
const getSourceBadge = (source?: string) => {
|
||||
const badges = {
|
||||
kubernetes: { color: "bg-green-600/20 text-green-400 border-green-500/30", label: "Live from Kubernetes" },
|
||||
manifest: { color: "bg-blue-600/20 text-blue-400 border-blue-500/30", label: "From Helm Manifest" },
|
||||
notes: { color: "bg-yellow-600/20 text-yellow-400 border-yellow-500/30", label: "From Helm Notes" },
|
||||
none: { color: "bg-gray-600/20 text-gray-400 border-gray-500/30", label: "No Data Available" },
|
||||
};
|
||||
|
||||
const badge = badges[source as keyof typeof badges] || badges.none;
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium border ${badge.color}`}>
|
||||
<Info className="w-3 h-3" />
|
||||
{badge.label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const renderService = (service: ServiceEntry, index: number) => (
|
||||
<div key={service.name || `service-${index}`} className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white">{service.name || `Service ${index + 1}`}</h4>
|
||||
<p className="text-xs text-gray-400 mt-1">Type: {service.type || 'Unknown'}</p>
|
||||
</div>
|
||||
<span className="px-2 py-1 text-xs font-medium bg-blue-600/20 text-blue-400 border border-blue-500/30 rounded">
|
||||
{service.type || 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* Cluster IP */}
|
||||
{service.cluster_ip && (
|
||||
<div className="flex items-center justify-between bg-gray-900/50 rounded p-2">
|
||||
<span className="text-xs text-gray-400">Cluster IP:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-mono text-white">{service.cluster_ip}</span>
|
||||
<button
|
||||
onClick={() => copyToClipboard(service.cluster_ip!, "Cluster IP")}
|
||||
className="p-1 hover:bg-gray-700 rounded transition"
|
||||
>
|
||||
{copiedText === service.cluster_ip ? (
|
||||
<CheckCircle className="w-3 h-3 text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-3 h-3 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ports */}
|
||||
{service.ports && service.ports.length > 0 && service.ports.map((port, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between bg-gray-900/50 rounded p-2">
|
||||
<span className="text-xs text-gray-400">{port.name || `Port ${idx + 1}`}:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-mono text-white">
|
||||
{port.port} → {port.target_port} {port.protocol || 'TCP'}
|
||||
{port.node_port && ` (NodePort: ${port.node_port})`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* LoadBalancer Status */}
|
||||
{service.loadBalancer?.ingress && service.loadBalancer.ingress.length > 0 && (
|
||||
<div className="mt-2 p-2 bg-green-600/10 border border-green-500/30 rounded">
|
||||
<p className="text-xs text-green-400 mb-2 font-medium">LoadBalancer Entries:</p>
|
||||
{service.loadBalancer.ingress.map((ing, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-mono text-white">
|
||||
{ing.ip || ing.hostname}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{ing.ip && (
|
||||
<>
|
||||
<a
|
||||
href={`http://${ing.ip}:${service.ports?.[0]?.port || 80}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1 hover:bg-gray-700 rounded transition"
|
||||
title="Open in browser"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3 text-blue-400" />
|
||||
</a>
|
||||
<button
|
||||
onClick={() => copyToClipboard(ing.ip!, "IP")}
|
||||
className="p-1 hover:bg-gray-700 rounded transition"
|
||||
>
|
||||
{copiedText === ing.ip ? (
|
||||
<CheckCircle className="w-3 h-3 text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-3 h-3 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderIngress = (ingress: IngressEntry, index: number) => (
|
||||
<div key={ingress.name || `ingress-${index}`} className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white">{ingress.name || `Ingress ${index + 1}`}</h4>
|
||||
{ingress.class_name && (
|
||||
<p className="text-xs text-gray-400 mt-1">Class: {ingress.class_name}</p>
|
||||
)}
|
||||
</div>
|
||||
<Globe className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{ingress.rules?.map((rule, ruleIdx) => (
|
||||
<div key={ruleIdx} className="bg-gray-900/50 rounded p-3 space-y-2">
|
||||
{(() => {
|
||||
const host = rule.host;
|
||||
if (!host) return null;
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-white">{host}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href={`https://${host}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-1 hover:bg-gray-700 rounded transition"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3 text-blue-400" />
|
||||
</a>
|
||||
<button
|
||||
onClick={() => copyToClipboard(host, "Host")}
|
||||
className="p-1 hover:bg-gray-700 rounded transition"
|
||||
>
|
||||
{copiedText === host ? (
|
||||
<CheckCircle className="w-3 h-3 text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-3 h-3 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{rule.paths?.map((path, pathIdx) => {
|
||||
const serviceName = path.backend?.service?.name || "service";
|
||||
const servicePort = path.backend?.service?.port ?? "-";
|
||||
return (
|
||||
<div key={pathIdx} className="text-xs text-gray-400 ml-4">
|
||||
• {path.path || '/'} → {serviceName}:{servicePort}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{ingress.tls && ingress.tls.length > 0 && (
|
||||
<div className="mt-2 p-2 bg-blue-600/10 border border-blue-500/30 rounded">
|
||||
<p className="text-xs text-blue-400 font-medium">🔒 TLS Enabled</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-lg max-w-4xl w-full max-h-[90vh] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-700">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">Instance Entries</h2>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
{instance.name} ({instance.namespace})
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-800 rounded-lg transition"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
|
||||
<span className="ml-3 text-gray-400">Loading entries...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-red-400">{error}</p>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="mt-4 px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
) : entries ? (
|
||||
<div className="space-y-6">
|
||||
{/* Source Badge */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-400">Data Source:</h3>
|
||||
{getSourceBadge(entries.source)}
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
{entries.services && entries.services.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Network className="w-5 h-5 text-blue-400" />
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
Services ({entries.services.length})
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{entries.services.map(renderService)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ingresses */}
|
||||
{entries.ingresses && entries.ingresses.length > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Globe className="w-5 h-5 text-purple-400" />
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
Ingresses ({entries.ingresses.length})
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{entries.ingresses.map(renderIngress)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Helm Notes (as fallback) */}
|
||||
{entries.notes && entries.source === "notes" && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-3">Helm Notes</h3>
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4">
|
||||
<pre className="text-xs text-gray-300 whitespace-pre-wrap font-mono">
|
||||
{entries.notes}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{(!entries.services || entries.services.length === 0) &&
|
||||
(!entries.ingresses || entries.ingresses.length === 0) &&
|
||||
!entries.notes && (
|
||||
<div className="text-center py-12">
|
||||
<Network className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400">No entries found for this instance</p>
|
||||
<p className="text-xs text-gray-500 mt-2">Data source: {entries.source || 'unknown'}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-gray-700 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,326 @@
|
||||
/**
|
||||
* Instance Card Component
|
||||
* Display instance information with action buttons
|
||||
*/
|
||||
import React from "react";
|
||||
import {
|
||||
Package,
|
||||
Settings,
|
||||
StopCircle,
|
||||
RefreshCw,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
Network,
|
||||
Box,
|
||||
Calendar,
|
||||
GitBranch,
|
||||
Layers,
|
||||
AlertTriangle,
|
||||
History,
|
||||
HelpCircle,
|
||||
} from "lucide-react";
|
||||
import type { InstanceResponse, InstanceStatus } from "@/api";
|
||||
import { INSTANCE_LAST_OPERATION, INSTANCE_STATUS } from "@/api";
|
||||
|
||||
interface InstanceCardProps {
|
||||
instance: InstanceResponse;
|
||||
onModify: (instance: InstanceResponse) => void;
|
||||
onTerminate: (instance: InstanceResponse) => void;
|
||||
onRefresh: (instance: InstanceResponse) => void;
|
||||
onViewEntries: (instance: InstanceResponse) => void;
|
||||
}
|
||||
|
||||
type StatusVisual = {
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
color: string;
|
||||
bg: string;
|
||||
glow: string;
|
||||
label: string;
|
||||
defaultReason: string;
|
||||
};
|
||||
|
||||
const STATUS_INFO_MAP: Record<InstanceStatus, StatusVisual> = {
|
||||
[INSTANCE_STATUS.deployed]: {
|
||||
icon: CheckCircle,
|
||||
color: "text-emerald-400",
|
||||
bg: "bg-gradient-to-r from-emerald-500/20 to-green-500/20 border-emerald-500/40",
|
||||
glow: "shadow-emerald-500/20",
|
||||
label: "Deployed",
|
||||
defaultReason: "Deployment completed successfully.",
|
||||
},
|
||||
[INSTANCE_STATUS.failed]: {
|
||||
icon: XCircle,
|
||||
color: "text-rose-400",
|
||||
bg: "bg-gradient-to-r from-rose-500/20 to-red-500/20 border-rose-500/40",
|
||||
glow: "shadow-rose-500/20",
|
||||
label: "Failed",
|
||||
defaultReason: "Last operation reported a failure.",
|
||||
},
|
||||
[INSTANCE_STATUS["pending-install"]]: {
|
||||
icon: Clock,
|
||||
color: "text-amber-400",
|
||||
bg: "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border-amber-500/40",
|
||||
glow: "shadow-amber-500/20",
|
||||
label: "Pending Install",
|
||||
defaultReason: "Installation is in progress.",
|
||||
},
|
||||
[INSTANCE_STATUS["pending-upgrade"]]: {
|
||||
icon: Clock,
|
||||
color: "text-amber-400",
|
||||
bg: "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border-amber-500/40",
|
||||
glow: "shadow-amber-500/20",
|
||||
label: "Pending Upgrade",
|
||||
defaultReason: "Upgrade is in progress.",
|
||||
},
|
||||
[INSTANCE_STATUS["pending-rollback"]]: {
|
||||
icon: Clock,
|
||||
color: "text-amber-400",
|
||||
bg: "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 border-amber-500/40",
|
||||
glow: "shadow-amber-500/20",
|
||||
label: "Pending Rollback",
|
||||
defaultReason: "Rollback is in progress.",
|
||||
},
|
||||
[INSTANCE_STATUS["pending-delete"]]: {
|
||||
icon: Clock,
|
||||
color: "text-orange-400",
|
||||
bg: "bg-gradient-to-r from-orange-500/20 to-red-500/20 border-orange-500/40",
|
||||
glow: "shadow-orange-500/20",
|
||||
label: "Pending Delete",
|
||||
defaultReason: "Deletion is in progress.",
|
||||
},
|
||||
[INSTANCE_STATUS.superseded]: {
|
||||
icon: History,
|
||||
color: "text-indigo-300",
|
||||
bg: "bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border-indigo-500/40",
|
||||
glow: "shadow-indigo-500/20",
|
||||
label: "Superseded",
|
||||
defaultReason: "A newer revision has replaced this instance.",
|
||||
},
|
||||
[INSTANCE_STATUS.uninstalled]: {
|
||||
icon: StopCircle,
|
||||
color: "text-slate-300",
|
||||
bg: "bg-gradient-to-r from-slate-500/20 to-gray-500/20 border-slate-500/40",
|
||||
glow: "shadow-slate-500/20",
|
||||
label: "Uninstalled",
|
||||
defaultReason: "Instance has been removed from the cluster.",
|
||||
},
|
||||
[INSTANCE_STATUS.unknown]: {
|
||||
icon: HelpCircle,
|
||||
color: "text-slate-300",
|
||||
bg: "bg-gradient-to-r from-slate-500/20 to-gray-500/20 border-slate-500/40",
|
||||
glow: "shadow-slate-500/20",
|
||||
label: "Unknown",
|
||||
defaultReason: "Awaiting next state update.",
|
||||
},
|
||||
};
|
||||
|
||||
const LAST_OPERATION_LABELS: Record<string, string> = {
|
||||
[INSTANCE_LAST_OPERATION.install]: "Install",
|
||||
[INSTANCE_LAST_OPERATION.upgrade]: "Upgrade",
|
||||
[INSTANCE_LAST_OPERATION.rollback]: "Rollback",
|
||||
[INSTANCE_LAST_OPERATION.delete]: "Delete",
|
||||
[INSTANCE_LAST_OPERATION.sync]: "Sync",
|
||||
};
|
||||
|
||||
function toTitleCase(value: string): string {
|
||||
return value
|
||||
.split(/[\s-]+/)
|
||||
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
export const InstanceCard: React.FC<InstanceCardProps> = ({
|
||||
instance,
|
||||
onModify,
|
||||
onTerminate,
|
||||
onRefresh,
|
||||
onViewEntries,
|
||||
}) => {
|
||||
const normalizedStatus = (instance.status ?? INSTANCE_STATUS.unknown) as InstanceStatus;
|
||||
const statusInfo =
|
||||
STATUS_INFO_MAP[normalizedStatus] ?? STATUS_INFO_MAP[INSTANCE_STATUS.unknown];
|
||||
const StatusIcon = statusInfo.icon;
|
||||
const statusLabel = statusInfo.label.toUpperCase();
|
||||
const instanceName = instance.name || "Unnamed Instance";
|
||||
const repository = instance.repository || "unknown";
|
||||
const version = instance.version || "latest";
|
||||
const namespace = instance.namespace || "default";
|
||||
const revision = instance.revision ?? "-";
|
||||
const createdAtText = instance.createdAt
|
||||
? new Date(instance.createdAt).toLocaleDateString()
|
||||
: "N/A";
|
||||
const statusReason =
|
||||
typeof instance.statusReason === "string" && instance.statusReason.trim().length > 0
|
||||
? instance.statusReason.trim()
|
||||
: statusInfo.defaultReason;
|
||||
const rawOperation =
|
||||
typeof instance.lastOperation === "string" ? instance.lastOperation.trim() : "";
|
||||
const lastOperationLabel =
|
||||
rawOperation.length > 0
|
||||
? LAST_OPERATION_LABELS[rawOperation] ?? toTitleCase(rawOperation)
|
||||
: null;
|
||||
const lastError =
|
||||
typeof instance.lastError === "string" ? instance.lastError.trim() : "";
|
||||
|
||||
return (
|
||||
<div className="group relative bg-gradient-to-br from-slate-800/80 via-slate-800/50 to-slate-900/80 border border-slate-700/50 rounded-xl hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300 overflow-hidden">
|
||||
{/* Decorative gradient overlay */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/5 to-purple-500/5 rounded-full blur-3xl -z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
{/* Header with enhanced design */}
|
||||
<div className="relative px-6 py-5 border-b border-slate-700/50 bg-gradient-to-r from-slate-800/30 to-transparent">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
{/* Enhanced icon with glow effect */}
|
||||
<div className="relative p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-xl border border-blue-500/30 shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow duration-300">
|
||||
<Box className="w-7 h-7 text-blue-400" />
|
||||
<div className="absolute inset-0 bg-blue-400/10 rounded-xl blur-sm"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300 truncate">
|
||||
{instanceName}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Package className="w-4 h-4 text-slate-400" />
|
||||
<p className="text-sm text-slate-400 font-mono">
|
||||
{repository}
|
||||
</p>
|
||||
<span className="text-slate-600">•</span>
|
||||
<span className="px-2 py-0.5 text-xs font-semibold text-cyan-400 bg-cyan-500/10 border border-cyan-500/30 rounded">
|
||||
{version}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Status Badge with glow */}
|
||||
<div
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-full border shadow-lg ${statusInfo.bg} ${statusInfo.glow} backdrop-blur-sm`}
|
||||
>
|
||||
<StatusIcon className={`w-4 h-4 ${statusInfo.color}`} />
|
||||
<span className={`text-sm font-semibold ${statusInfo.color} uppercase tracking-wide`}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-1 text-sm text-slate-300">
|
||||
<span className="font-medium text-slate-200">{statusReason}</span>
|
||||
{lastOperationLabel && (
|
||||
<span className="text-xs uppercase tracking-wide text-slate-400">
|
||||
Operation: {lastOperationLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Content Grid */}
|
||||
<div className="relative px-6 py-5 space-y-4 bg-gradient-to-b from-transparent to-slate-900/30">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Namespace */}
|
||||
<div className="p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-purple-500/30 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Layers className="w-4 h-4 text-purple-400" />
|
||||
<p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Namespace</p>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-white">
|
||||
{namespace}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Revision */}
|
||||
<div className="p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-green-500/30 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<GitBranch className="w-4 h-4 text-green-400" />
|
||||
<p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Revision</p>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-white">
|
||||
{revision}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Repository - Full Width */}
|
||||
<div className="col-span-2 p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-blue-500/30 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Package className="w-4 h-4 text-blue-400" />
|
||||
<p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Repository</p>
|
||||
</div>
|
||||
<p className="text-sm font-mono text-white truncate" title={repository}>
|
||||
{repository}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Launched Date - Full Width */}
|
||||
<div className="col-span-2 p-3 bg-slate-800/50 border border-slate-700/50 rounded-lg hover:border-amber-500/30 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Calendar className="w-4 h-4 text-amber-400" />
|
||||
<p className="text-xs text-slate-400 uppercase font-semibold tracking-wider">Launched</p>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-white">
|
||||
{createdAtText}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{lastError && (
|
||||
<div className="flex items-start gap-3 p-4 border border-rose-500/30 bg-rose-500/10 rounded-lg">
|
||||
<div className="p-2 bg-rose-500/20 rounded-lg border border-rose-500/40">
|
||||
<AlertTriangle className="w-5 h-5 text-rose-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-rose-200">Last error</p>
|
||||
<p className="text-sm text-rose-100/90">{lastError}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Enhanced Actions Bar */}
|
||||
<div className="relative px-6 py-4 bg-gradient-to-r from-slate-900/80 via-slate-900/50 to-slate-900/80 border-t border-slate-700/50 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onRefresh(instance)}
|
||||
className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-slate-300 bg-slate-700/50 hover:bg-slate-600/50 rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg border border-slate-600/50 hover:border-slate-500"
|
||||
title="Refresh status"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4 group-hover/btn:rotate-180 transition-transform duration-500" />
|
||||
Refresh
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onViewEntries(instance)}
|
||||
className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-emerald-300 bg-gradient-to-r from-emerald-600/20 to-green-600/20 border border-emerald-500/40 rounded-lg hover:from-emerald-600/30 hover:to-green-600/30 hover:border-emerald-500/60 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/20"
|
||||
title="View service entries"
|
||||
>
|
||||
<Network className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
|
||||
Entries
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onModify(instance)}
|
||||
className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-blue-300 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 border border-blue-500/40 rounded-lg hover:from-blue-600/30 hover:to-cyan-600/30 hover:border-blue-500/60 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/20"
|
||||
title="Modify instance configuration"
|
||||
>
|
||||
<Settings className="w-4 h-4 group-hover/btn:rotate-90 transition-transform duration-300" />
|
||||
Modify
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onTerminate(instance)}
|
||||
className="group/btn inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-rose-300 bg-gradient-to-r from-rose-600/20 to-red-600/20 border border-rose-500/40 rounded-lg hover:from-rose-600/30 hover:to-red-600/30 hover:border-rose-500/60 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-rose-500/20"
|
||||
title="Terminate instance"
|
||||
>
|
||||
<StopCircle className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
|
||||
Terminate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,326 @@
|
||||
/**
|
||||
* Modify Modal Component
|
||||
* Modal for modifying an instance configuration
|
||||
* Supports Values Schema for dynamic form generation
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Settings } from "lucide-react";
|
||||
import type { InstanceResponse, UpdateInstanceRequest } from "@/api";
|
||||
import { getValuesSchema } from "@/api";
|
||||
import {
|
||||
Modal,
|
||||
Button,
|
||||
FormField,
|
||||
Input,
|
||||
Textarea,
|
||||
Checkbox,
|
||||
ErrorState,
|
||||
LoadingState,
|
||||
Badge,
|
||||
SchemaFormGenerator
|
||||
} from "@/shared/components";
|
||||
import type { JsonSchema } from "@/shared/components/form/SchemaFormGenerator";
|
||||
|
||||
interface ModifyModalProps {
|
||||
instance: InstanceResponse;
|
||||
onClose: () => void;
|
||||
onConfirm: (clusterId: string, instanceId: string, data: UpdateInstanceRequest) => Promise<void>;
|
||||
}
|
||||
|
||||
export const ModifyModal: React.FC<ModifyModalProps> = ({
|
||||
instance,
|
||||
onClose,
|
||||
onConfirm,
|
||||
}) => {
|
||||
const [tag, setTag] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [valuesYaml, setValuesYaml] = useState("");
|
||||
const [wait, setWait] = useState(true);
|
||||
const [timeout, setTimeout_] = useState(300);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Values Schema support
|
||||
const [loadingSchema, setLoadingSchema] = useState(false);
|
||||
const [valuesSchema, setValuesSchema] = useState<JsonSchema | null>(null);
|
||||
const [inputMethod, setInputMethod] = useState<'form' | 'yaml'>('yaml');
|
||||
const [formValues, setFormValues] = useState<Record<string, any>>({});
|
||||
|
||||
// Initialize with current values
|
||||
useEffect(() => {
|
||||
setTag(instance.version || "");
|
||||
setDescription(""); // InstanceResponse doesn't have description field
|
||||
|
||||
// Parse existing values
|
||||
if (instance.values) {
|
||||
try {
|
||||
const parsedValues = typeof instance.values === 'string'
|
||||
? JSON.parse(instance.values)
|
||||
: instance.values;
|
||||
setFormValues(parsedValues);
|
||||
setValuesYaml(typeof parsedValues === 'object' ? JSON.stringify(parsedValues, null, 2) : String(parsedValues));
|
||||
} catch (err) {
|
||||
console.error('[ModifyModal] Failed to parse existing values:', err);
|
||||
setValuesYaml(String(instance.values) || "");
|
||||
}
|
||||
}
|
||||
|
||||
// Load values schema
|
||||
loadValuesSchema();
|
||||
}, [instance]);
|
||||
|
||||
const loadValuesSchema = async () => {
|
||||
if (!instance.registryId || !instance.repository || !instance.version) {
|
||||
setValuesSchema(null);
|
||||
setInputMethod('yaml');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingSchema(true);
|
||||
try {
|
||||
const schemaResponse = await getValuesSchema({
|
||||
registryId: instance.registryId,
|
||||
repositoryName: instance.repository,
|
||||
reference: instance.version,
|
||||
});
|
||||
const normalizedSchema = extractJsonSchema(schemaResponse);
|
||||
setValuesSchema(normalizedSchema);
|
||||
|
||||
if (normalizedSchema) {
|
||||
setInputMethod('form');
|
||||
console.log(`[ModifyModal] Loaded values schema with ${Object.keys(normalizedSchema.properties ?? {}).length} properties`);
|
||||
} else {
|
||||
setInputMethod('yaml');
|
||||
console.log('[ModifyModal] No values schema available, using YAML input');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[ModifyModal] Failed to load values schema:', err);
|
||||
setValuesSchema(null);
|
||||
setInputMethod('yaml');
|
||||
} finally {
|
||||
setLoadingSchema(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormValuesChange = (values: Record<string, any>) => {
|
||||
setFormValues(values);
|
||||
// Also update YAML representation
|
||||
setValuesYaml(JSON.stringify(values, null, 2));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const payload: UpdateInstanceRequest = {
|
||||
version: tag && tag !== instance.version ? tag : undefined,
|
||||
values: valuesYaml.trim() ? JSON.parse(valuesYaml) : undefined,
|
||||
};
|
||||
|
||||
if (!instance.clusterId || !instance.id) {
|
||||
setError("Instance identifier is missing");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await onConfirm(instance.clusterId, instance.id, payload);
|
||||
onClose();
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof SyntaxError) {
|
||||
setError("Invalid JSON/YAML values. Please fix the configuration.");
|
||||
} else {
|
||||
setError((err as Error).message || "Failed to modify instance");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
title={`Modify Instance - ${instance.name || "Unnamed"}`}
|
||||
icon={Settings}
|
||||
iconColor="text-blue-400"
|
||||
size="lg"
|
||||
footer={
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
icon={Settings}
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{loading ? "Modifying..." : "Modify"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Error Alert */}
|
||||
{error && (
|
||||
<ErrorState message={error} title="Modification Failed" />
|
||||
)}
|
||||
|
||||
{/* Current Info */}
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-2">
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-medium text-white">Current Version:</span> {instance.version || "N/A"}
|
||||
</p>
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-medium text-white">Cluster:</span> {instance.clusterId || "N/A"}
|
||||
</p>
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-medium text-white">Repository:</span> {instance.repository || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tag */}
|
||||
<FormField
|
||||
label="Version Tag"
|
||||
required
|
||||
help="Leave unchanged to keep current version"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
value={tag}
|
||||
onChange={(e) => setTag(e.target.value)}
|
||||
placeholder="e.g., v1.0.0"
|
||||
required
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{/* Description */}
|
||||
<FormField label="Description">
|
||||
<Input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Modification description"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{/* Values Configuration */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium text-gray-200">
|
||||
Configuration Values
|
||||
</label>
|
||||
{valuesSchema?.properties && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setInputMethod('form')}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Badge
|
||||
variant={inputMethod === 'form' ? 'success' : 'default'}
|
||||
size="sm"
|
||||
>
|
||||
Form
|
||||
</Badge>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setInputMethod('yaml')}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Badge
|
||||
variant={inputMethod === 'yaml' ? 'success' : 'default'}
|
||||
size="sm"
|
||||
>
|
||||
YAML
|
||||
</Badge>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loadingSchema ? (
|
||||
<LoadingState message="Loading configuration schema..." />
|
||||
) : inputMethod === 'form' && valuesSchema ? (
|
||||
<SchemaFormGenerator
|
||||
schema={valuesSchema}
|
||||
values={formValues}
|
||||
onChange={handleFormValuesChange}
|
||||
/>
|
||||
) : (
|
||||
<Textarea
|
||||
value={valuesYaml}
|
||||
onChange={(e) => setValuesYaml(e.target.value)}
|
||||
rows={12}
|
||||
placeholder="key: value nested: key: value"
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Options */}
|
||||
<div className="space-y-3">
|
||||
<Checkbox
|
||||
id="wait"
|
||||
checked={wait}
|
||||
onChange={(e) => setWait(e.target.checked)}
|
||||
label="Wait for all resources to be ready"
|
||||
/>
|
||||
|
||||
<FormField label="Timeout (seconds)">
|
||||
<Input
|
||||
type="number"
|
||||
value={timeout}
|
||||
onChange={(e) => setTimeout_(parseInt(e.target.value) || 300)}
|
||||
min={60}
|
||||
max={3600}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const isJsonSchemaObject = (value: unknown): value is JsonSchema =>
|
||||
typeof value === "object" && value !== null && !Array.isArray(value);
|
||||
|
||||
const extractJsonSchema = (schemaResponse: unknown): JsonSchema | null => {
|
||||
if (schemaResponse == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tryParse = (value: unknown): unknown => {
|
||||
if (typeof value === "string") {
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
let candidate: unknown = tryParse(schemaResponse);
|
||||
|
||||
if (candidate && typeof candidate === "object" && "schema" in (candidate as Record<string, unknown>)) {
|
||||
const inner = (candidate as { schema?: unknown }).schema;
|
||||
const normalizedInner = extractJsonSchema(inner);
|
||||
if (normalizedInner) {
|
||||
return normalizedInner;
|
||||
}
|
||||
}
|
||||
|
||||
if (isJsonSchemaObject(candidate)) {
|
||||
return candidate as JsonSchema;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
12
frontend/src/features/artifact/instances/index.ts
Normal file
12
frontend/src/features/artifact/instances/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Service Instances Feature
|
||||
* 服务实例管理功能
|
||||
*/
|
||||
|
||||
// Export pages
|
||||
export { default as InstancesManagementPage } from './pages/InstancesManagementPage';
|
||||
|
||||
// Export components
|
||||
export { InstanceCard } from './components/InstanceCard';
|
||||
export { ModifyModal } from './components/ModifyModal';
|
||||
|
||||
@ -0,0 +1,611 @@
|
||||
/**
|
||||
* Instances Management Page
|
||||
* Display and manage all Helm instances across clusters
|
||||
*/
|
||||
import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
|
||||
import { Package, RefreshCw, Boxes, Server } from "lucide-react";
|
||||
import { listClusters, listInstances, deleteInstance, updateInstance } from "@/api";
|
||||
import type { ClusterResponse, InstanceResponse, UpdateInstanceRequest } from "@/api";
|
||||
import type { Cluster, Instance } from "@/core/types";
|
||||
import {
|
||||
PageHeader,
|
||||
DropdownSelect,
|
||||
Button,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
EmptyState,
|
||||
} from "@/shared/components";
|
||||
import { useToast } from "@/shared";
|
||||
import { InstanceErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
import { InstanceCard } from "../components/InstanceCard";
|
||||
import { ModifyModal } from "../components/ModifyModal";
|
||||
import { EntriesModal } from "../components/EntriesModal";
|
||||
import { globalCache } from "@/shared/services/artifact-cache";
|
||||
|
||||
const AUTO_REFRESH_INTERVAL_MS = 30000;
|
||||
|
||||
type LoadDataMode = "initial" | "manual" | "auto";
|
||||
|
||||
interface LoadDataOptions {
|
||||
skipCache?: boolean;
|
||||
mode?: LoadDataMode;
|
||||
}
|
||||
|
||||
const InstancesManagementPage: React.FC = () => {
|
||||
const { success, error: toastError, info: toastInfo } = useToast();
|
||||
|
||||
const [clusters, setClusters] = useState<ClusterResponse[]>([]);
|
||||
const [instancesByCluster, setInstancesByCluster] = useState<
|
||||
Map<string, InstanceResponse[]>
|
||||
>(new Map());
|
||||
const [instanceTotals, setInstanceTotals] = useState<Map<string, number>>(new Map());
|
||||
const [selectedCluster, setSelectedCluster] = useState<string>("all");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Modals
|
||||
const [modifyInstance, setModifyInstance] = useState<Instance | null>(null);
|
||||
const [entriesInstance, setEntriesInstance] = useState<Instance | null>(null);
|
||||
|
||||
// 核心数据加载函数 - 使用全局缓存
|
||||
const loadDataCore = useCallback(async (options: LoadDataOptions = {}) => {
|
||||
const { skipCache = false, mode = "initial" } = options;
|
||||
const shouldShowLoading = mode === "initial";
|
||||
const shouldShowRefreshing = mode === "manual";
|
||||
|
||||
if (shouldShowRefreshing) {
|
||||
setRefreshing(true);
|
||||
} else if (shouldShowLoading) {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
// Load clusters with cache
|
||||
let clustersData: ClusterResponse[];
|
||||
if (!skipCache) {
|
||||
const cachedClusters = globalCache.get<ClusterResponse[]>('clusters');
|
||||
if (cachedClusters) {
|
||||
console.log('[InstancesManagementPage] Using cached clusters');
|
||||
clustersData = cachedClusters;
|
||||
} else {
|
||||
clustersData = await listClusters();
|
||||
globalCache.set('clusters', clustersData);
|
||||
}
|
||||
} else {
|
||||
clustersData = await listClusters();
|
||||
globalCache.set('clusters', clustersData);
|
||||
}
|
||||
const validClusters = clustersData.filter(
|
||||
(cluster): cluster is ClusterResponse & { id: string } =>
|
||||
typeof cluster.id === "string" && cluster.id.length > 0
|
||||
);
|
||||
setClusters(validClusters);
|
||||
|
||||
// Load instances for each cluster with cache
|
||||
const instancesMap = new Map<string, InstanceResponse[]>();
|
||||
const totalsMap = new Map<string, number>();
|
||||
for (const cluster of validClusters) {
|
||||
const clusterId = cluster.id;
|
||||
try {
|
||||
let normalized: NormalizedInstanceList;
|
||||
if (!skipCache) {
|
||||
const cachedInstances = globalCache.get<unknown>('instances', clusterId);
|
||||
if (cachedInstances) {
|
||||
normalized = normalizeInstanceList(cachedInstances);
|
||||
console.log(`[InstancesManagementPage] Using cached instances for ${cluster.name}`);
|
||||
if (!isNormalizedInstanceList(cachedInstances)) {
|
||||
globalCache.set('instances', normalized, clusterId);
|
||||
}
|
||||
} else {
|
||||
normalized = await fetchClusterInstances(clusterId);
|
||||
}
|
||||
} else {
|
||||
normalized = await fetchClusterInstances(clusterId);
|
||||
}
|
||||
instancesMap.set(clusterId, normalized.instances);
|
||||
totalsMap.set(clusterId, normalized.total);
|
||||
} catch (err) {
|
||||
console.error(`Failed to load instances for cluster ${cluster.name}:`, err);
|
||||
instancesMap.set(clusterId, []);
|
||||
totalsMap.set(clusterId, 0);
|
||||
}
|
||||
}
|
||||
setInstancesByCluster(instancesMap);
|
||||
setInstanceTotals(totalsMap);
|
||||
return null; // 成功返回 null
|
||||
} catch (err: unknown) {
|
||||
const errorMsg = (err as Error).message || "Failed to load data";
|
||||
setError(errorMsg);
|
||||
return errorMsg; // 返回错误消息
|
||||
} finally {
|
||||
if (shouldShowRefreshing) {
|
||||
setRefreshing(false);
|
||||
} else if (shouldShowLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, []); // 没有任何依赖！
|
||||
|
||||
// 初始加载 - 只执行一次
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
|
||||
const init = async () => {
|
||||
const error = await loadDataCore({ skipCache: false, mode: "initial" });
|
||||
if (mounted && error) {
|
||||
toastError(error);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [loadDataCore, toastError]); // loadDataCore 永远不会变化
|
||||
|
||||
// 手动刷新函数 - 带 toast 提示，清除缓存
|
||||
const loadData = useCallback(async () => {
|
||||
toastInfo("Refreshing instances...", {
|
||||
title: "Instances Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "instances-refresh",
|
||||
});
|
||||
globalCache.clearType("instances");
|
||||
const error = await loadDataCore({ skipCache: true, mode: "manual" }); // manual refresh mode
|
||||
if (error) {
|
||||
toastError(error);
|
||||
} else {
|
||||
success(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
}, [loadDataCore, toastError, toastInfo, success]);
|
||||
|
||||
const autoRefreshInFlight = useRef(false);
|
||||
|
||||
const autoRefresh = useCallback(async () => {
|
||||
if (loading || refreshing || autoRefreshInFlight.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
autoRefreshInFlight.current = true;
|
||||
const error = await loadDataCore({ skipCache: true, mode: "auto" });
|
||||
if (error) {
|
||||
console.warn("[InstancesManagementPage] Auto refresh failed:", error);
|
||||
}
|
||||
autoRefreshInFlight.current = false;
|
||||
}, [loading, refreshing, loadDataCore]);
|
||||
|
||||
useEffect(() => {
|
||||
const intervalId = window.setInterval(() => {
|
||||
void autoRefresh();
|
||||
}, AUTO_REFRESH_INTERVAL_MS);
|
||||
|
||||
return () => {
|
||||
window.clearInterval(intervalId);
|
||||
};
|
||||
}, [autoRefresh]);
|
||||
|
||||
const handleRefresh = useCallback(async (instance: Instance) => {
|
||||
const clusterId = instance.clusterId;
|
||||
if (!clusterId) {
|
||||
toastError("Cluster ID is missing");
|
||||
return;
|
||||
}
|
||||
|
||||
toastInfo(`Refreshing status for "${instance.name || "instance"}"...`, {
|
||||
title: "Instance Status",
|
||||
durationMs: 1800,
|
||||
mergeKey: `instance-refresh-${instance.id || clusterId}`,
|
||||
});
|
||||
|
||||
try {
|
||||
const normalized = await fetchClusterInstances(clusterId);
|
||||
setInstancesByCluster((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.set(clusterId, normalized.instances);
|
||||
return next;
|
||||
});
|
||||
setInstanceTotals((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.set(clusterId, normalized.total);
|
||||
return next;
|
||||
});
|
||||
success(SuccessMessages.INSTANCE_STATUS_REFRESHED);
|
||||
} catch (err: unknown) {
|
||||
toastError(formatApiError(err) || InstanceErrors.STATUS_FETCH_FAILED);
|
||||
}
|
||||
}, [success, toastError, toastInfo]);
|
||||
|
||||
const handleModify = useCallback((instance: Instance) => {
|
||||
setModifyInstance(instance);
|
||||
}, []);
|
||||
|
||||
const handleViewEntries = useCallback((instance: Instance) => {
|
||||
setEntriesInstance(instance);
|
||||
}, []);
|
||||
|
||||
const handleModifyConfirm = useCallback(async (
|
||||
clusterId: string,
|
||||
instanceId: string,
|
||||
data: UpdateInstanceRequest
|
||||
) => {
|
||||
toastInfo("Applying instance update...", {
|
||||
title: "Update Instance",
|
||||
durationMs: 1800,
|
||||
mergeKey: `instance-update-${instanceId}`,
|
||||
});
|
||||
try {
|
||||
await updateInstance({ clusterId, instanceId }, data);
|
||||
success(SuccessMessages.INSTANCE_UPGRADED);
|
||||
await loadData();
|
||||
} catch (err: unknown) {
|
||||
const errorMsg = formatApiError(err) || InstanceErrors.UPDATE_FAILED;
|
||||
toastError(errorMsg);
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
}, [toastInfo, success, loadData, toastError]);
|
||||
|
||||
const handleTerminate = useCallback(async (instance: Instance) => {
|
||||
if (
|
||||
!confirm(
|
||||
`Are you sure you want to terminate instance "${instance.name}"? This action cannot be undone.`
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!instance.clusterId || !instance.id) {
|
||||
toastError("Instance ID or Cluster ID is missing");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
toastInfo(`Terminating "${instance.name || "instance"}"...`, {
|
||||
title: "Terminate Instance",
|
||||
durationMs: 1800,
|
||||
mergeKey: `instance-terminate-${instance.id || instance.clusterId}`,
|
||||
});
|
||||
await deleteInstance({ clusterId: instance.clusterId, instanceId: instance.id });
|
||||
success(SuccessMessages.INSTANCE_DELETED);
|
||||
await loadData();
|
||||
} catch (err: unknown) {
|
||||
toastError(formatApiError(err) || InstanceErrors.DELETE_FAILED);
|
||||
}
|
||||
}, [success, toastError, loadData, toastInfo]);
|
||||
|
||||
// Get filtered instances - memoized to avoid recalculation on every render
|
||||
const filteredInstances = useMemo((): Array<{ cluster: Cluster; instance: Instance }> => {
|
||||
const result: Array<{ cluster: Cluster; instance: Instance }> = [];
|
||||
|
||||
clusters.forEach((cluster) => {
|
||||
const clusterId = cluster.id;
|
||||
if (!clusterId) {
|
||||
return;
|
||||
}
|
||||
if (selectedCluster !== "all" && clusterId !== selectedCluster) {
|
||||
return;
|
||||
}
|
||||
|
||||
const instances = instancesByCluster.get(clusterId) || [];
|
||||
instances.forEach((instance) => {
|
||||
result.push({ cluster, instance });
|
||||
});
|
||||
});
|
||||
|
||||
return result;
|
||||
}, [clusters, selectedCluster, instancesByCluster]);
|
||||
|
||||
// Calculate total instances - memoized
|
||||
const totalInstances = useMemo(() => {
|
||||
if (instanceTotals.size > 0) {
|
||||
return Array.from(instanceTotals.values()).reduce((sum, total) => sum + total, 0);
|
||||
}
|
||||
return Array.from(instancesByCluster.values()).reduce(
|
||||
(sum, instances) => sum + instances.length,
|
||||
0
|
||||
);
|
||||
}, [instanceTotals, instancesByCluster]);
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title="Artifact - Instances"
|
||||
description="Manage service instances across clusters"
|
||||
icon={Boxes}
|
||||
iconColor="text-green-400"
|
||||
actions={
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={loadData}
|
||||
loading={refreshing}
|
||||
spinIcon={true}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Enhanced Stats with gradient cards */}
|
||||
{!loading && clusters.length > 0 && (
|
||||
<div className={`grid grid-cols-1 gap-5 mb-8 ${
|
||||
clusters.length > 1 ? 'md:grid-cols-3' : 'md:grid-cols-2'
|
||||
}`}>
|
||||
<div className="relative group overflow-hidden bg-gradient-to-br from-blue-900/40 via-blue-800/30 to-blue-900/40 border border-blue-500/30 rounded-xl p-6 hover:border-blue-400/50 hover:shadow-xl hover:shadow-blue-500/20 transition-all duration-300">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-all"></div>
|
||||
<div className="relative flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-300 uppercase tracking-wider mb-2">Total Instances</p>
|
||||
<p className="text-4xl font-bold text-white">{totalInstances}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-blue-500/20 rounded-xl border border-blue-400/30 shadow-lg shadow-blue-500/30">
|
||||
<Package className="w-8 h-8 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative group overflow-hidden bg-gradient-to-br from-emerald-900/40 via-emerald-800/30 to-green-900/40 border border-emerald-500/30 rounded-xl p-6 hover:border-emerald-400/50 hover:shadow-xl hover:shadow-emerald-500/20 transition-all duration-300">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl group-hover:bg-emerald-500/20 transition-all"></div>
|
||||
<div className="relative flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-emerald-300 uppercase tracking-wider mb-2">Clusters</p>
|
||||
<p className="text-4xl font-bold text-white">{clusters.length}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-emerald-500/20 rounded-xl border border-emerald-400/30 shadow-lg shadow-emerald-500/30">
|
||||
<Server className="w-8 h-8 text-emerald-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Only show Filtered when there are multiple clusters */}
|
||||
{clusters.length > 1 && (
|
||||
<div className="relative group overflow-hidden bg-gradient-to-br from-purple-900/40 via-purple-800/30 to-purple-900/40 border border-purple-500/30 rounded-xl p-6 hover:border-purple-400/50 hover:shadow-xl hover:shadow-purple-500/20 transition-all duration-300">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl group-hover:bg-purple-500/20 transition-all"></div>
|
||||
<div className="relative flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-purple-300 uppercase tracking-wider mb-2">Showing</p>
|
||||
<p className="text-4xl font-bold text-white">{filteredInstances.length}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-purple-500/20 rounded-xl border border-purple-400/30 shadow-lg shadow-purple-500/30">
|
||||
<Boxes className="w-8 h-8 text-purple-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced Filters */}
|
||||
{clusters.length > 1 && (
|
||||
<div className="mb-6 p-5 bg-gradient-to-r from-slate-800/50 via-slate-800/30 to-slate-800/50 border border-slate-700/50 rounded-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg border border-cyan-500/30">
|
||||
<Server className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
<label className="text-sm font-semibold text-slate-300">
|
||||
Filter by Cluster:
|
||||
</label>
|
||||
</div>
|
||||
<DropdownSelect
|
||||
value={selectedCluster}
|
||||
onChange={(value) => setSelectedCluster(value)}
|
||||
options={[
|
||||
{ value: "all", label: "All Clusters" },
|
||||
...clusters
|
||||
.filter((cluster): cluster is ClusterResponse & { id: string } => Boolean(cluster.id))
|
||||
.map((cluster) => {
|
||||
const instanceCount = instancesByCluster.get(cluster.id)?.length || 0;
|
||||
return {
|
||||
value: cluster.id,
|
||||
label: `${cluster.name || 'Unknown'} (${instanceCount} instances)`,
|
||||
};
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div>
|
||||
{loading ? (
|
||||
<LoadingState message="Loading instances..." />
|
||||
) : error ? (
|
||||
<ErrorState
|
||||
message={error}
|
||||
onRetry={loadData}
|
||||
/>
|
||||
) : filteredInstances.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Package}
|
||||
title="No instances found"
|
||||
description="Launch your first service instance from Artifact Registries"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Group by cluster if showing all */}
|
||||
{selectedCluster === "all" ? (
|
||||
clusters.map((cluster, index) => {
|
||||
const clusterId = cluster.id;
|
||||
if (!clusterId) return null;
|
||||
const instances = instancesByCluster.get(clusterId) || [];
|
||||
if (instances.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={clusterId || `cluster-${index}`} className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<div className="p-2.5 bg-gradient-to-br from-emerald-500/20 to-green-500/20 rounded-lg border border-emerald-500/30 shadow-lg shadow-emerald-500/10">
|
||||
<Server className="w-5 h-5 text-emerald-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
{cluster.name || "Unnamed Cluster"}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-400 mt-0.5">
|
||||
{instances.length} {instances.length === 1 ? 'instance' : 'instances'} running
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{instances.map((instance) => (
|
||||
<InstanceCard
|
||||
key={instance.id}
|
||||
instance={instance}
|
||||
onModify={handleModify}
|
||||
onTerminate={handleTerminate}
|
||||
onRefresh={handleRefresh}
|
||||
onViewEntries={handleViewEntries}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{filteredInstances.map(({ instance }) => (
|
||||
<InstanceCard
|
||||
key={instance.id}
|
||||
instance={instance}
|
||||
onModify={handleModify}
|
||||
onTerminate={handleTerminate}
|
||||
onRefresh={handleRefresh}
|
||||
onViewEntries={handleViewEntries}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{modifyInstance && (
|
||||
<ModifyModal
|
||||
instance={modifyInstance}
|
||||
onClose={() => setModifyInstance(null)}
|
||||
onConfirm={handleModifyConfirm}
|
||||
/>
|
||||
)}
|
||||
|
||||
{entriesInstance && (
|
||||
<EntriesModal
|
||||
instance={entriesInstance}
|
||||
onClose={() => setEntriesInstance(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstancesManagementPage;
|
||||
|
||||
async function fetchClusterInstances(clusterId: string): Promise<NormalizedInstanceList> {
|
||||
const response = await listInstances({ clusterId });
|
||||
const normalized = normalizeInstanceList(response);
|
||||
globalCache.set('instances', normalized, clusterId);
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function normalizeInstanceList(raw: unknown): NormalizedInstanceList {
|
||||
if (Array.isArray(raw)) {
|
||||
return {
|
||||
instances: raw as InstanceResponse[],
|
||||
total: raw.length,
|
||||
};
|
||||
}
|
||||
|
||||
if (raw && typeof raw === "object") {
|
||||
const payload = raw as InstanceListPayloadWithMeta;
|
||||
const direct = extractInstancesFromPayload(payload);
|
||||
if (direct) {
|
||||
return direct;
|
||||
}
|
||||
|
||||
if (payload.data !== undefined) {
|
||||
const nested = normalizeInstanceList(payload.data);
|
||||
return {
|
||||
instances: nested.instances,
|
||||
total: pickTotalValue(payload.total, payload.meta, nested.total),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return { instances: [], total: 0 };
|
||||
}
|
||||
|
||||
function extractInstancesFromPayload(payload: InstanceListPayloadWithMeta): NormalizedInstanceList | null {
|
||||
if (Array.isArray(payload.instances)) {
|
||||
const instances = payload.instances as InstanceResponse[];
|
||||
return {
|
||||
instances,
|
||||
total: pickTotalValue(payload.total, payload.meta, instances.length),
|
||||
};
|
||||
}
|
||||
|
||||
if (Array.isArray(payload.items)) {
|
||||
const instances = payload.items as InstanceResponse[];
|
||||
return {
|
||||
instances,
|
||||
total: pickTotalValue(payload.total, payload.meta, instances.length),
|
||||
};
|
||||
}
|
||||
|
||||
if (payload.data && typeof payload.data === "object") {
|
||||
return extractInstancesFromPayload(payload.data as InstanceListPayloadWithMeta);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function pickTotalValue(totalValue: unknown, metaValue: unknown, fallback: number): number {
|
||||
if (typeof totalValue === "number" && Number.isFinite(totalValue)) {
|
||||
return totalValue;
|
||||
}
|
||||
|
||||
const metaTotal = getMetaTotal(metaValue);
|
||||
if (typeof metaTotal === "number") {
|
||||
return metaTotal;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function getMetaTotal(metaValue: unknown): number | undefined {
|
||||
if (metaValue && typeof metaValue === "object") {
|
||||
const meta = metaValue as Record<string, unknown>;
|
||||
if (typeof meta.total === "number") {
|
||||
return meta.total;
|
||||
}
|
||||
if (typeof meta.count === "number") {
|
||||
return meta.count;
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function isNormalizedInstanceList(data: unknown): data is NormalizedInstanceList {
|
||||
return (
|
||||
!!data &&
|
||||
typeof data === "object" &&
|
||||
Array.isArray((data as NormalizedInstanceList).instances) &&
|
||||
typeof (data as NormalizedInstanceList).total === "number"
|
||||
);
|
||||
}
|
||||
|
||||
type InstanceListPayloadWithMeta = {
|
||||
instances?: unknown;
|
||||
items?: unknown;
|
||||
data?: unknown;
|
||||
total?: unknown;
|
||||
meta?: unknown;
|
||||
};
|
||||
|
||||
interface NormalizedInstanceList {
|
||||
instances: InstanceResponse[];
|
||||
total: number;
|
||||
}
|
||||
@ -0,0 +1,396 @@
|
||||
/**
|
||||
* Launch Modal Component
|
||||
* Launch service instance from artifact
|
||||
* Supports Values Schema for dynamic form generation
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Rocket, AlertCircle, FileCode, FormInput } from "lucide-react";
|
||||
import { useToast } from "@/shared";
|
||||
import { createInstance, listClusters, getValuesSchema } from "@/api";
|
||||
import type { CreateInstanceRequest, ClusterResponse } from "@/api";
|
||||
import { ClusterErrors, InstanceErrors, SuccessMessages, ValidationErrors, formatApiError } from "@/shared/utils";
|
||||
import {
|
||||
Modal,
|
||||
Button,
|
||||
FormField,
|
||||
Input,
|
||||
DropdownSelect,
|
||||
Textarea,
|
||||
LoadingState,
|
||||
Badge,
|
||||
SchemaFormGenerator
|
||||
} from "@/shared/components";
|
||||
import type { ArtifactCategory } from "../utils/artifactType";
|
||||
import type { JsonSchema } from "@/shared/components/form/SchemaFormGenerator";
|
||||
|
||||
interface LaunchModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
registryId: string;
|
||||
repositoryName: string;
|
||||
tag: string;
|
||||
artifactType: ArtifactCategory;
|
||||
}
|
||||
|
||||
export const LaunchModal: React.FC<LaunchModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
registryId,
|
||||
repositoryName,
|
||||
tag,
|
||||
artifactType,
|
||||
}) => {
|
||||
const { success, error: toastError, info: toastInfo } = useToast();
|
||||
|
||||
const [clusters, setClusters] = useState<ClusterResponse[]>([]);
|
||||
const [loadingClusters, setLoadingClusters] = useState(false);
|
||||
|
||||
// Form fields
|
||||
const [clusterId, setClusterId] = useState("");
|
||||
const [namespace, setNamespace] = useState("default");
|
||||
const [instanceName, setInstanceName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
// Values Schema support
|
||||
const [valuesSchema, setValuesSchema] = useState<JsonSchema | null>(null);
|
||||
const [loadingSchema, setLoadingSchema] = useState(false);
|
||||
const [inputMethod, setInputMethod] = useState<'form' | 'yaml'>('yaml');
|
||||
const [valuesForm, setValuesForm] = useState<Record<string, any>>({});
|
||||
const [valuesYaml, setValuesYaml] = useState("");
|
||||
|
||||
// Load clusters and schema on mount
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadClusters();
|
||||
loadValuesSchema();
|
||||
}
|
||||
}, [isOpen, registryId, repositoryName, tag]);
|
||||
|
||||
const loadClusters = async () => {
|
||||
setLoadingClusters(true);
|
||||
try {
|
||||
const data = await listClusters();
|
||||
setClusters(data);
|
||||
const firstWithId = data.find((cluster) => typeof cluster.id === "string" && cluster.id.length > 0);
|
||||
if (firstWithId?.id) {
|
||||
setClusterId(firstWithId.id);
|
||||
} else {
|
||||
setClusterId("");
|
||||
}
|
||||
} catch (err) {
|
||||
toastError(formatApiError(err) || ClusterErrors.LOAD_FAILED);
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoadingClusters(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadValuesSchema = async () => {
|
||||
setLoadingSchema(true);
|
||||
try {
|
||||
const schemaResponse = await getValuesSchema({ registryId, repositoryName, reference: tag });
|
||||
const normalizedSchema = extractJsonSchema(schemaResponse);
|
||||
setValuesSchema(normalizedSchema);
|
||||
|
||||
if (normalizedSchema) {
|
||||
setInputMethod('form');
|
||||
console.log(`[LaunchModal] Loaded values schema with ${Object.keys(normalizedSchema.properties ?? {}).length} properties`);
|
||||
} else {
|
||||
setInputMethod('yaml');
|
||||
console.log('[LaunchModal] No values schema available, using YAML input');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[LaunchModal] Failed to load values schema:', err);
|
||||
setValuesSchema(null);
|
||||
setInputMethod('yaml');
|
||||
} finally {
|
||||
setLoadingSchema(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetFormState = () => {
|
||||
setInstanceName("");
|
||||
setDescription("");
|
||||
setValuesYaml("");
|
||||
setValuesForm({});
|
||||
setNamespace("default");
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!clusterId) {
|
||||
toastError(ValidationErrors.REQUIRED_FIELD("Cluster"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!instanceName.trim()) {
|
||||
toastError(ValidationErrors.REQUIRED_FIELD("Instance name"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!namespace.trim()) {
|
||||
toastError(ValidationErrors.REQUIRED_FIELD("Namespace"));
|
||||
return;
|
||||
}
|
||||
|
||||
let valuesObj: Record<string, any> = {};
|
||||
if (inputMethod === "form" && Object.keys(valuesForm).length > 0) {
|
||||
valuesObj = valuesForm;
|
||||
} else if (valuesYaml.trim()) {
|
||||
try {
|
||||
valuesObj = JSON.parse(valuesYaml.trim());
|
||||
} catch {
|
||||
toastError("Invalid YAML format. Please check your values.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const request: CreateInstanceRequest = {
|
||||
name: instanceName.trim(),
|
||||
namespace: namespace.trim(),
|
||||
registryId,
|
||||
repository: repositoryName,
|
||||
tag,
|
||||
...(Object.keys(valuesObj).length > 0 ? { values: valuesObj } : {}),
|
||||
};
|
||||
|
||||
toastInfo("Launching instance...", {
|
||||
title: "Launch Instance",
|
||||
durationMs: 1800,
|
||||
mergeKey: `instance-launch-${registryId}-${repositoryName}-${tag}`,
|
||||
});
|
||||
|
||||
resetFormState();
|
||||
onClose();
|
||||
|
||||
createInstance({ clusterId }, request)
|
||||
.then(() => {
|
||||
success(SuccessMessages.INSTANCE_DEPLOYED);
|
||||
})
|
||||
.catch((err) => {
|
||||
toastError(formatApiError(err) || InstanceErrors.DEPLOY_FAILED);
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
title="Launch Instance"
|
||||
icon={Rocket}
|
||||
iconColor="text-green-400"
|
||||
size="lg"
|
||||
footer={
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="success"
|
||||
icon={Rocket}
|
||||
onClick={handleSubmit}
|
||||
disabled={clusters.length === 0}
|
||||
>
|
||||
Launch
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-1 mb-4">
|
||||
<p className="text-sm text-gray-400">
|
||||
{repositoryName}:{tag}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Cluster Selection */}
|
||||
<FormField label="Target Cluster" required>
|
||||
{loadingClusters ? (
|
||||
<div className="text-sm text-gray-500">Loading clusters...</div>
|
||||
) : clusters.length === 0 ? (
|
||||
<div className="flex items-center gap-2 p-3 bg-yellow-900/20 border border-yellow-700/50 rounded-lg text-yellow-300 text-sm">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
<span>No clusters available. Please add a cluster first.</span>
|
||||
</div>
|
||||
) : (
|
||||
<DropdownSelect
|
||||
value={clusterId}
|
||||
onChange={(value) => setClusterId(value)}
|
||||
options={clusters
|
||||
.filter((cluster): cluster is ClusterResponse & { id: string } => Boolean(cluster.id))
|
||||
.map((cluster) => ({
|
||||
value: cluster.id,
|
||||
label: cluster.name || cluster.id,
|
||||
}))}
|
||||
placeholder="Select a cluster"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* Instance Name */}
|
||||
<FormField
|
||||
label="Instance Name"
|
||||
required
|
||||
help="Lowercase alphanumeric characters, '-' or '.'"
|
||||
>
|
||||
<Input
|
||||
type="text"
|
||||
value={instanceName}
|
||||
onChange={(e) => setInstanceName(e.target.value)}
|
||||
placeholder="my-app"
|
||||
required
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{/* Namespace */}
|
||||
<FormField label="Namespace" required>
|
||||
<Input
|
||||
type="text"
|
||||
value={namespace}
|
||||
onChange={(e) => setNamespace(e.target.value)}
|
||||
placeholder="default"
|
||||
required
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{/* Description */}
|
||||
<FormField label="Description">
|
||||
<Input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Optional description"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{/* Values Configuration */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium text-gray-300">
|
||||
Configuration Values
|
||||
</label>
|
||||
|
||||
{/* Input Method Toggle (only show if schema is available) */}
|
||||
{valuesSchema?.properties && (
|
||||
<div className="flex gap-1 bg-gray-800 rounded-lg p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInputMethod('form')}
|
||||
className={`flex items-center gap-2 px-3 py-1 rounded text-xs transition ${
|
||||
inputMethod === 'form'
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'text-gray-400 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<FormInput className="w-3 h-3" />
|
||||
Form
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setInputMethod('yaml')}
|
||||
className={`flex items-center gap-2 px-3 py-1 rounded text-xs transition ${
|
||||
inputMethod === 'yaml'
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'text-gray-400 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<FileCode className="w-3 h-3" />
|
||||
YAML
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loadingSchema ? (
|
||||
<LoadingState message="Loading configuration schema..." size="sm" />
|
||||
) : inputMethod === 'form' && valuesSchema ? (
|
||||
<div className="border border-gray-700 rounded-lg p-4 max-h-96 overflow-y-auto bg-gray-900/30">
|
||||
<SchemaFormGenerator
|
||||
schema={valuesSchema}
|
||||
values={valuesForm}
|
||||
onChange={setValuesForm}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<FormField
|
||||
help={valuesSchema
|
||||
? "Optional: Override default values with custom YAML configuration"
|
||||
: "Optional: Chart does not provide a schema. Enter YAML configuration manually."
|
||||
}
|
||||
>
|
||||
<Textarea
|
||||
value={valuesYaml}
|
||||
onChange={(e) => setValuesYaml(e.target.value)}
|
||||
placeholder="# Enter custom values in YAML format # Example: # replicaCount: 3 # image: # repository: myapp # tag: latest"
|
||||
rows={8}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Artifact Info */}
|
||||
<div className="p-4 bg-gray-800/50 border border-gray-700 rounded-lg space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Repository:</span>
|
||||
<span className="text-white font-mono">{repositoryName}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Tag:</span>
|
||||
<Badge variant="info" size="sm">{tag}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Type:</span>
|
||||
<span className="text-white">{artifactType}</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const isJsonSchemaObject = (value: unknown): value is JsonSchema =>
|
||||
typeof value === "object" && value !== null && !Array.isArray(value);
|
||||
|
||||
const extractJsonSchema = (schemaResponse: unknown): JsonSchema | null => {
|
||||
if (schemaResponse == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tryParse = (value: unknown): unknown => {
|
||||
if (typeof value === "string") {
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
let candidate: unknown = tryParse(schemaResponse);
|
||||
|
||||
if (candidate && typeof candidate === "object" && "schema" in (candidate as Record<string, unknown>)) {
|
||||
const inner = (candidate as { schema?: unknown }).schema;
|
||||
const normalizedInner = extractJsonSchema(inner);
|
||||
if (normalizedInner) {
|
||||
return normalizedInner;
|
||||
}
|
||||
}
|
||||
|
||||
if (isJsonSchemaObject(candidate)) {
|
||||
return candidate as JsonSchema;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
@ -0,0 +1,183 @@
|
||||
/**
|
||||
* Registry Tree Explorer Component
|
||||
* Display registries in a tree-like structure
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Database,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Package,
|
||||
Server,
|
||||
ExternalLink,
|
||||
Shield,
|
||||
Globe
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import type { AppRegistry } from "@/core/types";
|
||||
|
||||
interface RegistryTreeExplorerProps {
|
||||
registries: AppRegistry[];
|
||||
}
|
||||
|
||||
export const RegistryTreeExplorer: React.FC<RegistryTreeExplorerProps> = ({ registries }) => {
|
||||
const navigate = useNavigate();
|
||||
const [expandedRegistries, setExpandedRegistries] = useState<Set<string>>(new Set());
|
||||
const [hoveredRegistry, setHoveredRegistry] = useState<string | null>(null);
|
||||
|
||||
const toggleRegistry = (registryId: string) => {
|
||||
const newExpanded = new Set(expandedRegistries);
|
||||
if (newExpanded.has(registryId)) {
|
||||
newExpanded.delete(registryId);
|
||||
} else {
|
||||
newExpanded.add(registryId);
|
||||
}
|
||||
setExpandedRegistries(newExpanded);
|
||||
};
|
||||
|
||||
const handleRegistryClick = (registryId: string) => {
|
||||
navigate(`/artifact/registries/${registryId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<div className="relative bg-gradient-to-br from-slate-800/80 via-slate-800/50 to-slate-900/80 border border-slate-700/50 rounded-xl overflow-hidden shadow-2xl">
|
||||
{/* Decorative background effect */}
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none"></div>
|
||||
|
||||
{/* Header with enhanced design */}
|
||||
<div className="relative p-6 border-b border-slate-700/50 bg-gradient-to-r from-purple-900/20 via-transparent to-blue-900/20 backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-xl border border-purple-500/30 shadow-lg shadow-purple-500/20">
|
||||
<Database className="w-6 h-6 text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300">
|
||||
OCI Registries
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400 mt-0.5">
|
||||
{registries.length} {registries.length === 1 ? 'registry' : 'registries'} configured
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Registry List */}
|
||||
<div className="divide-y divide-slate-700/50">
|
||||
{registries.map((registry) => {
|
||||
const isExpanded = expandedRegistries.has(registry.id || '');
|
||||
const isHovered = hoveredRegistry === registry.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={registry.id}
|
||||
className="relative group transition-all duration-300"
|
||||
onMouseEnter={() => setHoveredRegistry(registry.id || '')}
|
||||
onMouseLeave={() => setHoveredRegistry(null)}
|
||||
>
|
||||
{/* Hover glow effect */}
|
||||
{isHovered && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-cyan-500/10 pointer-events-none"></div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="relative flex items-center justify-between p-5 cursor-pointer hover:bg-slate-800/50 transition-colors"
|
||||
onClick={() => toggleRegistry(registry.id || '')}
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
{/* Expand/Collapse Icon */}
|
||||
<div className="flex-shrink-0">
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-5 h-5 text-purple-400 transition-transform duration-200" />
|
||||
) : (
|
||||
<ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-purple-400 transition-colors duration-200" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Registry Icon with glow */}
|
||||
<div className={`relative p-3 rounded-xl border transition-all duration-300 ${
|
||||
isExpanded
|
||||
? 'bg-gradient-to-br from-purple-500/30 to-blue-500/30 border-purple-500/50 shadow-lg shadow-purple-500/30'
|
||||
: 'bg-gradient-to-br from-purple-500/10 to-blue-500/10 border-purple-500/30 group-hover:border-purple-500/50'
|
||||
}`}>
|
||||
<Server className={`w-6 h-6 transition-colors duration-300 ${
|
||||
isExpanded ? 'text-purple-300' : 'text-purple-400'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
{/* Registry Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<h4 className="text-base font-bold text-white group-hover:text-purple-300 transition-colors">
|
||||
{registry.name || 'Unnamed Registry'}
|
||||
</h4>
|
||||
{registry.url && (
|
||||
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-slate-700/50 border border-slate-600/50 rounded-md">
|
||||
<Globe className="w-3.5 h-3.5 text-cyan-400" />
|
||||
<span className="text-xs text-cyan-400 font-medium">Connected</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{registry.description && (
|
||||
<p className="text-sm text-slate-400 mt-1.5 line-clamp-1">
|
||||
{registry.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{registry.url && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Shield className="w-3.5 h-3.5 text-slate-500" />
|
||||
<p className="text-xs text-slate-500 font-mono truncate">
|
||||
{registry.url}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Browse Button */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRegistryClick(registry.id || '');
|
||||
}}
|
||||
className="group/btn flex-shrink-0 inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-blue-300 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 hover:from-blue-600/30 hover:to-cyan-600/30 border border-blue-500/40 hover:border-blue-400/60 rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30"
|
||||
>
|
||||
<Package className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
|
||||
Browse
|
||||
<ExternalLink className="w-3.5 h-3.5 opacity-70 group-hover/btn:opacity-100 group-hover/btn:translate-x-0.5 group-hover/btn:-translate-y-0.5 transition-all" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Expanded Content */}
|
||||
{isExpanded && (
|
||||
<div className="relative px-5 pb-5 pl-20 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
<div className="relative bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-700/50 rounded-lg p-5 shadow-inner">
|
||||
{/* Decorative corner accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-transparent rounded-bl-full pointer-events-none"></div>
|
||||
|
||||
<div className="relative flex items-start gap-3">
|
||||
<div className="flex-shrink-0 p-2 bg-purple-500/10 border border-purple-500/30 rounded-lg">
|
||||
<Package className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-white mb-1">
|
||||
Ready to explore
|
||||
</p>
|
||||
<p className="text-sm text-slate-400 leading-relaxed">
|
||||
Click <span className="font-semibold text-blue-400">"Browse"</span> to view all repositories and artifacts available in this registry.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,386 @@
|
||||
/**
|
||||
* Repository Item Component
|
||||
* Expandable to show tags list with type filtering
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Package, ChevronDown, ChevronRight, Copy, Tag as TagIcon, Filter, AlertCircle, Rocket } from "lucide-react";
|
||||
import { listArtifacts } from "@/api";
|
||||
import type { ArtifactListItem } from "@/api";
|
||||
import { useToast } from "@/shared";
|
||||
import { LaunchModal } from "./LaunchModal";
|
||||
import { artifactCache } from "@/shared/services/artifact-cache";
|
||||
import { RegistryErrors, formatApiError } from "@/shared/utils";
|
||||
import { inferArtifactCategory, type ArtifactCategory } from "../utils/artifactType";
|
||||
|
||||
interface RepositoryItemProps {
|
||||
registryId: string;
|
||||
registryName: string;
|
||||
registryUrl: string;
|
||||
repository: string;
|
||||
}
|
||||
|
||||
export const RepositoryItem: React.FC<RepositoryItemProps> = ({
|
||||
registryId,
|
||||
registryName,
|
||||
registryUrl,
|
||||
repository,
|
||||
}) => {
|
||||
const { success, error: toastError } = useToast();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [allTags, setAllTags] = useState<ArtifactListItem[]>([]); // All tags
|
||||
const [filteredTags, setFilteredTags] = useState<ArtifactListItem[]>([]); // Filtered tags
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [tagsLoaded, setTagsLoaded] = useState(false); // Whether tags are loaded
|
||||
const [filterType, setFilterType] = useState<ArtifactCategory | "all">("chart"); // Default filter: chart
|
||||
const [loadError, setLoadError] = useState<string | null>(null); // Load error message
|
||||
const [launchModalOpen, setLaunchModalOpen] = useState(false);
|
||||
const [selectedTag, setSelectedTag] = useState<ArtifactListItem | null>(null);
|
||||
|
||||
// Load tags when expanded (using isMounted pattern for Strict Mode compatibility)
|
||||
// 🚀 Enhanced with cache support and auto-retry
|
||||
useEffect(() => {
|
||||
if (!expanded || tagsLoaded) {
|
||||
return; // Not expanded or already loaded, skip
|
||||
}
|
||||
|
||||
const isMounted = { current: true };
|
||||
|
||||
const loadTags = async (attempt = 1) => {
|
||||
const MAX_RETRIES = 2;
|
||||
|
||||
// 🚀 Check cache first
|
||||
const cachedData = artifactCache.get(registryId, repository);
|
||||
if (cachedData !== null) {
|
||||
console.log(`[RepositoryItem] ✅ Cache hit for ${repository} (${cachedData.length} tags)`);
|
||||
setAllTags(cachedData);
|
||||
setTagsLoaded(true);
|
||||
setLoadError(null);
|
||||
return; // Skip API call
|
||||
}
|
||||
|
||||
// Cache miss, load from API
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
|
||||
try {
|
||||
console.log(`[RepositoryItem] 📡 Loading tags from API for: ${repository} (attempt ${attempt})`);
|
||||
|
||||
// Mark as loading in cache to prevent duplicate requests
|
||||
artifactCache.setLoading(registryId, repository);
|
||||
|
||||
// Fetch all tags to support client-side filter switching
|
||||
const tagList = await listArtifacts({ registryId, repositoryName: repository });
|
||||
|
||||
// Only update state if component is still mounted
|
||||
if (isMounted.current) {
|
||||
console.log(`[RepositoryItem] ✅ Loaded ${tagList.length} tags from API`);
|
||||
|
||||
// Update cache
|
||||
artifactCache.set(registryId, repository, tagList);
|
||||
|
||||
setAllTags(tagList);
|
||||
setTagsLoaded(true);
|
||||
setLoadError(null);
|
||||
}
|
||||
} catch (error) {
|
||||
// Only show error if component is still mounted
|
||||
if (isMounted.current) {
|
||||
// Retry if attempts remaining
|
||||
if (attempt < MAX_RETRIES) {
|
||||
console.log(`[RepositoryItem] 🔄 Retrying ${repository} (${attempt + 1}/${MAX_RETRIES})...`);
|
||||
await new Promise(resolve => setTimeout(resolve, 500 * attempt)); // Exponential backoff
|
||||
return loadTags(attempt + 1);
|
||||
}
|
||||
|
||||
// All retries exhausted
|
||||
console.error(`[RepositoryItem] ❌ All retries exhausted for ${repository}:`, error);
|
||||
|
||||
// Format error message using unified error handling
|
||||
const errorMsg = formatApiError(error) || RegistryErrors.TAGS_LOAD_FAILED;
|
||||
setLoadError(errorMsg);
|
||||
toastError(errorMsg);
|
||||
|
||||
// 🔧 Clear cache to allow manual retry
|
||||
artifactCache.clear(registryId, repository);
|
||||
|
||||
setAllTags([]);
|
||||
// Don't set tagsLoaded to true - allow retry
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadTags();
|
||||
|
||||
// Cleanup: mark as unmounted to prevent state updates
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, [expanded, tagsLoaded, registryId, repository, toastError]);
|
||||
|
||||
// Filter tags by type
|
||||
useEffect(() => {
|
||||
if (filterType === "all") {
|
||||
setFilteredTags(allTags);
|
||||
return;
|
||||
}
|
||||
setFilteredTags(
|
||||
allTags.filter((tagItem) => inferArtifactCategory(tagItem) === filterType),
|
||||
);
|
||||
}, [allTags, filterType]);
|
||||
|
||||
// Get plural form of type name
|
||||
const getTypeName = (type: string): string => {
|
||||
if (type === "all") return "artifacts";
|
||||
// Convert to plural form
|
||||
const typeMap: Record<string, string> = {
|
||||
chart: "charts",
|
||||
image: "images",
|
||||
other: "others",
|
||||
};
|
||||
return typeMap[type] || type;
|
||||
};
|
||||
|
||||
const handleCopyPullCommand = (tagName?: string, tagType?: ArtifactCategory) => {
|
||||
const baseUrl = registryUrl.replace(/^https?:\/\//, "");
|
||||
|
||||
let pullCommand: string;
|
||||
if (tagType === "chart") {
|
||||
// Helm Chart - use helm pull
|
||||
pullCommand = tagName
|
||||
? `helm pull oci://${baseUrl}/${repository} --version ${tagName}`
|
||||
: `helm pull oci://${baseUrl}/${repository}`;
|
||||
} else if (tagType === "image") {
|
||||
// Docker Image - use docker pull
|
||||
pullCommand = tagName
|
||||
? `docker pull ${baseUrl}/${repository}:${tagName}`
|
||||
: `docker pull ${baseUrl}/${repository}`;
|
||||
} else {
|
||||
// Other types - generic format
|
||||
pullCommand = `${baseUrl}/${repository}${tagName ? `:${tagName}` : ""}`;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(pullCommand);
|
||||
success("Pull command copied to clipboard");
|
||||
};
|
||||
|
||||
const handleToggle = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
const handleLaunch = (tagItem: ArtifactListItem) => {
|
||||
setSelectedTag(tagItem);
|
||||
setLaunchModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseLaunchModal = () => {
|
||||
setLaunchModalOpen(false);
|
||||
setSelectedTag(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Launch Modal */}
|
||||
{selectedTag && selectedTag.repositoryName && selectedTag.tag && (
|
||||
<LaunchModal
|
||||
isOpen={launchModalOpen}
|
||||
onClose={handleCloseLaunchModal}
|
||||
registryId={registryId}
|
||||
repositoryName={selectedTag.repositoryName}
|
||||
tag={selectedTag.tag}
|
||||
artifactType={inferArtifactCategory(selectedTag)}
|
||||
/>
|
||||
)}
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg overflow-hidden">
|
||||
{/* Repository Header */}
|
||||
<div className="flex items-center justify-between p-3 hover:bg-gray-800 transition group">
|
||||
{/* Left: Repository Info */}
|
||||
<div
|
||||
className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer"
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{/* Expand/Collapse Icon */}
|
||||
{expanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
)}
|
||||
<Package className="w-4 h-4 text-blue-400 flex-shrink-0" />
|
||||
<span className="text-sm text-gray-200 font-mono truncate" title={repository}>
|
||||
{repository}
|
||||
</span>
|
||||
{/* Registry Name Badge */}
|
||||
<span className="px-2 py-0.5 bg-purple-600/20 border border-purple-500/30 rounded text-xs text-purple-300 flex-shrink-0">
|
||||
🏷️ {registryName}
|
||||
</span>
|
||||
{/* Tag Count Badge */}
|
||||
{allTags.length > 0 && (
|
||||
<span className="px-2 py-0.5 bg-blue-600/20 border border-blue-500/30 rounded text-xs text-blue-300">
|
||||
{filteredTags.length}/{allTags.length} {getTypeName(filterType)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Action Buttons */}
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// 使用第一个tag的类型作为默认类型
|
||||
const firstTagType = allTags.length > 0 ? inferArtifactCategory(allTags[0]) : undefined;
|
||||
handleCopyPullCommand(undefined, firstTagType);
|
||||
}}
|
||||
className="p-1.5 hover:bg-gray-700 rounded transition"
|
||||
title="Copy pull command"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5 text-gray-400 hover:text-blue-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags List (shown when expanded) */}
|
||||
{expanded && (
|
||||
<div className="border-t border-gray-700 bg-gray-900/50 p-3">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-6">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
|
||||
<p className="text-xs text-gray-500">Loading tags...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Filter */}
|
||||
{allTags.length > 0 && (
|
||||
<div className="flex items-center gap-2 mb-3 pb-3 border-b border-gray-700">
|
||||
<Filter className="w-3.5 h-3.5 text-gray-400" />
|
||||
<span className="text-xs text-gray-400">Type:</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setFilterType("chart")}
|
||||
className={`px-2 py-0.5 text-xs rounded transition ${
|
||||
filterType === "chart"
|
||||
? "bg-green-600 text-white"
|
||||
: "bg-gray-700 text-gray-400 hover:bg-gray-600"
|
||||
}`}
|
||||
>
|
||||
Chart
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterType("image")}
|
||||
className={`px-2 py-0.5 text-xs rounded transition ${
|
||||
filterType === "image"
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-gray-700 text-gray-400 hover:bg-gray-600"
|
||||
}`}
|
||||
>
|
||||
Image
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterType("other")}
|
||||
className={`px-2 py-0.5 text-xs rounded transition ${
|
||||
filterType === "other"
|
||||
? "bg-purple-600 text-white"
|
||||
: "bg-gray-700 text-gray-400 hover:bg-gray-600"
|
||||
}`}
|
||||
>
|
||||
Other
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterType("all")}
|
||||
className={`px-2 py-0.5 text-xs rounded transition ${
|
||||
filterType === "all"
|
||||
? "bg-gray-600 text-white"
|
||||
: "bg-gray-700 text-gray-400 hover:bg-gray-600"
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{loadError ? (
|
||||
<div className="text-center py-4 text-red-400 text-sm">
|
||||
<AlertCircle className="w-8 h-8 mx-auto mb-2" />
|
||||
<p>Failed to load artifacts</p>
|
||||
<p className="text-xs text-gray-500 mt-1">{loadError}</p>
|
||||
</div>
|
||||
) : filteredTags.length === 0 ? (
|
||||
<div className="text-center py-4 text-gray-500 text-sm">
|
||||
<TagIcon className="w-8 h-8 mx-auto mb-2 opacity-30" />
|
||||
<p>No {filterType === "all" ? "" : getTypeName(filterType)} tags</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
{filteredTags.map((tagItem, index) => {
|
||||
const category = inferArtifactCategory(tagItem);
|
||||
return (
|
||||
<div
|
||||
key={`${tagItem.tag}-${index}`}
|
||||
className="flex items-center justify-between p-2 bg-gray-800/50 hover:bg-gray-800 rounded transition group/tag"
|
||||
>
|
||||
{/* Tag Info */}
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<TagIcon className="w-3.5 h-3.5 text-green-400 flex-shrink-0" />
|
||||
<span className="text-sm text-gray-300 font-mono truncate" title={tagItem.tag}>
|
||||
{tagItem.tag}
|
||||
</span>
|
||||
{/* Artifact Type Badge */}
|
||||
<span
|
||||
className={`px-1.5 py-0.5 text-xs rounded ${
|
||||
category === "chart"
|
||||
? "bg-green-600/20 text-green-300 border border-green-500/30"
|
||||
: category === "image"
|
||||
? "bg-blue-600/20 text-blue-300 border border-blue-500/30"
|
||||
: "bg-purple-600/20 text-purple-300 border border-purple-500/30"
|
||||
}`}
|
||||
title={tagItem.mediaType || tagItem.type}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
{/* Artifact Size */}
|
||||
{tagItem.size && tagItem.size > 0 && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{(tagItem.size / 1024 / 1024).toFixed(2)} MB
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tag Action Buttons */}
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover/tag:opacity-100">
|
||||
{/* Launch button - only for chart/helm type */}
|
||||
{category === "chart" && (
|
||||
<button
|
||||
onClick={() => handleLaunch(tagItem)}
|
||||
className="p-1 hover:bg-green-700/50 rounded transition"
|
||||
title={`Launch ${tagItem.tag}`}
|
||||
>
|
||||
<Rocket className="w-3 h-3 text-green-400 hover:text-green-300" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleCopyPullCommand(tagItem.tag, category)}
|
||||
className="p-1 hover:bg-gray-700 rounded transition"
|
||||
title={`Copy pull command for ${tagItem.tag}`}
|
||||
>
|
||||
<Copy className="w-3 h-3 text-gray-400 hover:text-blue-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
144
frontend/src/features/artifact/registries/components/TagCard.tsx
Normal file
144
frontend/src/features/artifact/registries/components/TagCard.tsx
Normal file
@ -0,0 +1,144 @@
|
||||
/**
|
||||
* Tag Card Component
|
||||
* Simple card for displaying a single tag/artifact
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import { Package, Rocket, Copy, HardDrive } from "lucide-react";
|
||||
import { LaunchModal } from "./LaunchModal";
|
||||
import { useToast } from "@/shared";
|
||||
import type { ArtifactListItem } from "@/api";
|
||||
import { inferArtifactCategory, type ArtifactCategory } from "../utils/artifactType";
|
||||
|
||||
interface TagCardProps {
|
||||
registryId: string;
|
||||
tag: ArtifactListItem;
|
||||
}
|
||||
|
||||
export const TagCard: React.FC<TagCardProps> = ({ registryId, tag }) => {
|
||||
const { success } = useToast();
|
||||
const [launchModalOpen, setLaunchModalOpen] = useState(false);
|
||||
const category = inferArtifactCategory(tag);
|
||||
|
||||
const handleLaunch = () => {
|
||||
setLaunchModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
const tagName = tag.tag || '';
|
||||
if (!tagName || !tag.repositoryName) return;
|
||||
const pullCommand = `helm pull oci://${tag.repositoryName}:${tagName}`;
|
||||
navigator.clipboard.writeText(pullCommand);
|
||||
success("Pull command copied to clipboard!");
|
||||
};
|
||||
|
||||
const formatSize = (bytes: number) => {
|
||||
if (bytes === 0) return "N/A";
|
||||
const mb = bytes / (1024 * 1024);
|
||||
if (mb < 1) {
|
||||
return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
}
|
||||
return `${mb.toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const getTypeColor = (type: ArtifactCategory) => {
|
||||
switch (type) {
|
||||
case "chart":
|
||||
return "text-blue-400 bg-blue-500/10 border-blue-500/30";
|
||||
case "image":
|
||||
return "text-green-400 bg-green-500/10 border-green-500/30";
|
||||
default:
|
||||
return "text-gray-400 bg-gray-500/10 border-gray-500/30";
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: ArtifactCategory) => {
|
||||
switch (type) {
|
||||
case "chart":
|
||||
return "📦";
|
||||
case "image":
|
||||
return "🐳";
|
||||
default:
|
||||
return "📄";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-dark-card border border-dark-border rounded-lg p-4 hover:border-brand-blue/50 transition-all group">
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className={`w-10 h-10 rounded-lg border ${getTypeColor(category)}
|
||||
flex items-center justify-center text-lg`}>
|
||||
{getTypeIcon(category)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Tag name */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Package className="w-4 h-4 text-purple-400 flex-shrink-0" />
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
{tag.tag || 'N/A'}
|
||||
</h3>
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-xs border ${getTypeColor(category)}`}
|
||||
title={tag.mediaType || tag.type || ''}
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Repository path */}
|
||||
<p className="text-xs text-gray-500 truncate mb-2">
|
||||
{tag.repositoryName}
|
||||
</p>
|
||||
|
||||
{/* Size */}
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<HardDrive className="w-3.5 h-3.5" />
|
||||
<span>{formatSize(tag.size || 0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex-shrink-0 flex flex-col gap-2">
|
||||
<button
|
||||
onClick={handleLaunch}
|
||||
className="px-3 py-1.5 bg-brand-blue hover:bg-brand-blue/80 text-white rounded
|
||||
text-xs font-medium transition-colors flex items-center gap-1.5"
|
||||
title="Launch this artifact"
|
||||
>
|
||||
<Rocket className="w-3.5 h-3.5" />
|
||||
<span>Launch</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="px-3 py-1.5 bg-dark-lighter hover:bg-white/5 text-gray-300
|
||||
border border-dark-border rounded text-xs transition-colors flex items-center gap-1.5"
|
||||
title="Copy pull command"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Launch Modal */}
|
||||
{launchModalOpen && tag.repositoryName && tag.tag && (
|
||||
<LaunchModal
|
||||
isOpen={launchModalOpen}
|
||||
onClose={() => setLaunchModalOpen(false)}
|
||||
registryId={registryId}
|
||||
repositoryName={tag.repositoryName}
|
||||
tag={tag.tag}
|
||||
artifactType={category}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
13
frontend/src/features/artifact/registries/index.ts
Normal file
13
frontend/src/features/artifact/registries/index.ts
Normal file
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Registry Browser Feature (Flattened Architecture)
|
||||
* OCI 仓库浏览功能（扁平化架构）
|
||||
*/
|
||||
|
||||
// Export pages
|
||||
export { default as RegistriesBrowserPage } from './pages/RegistriesBrowserPage';
|
||||
|
||||
// Export components
|
||||
export { RepositoryItem } from './components/RepositoryItem';
|
||||
export { TagCard } from './components/TagCard';
|
||||
export { LaunchModal } from './components/LaunchModal';
|
||||
|
||||
@ -0,0 +1,511 @@
|
||||
/**
|
||||
* Artifact Browser Page
|
||||
* 左侧 Registry/Repository 树（自动加载并展开），右侧 Artifact 卡片。
|
||||
*/
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Package,
|
||||
Database,
|
||||
RefreshCw,
|
||||
Filter,
|
||||
Search,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { useToast } from "@/shared";
|
||||
import {
|
||||
Button,
|
||||
LoadingState,
|
||||
EmptyState,
|
||||
Badge,
|
||||
} from "@/shared/components";
|
||||
import {
|
||||
listRegistries,
|
||||
listRepositories,
|
||||
listArtifacts,
|
||||
} from "@/api";
|
||||
import type {
|
||||
RegistryResponse,
|
||||
ListRepositories200Item,
|
||||
ArtifactListItem,
|
||||
ListArtifactsFilter,
|
||||
} from "@/api";
|
||||
import { TagCard } from "../components/TagCard";
|
||||
import { globalCache } from "@/shared/services/artifact-cache";
|
||||
import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
|
||||
interface RepositoryNode {
|
||||
name: string;
|
||||
registryId: string;
|
||||
registryName: string;
|
||||
artifactCount?: number;
|
||||
}
|
||||
|
||||
interface RegistryNode {
|
||||
registry: RegistryResponse;
|
||||
repositories: RepositoryNode[];
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
const FILTER_OPTIONS: Array<{ value: ListArtifactsFilter | undefined; label: string }> = [
|
||||
{ value: undefined, label: "All" },
|
||||
{ value: "chart", label: "Charts" },
|
||||
{ value: "image", label: "Images" },
|
||||
{ value: "other", label: "Other" },
|
||||
];
|
||||
|
||||
const ArtifactBrowserPage: React.FC = () => {
|
||||
const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
|
||||
|
||||
const [registryNodes, setRegistryNodes] = useState<RegistryNode[]>([]);
|
||||
const [loadingRegistries, setLoadingRegistries] = useState(true);
|
||||
const [loadingRepositories, setLoadingRepositories] = useState(true);
|
||||
const [repositoryError, setRepositoryError] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const [selectedRepository, setSelectedRepository] = useState<RepositoryNode | null>(null);
|
||||
const [artifacts, setArtifacts] = useState<ArtifactListItem[]>([]);
|
||||
const [loadingArtifacts, setLoadingArtifacts] = useState(false);
|
||||
const [artifactError, setArtifactError] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<ListArtifactsFilter | undefined>(undefined);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const loadArtifacts = useCallback(
|
||||
async (
|
||||
registryId: string,
|
||||
repositoryName: string,
|
||||
skipCache = false,
|
||||
isRefresh = false
|
||||
) => {
|
||||
if (!isRefresh) {
|
||||
setLoadingArtifacts(true);
|
||||
}
|
||||
setArtifactError(null);
|
||||
const filterKey = filter ?? "all";
|
||||
try {
|
||||
let data: ArtifactListItem[] | null = null;
|
||||
if (!skipCache) {
|
||||
data = globalCache.get<ArtifactListItem[]>("tags", registryId, repositoryName, filterKey);
|
||||
}
|
||||
if (!data) {
|
||||
data = await listArtifacts(
|
||||
{ registryId, repositoryName },
|
||||
filter ? { filter } : undefined
|
||||
);
|
||||
globalCache.set("tags", data, registryId, repositoryName, filterKey);
|
||||
}
|
||||
setArtifacts(data ?? []);
|
||||
} catch (err) {
|
||||
const errorMsg = formatApiError(err) || "Failed to load artifacts";
|
||||
setArtifactError(errorMsg);
|
||||
toastError(errorMsg);
|
||||
} finally {
|
||||
if (!isRefresh) {
|
||||
setLoadingArtifacts(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
[filter, toastError]
|
||||
);
|
||||
|
||||
const fetchRegsAndRepos = useCallback(async (isRefresh = false) => {
|
||||
if (!isRefresh) {
|
||||
setLoadingRegistries(true);
|
||||
setLoadingRepositories(true);
|
||||
}
|
||||
setRepositoryError(null);
|
||||
let succeeded = false;
|
||||
|
||||
try {
|
||||
let registries = globalCache.get<RegistryResponse[]>("registries");
|
||||
if (!registries) {
|
||||
registries = await listRegistries();
|
||||
globalCache.set("registries", registries);
|
||||
}
|
||||
|
||||
const baseNodes: RegistryNode[] = registries.map((registry) => ({
|
||||
registry,
|
||||
repositories: [],
|
||||
expanded: true,
|
||||
}));
|
||||
setRegistryNodes(baseNodes);
|
||||
if (!isRefresh) {
|
||||
setLoadingRegistries(false);
|
||||
}
|
||||
|
||||
const repoMap = await Promise.all(
|
||||
registries.map(async (registry) => {
|
||||
const registryId = registry.id;
|
||||
if (!registryId) {
|
||||
return { id: registryId, repos: [] };
|
||||
}
|
||||
try {
|
||||
let repoNodes = globalCache.get<RepositoryNode[]>("repositories", registryId);
|
||||
if (!repoNodes) {
|
||||
const response = await listRepositories({ registryId });
|
||||
repoNodes = normalizeRepositories(registry, response);
|
||||
globalCache.set("repositories", repoNodes, registryId);
|
||||
}
|
||||
return { id: registryId, repos: repoNodes };
|
||||
} catch (err) {
|
||||
console.error(`Failed to load repositories for ${registry.name}`, err);
|
||||
return { id: registryId, repos: [] };
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
setRegistryNodes((prev) =>
|
||||
prev.map((node) => {
|
||||
const mapping = repoMap.find((entry) => entry.id === node.registry.id);
|
||||
if (!mapping) return node;
|
||||
return { ...node, repositories: mapping.repos };
|
||||
})
|
||||
);
|
||||
|
||||
const firstRepo = repoMap.find((entry) => entry.repos.length > 0)?.repos[0];
|
||||
if (firstRepo) {
|
||||
setSelectedRepository(firstRepo);
|
||||
await loadArtifacts(firstRepo.registryId, firstRepo.name, false, isRefresh);
|
||||
} else {
|
||||
setSelectedRepository(null);
|
||||
setArtifacts([]);
|
||||
}
|
||||
succeeded = true;
|
||||
} catch (err) {
|
||||
const msg = formatApiError(err) || RegistryErrors.LOAD_FAILED;
|
||||
toastError(msg);
|
||||
setRepositoryError(msg);
|
||||
} finally {
|
||||
if (!isRefresh) {
|
||||
setLoadingRepositories(false);
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
}, [toastError, loadArtifacts]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
if (refreshing) return;
|
||||
toastInfo("Refreshing registries & repositories...", {
|
||||
title: "Artifact Browser Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "artifact-browser-refresh",
|
||||
});
|
||||
setRefreshing(true);
|
||||
globalCache.clearAll();
|
||||
try {
|
||||
const refreshed = await fetchRegsAndRepos(true);
|
||||
if (refreshed) {
|
||||
toastSuccess(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRepositoryClick = (repo: RepositoryNode) => {
|
||||
setSelectedRepository(repo);
|
||||
loadArtifacts(repo.registryId, repo.name, true);
|
||||
};
|
||||
|
||||
const toggleRegistry = (registryId?: string) => {
|
||||
if (!registryId) return;
|
||||
setRegistryNodes((prev) =>
|
||||
prev.map((node) =>
|
||||
node.registry.id === registryId ? { ...node, expanded: !node.expanded } : node
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const hasInitialized = React.useRef(false);
|
||||
useEffect(() => {
|
||||
if (hasInitialized.current) {
|
||||
return;
|
||||
}
|
||||
hasInitialized.current = true;
|
||||
fetchRegsAndRepos();
|
||||
}, [fetchRegsAndRepos]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRepository) {
|
||||
loadArtifacts(selectedRepository.registryId, selectedRepository.name);
|
||||
}
|
||||
}, [filter, selectedRepository, loadArtifacts]);
|
||||
|
||||
const filteredNodes = useMemo(() => {
|
||||
const term = searchTerm.toLowerCase();
|
||||
if (!term) return registryNodes;
|
||||
return registryNodes
|
||||
.map((node) => ({
|
||||
...node,
|
||||
repositories: node.repositories.filter((repo) => {
|
||||
const registryMatch = node.registry.name?.toLowerCase().includes(term);
|
||||
const repoMatch = repo.name.toLowerCase().includes(term);
|
||||
return registryMatch || repoMatch;
|
||||
}),
|
||||
}))
|
||||
.filter(
|
||||
(node) =>
|
||||
node.repositories.length > 0 ||
|
||||
node.registry.name?.toLowerCase().includes(term)
|
||||
);
|
||||
}, [registryNodes, searchTerm]);
|
||||
|
||||
const selectedRegistryName = selectedRepository
|
||||
? registryNodes.find((node) => node.registry.id === selectedRepository.registryId)?.registry
|
||||
.name
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="h-[calc(100vh-8rem)] -m-6 flex flex-col">
|
||||
<div className="flex-shrink-0 border-b border-dark-border bg-dark-card px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Package className="w-6 h-6 text-purple-400" />
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-white">Artifact Browser</h1>
|
||||
<p className="text-sm text-gray-400">
|
||||
Browse registries, repositories, and artifacts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
spinIcon
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex overflow-hidden bg-dark-bg">
|
||||
<aside className="w-80 border-r border-dark-border bg-gradient-to-b from-gray-900 via-gray-950 to-gray-900 flex flex-col">
|
||||
<div className="p-4 border-b border-dark-border space-y-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search registries / repositories..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-8 pr-3 py-2 rounded-lg bg-gray-900/70 border border-gray-700 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
{repositoryError && (
|
||||
<p className="text-xs text-red-400">{repositoryError}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Registries</span>
|
||||
<Badge variant="secondary">{registryNodes.length}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
||||
{loadingRegistries ? (
|
||||
<div className="p-4">
|
||||
<LoadingState message="Loading registries..." />
|
||||
</div>
|
||||
) : filteredNodes.length === 0 ? (
|
||||
<div className="p-4">
|
||||
<EmptyState
|
||||
icon={Database}
|
||||
title="No registries"
|
||||
description="Add a registry to get started."
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
filteredNodes.map((node) => (
|
||||
<div key={node.registry.id || node.registry.name}>
|
||||
<button
|
||||
onClick={() => toggleRegistry(node.registry.id)}
|
||||
className="w-full flex items-center justify-between px-4 py-3 hover:bg-gray-800/60 transition"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{node.expanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
<Database className="w-4 h-4 text-purple-400" />
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-white">{node.registry.name || "Unnamed"}</p>
|
||||
<p className="text-[11px] text-gray-500 truncate">
|
||||
{node.registry.url}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">{node.repositories.length}</Badge>
|
||||
</button>
|
||||
{node.expanded && (
|
||||
<div className="bg-gray-900/60">
|
||||
{node.repositories.length === 0 ? (
|
||||
<p className="px-8 py-3 text-xs text-gray-500">
|
||||
{loadingRepositories
|
||||
? "Loading repositories..."
|
||||
: "No repositories found."}
|
||||
</p>
|
||||
) : (
|
||||
node.repositories.map((repo) => {
|
||||
const isSelected =
|
||||
selectedRepository?.registryId === repo.registryId &&
|
||||
selectedRepository?.name === repo.name;
|
||||
return (
|
||||
<button
|
||||
key={`${repo.registryId}-${repo.name}`}
|
||||
onClick={() => handleRepositoryClick(repo)}
|
||||
className={`w-full text-left px-8 py-2 flex items-center justify-between text-sm transition ${
|
||||
isSelected
|
||||
? "bg-purple-600/20 text-white"
|
||||
: "hover:bg-gray-800/80 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{repo.name}</span>
|
||||
{repo.artifactCount !== undefined && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{repo.artifactCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 flex flex-col bg-dark-card overflow-hidden">
|
||||
{!selectedRepository ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<EmptyState
|
||||
icon={Package}
|
||||
title="Select a repository"
|
||||
description="Choose a repository from the left panel to view artifacts."
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex-shrink-0 border-b border-dark-border p-5 bg-gradient-to-r from-gray-900 to-gray-850">
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-gray-500">Repository</p>
|
||||
<h2 className="text-2xl font-semibold text-white">
|
||||
{selectedRepository.name}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400">
|
||||
{selectedRegistryName || selectedRepository.registryId}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Filter className="w-4 h-4 text-gray-400" />
|
||||
{FILTER_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.label}
|
||||
onClick={() => setFilter(option.value)}
|
||||
className={`px-3 py-1.5 text-xs rounded-full border transition ${
|
||||
filter === option.value
|
||||
? "bg-purple-600 text-white border-purple-500"
|
||||
: "border-gray-700 text-gray-300 hover:border-gray-500"
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5">
|
||||
{artifactError && (
|
||||
<p className="text-sm text-red-400 mb-3">{artifactError}</p>
|
||||
)}
|
||||
{loadingArtifacts ? (
|
||||
<LoadingState message="Loading artifacts..." />
|
||||
) : artifacts.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Package}
|
||||
title="No artifacts"
|
||||
description={
|
||||
filter
|
||||
? `No ${filter} artifacts found for this repository.`
|
||||
: "This repository doesn't contain any artifacts yet."
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{artifacts.map((artifact, index) => (
|
||||
<TagCard
|
||||
key={`${artifact.repositoryName || "repo"}-${artifact.tag || index}`}
|
||||
registryId={selectedRepository.registryId}
|
||||
tag={artifact}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtifactBrowserPage;
|
||||
|
||||
function normalizeRepositories(
|
||||
registry: RegistryResponse,
|
||||
payload: ListRepositories200Item[] | { repositories?: string[] } | null | undefined
|
||||
): RepositoryNode[] {
|
||||
const registryId = registry.id || "";
|
||||
const registryName = registry.name || registryId;
|
||||
|
||||
if (Array.isArray(payload)) {
|
||||
return payload
|
||||
.map((repo): RepositoryNode | null => {
|
||||
if (typeof repo === "string") {
|
||||
return {
|
||||
name: repo,
|
||||
registryId,
|
||||
registryName,
|
||||
artifactCount: undefined,
|
||||
};
|
||||
}
|
||||
const name = repo.name || "";
|
||||
if (!name) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
name,
|
||||
registryId,
|
||||
registryName,
|
||||
artifactCount: (repo as any).artifact_count ?? (repo as any).artifactCount,
|
||||
};
|
||||
})
|
||||
.filter((repo): repo is RepositoryNode => Boolean(repo));
|
||||
}
|
||||
|
||||
if (payload && typeof payload === "object" && Array.isArray((payload as any).repositories)) {
|
||||
const repoEntries = (payload as any).repositories.map(
|
||||
(name: unknown): RepositoryNode | null =>
|
||||
typeof name === "string"
|
||||
? {
|
||||
name,
|
||||
registryId,
|
||||
registryName,
|
||||
artifactCount: undefined,
|
||||
}
|
||||
: null
|
||||
);
|
||||
return repoEntries.filter(
|
||||
(repo: RepositoryNode | null): repo is RepositoryNode => Boolean(repo)
|
||||
);
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
@ -0,0 +1,270 @@
|
||||
/**
|
||||
* Artifacts Browser Page
|
||||
* 浏览特定 Repository 的所有 Artifacts (Tags)
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Package, RefreshCw, ArrowLeft, Filter } from "lucide-react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useToast } from "@/shared";
|
||||
import {
|
||||
PageHeader,
|
||||
Button,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
EmptyState,
|
||||
Badge
|
||||
} from "@/shared/components";
|
||||
import { listArtifacts, listRegistries } from "@/api";
|
||||
import type { ArtifactListItem, ListArtifactsFilter } from "@/api";
|
||||
import { TagCard } from "../components/TagCard";
|
||||
import { globalCache } from "@/shared/services/artifact-cache";
|
||||
import { SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
|
||||
const ArtifactsBrowserPage: React.FC = () => {
|
||||
const { registryId, repositoryName } = useParams<{ registryId: string; repositoryName: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
|
||||
|
||||
const [artifacts, setArtifacts] = useState<ArtifactListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [filter, setFilter] = useState<ListArtifactsFilter | undefined>(undefined);
|
||||
const [registryName, setRegistryName] = useState<string>("");
|
||||
|
||||
// Decode repository name (URL encoded)
|
||||
const decodedRepositoryName = repositoryName ? decodeURIComponent(repositoryName) : "";
|
||||
|
||||
// Load registry info
|
||||
useEffect(() => {
|
||||
const loadRegistryInfo = async () => {
|
||||
if (!registryId) return;
|
||||
try {
|
||||
const registries = await listRegistries();
|
||||
const registry = registries.find(r => r.id === registryId);
|
||||
if (registry) {
|
||||
setRegistryName(registry.name || "");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load registry info:", err);
|
||||
}
|
||||
};
|
||||
loadRegistryInfo();
|
||||
}, [registryId]);
|
||||
|
||||
// Load artifacts
|
||||
const loadArtifacts = async (isMounted = { current: true }, skipCache = false, isRefresh = false) => {
|
||||
if (!registryId || !decodedRepositoryName) {
|
||||
setError("Registry ID or Repository Name is missing");
|
||||
setLoading(false);
|
||||
return false;
|
||||
}
|
||||
|
||||
const filterKey = filter ?? "all";
|
||||
|
||||
if (!skipCache) {
|
||||
const cached = globalCache.get<ArtifactListItem[]>(
|
||||
"tags",
|
||||
registryId,
|
||||
decodedRepositoryName,
|
||||
filterKey
|
||||
);
|
||||
if (cached) {
|
||||
console.log(`[ArtifactsBrowserPage] Using cached artifacts for ${decodedRepositoryName}`);
|
||||
setArtifacts(cached);
|
||||
setLoading(false);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
let succeeded = false;
|
||||
try {
|
||||
const data = await listArtifacts(
|
||||
{ registryId, repositoryName: decodedRepositoryName },
|
||||
filter ? { filter } : undefined
|
||||
);
|
||||
if (isMounted.current) {
|
||||
setArtifacts(data);
|
||||
globalCache.set("tags", data, registryId, decodedRepositoryName, filterKey);
|
||||
succeeded = true;
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted.current) {
|
||||
const errorMsg = formatApiError(err) || "Failed to load artifacts";
|
||||
setError(errorMsg);
|
||||
toastError(errorMsg);
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
if (isRefresh) {
|
||||
setRefreshing(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const isMounted = { current: true };
|
||||
loadArtifacts(isMounted);
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, [registryId, decodedRepositoryName, filter]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
toastInfo("Refreshing artifacts...", {
|
||||
title: "Artifacts Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "artifacts-refresh",
|
||||
});
|
||||
globalCache.clearAll();
|
||||
const refreshed = await loadArtifacts({ current: true }, true, true);
|
||||
if (refreshed) {
|
||||
toastSuccess(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (registryId) {
|
||||
navigate(`/artifact/registries/${registryId}`);
|
||||
} else {
|
||||
navigate("/artifact/registries");
|
||||
}
|
||||
};
|
||||
|
||||
const filterOptions: Array<{ value: ListArtifactsFilter | undefined; label: string }> = [
|
||||
{ value: undefined, label: "All Types" },
|
||||
{ value: "chart", label: "Helm Charts" },
|
||||
{ value: "image", label: "Container Images" },
|
||||
{ value: "other", label: "Other" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title={`Artifacts - ${decodedRepositoryName}`}
|
||||
description={`Browse artifacts in ${registryName || registryId || "registry"}`}
|
||||
icon={Package}
|
||||
iconColor="text-purple-400"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={ArrowLeft}
|
||||
onClick={handleBack}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
spinIcon={true}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Filter Bar */}
|
||||
{!loading && !error && (
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<Filter className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-400">Filter by type:</span>
|
||||
<div className="flex gap-2">
|
||||
{filterOptions.map((option) => (
|
||||
<button
|
||||
key={option.value || "all"}
|
||||
onClick={() => setFilter(option.value)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
|
||||
filter === option.value
|
||||
? "bg-purple-600 text-white"
|
||||
: "bg-dark-lighter text-gray-300 hover:bg-dark-border"
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{filter && (
|
||||
<Badge variant="info">
|
||||
{artifacts.length} {filter} artifact{artifacts.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && <LoadingState message="Loading artifacts..." />}
|
||||
|
||||
{/* Error State */}
|
||||
{error && !loading && (
|
||||
<ErrorState message={error} onRetry={handleRefresh} />
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !error && artifacts.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Package}
|
||||
title="No Artifacts Found"
|
||||
description={
|
||||
filter
|
||||
? `No ${filter} artifacts found in this repository`
|
||||
: "This repository doesn't contain any artifacts yet"
|
||||
}
|
||||
action={{
|
||||
label: "Back to Repositories",
|
||||
icon: ArrowLeft,
|
||||
onClick: handleBack,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Artifacts Grid */}
|
||||
{!loading && !error && artifacts.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{artifacts.map((artifact, index) => (
|
||||
<TagCard
|
||||
key={`${artifact.repositoryName || "repo"}-${artifact.tag || index}`}
|
||||
registryId={registryId || ""}
|
||||
tag={artifact}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Breadcrumb Info */}
|
||||
{!loading && artifacts.length > 0 && (
|
||||
<div className="mt-6 p-4 bg-dark-card border border-dark-border rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<span>Registry:</span>
|
||||
<span className="text-white font-medium">{registryName || registryId}</span>
|
||||
<span className="mx-2">/</span>
|
||||
<span>Repository:</span>
|
||||
<span className="text-white font-medium">{decodedRepositoryName}</span>
|
||||
<span className="mx-2">/</span>
|
||||
<span>Artifacts:</span>
|
||||
<span className="text-white font-medium">{artifacts.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtifactsBrowserPage;
|
||||
@ -0,0 +1,240 @@
|
||||
/**
|
||||
* Registries Browser Page
|
||||
* Display all registries and their repositories
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Database, RefreshCw, Plus, Package } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useToast } from "@/shared";
|
||||
import {
|
||||
PageHeader,
|
||||
Button,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
EmptyState
|
||||
} from "@/shared/components";
|
||||
import { RegistryTreeExplorer } from "../components/RegistryTreeExplorer";
|
||||
import { listRegistries } from "@/api";
|
||||
import type { AppRegistry } from "@/core/types";
|
||||
import { globalCache } from "@/shared/services/artifact-cache";
|
||||
import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
|
||||
const RegistriesBrowserPage: React.FC = () => {
|
||||
const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [registries, setRegistries] = useState<AppRegistry[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Load registries with global cache
|
||||
const loadRegistries = async (
|
||||
isMounted = { current: true },
|
||||
skipCache = false,
|
||||
isRefresh = false
|
||||
) => {
|
||||
let succeeded = false;
|
||||
if (!skipCache) {
|
||||
// Check global cache first
|
||||
const cachedRegistries = globalCache.get<AppRegistry[]>('registries');
|
||||
if (cachedRegistries) {
|
||||
console.log('[RegistriesBrowserPage] Using cached registries');
|
||||
setRegistries(cachedRegistries);
|
||||
setLoading(false);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
const data = await listRegistries();
|
||||
if (isMounted.current) {
|
||||
setRegistries(data);
|
||||
// Cache registries list (30 minutes TTL)
|
||||
globalCache.set('registries', data);
|
||||
succeeded = true;
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted.current) {
|
||||
const errorMsg = formatApiError(err) || RegistryErrors.LOAD_FAILED;
|
||||
setError(errorMsg);
|
||||
toastError(errorMsg);
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
if (isRefresh) {
|
||||
setRefreshing(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const isMounted = { current: true };
|
||||
loadRegistries(isMounted);
|
||||
|
||||
// Listen for storage events to auto-refresh when registries are added
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === 'registry_updated') {
|
||||
console.log('[RegistriesBrowserPage] Detected registry update, refreshing...');
|
||||
loadRegistries(isMounted);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Refresh handler
|
||||
const handleRefresh = async () => {
|
||||
toastInfo("Refreshing registry list and clearing cache...", {
|
||||
title: "Registry Browser Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "registry-browser-refresh",
|
||||
});
|
||||
// Clear all caches to force reload all data
|
||||
globalCache.clearAll();
|
||||
const refreshed = await loadRegistries({ current: true }, true, true); // skipCache = true, refresh
|
||||
if (refreshed) {
|
||||
toastSuccess(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
};
|
||||
|
||||
// Navigate to config page
|
||||
const handleAddRegistry = () => {
|
||||
navigate("/configuration/registries");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title="Artifact - Registries"
|
||||
description="Browse all OCI registries and their artifacts"
|
||||
icon={Database}
|
||||
iconColor="text-purple-400"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
spinIcon={true}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Plus}
|
||||
onClick={handleAddRegistry}
|
||||
>
|
||||
Add Registry
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && <LoadingState message="Loading registries..." />}
|
||||
|
||||
{/* Error State */}
|
||||
{error && !loading && (
|
||||
<ErrorState message={error} onRetry={handleRefresh} />
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !error && registries.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Database}
|
||||
title="No Registries Found"
|
||||
description="Add your first OCI registry to start managing artifacts"
|
||||
action={{
|
||||
label: "Add Registry",
|
||||
icon: Plus,
|
||||
onClick: handleAddRegistry,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Registry Tree Explorer (Three-Level Layout) */}
|
||||
{!loading && !error && registries.length > 0 && (
|
||||
<RegistryTreeExplorer registries={registries} />
|
||||
)}
|
||||
|
||||
{/* Enhanced Usage Tips */}
|
||||
{!loading && registries.length > 0 && (
|
||||
<div className="mt-6 relative overflow-hidden bg-gradient-to-br from-purple-900/30 via-blue-900/20 to-purple-900/30 border border-purple-500/30 rounded-xl shadow-lg shadow-purple-500/10">
|
||||
{/* Decorative background */}
|
||||
<div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-br from-purple-500/10 to-transparent rounded-full blur-2xl"></div>
|
||||
|
||||
<div className="relative p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-lg border border-purple-500/30">
|
||||
<Package className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<h3 className="text-base font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-blue-300">
|
||||
Quick Tips & Guide
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-purple-500/30 transition-colors">
|
||||
<div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-purple-500/20 text-purple-400 rounded-full text-xs font-bold border border-purple-500/30">1</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-slate-300 leading-relaxed">
|
||||
Click on a registry to <span className="text-purple-400 font-semibold">expand and view</span> its repositories
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-blue-500/30 transition-colors">
|
||||
<div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-500/20 text-blue-400 rounded-full text-xs font-bold border border-blue-500/30">2</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-slate-300 leading-relaxed">
|
||||
Use <span className="text-blue-400 font-semibold">"Browse"</span> to explore all tags and artifacts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-green-500/30 transition-colors">
|
||||
<div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-green-500/20 text-green-400 rounded-full text-xs font-bold border border-green-500/30">3</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-slate-300 leading-relaxed">
|
||||
Click <span className="text-green-400 font-semibold">"Launch"</span> to deploy artifacts to your cluster
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-slate-800/40 border border-slate-700/50 rounded-lg hover:border-cyan-500/30 transition-colors">
|
||||
<div className="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-cyan-500/20 text-cyan-400 rounded-full text-xs font-bold border border-cyan-500/30">4</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-slate-300 leading-relaxed">
|
||||
Use <span className="text-cyan-400 font-semibold">search</span> to quickly find specific registries
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegistriesBrowserPage;
|
||||
@ -0,0 +1,290 @@
|
||||
/**
|
||||
* Repositories Browser Page
|
||||
* 浏览特定 Registry 的所有 Repositories
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Database, RefreshCw, ArrowLeft, Search, Package } from "lucide-react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useToast } from "@/shared";
|
||||
import {
|
||||
PageHeader,
|
||||
Button,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
EmptyState
|
||||
} from "@/shared/components";
|
||||
import { listRegistries, listRepositories } from "@/api";
|
||||
import type { ListRepositories200Item, RepositoryListResponse } from "@/api";
|
||||
import { RepositoryItem } from "../components/RepositoryItem";
|
||||
import { globalCache } from "@/shared/services/artifact-cache";
|
||||
import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
|
||||
const RepositoriesBrowserPage: React.FC = () => {
|
||||
const { registryId } = useParams<{ registryId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
|
||||
|
||||
const [repositories, setRepositories] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [registryName, setRegistryName] = useState<string>("");
|
||||
const [registryUrl, setRegistryUrl] = useState<string>("");
|
||||
|
||||
// Load registry info
|
||||
useEffect(() => {
|
||||
const loadRegistryInfo = async () => {
|
||||
if (!registryId) return;
|
||||
try {
|
||||
const registries = await listRegistries();
|
||||
const foundRegistry = registries.find(r => r.id === registryId);
|
||||
if (foundRegistry) {
|
||||
setRegistryName(foundRegistry.name || "");
|
||||
setRegistryUrl(foundRegistry.url || "");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load registry info:", err);
|
||||
}
|
||||
};
|
||||
loadRegistryInfo();
|
||||
}, [registryId]);
|
||||
|
||||
// Load repositories
|
||||
const loadRepositories = async (
|
||||
isMounted = { current: true },
|
||||
skipCache = false,
|
||||
isRefresh = false
|
||||
) => {
|
||||
let succeeded = false;
|
||||
if (!registryId) {
|
||||
setError("Registry ID is missing");
|
||||
setLoading(false);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!skipCache && registryId) {
|
||||
const cached = globalCache.get<string[]>("repositories", registryId);
|
||||
if (cached) {
|
||||
console.log(`[RepositoriesBrowserPage] Using cached repositories for ${registryId}`);
|
||||
setRepositories(cached);
|
||||
setLoading(false);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
const response = await listRepositories({ registryId });
|
||||
const repos = normalizeRepositoryNames(response);
|
||||
if (isMounted.current) {
|
||||
setRepositories(repos);
|
||||
if (registryId) {
|
||||
globalCache.set("repositories", repos, registryId);
|
||||
}
|
||||
succeeded = true;
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted.current) {
|
||||
const errorMsg = formatApiError(err) || RegistryErrors.LOAD_FAILED;
|
||||
setError(errorMsg);
|
||||
toastError(errorMsg);
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
if (isRefresh) {
|
||||
setRefreshing(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const isMounted = { current: true };
|
||||
loadRepositories(isMounted);
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, [registryId]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
toastInfo("Refreshing repositories...", {
|
||||
title: "Repositories Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "repositories-refresh",
|
||||
});
|
||||
globalCache.clearAll();
|
||||
const refreshed = await loadRepositories({ current: true }, true, true);
|
||||
if (refreshed) {
|
||||
toastSuccess(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
navigate("/artifact/registries");
|
||||
};
|
||||
|
||||
const handleRepositoryClick = (repositoryName: string) => {
|
||||
if (registryId) {
|
||||
const encodedName = encodeURIComponent(repositoryName);
|
||||
navigate(`/artifact/registries/${registryId}/repositories/${encodedName}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Filter repositories by search term
|
||||
const filteredRepositories = repositories.filter((repo) =>
|
||||
repo.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title={`Repositories - ${registryName || registryId || "Registry"}`}
|
||||
description={`Browse repositories in ${registryName || registryId || "this registry"}`}
|
||||
icon={Database}
|
||||
iconColor="text-purple-400"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={ArrowLeft}
|
||||
onClick={handleBack}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
spinIcon={true}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Search Bar */}
|
||||
{!loading && !error && repositories.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search repositories..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 bg-dark-lighter border border-dark-border rounded-lg
|
||||
text-white placeholder-gray-500 focus:outline-none focus:border-purple-500
|
||||
focus:ring-1 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && <LoadingState message="Loading repositories..." />}
|
||||
|
||||
{/* Error State */}
|
||||
{error && !loading && (
|
||||
<ErrorState message={error} onRetry={handleRefresh} />
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !error && filteredRepositories.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Database}
|
||||
title={searchTerm ? "No Repositories Found" : "No Repositories"}
|
||||
description={
|
||||
searchTerm
|
||||
? `No repositories match "${searchTerm}"`
|
||||
: "This registry doesn't contain any repositories yet"
|
||||
}
|
||||
action={
|
||||
!searchTerm
|
||||
? {
|
||||
label: "Back to Registries",
|
||||
icon: ArrowLeft,
|
||||
onClick: handleBack,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Repositories List */}
|
||||
{!loading && !error && filteredRepositories.length > 0 && (
|
||||
<div className="mt-6 space-y-3">
|
||||
{filteredRepositories.map((repo) => (
|
||||
<div
|
||||
key={repo}
|
||||
onClick={() => handleRepositoryClick(repo)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<RepositoryItem
|
||||
registryId={registryId || ""}
|
||||
registryName={registryName}
|
||||
registryUrl={registryUrl}
|
||||
repository={repo}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
{!loading && repositories.length > 0 && (
|
||||
<div className="mt-6 p-4 bg-dark-card border border-dark-border rounded-lg">
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="w-4 h-4" />
|
||||
<span>Registry:</span>
|
||||
<span className="text-white font-medium">{registryName || registryId}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="w-4 h-4" />
|
||||
<span>Repositories:</span>
|
||||
<span className="text-white font-medium">
|
||||
{filteredRepositories.length}
|
||||
{searchTerm && ` of ${repositories.length}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RepositoriesBrowserPage;
|
||||
|
||||
function normalizeRepositoryNames(
|
||||
payload: RepositoryListResponse | ListRepositories200Item[] | null | undefined
|
||||
): string[] {
|
||||
if (!payload) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (Array.isArray(payload)) {
|
||||
return payload
|
||||
.map((repo) => (typeof repo === "string" ? repo : repo.name || ""))
|
||||
.filter((name): name is string => Boolean(name));
|
||||
}
|
||||
|
||||
if (Array.isArray(payload.repositories)) {
|
||||
return payload.repositories.filter((name): name is string => typeof name === "string" && Boolean(name));
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import type { ArtifactListItem } from "@/api";
|
||||
|
||||
export type ArtifactCategory = "chart" | "image" | "other";
|
||||
|
||||
/**
|
||||
* 推断 artifact 分类
|
||||
*
|
||||
* 后端 OpenAPI 已经返回规范化的类型值：'chart', 'image', 'other'
|
||||
* 这个函数主要是类型转换和空值处理
|
||||
*/
|
||||
export const inferArtifactCategory = (
|
||||
tag: ArtifactListItem | undefined,
|
||||
): ArtifactCategory => {
|
||||
if (!tag) {
|
||||
return "other";
|
||||
}
|
||||
|
||||
if (!tag.type) {
|
||||
return "other";
|
||||
}
|
||||
|
||||
// 后端已经返回规范化的值：'chart', 'image', 'other'
|
||||
return tag.type as ArtifactCategory;
|
||||
};
|
||||
|
||||
export const inferArtifactCategoryFromValues = (
|
||||
rawType?: string | null,
|
||||
): ArtifactCategory => {
|
||||
if (!rawType) return "other";
|
||||
|
||||
const typeValue = rawType.toLowerCase().trim();
|
||||
|
||||
// 后端返回规范化的值
|
||||
if (typeValue === "chart" || typeValue === "image" || typeValue === "other") {
|
||||
return typeValue as ArtifactCategory;
|
||||
}
|
||||
|
||||
return "other";
|
||||
};
|
||||
|
||||
11
frontend/src/features/auth/index.ts
Normal file
11
frontend/src/features/auth/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Authentication Feature
|
||||
* 用户认证功能 - 登录和注册
|
||||
*/
|
||||
|
||||
// Export pages
|
||||
export { default as AuthPage } from './pages/AuthPage';
|
||||
|
||||
// Export types (if any)
|
||||
// export * from './types';
|
||||
|
||||
265
frontend/src/features/auth/pages/AuthPage.tsx
Normal file
265
frontend/src/features/auth/pages/AuthPage.tsx
Normal file
@ -0,0 +1,265 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LogIn, UserPlus, Loader2, Eye, EyeOff } from "lucide-react";
|
||||
import { useToast } from "@/shared";
|
||||
import { getErrorMessage } from "@/shared/utils/handleApiError";
|
||||
import { login as apiLogin, register as apiRegister, type AuthResponse } from "@/api";
|
||||
|
||||
type Props = {
|
||||
onLogin: (response: AuthResponse) => void;
|
||||
};
|
||||
|
||||
const AuthPage: React.FC<Props> = ({ onLogin }) => {
|
||||
const navigate = useNavigate();
|
||||
const { success: toastSuccess, error: toastError, info: toastInfo } = useToast();
|
||||
|
||||
// Tab state
|
||||
const [activeTab, setActiveTab] = useState<"login" | "register">("login");
|
||||
|
||||
// Login form
|
||||
const [loginUsername, setLoginUsername] = useState("");
|
||||
const [loginPassword, setLoginPassword] = useState("");
|
||||
const [loginLoading, setLoginLoading] = useState(false);
|
||||
const [loginError, setLoginError] = useState<string | null>(null);
|
||||
|
||||
// Register form
|
||||
const [regUsername, setRegUsername] = useState("");
|
||||
const [regPassword, setRegPassword] = useState("");
|
||||
const [regConfirmPwd, setRegConfirmPwd] = useState("");
|
||||
const [showPwd, setShowPwd] = useState(false);
|
||||
const [regLoading, setRegLoading] = useState(false);
|
||||
const [regError, setRegError] = useState<string | null>(null);
|
||||
|
||||
// Handle login
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!loginUsername || !loginPassword) return;
|
||||
|
||||
setLoginLoading(true);
|
||||
setLoginError(null);
|
||||
toastInfo("Logging in...", { title: "Login", durationMs: 1200 });
|
||||
|
||||
try {
|
||||
const response = await apiLogin({ username: loginUsername, password: loginPassword });
|
||||
|
||||
// JWT 格式: { access_token, refresh_token, username, ... }
|
||||
toastSuccess(`Welcome, ${response.username}!`);
|
||||
onLogin(response);
|
||||
navigate("/home", { replace: true });
|
||||
} catch (err: unknown) {
|
||||
const raw = err as any;
|
||||
const msg = raw?.message?.includes("Failed to fetch")
|
||||
? "Network or CORS error: Please check backend CORS or use Vite proxy in development."
|
||||
: getErrorMessage(err, "Login failed. Please try again later.");
|
||||
|
||||
setLoginError(msg);
|
||||
toastError(msg);
|
||||
} finally {
|
||||
setLoginLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle register
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (regPassword !== regConfirmPwd) {
|
||||
const msg = "Passwords do not match";
|
||||
setRegError(msg);
|
||||
toastError(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
setRegLoading(true);
|
||||
setRegError(null);
|
||||
toastInfo("Registering...", { title: "Register", durationMs: 1200 });
|
||||
|
||||
try {
|
||||
const registerResponse = await apiRegister({ username: regUsername, password: regPassword });
|
||||
|
||||
toastSuccess(`Welcome, ${registerResponse.username}! Registration successful.`);
|
||||
toastInfo("Signing you in...", { title: "Auto Login", durationMs: 1200 });
|
||||
|
||||
try {
|
||||
const loginResponse = await apiLogin({ username: regUsername, password: regPassword });
|
||||
// JWT 格式: { access_token, refresh_token, username, ... }
|
||||
onLogin(loginResponse);
|
||||
navigate("/home", { replace: true });
|
||||
} catch (autoLoginErr: unknown) {
|
||||
const msg = getErrorMessage(autoLoginErr, "Registration succeeded but auto login failed. Please login manually.");
|
||||
setRegError(msg);
|
||||
toastError(msg);
|
||||
return;
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
const raw = err as any;
|
||||
let msg = getErrorMessage(err, "Registration failed. Please try again later.");
|
||||
|
||||
// 提供更友好的错误提示
|
||||
if (raw?.message?.includes("Failed to fetch")) {
|
||||
msg = "Network or CORS error: Please check backend CORS or use Vite proxy in development.";
|
||||
} else if (raw?.message?.includes("username")) {
|
||||
msg = "Username is already taken or invalid.";
|
||||
}
|
||||
|
||||
setRegError(msg);
|
||||
toastError(msg);
|
||||
console.error("Registration error:", err);
|
||||
} finally {
|
||||
setRegLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-dark text-primary flex items-center justify-center px-4 sm:px-6">
|
||||
<div className="pointer-events-none absolute inset-0 bg-app-gradient opacity-90" aria-hidden="true" />
|
||||
<div className="relative w-full max-w-md p-6 sm:p-7 bg-dark-lighter/80 border border-dark-border/70 rounded-2xl shadow-soft backdrop-blur-xl">
|
||||
{/* Tab Header */}
|
||||
<div className="flex border-b border-dark-border/60 mb-6">
|
||||
<button
|
||||
className={`flex-1 py-3 text-center font-semibold transition-colors ${
|
||||
activeTab === "login"
|
||||
? "text-brand-accent border-b-2 border-brand-accent"
|
||||
: "text-secondary hover:text-primary"
|
||||
}`}
|
||||
onClick={() => setActiveTab("login")}
|
||||
>
|
||||
<LogIn className="w-5 h-5 inline-block mr-2" />
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
className={`flex-1 py-3 text-center font-semibold transition-colors ${
|
||||
activeTab === "register"
|
||||
? "text-accent-teal border-b-2 border-accent-teal"
|
||||
: "text-secondary hover:text-primary"
|
||||
}`}
|
||||
onClick={() => setActiveTab("register")}
|
||||
>
|
||||
<UserPlus className="w-5 h-5 inline-block mr-2" />
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
{activeTab === "login" && (
|
||||
<div className="animate-fadeIn">
|
||||
<header className="mb-6 text-center">
|
||||
<LogIn className="w-10 h-10 text-brand-accent mx-auto mb-2" />
|
||||
<h1 className="text-2xl font-semibold text-primary">Welcome</h1>
|
||||
<p className="text-secondary text-sm mt-1">Access your manager</p>
|
||||
</header>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-secondary">Username</label>
|
||||
<input
|
||||
value={loginUsername}
|
||||
onChange={(e) => setLoginUsername(e.target.value)}
|
||||
className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-brand-accent focus:border-brand-accent focus:outline-none transition-shadow"
|
||||
autoComplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-secondary">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={loginPassword}
|
||||
onChange={(e) => setLoginPassword(e.target.value)}
|
||||
className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-brand-accent focus:border-brand-accent focus:outline-none transition-shadow"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loginLoading}
|
||||
className={`w-full disabled:opacity-60 font-semibold py-2.5 rounded-lg flex items-center justify-center gap-2 transition-colors duration-150
|
||||
${loginLoading ? "bg-brand-accent/70 cursor-wait text-primary" : "bg-brand-accent text-dark hover:bg-brand-accent/90"}`}
|
||||
>
|
||||
{loginLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogIn className="w-4 h-4" />}
|
||||
{loginLoading ? "Logging in..." : "Login"}
|
||||
</button>
|
||||
|
||||
{loginError && <p className="text-red-400 text-center text-sm">{loginError}</p>}
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Register Form */}
|
||||
{activeTab === "register" && (
|
||||
<div className="animate-fadeIn">
|
||||
<header className="mb-6 text-center">
|
||||
<UserPlus className="w-10 h-10 text-accent-teal mx-auto mb-2" />
|
||||
<h1 className="text-2xl font-semibold text-primary">Create Account</h1>
|
||||
<p className="text-secondary text-sm mt-1">Create a new account</p>
|
||||
</header>
|
||||
|
||||
<form onSubmit={handleRegister} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-secondary">Username</label>
|
||||
<input
|
||||
value={regUsername}
|
||||
onChange={(e) => setRegUsername(e.target.value)}
|
||||
className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-accent-teal focus:border-accent-teal focus:outline-none transition-shadow"
|
||||
autoComplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-secondary">Password</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPwd ? "text" : "password"}
|
||||
value={regPassword}
|
||||
onChange={(e) => setRegPassword(e.target.value)}
|
||||
className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-accent-teal focus:border-accent-teal focus:outline-none transition-shadow pr-10"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPwd((s) => !s)}
|
||||
className="absolute inset-y-0 right-2 flex items-center text-secondary hover:text-primary transition-colors"
|
||||
aria-label={showPwd ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showPwd ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-secondary">Confirm Password</label>
|
||||
<input
|
||||
type={showPwd ? "text" : "password"}
|
||||
value={regConfirmPwd}
|
||||
onChange={(e) => setRegConfirmPwd(e.target.value)}
|
||||
className="mt-1 w-full bg-dark/60 border border-dark-border/60 rounded-lg p-2 text-primary focus:ring-2 focus:ring-accent-teal focus:border-accent-teal focus:outline-none transition-shadow"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={regLoading}
|
||||
className={`w-full disabled:opacity-60 font-semibold py-2.5 rounded-lg flex items-center justify-center gap-2 transition-colors duration-150
|
||||
${regLoading ? "bg-accent-teal/70 cursor-wait text-primary" : "bg-accent-teal text-dark hover:bg-accent-teal/90"}`}
|
||||
>
|
||||
{regLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
|
||||
{regLoading ? "Registering..." : "Register"}
|
||||
</button>
|
||||
|
||||
{regError && <p className="text-red-400 text-center text-sm">{regError}</p>}
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthPage;
|
||||
@ -0,0 +1,362 @@
|
||||
/**
|
||||
* Cluster Configuration Form Component
|
||||
* For adding and editing cluster configurations
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Server, Key, FileText } from "lucide-react";
|
||||
import type { ClusterConfig } from "@/core/types";
|
||||
import { ValidationErrors } from "@/shared/utils";
|
||||
import { ButtonText, LabelText } from "@/shared/constants";
|
||||
|
||||
interface ClusterFormProps {
|
||||
cluster?: ClusterConfig;
|
||||
onSave: (data: Omit<ClusterConfig, "id" | "createdAt" | "updatedAt">) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export const ClusterForm: React.FC<ClusterFormProps> = ({
|
||||
cluster,
|
||||
onSave,
|
||||
onCancel,
|
||||
}) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: cluster?.name ?? "",
|
||||
host: cluster?.host ?? "",
|
||||
caData: cluster?.caData ?? "",
|
||||
certData: cluster?.certData ?? "",
|
||||
keyData: cluster?.keyData ?? "",
|
||||
token: cluster?.token ?? "",
|
||||
description: cluster?.description ?? "",
|
||||
});
|
||||
|
||||
// 新证书输入（编辑模式）
|
||||
const [newCaData, setNewCaData] = useState<string>("");
|
||||
const [newCertData, setNewCertData] = useState<string>("");
|
||||
const [newKeyData, setNewKeyData] = useState<string>("");
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
setFormData({
|
||||
name: cluster.name ?? "",
|
||||
host: cluster.host ?? "",
|
||||
caData: cluster.caData ?? "",
|
||||
certData: cluster.certData ?? "",
|
||||
keyData: cluster.keyData ?? "",
|
||||
token: cluster.token ?? "",
|
||||
description: cluster.description ?? "",
|
||||
});
|
||||
}
|
||||
}, [cluster]);
|
||||
|
||||
const handleChange = (
|
||||
field: keyof typeof formData,
|
||||
value: string
|
||||
) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
// Clear field error
|
||||
if (errors[field]) {
|
||||
setErrors((prev) => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[field];
|
||||
return newErrors;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const validate = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = ValidationErrors.REQUIRED_FIELD("Cluster name");
|
||||
}
|
||||
|
||||
if (!formData.host.trim()) {
|
||||
newErrors.host = ValidationErrors.REQUIRED_FIELD("API Server URL");
|
||||
} else if (!/^https?:\/\/.+/.test(formData.host.trim())) {
|
||||
newErrors.host = ValidationErrors.INVALID_URL;
|
||||
}
|
||||
|
||||
// 创建模式：必填证书
|
||||
if (!cluster) {
|
||||
if (!formData.caData.trim()) {
|
||||
newErrors.caData = ValidationErrors.REQUIRED_FIELD("CA Certificate");
|
||||
}
|
||||
if (!formData.certData.trim()) {
|
||||
newErrors.certData = ValidationErrors.REQUIRED_FIELD("Client Certificate");
|
||||
}
|
||||
if (!formData.keyData.trim()) {
|
||||
newErrors.keyData = ValidationErrors.REQUIRED_FIELD("Client Key");
|
||||
}
|
||||
}
|
||||
// 编辑模式：证书可选（留空保持不变）
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (validate()) {
|
||||
// 准备提交数据 - 使用 OpenAPI 生成的 camelCase 字段名
|
||||
const submitData: Record<string, string> = {
|
||||
name: formData.name.trim(),
|
||||
host: formData.host.trim(),
|
||||
};
|
||||
|
||||
// 只添加非空的 description
|
||||
if (formData.description.trim()) {
|
||||
submitData.description = formData.description.trim();
|
||||
}
|
||||
|
||||
if (cluster) {
|
||||
// 编辑模式：只发送用户输入的新值（使用 camelCase）
|
||||
if (newCaData.trim()) submitData.caData = newCaData.trim();
|
||||
if (newCertData.trim()) submitData.certData = newCertData.trim();
|
||||
if (newKeyData.trim()) submitData.keyData = newKeyData.trim();
|
||||
} else {
|
||||
// 创建模式：发送所有必填字段（使用 camelCase）
|
||||
submitData.caData = formData.caData.trim();
|
||||
submitData.certData = formData.certData.trim();
|
||||
submitData.keyData = formData.keyData.trim();
|
||||
if (formData.token?.trim()) submitData.token = formData.token.trim();
|
||||
}
|
||||
|
||||
onSave(submitData);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
|
||||
{/* Cluster Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
|
||||
<Server className="w-4 h-4 text-blue-400" />
|
||||
{LabelText.NAME} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange("name", e.target.value)}
|
||||
className={`w-full bg-gray-900/60 border ${
|
||||
errors.name ? "border-red-500" : "border-gray-600"
|
||||
} rounded-lg p-2.5 sm:p-3 text-sm sm:text-base text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none`}
|
||||
placeholder="e.g., Production Cluster"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="mt-1 text-sm text-red-400">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* API Server URL */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
|
||||
<Server className="w-4 h-4 text-blue-400" />
|
||||
API Server URL <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.host}
|
||||
onChange={(e) => handleChange("host", e.target.value)}
|
||||
className={`w-full bg-gray-900/60 border ${
|
||||
errors.host ? "border-red-500" : "border-gray-600"
|
||||
} rounded-lg p-2.5 sm:p-3 text-sm sm:text-base text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none`}
|
||||
placeholder="e.g., https://kubernetes.example.com:6443"
|
||||
/>
|
||||
{errors.host && (
|
||||
<p className="mt-1 text-sm text-red-400">{errors.host}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Kubernetes API Server address (usually HTTPS protocol)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CA Certificate */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-green-400" />
|
||||
CA Certificate (Base64) {!cluster && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{cluster ? (
|
||||
// 编辑模式：显示状态和新输入
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
|
||||
<span className="text-gray-400 text-sm">当前:</span>
|
||||
<span className="text-white font-mono text-xs">{formData.caData}</span>
|
||||
{cluster.hasCaData && (
|
||||
<span className="ml-auto text-xs text-green-400 flex items-center gap-1">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
已配置（加密存储）
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
value={newCaData}
|
||||
onChange={(e) => setNewCaData(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none"
|
||||
placeholder="粘贴新的 CA 证书以覆盖（留空保持不变）"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
💡 输入新证书以覆盖，留空则保持原证书不变
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
// 创建模式：必填
|
||||
<>
|
||||
<textarea
|
||||
value={formData.caData}
|
||||
onChange={(e) => handleChange("caData", e.target.value)}
|
||||
rows={4}
|
||||
className={`w-full bg-gray-900/60 border ${
|
||||
errors.caData ? "border-red-500" : "border-gray-600"
|
||||
} rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none`}
|
||||
placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0t..."
|
||||
/>
|
||||
{errors.caData && (
|
||||
<p className="mt-1 text-sm text-red-400">{errors.caData}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Cluster CA certificate in base64 format (certificate-authority-data)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Client Certificate */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-yellow-400" />
|
||||
Client Certificate (Base64) {!cluster && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{cluster ? (
|
||||
// 编辑模式
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
|
||||
<span className="text-gray-400 text-sm">当前:</span>
|
||||
<span className="text-white font-mono text-xs">{formData.certData}</span>
|
||||
{cluster.hasCertData && (
|
||||
<span className="ml-auto text-xs text-green-400 flex items-center gap-1">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
已配置（加密存储）
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
value={newCertData}
|
||||
onChange={(e) => setNewCertData(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none"
|
||||
placeholder="粘贴新的客户端证书以覆盖（留空保持不变）"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
💡 输入新证书以覆盖，留空则保持原证书不变
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<textarea
|
||||
value={formData.certData}
|
||||
onChange={(e) => handleChange("certData", e.target.value)}
|
||||
rows={4}
|
||||
className={`w-full bg-gray-900/60 border ${
|
||||
errors.certData ? "border-red-500" : "border-gray-600"
|
||||
} rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none`}
|
||||
placeholder="LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0t..."
|
||||
/>
|
||||
{errors.certData && (
|
||||
<p className="mt-1 text-sm text-red-400">{errors.certData}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Client certificate in base64 format (client-certificate-data)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Client Key */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-red-400" />
|
||||
Client Key (Base64) {!cluster && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{cluster ? (
|
||||
// 编辑模式
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
|
||||
<span className="text-gray-400 text-sm">当前:</span>
|
||||
<span className="text-white font-mono text-xs">{formData.keyData}</span>
|
||||
{cluster.hasKeyData && (
|
||||
<span className="ml-auto text-xs text-green-400 flex items-center gap-1">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
已配置（加密存储）
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
value={newKeyData}
|
||||
onChange={(e) => setNewKeyData(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none"
|
||||
placeholder="粘贴新的客户端密钥以覆盖（留空保持不变）"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
💡 输入新密钥以覆盖，留空则保持原密钥不变
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<textarea
|
||||
value={formData.keyData}
|
||||
onChange={(e) => handleChange("keyData", e.target.value)}
|
||||
rows={4}
|
||||
className={`w-full bg-gray-900/60 border ${
|
||||
errors.keyData ? "border-red-500" : "border-gray-600"
|
||||
} rounded-lg p-2.5 sm:p-3 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-xs sm:text-sm resize-none`}
|
||||
placeholder="LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBL..."
|
||||
/>
|
||||
{errors.keyData && (
|
||||
<p className="mt-1 text-sm text-red-400">{errors.keyData}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Client private key in base64 format (client-key-data)
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-gray-400" />
|
||||
{LabelText.DESCRIPTION} (Optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => handleChange("description", e.target.value)}
|
||||
rows={2}
|
||||
className="w-full bg-gray-900/60 border border-gray-600 rounded-lg p-2.5 sm:p-3 text-sm sm:text-base text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
||||
placeholder="Cluster description (e.g., purpose, environment)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3 pt-3 sm:pt-4 border-t border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition text-sm sm:text-base"
|
||||
>
|
||||
{ButtonText.CANCEL}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition text-sm sm:text-base"
|
||||
>
|
||||
{cluster ? ButtonText.SAVE : `${ButtonText.ADD} ${LabelText.CLUSTER}`}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,135 @@
|
||||
/**
|
||||
* Cluster Configuration List Component
|
||||
* Display cluster list with edit and delete actions
|
||||
*/
|
||||
import React from "react";
|
||||
import { Server, Edit, Trash2, Key, ExternalLink } from "lucide-react";
|
||||
import type { ClusterConfig } from "@/core/types";
|
||||
import { LoadingText, EmptyText } from "@/shared/constants";
|
||||
|
||||
interface ClusterListProps {
|
||||
clusters: ClusterConfig[];
|
||||
loading: boolean;
|
||||
onEdit: (cluster: ClusterConfig) => void;
|
||||
onDelete: (cluster: ClusterConfig) => void;
|
||||
}
|
||||
|
||||
export const ClusterList: React.FC<ClusterListProps> = ({
|
||||
clusters,
|
||||
loading,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400"></div>
|
||||
<p className="text-gray-400 mt-4">{LoadingText.LOADING_CLUSTERS}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (clusters.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<Server className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 text-lg mb-2">{EmptyText.NO_CLUSTERS}</p>
|
||||
<p className="text-gray-500 text-sm">{EmptyText.NO_CLUSTERS_DESC}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{clusters.map((cluster) => (
|
||||
<div
|
||||
key={cluster.id}
|
||||
className="bg-gray-800/50 border border-gray-700 rounded-lg p-5 hover:bg-gray-800 hover:border-gray-600 transition group"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2 mb-1">
|
||||
<Server className="w-5 h-5 text-blue-400" />
|
||||
{cluster.name}
|
||||
</h3>
|
||||
{cluster.description && (
|
||||
<p className="text-sm text-gray-400">{cluster.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<button
|
||||
onClick={() => onEdit(cluster)}
|
||||
className="p-2 text-gray-400 hover:text-blue-400 hover:bg-blue-400/10 rounded-lg transition"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(cluster)}
|
||||
className="p-2 text-gray-400 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Server Info */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<ExternalLink className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 mb-0.5">API Server URL</p>
|
||||
<p className="text-sm text-gray-300 font-mono truncate" title={cluster.host}>
|
||||
{cluster.host}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<Key className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 mb-0.5">CA Certificate</p>
|
||||
<p className={`text-xs ${cluster.hasCaData ? "text-green-400" : "text-gray-500"}`}>
|
||||
{cluster.hasCaData ? "✓ Configured" : "✗ Not Configured"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2">
|
||||
<Key className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 mb-0.5">Client Cert</p>
|
||||
<p className={`text-xs ${cluster.hasCertData ? "text-yellow-400" : "text-gray-500"}`}>
|
||||
{cluster.hasCertData ? "✓ Configured" : "✗ Not Configured"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2">
|
||||
<Key className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 mb-0.5">Client Key</p>
|
||||
<p className={`text-xs ${cluster.hasKeyData ? "text-red-400" : "text-gray-500"}`}>
|
||||
{cluster.hasKeyData ? "✓ Configured" : "✗ Not Configured"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{cluster.createdAt && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-700/50">
|
||||
<p className="text-xs text-gray-500">
|
||||
Created: {new Date(cluster.createdAt).toLocaleString("en-US")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
12
frontend/src/features/configuration/clusters/index.ts
Normal file
12
frontend/src/features/configuration/clusters/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Cluster Management Feature
|
||||
* 集群配置管理功能
|
||||
*/
|
||||
|
||||
// Export pages
|
||||
export { default as ClusterConfigPage } from './pages/ClusterConfigPage';
|
||||
|
||||
// Export components
|
||||
export { ClusterForm } from './components/ClusterForm';
|
||||
export { ClusterList } from './components/ClusterList';
|
||||
|
||||
@ -0,0 +1,247 @@
|
||||
/**
|
||||
* Cluster Configuration Page
|
||||
* Manage Kubernetes cluster configurations
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Plus, RefreshCw, Server } from "lucide-react";
|
||||
import { useToast, Modal, Button, PageHeader } from "@/shared";
|
||||
import { ClusterErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
import { ClusterForm } from "../components/ClusterForm";
|
||||
import { ClusterList } from "../components/ClusterList";
|
||||
import {
|
||||
listClusters,
|
||||
createCluster,
|
||||
updateCluster,
|
||||
deleteCluster,
|
||||
} from "@/api";
|
||||
import type { ClusterConfig, ClusterResponse } from "@/core/types";
|
||||
|
||||
const ClusterConfigPage: React.FC = () => {
|
||||
const { success, error: toastError, info: toastInfo } = useToast();
|
||||
|
||||
const [clusters, setClusters] = useState<ClusterConfig[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingCluster, setEditingCluster] = useState<ClusterConfig | undefined>(undefined);
|
||||
|
||||
// Load clusters
|
||||
const loadClusters = async (isMounted = { current: true }, isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
let succeeded = false;
|
||||
try {
|
||||
const data = await listClusters();
|
||||
// Only update state if component is still mounted
|
||||
if (isMounted.current) {
|
||||
setClusters(data);
|
||||
succeeded = true;
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted.current) {
|
||||
toastError(formatApiError(err) || ClusterErrors.LOAD_FAILED);
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
if (isRefresh) {
|
||||
setRefreshing(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const isMounted = { current: true };
|
||||
loadClusters(isMounted);
|
||||
|
||||
// Cleanup: mark component as unmounted
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Refresh clusters
|
||||
const handleRefresh = async () => {
|
||||
toastInfo("Refreshing clusters...", {
|
||||
title: "Cluster Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "clusters-refresh",
|
||||
});
|
||||
const refreshed = await loadClusters({ current: true }, true);
|
||||
if (refreshed) {
|
||||
success(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
};
|
||||
|
||||
// Add cluster
|
||||
const handleAdd = () => {
|
||||
setEditingCluster(undefined);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Edit cluster
|
||||
const handleEdit = (cluster: ClusterResponse) => {
|
||||
setEditingCluster(cluster);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Save cluster
|
||||
const handleSave = async (
|
||||
data: Omit<ClusterResponse, "id" | "createdAt" | "updatedAt">
|
||||
) => {
|
||||
try {
|
||||
const actionLabel = editingCluster ? "Updating cluster..." : "Creating cluster...";
|
||||
toastInfo(actionLabel, {
|
||||
title: editingCluster ? "Update Cluster" : "Create Cluster",
|
||||
durationMs: 1800,
|
||||
mergeKey: editingCluster ? `cluster-save-${editingCluster.id}` : "cluster-create",
|
||||
});
|
||||
|
||||
if (editingCluster) {
|
||||
if (!editingCluster.id) {
|
||||
toastError("Cluster identifier is missing. Please refresh and try again.");
|
||||
return;
|
||||
}
|
||||
await updateCluster({ clusterId: editingCluster.id }, data);
|
||||
success(SuccessMessages.CLUSTER_UPDATED);
|
||||
} else {
|
||||
// Build create data with only non-empty auth fields
|
||||
const createData: any = {
|
||||
name: data.name,
|
||||
host: data.host,
|
||||
description: data.description,
|
||||
};
|
||||
|
||||
// Add certificate auth if all three fields are provided
|
||||
if (data.caData && data.certData && data.keyData) {
|
||||
createData.caData = data.caData;
|
||||
createData.certData = data.certData;
|
||||
createData.keyData = data.keyData;
|
||||
}
|
||||
|
||||
// Add token auth if provided
|
||||
if (data.token) {
|
||||
createData.token = data.token;
|
||||
}
|
||||
|
||||
await createCluster(createData);
|
||||
success(SuccessMessages.CLUSTER_CREATED);
|
||||
}
|
||||
setShowModal(false);
|
||||
setEditingCluster(undefined);
|
||||
loadClusters({ current: true });
|
||||
} catch (error) {
|
||||
const errorMsg = editingCluster ? ClusterErrors.UPDATE_FAILED : ClusterErrors.CREATE_FAILED;
|
||||
toastError(formatApiError(error) || errorMsg);
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// Delete cluster
|
||||
const handleDelete = async (cluster: ClusterResponse) => {
|
||||
if (!confirm(`Are you sure you want to delete cluster "${cluster.name}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
toastInfo(`Deleting cluster "${cluster.name}"...`, {
|
||||
title: "Delete Cluster",
|
||||
durationMs: 1800,
|
||||
mergeKey: `cluster-delete-${cluster.id}`,
|
||||
});
|
||||
if (!cluster.id) {
|
||||
toastError("Cluster identifier is missing. Please refresh and try again.");
|
||||
return;
|
||||
}
|
||||
await deleteCluster({ clusterId: cluster.id });
|
||||
success(SuccessMessages.CLUSTER_DELETED);
|
||||
loadClusters({ current: true });
|
||||
} catch (error) {
|
||||
toastError(formatApiError(error) || ClusterErrors.DELETE_FAILED);
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title="Configuration - Clusters"
|
||||
description="Manage Kubernetes cluster connections and authentication"
|
||||
icon={Server}
|
||||
iconColor="text-blue-400"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
spinIcon={true}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Plus}
|
||||
onClick={handleAdd}
|
||||
className="bg-blue-600 hover:bg-blue-700 border-blue-600"
|
||||
>
|
||||
Add Cluster
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Cluster List */}
|
||||
<ClusterList
|
||||
clusters={clusters}
|
||||
loading={loading}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
|
||||
{/* Info Section */}
|
||||
<div className="mt-8 p-4 bg-blue-900/20 border border-blue-700/50 rounded-lg">
|
||||
<h3 className="text-sm font-semibold text-blue-300 mb-2">💡 Usage Tips</h3>
|
||||
<ul className="text-sm text-gray-400 space-y-1">
|
||||
<li>• Cluster configuration contains all information needed to connect to a Kubernetes cluster</li>
|
||||
<li>• <strong>Cluster Address</strong>: URL of the Kubernetes API Server</li>
|
||||
<li>• <strong>Certificate Format</strong>: All certificate fields use base64 encoded strings (same as kubeconfig)</li>
|
||||
<li>• <strong>Backend Processing</strong>: The backend automatically handles certificate format conversion</li>
|
||||
<li>• You can select clusters for application deployment on the instances page</li>
|
||||
<li>• Recommended to configure separate clusters for different environments (development, testing, production)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Add/Edit Modal */}
|
||||
<Modal
|
||||
open={showModal}
|
||||
onClose={() => {
|
||||
setShowModal(false);
|
||||
setEditingCluster(undefined);
|
||||
}}
|
||||
title={editingCluster ? "Edit Cluster Configuration" : "Add Cluster Configuration"}
|
||||
>
|
||||
<ClusterForm
|
||||
cluster={editingCluster}
|
||||
onSave={handleSave}
|
||||
onCancel={() => {
|
||||
setShowModal(false);
|
||||
setEditingCluster(undefined);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClusterConfigPage;
|
||||
15
frontend/src/features/configuration/index.ts
Normal file
15
frontend/src/features/configuration/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Configuration Module
|
||||
* 配置模块 - 集群和仓库配置
|
||||
*/
|
||||
|
||||
// Clusters
|
||||
export { default as ClusterConfigPage } from './clusters/pages/ClusterConfigPage';
|
||||
export * from './clusters/components/ClusterList';
|
||||
export * from './clusters/components/ClusterForm';
|
||||
|
||||
// Registries
|
||||
export { default as RegistryConfigPage } from './registries/pages/RegistryConfigPage';
|
||||
export * from './registries/components/RegistryList';
|
||||
export * from './registries/components/RegistryForm';
|
||||
|
||||
@ -0,0 +1,260 @@
|
||||
/**
|
||||
* Registry Configuration Form
|
||||
* For adding and editing registry configurations
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import { Save, X, TestTube } from "lucide-react";
|
||||
import type { RegistryResponse } from "@/core/types";
|
||||
import { checkRegistryHealth } from "@/api";
|
||||
import { useToast } from "@/shared";
|
||||
import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
import { ButtonText, LabelText } from "@/shared/constants";
|
||||
|
||||
interface RegistryFormProps {
|
||||
registry?: RegistryResponse;
|
||||
onSave: (data: Omit<RegistryResponse, "id">) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export const RegistryForm: React.FC<RegistryFormProps> = ({
|
||||
registry,
|
||||
onSave,
|
||||
onCancel,
|
||||
}) => {
|
||||
const { success, error: toastError, info: toastInfo } = useToast();
|
||||
const [testing, setTesting] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState<
|
||||
Omit<RegistryResponse, "id" | "createdAt" | "updatedAt">
|
||||
>({
|
||||
name: registry?.name || "",
|
||||
url: registry?.url || "",
|
||||
description: registry?.description || "",
|
||||
username: registry?.username || "",
|
||||
password: registry?.password || "",
|
||||
hasPassword: registry?.hasPassword || false,
|
||||
insecure: registry?.insecure || false,
|
||||
});
|
||||
|
||||
// 新密码输入（编辑模式）
|
||||
const [newPassword, setNewPassword] = useState<string>("");
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value, type } = e.target;
|
||||
const checked = type === "checkbox" ? (e.target as HTMLInputElement).checked : undefined;
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// 准备提交数据
|
||||
const submitData = { ...formData };
|
||||
|
||||
// 编辑模式：如果用户输入了新密码，使用新密码；否则不发送密码字段
|
||||
if (registry) {
|
||||
if (newPassword) {
|
||||
submitData.password = newPassword;
|
||||
} else {
|
||||
// 不发送密码字段，保持后端原有密码
|
||||
delete (submitData as any).password;
|
||||
}
|
||||
}
|
||||
|
||||
onSave(submitData);
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
if (!registry?.id) {
|
||||
toastError("Please save the registry configuration before testing the connection.");
|
||||
return;
|
||||
}
|
||||
|
||||
toastInfo("Testing registry connection...", {
|
||||
title: "Connection Test",
|
||||
durationMs: 1800,
|
||||
mergeKey: `registry-test-${registry.id}`,
|
||||
});
|
||||
|
||||
setTesting(true);
|
||||
try {
|
||||
const result = await checkRegistryHealth({ registryId: registry.id }) as any;
|
||||
// ✅ FIX: Backend returns { healthy: boolean, message: string }
|
||||
if (result.healthy === true) {
|
||||
success(result.message || SuccessMessages.REGISTRY_CONNECTION_OK);
|
||||
} else {
|
||||
const errorMsg = result.message || RegistryErrors.CONNECTION_TEST_FAILED;
|
||||
toastError(errorMsg);
|
||||
}
|
||||
} catch (error) {
|
||||
toastError(formatApiError(error) || RegistryErrors.CONNECTION_TEST_FAILED);
|
||||
console.error(error);
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
||||
{LabelText.NAME} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="e.g., Harbor Production"
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Registry URL <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
name="url"
|
||||
value={formData.url}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="https://registry.example.com"
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
OCI registry access URL (e.g., https://registry.hub.docker.com)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Username */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
||||
{LabelText.USERNAME} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="Registry username"
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
||||
{LabelText.PASSWORD} {!registry && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{registry ? (
|
||||
// 编辑模式：显示状态和新密码输入
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-2 px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg">
|
||||
<span className="text-gray-400 text-sm">当前密码:</span>
|
||||
<span className="text-white font-mono">{formData.password}</span>
|
||||
{formData.hasPassword && (
|
||||
<span className="ml-auto text-xs text-green-400 flex items-center gap-1">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full"></span>
|
||||
已设置（加密存储）
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="输入新密码以覆盖（留空保持不变）"
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
💡 输入新密码以覆盖原密码，留空则保持原密码不变
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
// 创建模式：必填
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="Registry password or access token"
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
||||
{LabelText.DESCRIPTION}
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
placeholder="Registry purpose or description"
|
||||
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Insecure */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="insecure"
|
||||
name="insecure"
|
||||
checked={formData.insecure}
|
||||
onChange={handleChange}
|
||||
className="w-4 h-4 text-purple-600 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-2"
|
||||
/>
|
||||
<label htmlFor="insecure" className="ml-2 text-sm text-gray-300">
|
||||
Allow insecure connection (skip SSL certificate verification)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition flex items-center justify-center gap-2"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{ButtonText.SAVE}
|
||||
</button>
|
||||
{registry?.id && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTest}
|
||||
disabled={testing}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition flex items-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<TestTube className={`w-4 h-4 ${testing ? "animate-pulse" : ""}`} />
|
||||
{ButtonText.TEST_CONNECTION}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition flex items-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
{ButtonText.CANCEL}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Registry Configuration List
|
||||
* Display all registry configurations
|
||||
*/
|
||||
import React from "react";
|
||||
import { Edit2, Trash2, Database, ExternalLink } from "lucide-react";
|
||||
import type { AppRegistry } from "@/core/types";
|
||||
import { EmptyStateSimple } from "@/shared/components";
|
||||
import { LoadingText, EmptyText } from "@/shared/constants";
|
||||
|
||||
interface RegistryListProps {
|
||||
registries: AppRegistry[];
|
||||
loading: boolean;
|
||||
onEdit: (registry: AppRegistry) => void;
|
||||
onDelete: (registry: AppRegistry) => void;
|
||||
}
|
||||
|
||||
export const RegistryList: React.FC<RegistryListProps> = ({
|
||||
registries,
|
||||
loading,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
{LoadingText.LOADING_REGISTRIES}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (registries.length === 0) {
|
||||
return (
|
||||
<EmptyStateSimple
|
||||
title={EmptyText.NO_REGISTRIES}
|
||||
description={EmptyText.NO_REGISTRIES_DESC}
|
||||
Icon={Database}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{registries.map((registry) => (
|
||||
<div
|
||||
key={registry.id}
|
||||
className="p-4 bg-gray-800 border border-gray-700 rounded-lg hover:border-gray-600 transition"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
{/* Left: Basic Info */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Database className="w-5 h-5 text-purple-400 flex-shrink-0" />
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{registry.name}
|
||||
</h3>
|
||||
{registry.insecure && (
|
||||
<span className="px-2 py-0.5 bg-yellow-900/30 text-yellow-400 text-xs rounded">
|
||||
Insecure
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="ml-8 space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
<a
|
||||
href={registry.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-purple-400 transition"
|
||||
>
|
||||
{registry.url}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{registry.description && (
|
||||
<p className="text-sm text-gray-500">{registry.description}</p>
|
||||
)}
|
||||
|
||||
{registry.username && (
|
||||
<p className="text-sm text-gray-500">
|
||||
Username: <span className="text-gray-400">{registry.username}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Action Buttons */}
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
<button
|
||||
onClick={() => onEdit(registry)}
|
||||
className="p-2 text-gray-400 hover:text-blue-400 hover:bg-gray-700 rounded-lg transition"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(registry)}
|
||||
className="p-2 text-gray-400 hover:text-red-400 hover:bg-gray-700 rounded-lg transition"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
12
frontend/src/features/configuration/registries/index.ts
Normal file
12
frontend/src/features/configuration/registries/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Registry Management Feature
|
||||
* OCI 仓库配置管理功能
|
||||
*/
|
||||
|
||||
// Export pages
|
||||
export { default as RegistryConfigPage } from './pages/RegistryConfigPage';
|
||||
|
||||
// Export components
|
||||
export { RegistryForm } from './components/RegistryForm';
|
||||
export { RegistryList } from './components/RegistryList';
|
||||
|
||||
@ -0,0 +1,248 @@
|
||||
/**
|
||||
* Registry Configuration Page
|
||||
* Manage OCI Registry configurations
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Plus, RefreshCw, Database } from "lucide-react";
|
||||
import { useToast } from "@/shared";
|
||||
import { Modal, PageHeader, Button } from "@/shared/components";
|
||||
import { RegistryErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
import { RegistryForm } from "../components/RegistryForm";
|
||||
import { RegistryList } from "../components/RegistryList";
|
||||
import {
|
||||
listRegistries,
|
||||
createRegistry,
|
||||
updateRegistry,
|
||||
deleteRegistry,
|
||||
} from "@/api";
|
||||
import type { CreateRegistryRequest } from "@/api";
|
||||
import type { AppRegistry, RegistryResponse } from "@/core/types";
|
||||
|
||||
const RegistryConfigPage: React.FC = () => {
|
||||
const { success, error: toastError, info: toastInfo } = useToast();
|
||||
|
||||
const [registries, setRegistries] = useState<AppRegistry[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingRegistry, setEditingRegistry] = useState<AppRegistry | undefined>(undefined);
|
||||
|
||||
// Load registries
|
||||
const loadRegistries = async (isMounted = { current: true }, isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
let succeeded = false;
|
||||
try {
|
||||
const data = await listRegistries();
|
||||
// Only update state if component is still mounted
|
||||
if (isMounted.current) {
|
||||
setRegistries(data);
|
||||
succeeded = true;
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted.current) {
|
||||
toastError(formatApiError(err) || RegistryErrors.LOAD_FAILED);
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
if (isRefresh) {
|
||||
setRefreshing(false);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const isMounted = { current: true };
|
||||
loadRegistries(isMounted);
|
||||
|
||||
// Cleanup: mark component as unmounted
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Refresh registries
|
||||
const handleRefresh = async () => {
|
||||
toastInfo("Refreshing registries...", {
|
||||
title: "Registry Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "registries-refresh",
|
||||
});
|
||||
const refreshed = await loadRegistries({ current: true }, true);
|
||||
if (refreshed) {
|
||||
success(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
};
|
||||
|
||||
// Add registry
|
||||
const handleAdd = () => {
|
||||
setEditingRegistry(undefined);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Edit registry
|
||||
const handleEdit = (registry: RegistryResponse) => {
|
||||
setEditingRegistry(registry);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
// Save registry
|
||||
const handleSave = async (data: Omit<RegistryResponse, "id">) => {
|
||||
try {
|
||||
const actionLabel = editingRegistry ? "Updating registry..." : "Creating registry...";
|
||||
toastInfo(actionLabel, {
|
||||
title: editingRegistry ? "Update Registry" : "Create Registry",
|
||||
durationMs: 1800,
|
||||
mergeKey: editingRegistry ? `registry-save-${editingRegistry.id}` : "registry-create",
|
||||
});
|
||||
|
||||
if (editingRegistry) {
|
||||
if (!editingRegistry.id) {
|
||||
toastError("Registry identifier is missing. Please refresh and try again.");
|
||||
return;
|
||||
}
|
||||
await updateRegistry({ registryId: editingRegistry.id }, data);
|
||||
success(SuccessMessages.REGISTRY_UPDATED);
|
||||
} else {
|
||||
if (!data.name || !data.url || !data.username || !data.password) {
|
||||
toastError("Name, URL, username, and password are required to create a registry.");
|
||||
return;
|
||||
}
|
||||
const createData: CreateRegistryRequest = {
|
||||
name: data.name,
|
||||
url: data.url,
|
||||
username: data.username,
|
||||
password: data.password,
|
||||
description: data.description || "",
|
||||
insecure: data.insecure ?? false,
|
||||
};
|
||||
const newRegistry = await createRegistry(createData);
|
||||
success(SuccessMessages.REGISTRY_CREATED);
|
||||
console.log("New registry added:", newRegistry);
|
||||
}
|
||||
setShowModal(false);
|
||||
setEditingRegistry(undefined);
|
||||
await loadRegistries({ current: true });
|
||||
|
||||
// Notify other pages to refresh (if registry browser is open)
|
||||
localStorage.setItem('registry_updated', Date.now().toString());
|
||||
localStorage.removeItem('registry_updated');
|
||||
} catch (error) {
|
||||
const errorMsg = editingRegistry ? RegistryErrors.UPDATE_FAILED : RegistryErrors.CREATE_FAILED;
|
||||
toastError(formatApiError(error) || errorMsg);
|
||||
console.error("Registry save error:", error);
|
||||
|
||||
// Don't close modal so user can retry
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// Delete registry
|
||||
const handleDelete = async (registry: RegistryResponse) => {
|
||||
if (!confirm(`Are you sure you want to delete registry "${registry.name}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
toastInfo(`Deleting registry "${registry.name}"...`, {
|
||||
title: "Delete Registry",
|
||||
durationMs: 1800,
|
||||
mergeKey: `registry-delete-${registry.id}`,
|
||||
});
|
||||
if (!registry.id) {
|
||||
toastError("Registry identifier is missing. Please refresh and try again.");
|
||||
return;
|
||||
}
|
||||
await deleteRegistry({ registryId: registry.id });
|
||||
success(SuccessMessages.REGISTRY_DELETED);
|
||||
loadRegistries({ current: true });
|
||||
} catch (error) {
|
||||
toastError(formatApiError(error) || RegistryErrors.DELETE_FAILED);
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<PageHeader
|
||||
title="Configuration - Registries"
|
||||
description="Manage OCI Registry connections and authentication"
|
||||
icon={Database}
|
||||
iconColor="text-purple-400"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
spinIcon={true}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Plus}
|
||||
onClick={handleAdd}
|
||||
>
|
||||
Add Registry
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Registry List */}
|
||||
<RegistryList
|
||||
registries={registries}
|
||||
loading={loading}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
|
||||
{/* Info Section */}
|
||||
<div className="mt-8 p-4 bg-purple-900/20 border border-purple-700/50 rounded-lg">
|
||||
<h3 className="text-sm font-semibold text-purple-300 mb-2">💡 Usage Tips</h3>
|
||||
<ul className="text-sm text-gray-400 space-y-1">
|
||||
<li>• Registry configuration is used to connect to OCI-compliant container registries (Docker Hub, Harbor, GitHub Container Registry, etc.)</li>
|
||||
<li>• <strong>Registry URL</strong>: The access address of the container registry (e.g., https://registry.hub.docker.com)</li>
|
||||
<li>• <strong>Authentication</strong>: Username and password for accessing private registries</li>
|
||||
<li>• <strong>OCI Standard</strong>: Fully compatible with OCI Distribution Specification v2</li>
|
||||
<li>• The system automatically accesses repositories and retrieves image lists via OCI v2 API</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Add/Edit Modal */}
|
||||
<Modal
|
||||
open={showModal}
|
||||
onClose={() => {
|
||||
setShowModal(false);
|
||||
setEditingRegistry(undefined);
|
||||
}}
|
||||
title={editingRegistry ? "Edit Registry Configuration" : "Add Registry Configuration"}
|
||||
icon={Database}
|
||||
size="lg"
|
||||
>
|
||||
<RegistryForm
|
||||
registry={editingRegistry}
|
||||
onSave={handleSave}
|
||||
onCancel={() => {
|
||||
setShowModal(false);
|
||||
setEditingRegistry(undefined);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegistryConfigPage;
|
||||
8
frontend/src/features/home/index.ts
Normal file
8
frontend/src/features/home/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Dashboard Feature
|
||||
* 首页仪表板
|
||||
*/
|
||||
|
||||
// Export pages
|
||||
export { default as HomePage } from './pages/HomePage';
|
||||
|
||||
247
frontend/src/features/home/pages/HomePage.tsx
Normal file
247
frontend/src/features/home/pages/HomePage.tsx
Normal file
@ -0,0 +1,247 @@
|
||||
import React from "react";
|
||||
import { Boxes, Server, Database, Activity, Package, Rocket, Settings } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Main categories
|
||||
const categories = [
|
||||
{
|
||||
key: "config",
|
||||
title: "Configuration",
|
||||
icon: <Settings className="w-8 h-8 text-brand-accent" />,
|
||||
color: "blue",
|
||||
description: "System configuration management",
|
||||
children: [
|
||||
{
|
||||
icon: <Server className="w-10 h-10 text-accent-teal" />,
|
||||
title: "Clusters",
|
||||
description: "Manage Kubernetes cluster kubeconfig and contexts",
|
||||
path: "/configuration/clusters",
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-10 h-10 text-brand-light" />,
|
||||
title: "Registries",
|
||||
description: "Configure OCI registries and Helm chart repositories",
|
||||
path: "/configuration/registries",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "cluster",
|
||||
title: "Cluster",
|
||||
icon: <Activity className="w-8 h-8 text-accent-teal" />,
|
||||
color: "emerald",
|
||||
description: "Cluster management and monitoring",
|
||||
children: [
|
||||
{
|
||||
icon: <Activity className="w-10 h-10 text-accent-teal" />,
|
||||
title: "Monitoring",
|
||||
description: "Real-time cluster status and resource monitoring",
|
||||
path: "/cluster/monitor",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "artifact",
|
||||
title: "Artifact",
|
||||
icon: <Package className="w-8 h-8 text-brand-light" />,
|
||||
color: "purple",
|
||||
description: "Artifact and application lifecycle management",
|
||||
children: [
|
||||
{
|
||||
icon: <Database className="w-10 h-10 text-brand-light" />,
|
||||
title: "Registries",
|
||||
description: "Browse and manage OCI artifacts",
|
||||
path: "/artifact/registries",
|
||||
},
|
||||
{
|
||||
icon: <Rocket className="w-10 h-10 text-brand-accent" />,
|
||||
title: "Instances",
|
||||
description: "Deploy and manage applications",
|
||||
path: "/artifact/instances",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-full px-4 py-6 sm:px-6 lg:px-10">
|
||||
{/* Hero Section */}
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="relative p-5 rounded-3xl bg-dark-lighter/80 border border-dark-border/60 shadow-glow">
|
||||
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-brand-accent/25 via-brand-accent/5 to-transparent blur-xl" />
|
||||
<Boxes className="relative w-16 h-16 text-brand-accent" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-semibold text-primary mb-4 tracking-wide">
|
||||
Welcome to OCDP Management Platform
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-secondary max-w-2xl mx-auto">
|
||||
One Click Deployment Platform
|
||||
</p>
|
||||
<p className="text-muted mt-2">
|
||||
Simplified unified platform for Kubernetes application deployment and management
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Category Features */}
|
||||
<div className="space-y-8 mb-12">
|
||||
{categories.map((category) => (
|
||||
<div key={category.key} className="space-y-4">
|
||||
{/* Category Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:gap-3 gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{category.icon}
|
||||
<h2 className="text-2xl font-semibold text-primary">{category.title}</h2>
|
||||
</div>
|
||||
<div className="hidden md:flex h-px flex-1 bg-gradient-to-r from-brand-accent/40 to-transparent" />
|
||||
<span className="text-sm text-secondary md:text-muted">
|
||||
{category.description}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Feature Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 md:pl-6">
|
||||
{category.children.map((item) => (
|
||||
<div
|
||||
key={item.path}
|
||||
onClick={() => navigate(item.path)}
|
||||
className="group relative overflow-hidden bg-dark-lighter/60 border border-dark-border/70 rounded-xl p-5 sm:p-6 transition-all cursor-pointer hover:border-brand-accent/30 hover:shadow-glow hover:-translate-y-0.5"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="relative flex-shrink-0 p-2.5 rounded-xl bg-dark/60 border border-dark-border/60 group-hover:border-brand-accent/40 transition-colors">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-primary mb-1 group-hover:text-brand-accent transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-secondary text-sm leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Info Cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-dark-lighter/60 border border-dark-border/70 rounded-xl p-6 sm:p-7 shadow-soft">
|
||||
<h3 className="text-lg font-semibold text-brand-accent mb-4 flex items-center gap-2">
|
||||
<Rocket className="w-5 h-5" />
|
||||
Quick Start Guide
|
||||
</h3>
|
||||
<div className="space-y-4 text-secondary text-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-brand-accent font-semibold min-w-[20px]">1.</span>
|
||||
<div>
|
||||
<div className="font-semibold text-primary mb-1">
|
||||
Configuration → Clusters
|
||||
</div>
|
||||
<div className="text-muted">Add kubeconfig and contexts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-brand-accent font-semibold min-w-[20px]">2.</span>
|
||||
<div>
|
||||
<div className="font-semibold text-primary mb-1">
|
||||
Configuration → Registries
|
||||
</div>
|
||||
<div className="text-muted">Add OCI or Helm registries</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-brand-accent font-semibold min-w-[20px]">3.</span>
|
||||
<div>
|
||||
<div className="font-semibold text-primary mb-1">
|
||||
Artifact → Registries
|
||||
</div>
|
||||
<div className="text-muted">Browse available charts and images</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-brand-accent font-semibold min-w-[20px]">4.</span>
|
||||
<div>
|
||||
<div className="font-semibold text-primary mb-1">
|
||||
Artifact → Instances
|
||||
</div>
|
||||
<div className="text-muted">Deploy applications to clusters</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-brand-accent font-semibold min-w-[20px]">5.</span>
|
||||
<div>
|
||||
<div className="font-semibold text-primary mb-1">
|
||||
Cluster → Monitoring
|
||||
</div>
|
||||
<div className="text-muted">Monitor cluster status in real-time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-dark-lighter/60 border border-dark-border/70 rounded-xl p-6 sm:p-7 shadow-soft">
|
||||
<h3 className="text-lg font-semibold text-brand-accent mb-4 flex items-center gap-2">
|
||||
<Boxes className="w-5 h-5" />
|
||||
Core Features
|
||||
</h3>
|
||||
<ul className="space-y-3 text-secondary text-sm">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-brand-accent">📦</span>
|
||||
<div>
|
||||
<strong className="text-primary">
|
||||
Complete Application Lifecycle
|
||||
</strong>
|
||||
<p className="text-muted mt-1">
|
||||
From artifacts to deployment, unified management
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-brand-accent">🔧</span>
|
||||
<div>
|
||||
<strong className="text-primary">
|
||||
Multi-Cluster Configuration
|
||||
</strong>
|
||||
<p className="text-muted mt-1">
|
||||
Support for multiple environments and cluster switching
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-brand-accent">📊</span>
|
||||
<div>
|
||||
<strong className="text-primary">
|
||||
Real-time Monitoring
|
||||
</strong>
|
||||
<p className="text-muted mt-1">
|
||||
Integrated Grafana for visualization
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-brand-accent">🚀</span>
|
||||
<div>
|
||||
<strong className="text-primary">
|
||||
One-Click Deployment
|
||||
</strong>
|
||||
<p className="text-muted mt-1">
|
||||
Streamlined deployment process for efficiency
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
@ -0,0 +1,235 @@
|
||||
/**
|
||||
* Cluster Monitor Card Component
|
||||
* 显示单个集群的监控信息
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import { Activity, CheckCircle, AlertTriangle, XCircle, HelpCircle, Clock, Cpu, Database, Server as ServerIcon, ChevronDown, ChevronUp, TrendingUp } from "lucide-react";
|
||||
import { Card, Badge } from "@/shared/components";
|
||||
import type { ClusterMetrics } from "@/core/types";
|
||||
import { NodeMetricCard } from "./NodeMetricCard";
|
||||
|
||||
interface ClusterMonitorCardProps {
|
||||
cluster: ClusterMetrics;
|
||||
}
|
||||
|
||||
export const ClusterMonitorCard: React.FC<ClusterMonitorCardProps> = ({ cluster }) => {
|
||||
const [showNodes, setShowNodes] = useState(false);
|
||||
const status = cluster.status ?? "unknown";
|
||||
const uptime = cluster.uptime ?? "N/A";
|
||||
const nodeCount = cluster.nodeCount ?? 0;
|
||||
const podCount = cluster.podCount ?? 0;
|
||||
const totalGpu = cluster.totalGpu ?? 0;
|
||||
const usedGpu = cluster.usedGpu ?? 0;
|
||||
const cpuUsage = cluster.cpuUsage ?? 0;
|
||||
const memoryUsage = cluster.memoryUsage ?? 0;
|
||||
const gpuUsage = cluster.gpuUsage ?? 0;
|
||||
const usedCpu = cluster.usedCpu ?? "N/A";
|
||||
const totalCpu = cluster.totalCpu ?? "N/A";
|
||||
const usedMemory = cluster.usedMemory ?? "N/A";
|
||||
const totalMemory = cluster.totalMemory ?? "N/A";
|
||||
const lastCheckedText = cluster.lastCheck ? new Date(cluster.lastCheck).toLocaleString() : "N/A";
|
||||
|
||||
const getStatusBadge = () => {
|
||||
switch (status) {
|
||||
case "healthy":
|
||||
return <Badge variant="success">Healthy</Badge>;
|
||||
case "warning":
|
||||
case "unknown":
|
||||
return <Badge variant="warning">Warning</Badge>;
|
||||
case "error":
|
||||
case "unhealthy":
|
||||
return <Badge variant="danger">Error</Badge>;
|
||||
default:
|
||||
return <Badge variant="gray">Unknown</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = () => {
|
||||
switch (status) {
|
||||
case "healthy":
|
||||
return <CheckCircle className="w-5 h-5 text-green-400" />;
|
||||
case "warning":
|
||||
case "unknown":
|
||||
return <AlertTriangle className="w-5 h-5 text-yellow-400" />;
|
||||
case "error":
|
||||
case "unhealthy":
|
||||
return <XCircle className="w-5 h-5 text-red-400" />;
|
||||
default:
|
||||
return <HelpCircle className="w-5 h-5 text-gray-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
{/* Status Icon */}
|
||||
<div className="p-3 bg-gray-800 rounded-lg">
|
||||
{getStatusIcon()}
|
||||
</div>
|
||||
|
||||
{/* Cluster Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-white truncate">{cluster.clusterName || "Unnamed Cluster"}</h3>
|
||||
{getStatusBadge()}
|
||||
</div>
|
||||
|
||||
{/* Metrics Grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-3">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Uptime</p>
|
||||
<p className="text-sm text-gray-300 font-mono mt-1">{uptime}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Nodes</p>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<ServerIcon className="w-3 h-3 text-blue-400" />
|
||||
<p className="text-sm text-gray-300 font-mono">{nodeCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Pods</p>
|
||||
<p className="text-sm text-gray-300 font-mono mt-1">{podCount}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">GPU</p>
|
||||
<p className="text-sm text-gray-300 font-mono mt-1">
|
||||
{usedGpu}/{totalGpu || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resource Usage */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3 p-3 bg-gray-800/50 rounded-lg">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Cpu className="w-3 h-3 text-blue-400" />
|
||||
<p className="text-xs text-gray-500">CPU (Cluster Total)</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 font-mono">{usedCpu} / {totalCpu}</p>
|
||||
<div className="mt-1 h-1.5 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(cpuUsage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">{cpuUsage.toFixed(1)}%</p>
|
||||
{cluster.maxNodeCpu && (
|
||||
<div className="mt-1.5 pt-1.5 border-t border-gray-700/50">
|
||||
<div className="flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3 text-blue-400/60" />
|
||||
<p className="text-xs text-gray-500">Max per node</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 font-mono">{cluster.maxNodeCpu}</p>
|
||||
{cluster.maxNodeCpuUsage && cluster.maxNodeCpuUsage > 0 && (
|
||||
<p className="text-xs text-gray-500">Peak: {cluster.maxNodeCpuUsage.toFixed(1)}%</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Database className="w-3 h-3 text-green-400" />
|
||||
<p className="text-xs text-gray-500">Memory (Cluster Total)</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 font-mono">{usedMemory} / {totalMemory}</p>
|
||||
<div className="mt-1 h-1.5 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-green-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(memoryUsage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">{memoryUsage.toFixed(1)}%</p>
|
||||
{cluster.maxNodeMemory && (
|
||||
<div className="mt-1.5 pt-1.5 border-t border-gray-700/50">
|
||||
<div className="flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3 text-green-400/60" />
|
||||
<p className="text-xs text-gray-500">Max per node</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 font-mono">{cluster.maxNodeMemory}</p>
|
||||
{cluster.maxNodeMemUsage && cluster.maxNodeMemUsage > 0 && (
|
||||
<p className="text-xs text-gray-500">Peak: {cluster.maxNodeMemUsage.toFixed(1)}%</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{totalGpu > 0 && (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Activity className="w-3 h-3 text-purple-400" />
|
||||
<p className="text-xs text-gray-500">GPU (Cluster Total)</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 font-mono">{usedGpu} / {totalGpu}</p>
|
||||
<div className="mt-1 h-1.5 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-purple-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(gpuUsage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">{gpuUsage.toFixed(1)}%</p>
|
||||
{cluster.maxNodeGpu && cluster.maxNodeGpu > 0 && (
|
||||
<div className="mt-1.5 pt-1.5 border-t border-gray-700/50">
|
||||
<div className="flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3 text-purple-400/60" />
|
||||
<p className="text-xs text-gray-500">Max per node</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 font-mono">{cluster.maxNodeGpu} GPUs</p>
|
||||
{cluster.maxNodeGpuUsage && cluster.maxNodeGpuUsage > 0 && (
|
||||
<p className="text-xs text-gray-500">Peak: {cluster.maxNodeGpuUsage.toFixed(1)}%</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>Last checked: {lastCheckedText}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
{cluster.nodes && cluster.nodes.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowNodes(!showNodes)}
|
||||
className="px-3 py-1.5 text-sm text-blue-400 hover:text-blue-300 hover:bg-blue-400/10 rounded-lg transition flex items-center gap-2"
|
||||
>
|
||||
{showNodes ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
Hide Nodes
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
Show Nodes ({cluster.nodes.length})
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nodes List */}
|
||||
{showNodes && cluster.nodes && cluster.nodes.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-700/50">
|
||||
<h4 className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
|
||||
<ServerIcon className="w-4 h-4 text-blue-400" />
|
||||
Cluster Nodes ({cluster.nodes.length})
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
{cluster.nodes.map((node) => (
|
||||
<NodeMetricCard key={node.nodeName} node={node} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Node Metric Card Component
|
||||
* 显示单个节点的监控信息
|
||||
*/
|
||||
import React from "react";
|
||||
import { Server, Cpu, Database, CheckCircle, XCircle, Activity } from "lucide-react";
|
||||
import { Badge } from "@/shared/components";
|
||||
import type { NodeMetrics } from "@/core/types";
|
||||
|
||||
interface NodeMetricCardProps {
|
||||
node: NodeMetrics;
|
||||
}
|
||||
|
||||
export const NodeMetricCard: React.FC<NodeMetricCardProps> = ({ node }) => {
|
||||
const getStatusBadge = () => {
|
||||
if (node.status === "Ready") {
|
||||
return <Badge variant="success">Ready</Badge>;
|
||||
}
|
||||
return <Badge variant="danger">NotReady</Badge>;
|
||||
};
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (node.status === "Ready") {
|
||||
return <CheckCircle className="w-4 h-4 text-green-400" />;
|
||||
}
|
||||
return <XCircle className="w-4 h-4 text-red-400" />;
|
||||
};
|
||||
|
||||
const getRoleBadge = () => {
|
||||
if (node.role === "control-plane") {
|
||||
return <Badge variant="blue">Control Plane</Badge>;
|
||||
}
|
||||
return <Badge variant="gray">Worker</Badge>;
|
||||
};
|
||||
|
||||
const cpuPercent = node.cpuPercent ?? 0;
|
||||
const memoryPercent = node.memoryPercent ?? 0;
|
||||
const gpuPercent = node.gpuPercent ?? 0;
|
||||
const gpuCapacity = node.gpuCapacity ?? 0;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-gray-800/30 rounded-lg border border-gray-700/50 hover:border-gray-600/50 transition">
|
||||
{/* Node Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gray-700/50 rounded">
|
||||
<Server className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="text-sm font-semibold text-white">{node.nodeName}</h4>
|
||||
{getStatusIcon()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusBadge()}
|
||||
{getRoleBadge()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-500">Age</p>
|
||||
<p className="text-xs text-gray-300 font-mono">{node.age}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Node Metrics Grid */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{/* CPU */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Cpu className="w-3 h-3 text-blue-400" />
|
||||
<p className="text-xs text-gray-500">CPU</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-300 font-mono mb-1">
|
||||
{node.cpuUsage ?? "N/A"} / {node.cpuAllocatable ?? "N/A"}
|
||||
</p>
|
||||
<div className="h-1 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(cpuPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{cpuPercent.toFixed(1)}%</p>
|
||||
</div>
|
||||
|
||||
{/* Memory */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Database className="w-3 h-3 text-green-400" />
|
||||
<p className="text-xs text-gray-500">Memory</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-300 font-mono mb-1">
|
||||
{node.memoryUsage ?? "N/A"} / {node.memoryAllocatable ?? "N/A"}
|
||||
</p>
|
||||
<div className="h-1 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-green-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(memoryPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{memoryPercent.toFixed(1)}%</p>
|
||||
</div>
|
||||
|
||||
{/* GPU */}
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Activity className="w-3 h-3 text-purple-400" />
|
||||
<p className="text-xs text-gray-500">GPU</p>
|
||||
</div>
|
||||
{gpuCapacity > 0 ? (
|
||||
<>
|
||||
<p className="text-xs text-gray-300 font-mono mb-1">
|
||||
{node.gpuUsage ?? "N/A"} / {gpuCapacity}
|
||||
</p>
|
||||
<div className="h-1 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-purple-500 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(gpuPercent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-0.5">
|
||||
{gpuPercent.toFixed(1)}%
|
||||
{node.gpuType && <span className="ml-1 text-gray-500">({node.gpuType})</span>}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-gray-500 mt-1">No GPU</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mt-3 pt-3 border-t border-gray-700/50 grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Pods</p>
|
||||
<p className="text-xs text-gray-300 font-mono">{node.podCount ?? 0}</p>
|
||||
</div>
|
||||
{node.kubeletVersion && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Kubelet</p>
|
||||
<p className="text-xs text-gray-300 font-mono">{node.kubeletVersion}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
8
frontend/src/features/monitoring/clusters/index.ts
Normal file
8
frontend/src/features/monitoring/clusters/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* Monitoring Feature Module
|
||||
* 监控功能模块
|
||||
*/
|
||||
|
||||
export { default as MonitoringClustersPage } from "./pages/MonitoringClustersPage";
|
||||
export { ClusterMonitorCard } from "./components/ClusterMonitorCard";
|
||||
|
||||
@ -0,0 +1,175 @@
|
||||
/**
|
||||
* Monitoring - Clusters Page
|
||||
* 监控集群状态和健康信息
|
||||
*/
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Activity, Server, RefreshCw } from "lucide-react";
|
||||
import { PageHeader, StatsCard, Button, LoadingState, ErrorState, EmptyState } from "@/shared";
|
||||
import { useToast } from "@/shared";
|
||||
import { ClusterErrors, SuccessMessages, formatApiError } from "@/shared/utils";
|
||||
import { listClusterMonitoring } from "@/api";
|
||||
import type { ClusterMetrics } from "@/core/types";
|
||||
import { ClusterMonitorCard } from "../components/ClusterMonitorCard";
|
||||
|
||||
const MonitoringClustersPage: React.FC = () => {
|
||||
const { info: toastInfo, success: toastSuccess, error: toastError } = useToast();
|
||||
|
||||
const [clusters, setClusters] = useState<ClusterMetrics[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
// Load cluster monitoring data
|
||||
const loadClusters = async (isMounted = { current: true }, isRefresh = false) => {
|
||||
let succeeded = false;
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const data = await listClusterMonitoring();
|
||||
if (isMounted.current) {
|
||||
setClusters(data);
|
||||
succeeded = true;
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMsg = formatApiError(err) || ClusterErrors.LOAD_FAILED;
|
||||
if (isMounted.current) {
|
||||
setError(errorMsg);
|
||||
toastError(errorMsg);
|
||||
console.error(err);
|
||||
}
|
||||
} finally {
|
||||
if (isMounted.current) {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
return succeeded;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const isMounted = { current: true };
|
||||
loadClusters(isMounted);
|
||||
|
||||
// Auto-refresh every 30 seconds
|
||||
const interval = setInterval(() => {
|
||||
loadClusters(isMounted, true);
|
||||
}, 30000);
|
||||
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
clearInterval(interval);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Refresh clusters
|
||||
const handleRefresh = async () => {
|
||||
toastInfo("Refreshing cluster metrics...", {
|
||||
title: "Monitoring Refresh",
|
||||
durationMs: 1800,
|
||||
mergeKey: "monitoring-refresh",
|
||||
});
|
||||
const refreshed = await loadClusters({ current: true }, true);
|
||||
if (refreshed) {
|
||||
toastSuccess(SuccessMessages.DATA_REFRESHED);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <LoadingState message="Loading cluster monitoring data..." />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Failed to Load Clusters"
|
||||
message={error}
|
||||
onRetry={() => loadClusters({ current: true })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (clusters.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={Server}
|
||||
title="No Clusters Available"
|
||||
description="No clusters configured for monitoring. Please add clusters in the configuration section."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const healthyCount = clusters.filter(c => c.status === "healthy").length;
|
||||
const warningCount = clusters.filter(c => c.status === "warning" || c.status === "unknown").length;
|
||||
const errorCount = clusters.filter(c => c.status === "error" || c.status === "unhealthy").length;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<PageHeader
|
||||
title="Cluster Monitoring"
|
||||
description="Monitor cluster health and status"
|
||||
icon={Activity}
|
||||
>
|
||||
<Button
|
||||
variant="secondary"
|
||||
icon={RefreshCw}
|
||||
onClick={handleRefresh}
|
||||
loading={refreshing}
|
||||
>
|
||||
{refreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
</PageHeader>
|
||||
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatsCard
|
||||
title="Total Clusters"
|
||||
value={clusters.length}
|
||||
icon={Server}
|
||||
variant="blue"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Healthy"
|
||||
value={healthyCount}
|
||||
icon={Activity}
|
||||
variant="green"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Warning"
|
||||
value={warningCount}
|
||||
icon={Activity}
|
||||
variant="orange"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Error"
|
||||
value={errorCount}
|
||||
icon={Activity}
|
||||
variant="red"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Auto-refresh Info */}
|
||||
<div className="text-sm text-gray-400">
|
||||
Auto-refresh every 30 seconds {refreshing && "• Refreshing..."}
|
||||
</div>
|
||||
|
||||
{/* Cluster List */}
|
||||
<div className="grid gap-4">
|
||||
{clusters.map((cluster, index) => (
|
||||
<ClusterMonitorCard
|
||||
key={cluster.clusterId || cluster.id || `${cluster.clusterName || 'cluster'}-${index}`}
|
||||
cluster={cluster}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonitoringClustersPage;
|
||||
9
frontend/src/features/monitoring/index.ts
Normal file
9
frontend/src/features/monitoring/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Monitoring Module
|
||||
* 监控模块 - 集群监控
|
||||
*/
|
||||
|
||||
// Clusters
|
||||
export { default as MonitoringClustersPage } from './clusters/pages/MonitoringClustersPage';
|
||||
export * from './clusters/components/ClusterMonitorCard';
|
||||
|
||||
Reference in New Issue
Block a user