Compare commits
2 Commits
dfc7694fb9
...
854a6023cd
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
854a6023cd | ||
|
|
ee63423cab |
@@ -4,7 +4,7 @@ import { Button } from './ui/button';
|
|||||||
import { Badge } from './ui/badge';
|
import { Badge } from './ui/badge';
|
||||||
import { Alert } from './ui/alert';
|
import { Alert } from './ui/alert';
|
||||||
import { Input } from './ui/input';
|
import { Input } from './ui/input';
|
||||||
import { Cpu, HardDrive, Network, Monitor, CheckCircle, AlertCircle, BookOpen, ExternalLink, Loader2 } from 'lucide-react';
|
import { Cpu, HardDrive, Network, Monitor, CheckCircle, AlertCircle, BookOpen, ExternalLink, Loader2, RotateCcw } from 'lucide-react';
|
||||||
import { useInstanceContext } from '../hooks/useInstanceContext';
|
import { useInstanceContext } from '../hooks/useInstanceContext';
|
||||||
import { useNodes, useDiscoveryStatus } from '../hooks/useNodes';
|
import { useNodes, useDiscoveryStatus } from '../hooks/useNodes';
|
||||||
import { useCluster } from '../hooks/useCluster';
|
import { useCluster } from '../hooks/useCluster';
|
||||||
@@ -36,6 +36,8 @@ export function ClusterNodesComponent() {
|
|||||||
updateNode,
|
updateNode,
|
||||||
applyNode,
|
applyNode,
|
||||||
isApplying,
|
isApplying,
|
||||||
|
resetNode,
|
||||||
|
isResetting,
|
||||||
refetch
|
refetch
|
||||||
} = useNodes(currentInstance);
|
} = useNodes(currentInstance);
|
||||||
|
|
||||||
@@ -194,14 +196,12 @@ export function ClusterNodesComponent() {
|
|||||||
nodeName: drawerState.node.hostname,
|
nodeName: drawerState.node.hostname,
|
||||||
updates: {
|
updates: {
|
||||||
role: data.role,
|
role: data.role,
|
||||||
config: {
|
disk: data.disk,
|
||||||
disk: data.disk,
|
target_ip: data.targetIp,
|
||||||
target_ip: data.targetIp,
|
current_ip: data.currentIp,
|
||||||
current_ip: data.currentIp,
|
interface: data.interface,
|
||||||
interface: data.interface,
|
schematic_id: data.schematicId,
|
||||||
schematic_id: data.schematicId,
|
maintenance: data.maintenance,
|
||||||
maintenance: data.maintenance,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
closeDrawer();
|
closeDrawer();
|
||||||
@@ -214,6 +214,16 @@ export function ClusterNodesComponent() {
|
|||||||
await applyNode(drawerState.node.hostname);
|
await applyNode(drawerState.node.hostname);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleResetNode = (node: Node) => {
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
`Reset node ${node.hostname}?\n\nThis will wipe the node and return it to maintenance mode. The node will need to be reconfigured.`
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
resetNode(node.hostname);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleDeleteNode = (hostname: string) => {
|
const handleDeleteNode = (hostname: string) => {
|
||||||
if (!currentInstance) return;
|
if (!currentInstance) return;
|
||||||
if (confirm(`Are you sure you want to remove node ${hostname}?`)) {
|
if (confirm(`Are you sure you want to remove node ${hostname}?`)) {
|
||||||
@@ -576,10 +586,21 @@ export function ClusterNodesComponent() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{node.talosVersion && (
|
{(node.version || node.schematic_id) && (
|
||||||
<div className="text-xs text-muted-foreground mt-1">
|
<div className="text-xs text-muted-foreground mt-1">
|
||||||
Talos: {node.talosVersion}
|
{node.version && <span>Talos: {node.version}</span>}
|
||||||
{node.kubernetesVersion && ` • K8s: ${node.kubernetesVersion}`}
|
{node.version && node.schematic_id && <span> • </span>}
|
||||||
|
{node.schematic_id && (
|
||||||
|
<span
|
||||||
|
title={node.schematic_id}
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(node.schematic_id!);
|
||||||
|
}}
|
||||||
|
className="cursor-pointer hover:text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Schema: {node.schematic_id.substring(0, 8)}...
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -600,6 +621,18 @@ export function ClusterNodesComponent() {
|
|||||||
{isApplying ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Apply'}
|
{isApplying ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Apply'}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
{!node.maintenance && (node.configured || node.applied) && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => handleResetNode(node)}
|
||||||
|
disabled={isResetting}
|
||||||
|
className="border-orange-500 text-orange-500 hover:bg-orange-50 hover:text-orange-600"
|
||||||
|
>
|
||||||
|
<RotateCcw className="h-4 w-4 mr-1" />
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
|
|||||||
@@ -221,7 +221,7 @@ export function AppDetailModal({
|
|||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
components={{
|
components={{
|
||||||
// Style code blocks
|
// Style code blocks
|
||||||
code: ({node, inline, className, children, ...props}) => {
|
code: ({inline, children, ...props}) => {
|
||||||
return inline ? (
|
return inline ? (
|
||||||
<code className="bg-muted px-1 py-0.5 rounded text-sm" {...props}>
|
<code className="bg-muted px-1 py-0.5 rounded text-sm" {...props}>
|
||||||
{children}
|
{children}
|
||||||
@@ -233,7 +233,7 @@ export function AppDetailModal({
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
// Make links open in new tab
|
// Make links open in new tab
|
||||||
a: ({node, children, href, ...props}) => (
|
a: ({children, href, ...props}) => (
|
||||||
<a href={href} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline" {...props}>
|
<a href={href} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline" {...props}>
|
||||||
{children}
|
{children}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ interface NodeFormProps {
|
|||||||
detection?: HardwareInfo;
|
detection?: HardwareInfo;
|
||||||
onSubmit: (data: NodeFormData) => Promise<void>;
|
onSubmit: (data: NodeFormData) => Promise<void>;
|
||||||
onApply?: (data: NodeFormData) => Promise<void>;
|
onApply?: (data: NodeFormData) => Promise<void>;
|
||||||
|
onCancel?: () => void;
|
||||||
submitLabel?: string;
|
submitLabel?: string;
|
||||||
showApplyButton?: boolean;
|
showApplyButton?: boolean;
|
||||||
instanceName?: string;
|
instanceName?: string;
|
||||||
@@ -123,6 +124,7 @@ export function NodeForm({
|
|||||||
detection,
|
detection,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
onApply,
|
onApply,
|
||||||
|
onCancel,
|
||||||
submitLabel = 'Save',
|
submitLabel = 'Save',
|
||||||
showApplyButton = false,
|
showApplyButton = false,
|
||||||
instanceName,
|
instanceName,
|
||||||
@@ -557,37 +559,37 @@ export function NodeForm({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
id="maintenance"
|
|
||||||
type="checkbox"
|
|
||||||
{...register('maintenance')}
|
|
||||||
className="h-4 w-4 rounded border-input"
|
|
||||||
/>
|
|
||||||
<Label htmlFor="maintenance" className="font-normal">
|
|
||||||
Start in maintenance mode
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
{onCancel && (
|
||||||
type="submit"
|
<Button
|
||||||
disabled={isSubmitting}
|
type="button"
|
||||||
className="flex-1"
|
variant="outline"
|
||||||
>
|
onClick={() => {
|
||||||
{isSubmitting ? 'Saving...' : submitLabel}
|
reset();
|
||||||
</Button>
|
onCancel();
|
||||||
|
}}
|
||||||
{showApplyButton && onApply && (
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{showApplyButton && onApply ? (
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleSubmit(onApply)}
|
onClick={handleSubmit(onApply)}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
variant="secondary"
|
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
>
|
>
|
||||||
{isSubmitting ? 'Applying...' : 'Apply Configuration'}
|
{isSubmitting ? 'Applying...' : 'Apply Configuration'}
|
||||||
</Button>
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
{isSubmitting ? 'Saving...' : submitLabel}
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -58,6 +58,7 @@ export function NodeFormDrawer({
|
|||||||
detection={detection}
|
detection={detection}
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
onApply={onApply}
|
onApply={onApply}
|
||||||
|
onCancel={onClose}
|
||||||
submitLabel={mode === 'add' ? 'Add Node' : 'Save'}
|
submitLabel={mode === 'add' ? 'Add Node' : 'Save'}
|
||||||
showApplyButton={mode === 'configure'}
|
showApplyButton={mode === 'configure'}
|
||||||
instanceName={instanceName}
|
instanceName={instanceName}
|
||||||
|
|||||||
@@ -18,10 +18,12 @@ interface ServiceConfigEditorProps {
|
|||||||
export function ServiceConfigEditor({
|
export function ServiceConfigEditor({
|
||||||
instanceName,
|
instanceName,
|
||||||
serviceName,
|
serviceName,
|
||||||
manifest: _manifestProp, // Ignore the prop, fetch from status instead
|
manifest: _manifest, // Ignore the prop, fetch from status instead
|
||||||
onClose,
|
onClose,
|
||||||
onSuccess,
|
onSuccess,
|
||||||
}: ServiceConfigEditorProps) {
|
}: ServiceConfigEditorProps) {
|
||||||
|
// Suppress unused variable warning - kept for API compatibility
|
||||||
|
void _manifest;
|
||||||
const { config, isLoading: configLoading, updateConfig, isUpdating } = useServiceConfig(instanceName, serviceName);
|
const { config, isLoading: configLoading, updateConfig, isUpdating } = useServiceConfig(instanceName, serviceName);
|
||||||
const { data: statusData, isLoading: statusLoading } = useServiceStatus(instanceName, serviceName);
|
const { data: statusData, isLoading: statusLoading } = useServiceStatus(instanceName, serviceName);
|
||||||
|
|
||||||
|
|||||||
@@ -71,6 +71,13 @@ export function useNodes(instanceName: string | null | undefined) {
|
|||||||
mutationFn: (ip: string) => nodesApi.getHardware(instanceName!, ip),
|
mutationFn: (ip: string) => nodesApi.getHardware(instanceName!, ip),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const resetMutation = useMutation({
|
||||||
|
mutationFn: (nodeName: string) => nodesApi.reset(instanceName!, nodeName),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['instances', instanceName, 'nodes'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
nodes: nodesQuery.data?.nodes || [],
|
nodes: nodesQuery.data?.nodes || [],
|
||||||
isLoading: nodesQuery.isLoading,
|
isLoading: nodesQuery.isLoading,
|
||||||
@@ -101,6 +108,9 @@ export function useNodes(instanceName: string | null | undefined) {
|
|||||||
isFetchingTemplates: fetchTemplatesMutation.isPending,
|
isFetchingTemplates: fetchTemplatesMutation.isPending,
|
||||||
cancelDiscovery: cancelDiscoveryMutation.mutate,
|
cancelDiscovery: cancelDiscoveryMutation.mutate,
|
||||||
isCancellingDiscovery: cancelDiscoveryMutation.isPending,
|
isCancellingDiscovery: cancelDiscoveryMutation.isPending,
|
||||||
|
resetNode: resetMutation.mutate,
|
||||||
|
isResetting: resetMutation.isPending,
|
||||||
|
resetError: resetMutation.error,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,19 +11,17 @@ import {
|
|||||||
BookOpen,
|
BookOpen,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
CheckCircle,
|
CheckCircle,
|
||||||
XCircle,
|
|
||||||
Usb,
|
Usb,
|
||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
CloudLightning,
|
CloudLightning,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAssetList, useDownloadAsset, useAssetStatus } from '../../services/api/hooks/useAssets';
|
import { useAssetList, useDownloadAsset, useAssetStatus } from '../../services/api/hooks/useAssets';
|
||||||
import { assetsApi } from '../../services/api/assets';
|
import { assetsApi } from '../../services/api/assets';
|
||||||
import type { AssetType } from '../../services/api/types/asset';
|
|
||||||
|
|
||||||
export function AssetsIsoPage() {
|
export function AssetsIsoPage() {
|
||||||
const { data, isLoading, error } = useAssetList();
|
const { data, isLoading, error } = useAssetList();
|
||||||
const downloadAsset = useDownloadAsset();
|
const downloadAsset = useDownloadAsset();
|
||||||
const [selectedSchematicId, setSelectedSchematicId] = useState<string | null>(null);
|
const [selectedSchematicId] = useState<string | null>(null);
|
||||||
const [selectedVersion, setSelectedVersion] = useState('v1.8.0');
|
const [selectedVersion, setSelectedVersion] = useState('v1.8.0');
|
||||||
const { data: statusData } = useAssetStatus(selectedSchematicId);
|
const { data: statusData } = useAssetStatus(selectedSchematicId);
|
||||||
|
|
||||||
|
|||||||
@@ -15,22 +15,20 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAssetList, useDownloadAsset, useDeleteAsset } from '../../services/api/hooks/useAssets';
|
import { useAssetList, useDownloadAsset, useDeleteAsset } from '../../services/api/hooks/useAssets';
|
||||||
import { assetsApi } from '../../services/api/assets';
|
import { assetsApi } from '../../services/api/assets';
|
||||||
import type { Platform } from '../../services/api/types/asset';
|
import type { Platform, Asset } from '../../services/api/types/asset';
|
||||||
|
|
||||||
// Helper function to extract version from ISO filename
|
// Helper function to extract platform from filename
|
||||||
// Filename format: talos-v1.11.2-metal-amd64.iso
|
// Filename format: metal-amd64.iso
|
||||||
function extractVersionFromPath(path: string): string {
|
function extractPlatformFromPath(path: string): string {
|
||||||
const filename = path.split('/').pop() || '';
|
const filename = path.split('/').pop() || '';
|
||||||
const match = filename.match(/talos-(v\d+\.\d+\.\d+)-metal/);
|
const match = filename.match(/-(amd64|arm64)\./);
|
||||||
return match ? match[1] : 'unknown';
|
return match ? match[1] : 'unknown';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper function to extract platform from ISO filename
|
// Type for ISO asset with schematic and version info
|
||||||
// Filename format: talos-v1.11.2-metal-amd64.iso
|
interface IsoAssetWithMetadata extends Asset {
|
||||||
function extractPlatformFromPath(path: string): string {
|
schematic_id: string;
|
||||||
const filename = path.split('/').pop() || '';
|
version: string;
|
||||||
const match = filename.match(/-(amd64|arm64)\.iso$/);
|
|
||||||
return match ? match[1] : 'unknown';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function IsoPage() {
|
export function IsoPage() {
|
||||||
@@ -38,8 +36,8 @@ export function IsoPage() {
|
|||||||
const downloadAsset = useDownloadAsset();
|
const downloadAsset = useDownloadAsset();
|
||||||
const deleteAsset = useDeleteAsset();
|
const deleteAsset = useDeleteAsset();
|
||||||
|
|
||||||
const [schematicId, setSchematicId] = useState('');
|
const [schematicId, setSchematicId] = useState('434a0300db532066f1098e05ac068159371d00f0aba0a3103a0e826e83825c82');
|
||||||
const [selectedVersion, setSelectedVersion] = useState('v1.11.2');
|
const [selectedVersion, setSelectedVersion] = useState('v1.11.5');
|
||||||
const [selectedPlatform, setSelectedPlatform] = useState<Platform>('amd64');
|
const [selectedPlatform, setSelectedPlatform] = useState<Platform>('amd64');
|
||||||
const [isDownloading, setIsDownloading] = useState(false);
|
const [isDownloading, setIsDownloading] = useState(false);
|
||||||
|
|
||||||
@@ -53,10 +51,10 @@ export function IsoPage() {
|
|||||||
try {
|
try {
|
||||||
await downloadAsset.mutateAsync({
|
await downloadAsset.mutateAsync({
|
||||||
schematicId,
|
schematicId,
|
||||||
|
version: selectedVersion,
|
||||||
request: {
|
request: {
|
||||||
version: selectedVersion,
|
|
||||||
platform: selectedPlatform,
|
platform: selectedPlatform,
|
||||||
assets: ['iso']
|
asset_types: ['iso']
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
// Refresh the list after download
|
// Refresh the list after download
|
||||||
@@ -69,13 +67,13 @@ export function IsoPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = async (schematicIdToDelete: string) => {
|
const handleDelete = async (schematicIdToDelete: string, versionToDelete: string) => {
|
||||||
if (!confirm('Are you sure you want to delete this schematic and all its assets? This action cannot be undone.')) {
|
if (!confirm(`Are you sure you want to delete ${schematicIdToDelete}@${versionToDelete} and all its assets? This action cannot be undone.`)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await deleteAsset.mutateAsync(schematicIdToDelete);
|
await deleteAsset.mutateAsync({ schematicId: schematicIdToDelete, version: versionToDelete });
|
||||||
await refetch();
|
await refetch();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Delete failed:', err);
|
console.error('Delete failed:', err);
|
||||||
@@ -83,17 +81,16 @@ export function IsoPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Find all ISO assets from all schematics (including multiple ISOs per schematic)
|
// Find all ISO assets from all assets (schematic@version combinations)
|
||||||
const isoAssets = data?.schematics
|
const isoAssets = data?.assets?.flatMap(asset => {
|
||||||
.flatMap(schematic => {
|
// Get ALL ISO assets for this schematic@version
|
||||||
// Get ALL ISO assets for this schematic (not just the first one)
|
const isoAssetsForAsset = asset.assets.filter(a => a.type === 'iso');
|
||||||
const isoAssetsForSchematic = schematic.assets.filter(asset => asset.type === 'iso');
|
return isoAssetsForAsset.map(isoAsset => ({
|
||||||
return isoAssetsForSchematic.map(isoAsset => ({
|
...isoAsset,
|
||||||
...isoAsset,
|
schematic_id: asset.schematic_id,
|
||||||
schematic_id: schematic.schematic_id,
|
version: asset.version
|
||||||
version: schematic.version
|
}));
|
||||||
}));
|
}) || [];
|
||||||
}) || [];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
@@ -146,46 +143,6 @@ export function IsoPage() {
|
|||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
{/* Schematic ID Input */}
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium mb-2 block">
|
|
||||||
Schematic ID
|
|
||||||
<span className="text-muted-foreground ml-2">(64-character hex string)</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={schematicId}
|
|
||||||
onChange={(e) => setSchematicId(e.target.value)}
|
|
||||||
placeholder="e.g., 434a0300db532066f1098e05ac068159371d00f0aba0a3103a0e826e83825c82"
|
|
||||||
className="w-full px-3 py-2 border rounded-lg bg-background font-mono text-sm"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
|
||||||
Get your schematic ID from the{' '}
|
|
||||||
<a
|
|
||||||
href="https://factory.talos.dev"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary hover:underline"
|
|
||||||
>
|
|
||||||
Talos Image Factory
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Version Selection */}
|
|
||||||
<div>
|
|
||||||
<label className="text-sm font-medium mb-2 block">Talos Version</label>
|
|
||||||
<select
|
|
||||||
value={selectedVersion}
|
|
||||||
onChange={(e) => setSelectedVersion(e.target.value)}
|
|
||||||
className="w-full md:w-64 px-3 py-2 border rounded-lg bg-background"
|
|
||||||
>
|
|
||||||
<option value="v1.11.2">v1.11.2</option>
|
|
||||||
<option value="v1.11.1">v1.11.1</option>
|
|
||||||
<option value="v1.11.0">v1.11.0</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Platform Selection */}
|
{/* Platform Selection */}
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium mb-2 block">Platform</label>
|
<label className="text-sm font-medium mb-2 block">Platform</label>
|
||||||
@@ -215,6 +172,49 @@ export function IsoPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Version Selection */}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-2 block">Talos Version</label>
|
||||||
|
<select
|
||||||
|
value={selectedVersion}
|
||||||
|
onChange={(e) => setSelectedVersion(e.target.value)}
|
||||||
|
className="w-full md:w-64 px-3 py-2 border rounded-lg bg-background"
|
||||||
|
>
|
||||||
|
<option value="v1.11.5">v1.11.5</option>
|
||||||
|
<option value="v1.11.4">v1.11.4</option>
|
||||||
|
<option value="v1.11.3">v1.11.3</option>
|
||||||
|
<option value="v1.11.2">v1.11.2</option>
|
||||||
|
<option value="v1.11.1">v1.11.1</option>
|
||||||
|
<option value="v1.11.0">v1.11.0</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Schematic ID Input */}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-2 block">
|
||||||
|
Schematic ID
|
||||||
|
<span className="text-muted-foreground ml-2">(64-character hex string)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={schematicId}
|
||||||
|
onChange={(e) => setSchematicId(e.target.value)}
|
||||||
|
placeholder="e.g., 434a0300db532066f1098e05ac068159371d00f0aba0a3103a0e826e83825c82"
|
||||||
|
className="w-full px-3 py-2 border rounded-lg bg-background font-mono text-sm"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Get your schematic ID from the{' '}
|
||||||
|
<a
|
||||||
|
href="https://factory.talos.dev"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Talos Image Factory
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Download Button */}
|
{/* Download Button */}
|
||||||
<Button
|
<Button
|
||||||
onClick={handleDownload}
|
onClick={handleDownload}
|
||||||
@@ -264,11 +264,12 @@ export function IsoPage() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{isoAssets.map((asset: any) => {
|
{isoAssets.map((asset: IsoAssetWithMetadata) => {
|
||||||
const version = extractVersionFromPath(asset.path || '');
|
|
||||||
const platform = extractPlatformFromPath(asset.path || '');
|
const platform = extractPlatformFromPath(asset.path || '');
|
||||||
|
// Use composite key for React key
|
||||||
|
const compositeKey = `${asset.schematic_id}@${asset.version}`;
|
||||||
return (
|
return (
|
||||||
<Card key={asset.schematic_id} className="p-4">
|
<Card key={compositeKey} className="p-4">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="p-2 bg-muted rounded-lg">
|
<div className="p-2 bg-muted rounded-lg">
|
||||||
<Disc className="h-5 w-5 text-primary" />
|
<Disc className="h-5 w-5 text-primary" />
|
||||||
@@ -276,7 +277,7 @@ export function IsoPage() {
|
|||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<h5 className="font-medium">Talos ISO</h5>
|
<h5 className="font-medium">Talos ISO</h5>
|
||||||
<Badge variant="outline">{version}</Badge>
|
<Badge variant="outline">{asset.version}</Badge>
|
||||||
<Badge variant="outline" className="uppercase">{platform}</Badge>
|
<Badge variant="outline" className="uppercase">{platform}</Badge>
|
||||||
{asset.downloaded ? (
|
{asset.downloaded ? (
|
||||||
<Badge variant="success" className="flex items-center gap-1">
|
<Badge variant="success" className="flex items-center gap-1">
|
||||||
@@ -292,7 +293,7 @@ export function IsoPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-muted-foreground space-y-1">
|
<div className="text-sm text-muted-foreground space-y-1">
|
||||||
<div className="font-mono text-xs truncate">
|
<div className="font-mono text-xs truncate">
|
||||||
Schematic: {asset.schematic_id}
|
{asset.schematic_id}@{asset.version}
|
||||||
</div>
|
</div>
|
||||||
{asset.size && (
|
{asset.size && (
|
||||||
<div>Size: {(asset.size / 1024 / 1024).toFixed(2)} MB</div>
|
<div>Size: {(asset.size / 1024 / 1024).toFixed(2)} MB</div>
|
||||||
@@ -305,7 +306,7 @@ export function IsoPage() {
|
|||||||
size="sm"
|
size="sm"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
window.location.href = assetsApi.getAssetUrl(asset.schematic_id, 'iso');
|
window.location.href = assetsApi.getAssetUrl(asset.schematic_id, asset.version, 'iso');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Download className="h-4 w-4 mr-1" />
|
<Download className="h-4 w-4 mr-1" />
|
||||||
@@ -315,7 +316,7 @@ export function IsoPage() {
|
|||||||
size="sm"
|
size="sm"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
onClick={() => handleDelete(asset.schematic_id)}
|
onClick={() => handleDelete(asset.schematic_id, asset.version)}
|
||||||
>
|
>
|
||||||
<Trash2 className="h-4 w-4" />
|
<Trash2 className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -1,42 +1,42 @@
|
|||||||
import { apiClient } from './client';
|
import { apiClient } from './client';
|
||||||
import type { AssetListResponse, Schematic, DownloadAssetRequest, AssetStatusResponse } from './types/asset';
|
import type { AssetListResponse, PXEAsset, DownloadAssetRequest, AssetStatusResponse } from './types/asset';
|
||||||
|
|
||||||
// Get API base URL
|
// Get API base URL
|
||||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5055';
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5055';
|
||||||
|
|
||||||
export const assetsApi = {
|
export const assetsApi = {
|
||||||
// List all schematics
|
// List all assets (schematic@version combinations)
|
||||||
list: async (): Promise<AssetListResponse> => {
|
list: async (): Promise<AssetListResponse> => {
|
||||||
const response = await apiClient.get('/api/v1/assets');
|
const response = await apiClient.get('/api/v1/pxe/assets');
|
||||||
return response as AssetListResponse;
|
return response as AssetListResponse;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Get schematic details
|
// Get asset details for specific schematic@version
|
||||||
get: async (schematicId: string): Promise<Schematic> => {
|
get: async (schematicId: string, version: string): Promise<PXEAsset> => {
|
||||||
const response = await apiClient.get(`/api/v1/assets/${schematicId}`);
|
const response = await apiClient.get(`/api/v1/pxe/assets/${schematicId}/${version}`);
|
||||||
return response as Schematic;
|
return response as PXEAsset;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Download assets for a schematic
|
// Download assets for a schematic@version
|
||||||
download: async (schematicId: string, request: DownloadAssetRequest): Promise<{ message: string }> => {
|
download: async (schematicId: string, version: string, request: DownloadAssetRequest): Promise<{ message: string }> => {
|
||||||
const response = await apiClient.post(`/api/v1/assets/${schematicId}/download`, request);
|
const response = await apiClient.post(`/api/v1/pxe/assets/${schematicId}/${version}/download`, request);
|
||||||
return response as { message: string };
|
return response as { message: string };
|
||||||
},
|
},
|
||||||
|
|
||||||
// Get download status
|
// Get download status
|
||||||
status: async (schematicId: string): Promise<AssetStatusResponse> => {
|
status: async (schematicId: string, version: string): Promise<AssetStatusResponse> => {
|
||||||
const response = await apiClient.get(`/api/v1/assets/${schematicId}/status`);
|
const response = await apiClient.get(`/api/v1/pxe/assets/${schematicId}/${version}/status`);
|
||||||
return response as AssetStatusResponse;
|
return response as AssetStatusResponse;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Get download URL for an asset (includes base URL for direct download)
|
// Get download URL for an asset (includes base URL for direct download)
|
||||||
getAssetUrl: (schematicId: string, assetType: 'kernel' | 'initramfs' | 'iso'): string => {
|
getAssetUrl: (schematicId: string, version: string, assetType: 'kernel' | 'initramfs' | 'iso'): string => {
|
||||||
return `${API_BASE_URL}/api/v1/assets/${schematicId}/pxe/${assetType}`;
|
return `${API_BASE_URL}/api/v1/pxe/assets/${schematicId}/${version}/pxe/${assetType}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Delete a schematic and all its assets
|
// Delete an asset (schematic@version) and all its files
|
||||||
delete: async (schematicId: string): Promise<{ message: string }> => {
|
delete: async (schematicId: string, version: string): Promise<{ message: string }> => {
|
||||||
const response = await apiClient.delete(`/api/v1/assets/${schematicId}`);
|
const response = await apiClient.delete(`/api/v1/pxe/assets/${schematicId}/${version}`);
|
||||||
return response as { message: string };
|
return response as { message: string };
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -9,19 +9,19 @@ export function useAssetList() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAsset(schematicId: string | null | undefined) {
|
export function useAsset(schematicId: string | null | undefined, version: string | null | undefined) {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ['assets', schematicId],
|
queryKey: ['assets', schematicId, version],
|
||||||
queryFn: () => assetsApi.get(schematicId!),
|
queryFn: () => assetsApi.get(schematicId!, version!),
|
||||||
enabled: !!schematicId,
|
enabled: !!schematicId && !!version,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAssetStatus(schematicId: string | null | undefined) {
|
export function useAssetStatus(schematicId: string | null | undefined, version: string | null | undefined) {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ['assets', schematicId, 'status'],
|
queryKey: ['assets', schematicId, version, 'status'],
|
||||||
queryFn: () => assetsApi.status(schematicId!),
|
queryFn: () => assetsApi.status(schematicId!, version!),
|
||||||
enabled: !!schematicId,
|
enabled: !!schematicId && !!version,
|
||||||
refetchInterval: (query) => {
|
refetchInterval: (query) => {
|
||||||
const data = query.state.data;
|
const data = query.state.data;
|
||||||
// Poll every 2 seconds if downloading
|
// Poll every 2 seconds if downloading
|
||||||
@@ -34,12 +34,12 @@ export function useDownloadAsset() {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: ({ schematicId, request }: { schematicId: string; request: DownloadAssetRequest }) =>
|
mutationFn: ({ schematicId, version, request }: { schematicId: string; version: string; request: DownloadAssetRequest }) =>
|
||||||
assetsApi.download(schematicId, request),
|
assetsApi.download(schematicId, version, request),
|
||||||
onSuccess: (_, variables) => {
|
onSuccess: (_, variables) => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['assets'] });
|
queryClient.invalidateQueries({ queryKey: ['assets'] });
|
||||||
queryClient.invalidateQueries({ queryKey: ['assets', variables.schematicId] });
|
queryClient.invalidateQueries({ queryKey: ['assets', variables.schematicId, variables.version] });
|
||||||
queryClient.invalidateQueries({ queryKey: ['assets', variables.schematicId, 'status'] });
|
queryClient.invalidateQueries({ queryKey: ['assets', variables.schematicId, variables.version, 'status'] });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -48,11 +48,12 @@ export function useDeleteAsset() {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: (schematicId: string) => assetsApi.delete(schematicId),
|
mutationFn: ({ schematicId, version }: { schematicId: string; version: string }) =>
|
||||||
onSuccess: (_, schematicId) => {
|
assetsApi.delete(schematicId, version),
|
||||||
|
onSuccess: (_, { schematicId, version }) => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['assets'] });
|
queryClient.invalidateQueries({ queryKey: ['assets'] });
|
||||||
queryClient.invalidateQueries({ queryKey: ['assets', schematicId] });
|
queryClient.invalidateQueries({ queryKey: ['assets', schematicId, version] });
|
||||||
queryClient.invalidateQueries({ queryKey: ['assets', schematicId, 'status'] });
|
queryClient.invalidateQueries({ queryKey: ['assets', schematicId, version, 'status'] });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,4 +59,8 @@ export const nodesApi = {
|
|||||||
async fetchTemplates(instanceName: string): Promise<OperationResponse> {
|
async fetchTemplates(instanceName: string): Promise<OperationResponse> {
|
||||||
return apiClient.post(`/api/v1/instances/${instanceName}/nodes/fetch-templates`);
|
return apiClient.post(`/api/v1/instances/${instanceName}/nodes/fetch-templates`);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async reset(instanceName: string, nodeName: string): Promise<OperationResponse> {
|
||||||
|
return apiClient.post(`/api/v1/instances/${instanceName}/nodes/${nodeName}/reset`);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -10,8 +10,8 @@ export interface Asset {
|
|||||||
downloaded: boolean;
|
downloaded: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Schematic representation matching backend
|
// PXEAsset represents a schematic@version combination (composite key)
|
||||||
export interface Schematic {
|
export interface PXEAsset {
|
||||||
schematic_id: string;
|
schematic_id: string;
|
||||||
version: string;
|
version: string;
|
||||||
path: string;
|
path: string;
|
||||||
@@ -19,13 +19,12 @@ export interface Schematic {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface AssetListResponse {
|
export interface AssetListResponse {
|
||||||
schematics: Schematic[];
|
assets: PXEAsset[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DownloadAssetRequest {
|
export interface DownloadAssetRequest {
|
||||||
version: string;
|
|
||||||
platform?: Platform;
|
platform?: Platform;
|
||||||
assets?: AssetType[];
|
asset_types?: string[];
|
||||||
force?: boolean;
|
force?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user