448 lines
17 KiB
TypeScript
448 lines
17 KiB
TypeScript
import { useState } from 'react';
|
|
import { Server, Wrench, Loader2, RefreshCw, Trash2 } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { useGlobal } from 'hooks/useGlobal';
|
|
import { usePanelChannel } from 'hooks/usePanelChannel';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { useResources, getResourceCategory, type Resource, type PingResult } from '@/state/useResources';
|
|
import { RUN_COMMAND_CHANNEL, type RunCommandState } from './run-command-channel';
|
|
|
|
type ConnectionSectionProps = {
|
|
resource: Resource;
|
|
};
|
|
|
|
const ConnectionSection = ({ resource }: ConnectionSectionProps) => {
|
|
const { saveConnectionConfig, pingResource } = useResources();
|
|
const [url, setUrl] = useState(resource.connectionConfig?.url ?? '');
|
|
const [apiKey, setApiKey] = useState(resource.connectionConfig?.credentials?.apiKey ?? '');
|
|
const [username, setUsername] = useState(resource.connectionConfig?.credentials?.username ?? '');
|
|
const [password, setPassword] = useState(resource.connectionConfig?.credentials?.password ?? '');
|
|
const [pinging, setPinging] = useState(false);
|
|
const [pingResult, setPingResult] = useState<PingResult | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const handlePing = async () => {
|
|
setPinging(true);
|
|
setPingResult(null);
|
|
try {
|
|
const result = await pingResource(resource.id, url);
|
|
setPingResult(result);
|
|
} catch {
|
|
setPingResult({ reachable: false, latencyMs: null });
|
|
} finally {
|
|
setPinging(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const credentials =
|
|
apiKey || username || password
|
|
? { apiKey: apiKey || undefined, username: username || undefined, password: password || undefined }
|
|
: undefined;
|
|
await saveConnectionConfig(resource.id, { url, credentials });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const hasCredentials = !!(
|
|
resource.connectionConfig?.credentials?.apiKey || resource.connectionConfig?.credentials?.username
|
|
);
|
|
|
|
return (
|
|
<div className="mb-6">
|
|
<h3 className="text-sm font-semibold text-duck-dark mb-3">Connection</h3>
|
|
<div className="flex flex-col gap-3">
|
|
<div>
|
|
<label className="text-xs text-duck-dark/50 mb-1 block">Base URL</label>
|
|
<Input
|
|
value={url}
|
|
onChange={(ev) => setUrl(ev.target.value)}
|
|
placeholder="http://127.0.0.1:64202"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
{(hasCredentials || apiKey) && (
|
|
<div>
|
|
<label className="text-xs text-duck-dark/50 mb-1 block">API Key</label>
|
|
<Input
|
|
value={apiKey}
|
|
onChange={(ev) => setApiKey(ev.target.value)}
|
|
placeholder="Optional"
|
|
type="password"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
{(hasCredentials || username || password) && (
|
|
<div className="flex gap-2">
|
|
<div className="flex-1">
|
|
<label className="text-xs text-duck-dark/50 mb-1 block">Username</label>
|
|
<Input
|
|
value={username}
|
|
onChange={(ev) => setUsername(ev.target.value)}
|
|
placeholder="Optional"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="text-xs text-duck-dark/50 mb-1 block">Password</label>
|
|
<Input
|
|
value={password}
|
|
onChange={(ev) => setPassword(ev.target.value)}
|
|
placeholder="Optional"
|
|
type="password"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="sm" onClick={handlePing} disabled={pinging || !url} className="text-xs">
|
|
{pinging && <Loader2 className="h-3 w-3 animate-spin mr-1" />}
|
|
Test Connection
|
|
</Button>
|
|
<Button size="sm" onClick={handleSave} disabled={saving || !url} className="text-xs">
|
|
{saving && <Loader2 className="h-3 w-3 animate-spin mr-1" />}
|
|
Save
|
|
</Button>
|
|
{pingResult && (
|
|
<span className={`text-xs ${pingResult.reachable ? 'text-green-600' : 'text-red-500'}`}>
|
|
{pingResult.reachable ? `Reachable (${pingResult.latencyMs}ms)` : 'Unreachable'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type LocalAvailabilitySectionProps = {
|
|
resource: Resource;
|
|
onRun: (command: string) => void;
|
|
};
|
|
|
|
type ResourceAction = 'install' | 'uninstall' | 'verify' | 'update' | 'manage';
|
|
|
|
const LocalAvailabilitySection = ({ resource, onRun }: LocalAvailabilitySectionProps) => {
|
|
const { runCommand } = useResources();
|
|
const [runningAction, setRunningAction] = useState<ResourceAction | null>(null);
|
|
|
|
const isSudo = (cmd: string) => cmd.trimStart().startsWith('sudo');
|
|
|
|
const handleAction = async (action: ResourceAction, command: string) => {
|
|
if (isSudo(command)) {
|
|
onRun(command);
|
|
return;
|
|
}
|
|
setRunningAction(action);
|
|
try {
|
|
const result = await runCommand(resource.id, action);
|
|
if (result.exitCode === 0) {
|
|
toast.success('Command completed successfully');
|
|
} else {
|
|
toast.error(result.output || `Command failed (exit code ${result.exitCode})`, { duration: 8000 });
|
|
}
|
|
} catch {
|
|
toast.error('Failed to run command');
|
|
} finally {
|
|
setRunningAction(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{resource.installed ? (
|
|
<>
|
|
<div>
|
|
<span className="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5">Installed</span>
|
|
</div>
|
|
{resource.version && (
|
|
<div className="flex items-center gap-2">
|
|
{resource.updateCommand && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-xs cursor-pointer"
|
|
onClick={() => handleAction('update', resource.updateCommand!)}
|
|
disabled={!!runningAction}
|
|
>
|
|
<RefreshCw className={`h-3 w-3 mr-1 ${runningAction === 'update' ? 'animate-spin' : ''}`} />
|
|
Update
|
|
</Button>
|
|
)}
|
|
<span className="text-xs text-duck-dark/50 dark:text-foreground/50">{resource.version}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-1.5">
|
|
{!resource.version && resource.updateCommand && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-xs cursor-pointer"
|
|
onClick={() => handleAction('update', resource.updateCommand!)}
|
|
disabled={!!runningAction}
|
|
>
|
|
<RefreshCw className={`h-3 w-3 mr-1 ${runningAction === 'update' ? 'animate-spin' : ''}`} />
|
|
Update
|
|
</Button>
|
|
)}
|
|
{resource.verifyCommand && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-xs cursor-pointer"
|
|
onClick={() => handleAction('verify', resource.verifyCommand!)}
|
|
disabled={!!runningAction}
|
|
>
|
|
{runningAction === 'verify' && <Loader2 className="h-3 w-3 mr-1 animate-spin" />}
|
|
Verify
|
|
</Button>
|
|
)}
|
|
{resource.manageCommand && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-xs cursor-pointer"
|
|
onClick={() => handleAction('manage', resource.manageCommand!)}
|
|
disabled={!!runningAction}
|
|
>
|
|
{runningAction === 'manage' && <Loader2 className="h-3 w-3 mr-1 animate-spin" />}
|
|
Manage
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{resource.uninstallCommand && (
|
|
<div className="flex items-center mt-1.5">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-xs cursor-pointer text-red-500 hover:text-red-600 border-red-500/30 hover:border-red-500/50 hover:bg-red-500/5"
|
|
onClick={() => handleAction('uninstall', resource.uninstallCommand!)}
|
|
disabled={!!runningAction}
|
|
>
|
|
{runningAction === 'uninstall' ? (
|
|
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
|
|
) : (
|
|
<Trash2 className="h-3 w-3 mr-1" />
|
|
)}
|
|
Uninstall
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs bg-duck-dark/5 text-duck-dark/40 rounded-full px-2 py-0.5">Not installed</span>
|
|
{resource.installCommand && (
|
|
<Button
|
|
size="sm"
|
|
className="h-6 text-xs bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
|
|
onClick={() => handleAction('install', resource.installCommand!)}
|
|
disabled={runningAction === 'install'}
|
|
>
|
|
{runningAction === 'install' ? 'Installing...' : 'Install'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type CatalogCardProps = {
|
|
resource: Resource;
|
|
onSelect: (id: string) => void;
|
|
};
|
|
|
|
const CatalogCard = ({ resource: r, onSelect }: CatalogCardProps) => {
|
|
const category = getResourceCategory(r);
|
|
return (
|
|
<button
|
|
onClick={() => onSelect(r.id)}
|
|
className="flex flex-col gap-2 p-4 rounded-lg border border-duck-dark/10 text-left cursor-pointer transition-colors hover:border-duck-teal/30 hover:bg-duck-teal/5"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{r.port ? (
|
|
<Server className="h-3.5 w-3.5 text-duck-teal shrink-0" />
|
|
) : (
|
|
<Wrench className="h-3.5 w-3.5 text-duck-dark/40 shrink-0" />
|
|
)}
|
|
<span className="text-sm font-medium text-duck-dark truncate">{r.name}</span>
|
|
</div>
|
|
<p className="text-xs text-duck-dark/40 line-clamp-1">{r.subtitle}</p>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-[10px] bg-duck-dark/5 text-duck-dark/40 rounded-full px-1.5 py-0.5">{r.type}</span>
|
|
<span
|
|
className={`text-[10px] rounded-full px-1.5 py-0.5 ${category === 'api-based' ? 'bg-duck-teal/10 text-duck-teal' : 'bg-duck-dark/5 text-duck-dark/40'}`}
|
|
>
|
|
{category === 'api-based' ? 'API' : 'CLI'}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const ResourceCatalog = () => {
|
|
const { resources, isLoading } = useResources();
|
|
const [, setSelectedId] = useGlobal<string | null>('RESOURCE_SELECTED', null);
|
|
const [, setShowCatalog] = useGlobal<boolean>('RESOURCE_CATALOG', false);
|
|
const [search, setSearch] = useState('');
|
|
|
|
const query = search.toLowerCase();
|
|
const filtered =
|
|
resources?.filter(
|
|
(r: Resource) =>
|
|
!r.installed &&
|
|
(r.name.toLowerCase().includes(query) ||
|
|
r.subtitle.toLowerCase().includes(query) ||
|
|
r.description.toLowerCase().includes(query)),
|
|
) ?? [];
|
|
|
|
const apiBased = filtered.filter((r: Resource) => getResourceCategory(r) === 'api-based');
|
|
const localCli = filtered.filter((r: Resource) => getResourceCategory(r) === 'local-cli');
|
|
|
|
const handleSelect = (id: string) => {
|
|
setShowCatalog(false);
|
|
setSelectedId(id);
|
|
};
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<h2 className="text-lg font-bold text-duck-dark mb-1">Resource Catalog</h2>
|
|
<p className="text-sm text-duck-dark/40 mb-4">All available resources. Select one to configure.</p>
|
|
<Input
|
|
placeholder="Search resources..."
|
|
value={search}
|
|
onChange={(ev) => setSearch(ev.target.value)}
|
|
className="h-8 text-xs mb-4 max-w-xs"
|
|
/>
|
|
{isLoading && <p className="text-xs text-duck-dark/50">Loading...</p>}
|
|
{apiBased.length > 0 && (
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Server className="h-3.5 w-3.5 text-duck-teal" />
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-duck-dark/40">API Based</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-3">
|
|
{apiBased.map((r: Resource) => (
|
|
<CatalogCard key={r.id} resource={r} onSelect={handleSelect} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{localCli.length > 0 && (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Wrench className="h-3.5 w-3.5 text-duck-dark/40" />
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-duck-dark/40">Local CLI</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-3">
|
|
{localCli.map((r: Resource) => (
|
|
<CatalogCard key={r.id} resource={r} onSelect={handleSelect} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ResourceDetail = ({ resource }: { resource: Resource }) => {
|
|
const category = getResourceCategory(resource);
|
|
const [, setRunCommand] = usePanelChannel<RunCommandState>(RUN_COMMAND_CHANNEL, null);
|
|
const [confirmCommand, setConfirmCommand] = useState<string | null>(null);
|
|
|
|
const handleRun = (command: string) => {
|
|
const isSudo = command.trimStart().startsWith('sudo');
|
|
if (isSudo) {
|
|
setConfirmCommand(command);
|
|
} else {
|
|
setRunCommand({ command });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
{resource.port ? (
|
|
<Server className="h-4 w-4 text-duck-teal shrink-0" />
|
|
) : (
|
|
<Wrench className="h-4 w-4 text-duck-dark/40 shrink-0" />
|
|
)}
|
|
<h2 className="text-lg font-bold text-duck-dark">{resource.name}</h2>
|
|
<span className="text-sm text-duck-dark/40">{resource.subtitle}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<span className="text-xs bg-duck-dark/5 text-duck-dark/50 rounded-full px-2 py-0.5">{resource.type}</span>
|
|
<span
|
|
className={`text-xs rounded-full px-2 py-0.5 ${category === 'api-based' ? 'bg-duck-teal/10 text-duck-teal' : 'bg-duck-dark/5 text-duck-dark/50'}`}
|
|
>
|
|
{category === 'api-based' ? 'API Based' : 'Local CLI'}
|
|
</span>
|
|
{resource.port && (
|
|
<span className="text-xs bg-duck-teal/10 text-duck-teal rounded-full px-2 py-0.5">:{resource.port}</span>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-sm text-duck-dark/70 mb-6">{resource.description}</p>
|
|
|
|
{category === 'api-based' && <ConnectionSection key={resource.id} resource={resource} />}
|
|
<LocalAvailabilitySection resource={resource} onRun={handleRun} />
|
|
</div>
|
|
|
|
<AlertDialog open={!!confirmCommand} onOpenChange={(open) => !open && setConfirmCommand(null)}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Run with elevated privileges</AlertDialogTitle>
|
|
</AlertDialogHeader>
|
|
<p className="text-sm text-duck-dark/70 dark:text-foreground/70">
|
|
For this operation the script must be run with elevated privileges (sudo) on the host machine.
|
|
<br />
|
|
Not to worry, though, we wrote it and battle tested it ourselves.
|
|
</p>
|
|
<code className="text-sm font-mono bg-[#1a1a2e] text-[#e0e0e0] rounded-lg px-3 py-2 break-all">{confirmCommand}</code>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel className="cursor-pointer">Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
className="cursor-pointer bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold"
|
|
onClick={() => {
|
|
if (confirmCommand) setRunCommand({ command: confirmCommand });
|
|
setConfirmCommand(null);
|
|
}}
|
|
>
|
|
Run
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Resources = () => {
|
|
const { resources } = useResources();
|
|
const [selectedId] = useGlobal<string | null>('RESOURCE_SELECTED', null);
|
|
const [showCatalog] = useGlobal<boolean>('RESOURCE_CATALOG', false);
|
|
|
|
const resource = selectedId ? resources?.find((r: Resource) => r.id === selectedId) : null;
|
|
|
|
if (showCatalog || !resource) return <ResourceCatalog />;
|
|
return <ResourceDetail resource={resource} />;
|
|
};
|