73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { useDocker } from "../../hooks/useDocker";
|
||
|
|
|
||
|
|
export default function DockerSettings() {
|
||
|
|
const { dockerAvailable, imageExists, checkDocker, checkImage, buildImage } =
|
||
|
|
useDocker();
|
||
|
|
const [building, setBuilding] = useState(false);
|
||
|
|
const [buildLog, setBuildLog] = useState<string[]>([]);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const handleBuild = async () => {
|
||
|
|
setBuilding(true);
|
||
|
|
setBuildLog([]);
|
||
|
|
setError(null);
|
||
|
|
try {
|
||
|
|
await buildImage((msg) => {
|
||
|
|
setBuildLog((prev) => [...prev, msg]);
|
||
|
|
});
|
||
|
|
} catch (e) {
|
||
|
|
setError(String(e));
|
||
|
|
} finally {
|
||
|
|
setBuilding(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium mb-2">Docker</label>
|
||
|
|
<div className="space-y-2 text-sm">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-[var(--text-secondary)]">Docker Status</span>
|
||
|
|
<span className={dockerAvailable ? "text-[var(--success)]" : "text-[var(--error)]"}>
|
||
|
|
{dockerAvailable === null ? "Checking..." : dockerAvailable ? "Connected" : "Not Available"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-[var(--text-secondary)]">Image</span>
|
||
|
|
<span className={imageExists ? "text-[var(--success)]" : "text-[var(--text-secondary)]"}>
|
||
|
|
{imageExists === null ? "Checking..." : imageExists ? "Built" : "Not Built"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<button
|
||
|
|
onClick={async () => { await checkDocker(); await checkImage(); }}
|
||
|
|
className="px-3 py-1.5 text-xs bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded hover:bg-[var(--border-color)] transition-colors"
|
||
|
|
>
|
||
|
|
Refresh Status
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleBuild}
|
||
|
|
disabled={building || !dockerAvailable}
|
||
|
|
className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:bg-[var(--accent-hover)] disabled:opacity-50 transition-colors"
|
||
|
|
>
|
||
|
|
{building ? "Building..." : imageExists ? "Rebuild Image" : "Build Image"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{buildLog.length > 0 && (
|
||
|
|
<div className="max-h-40 overflow-y-auto bg-[var(--bg-primary)] border border-[var(--border-color)] rounded p-2 text-xs font-mono text-[var(--text-secondary)]">
|
||
|
|
{buildLog.map((line, i) => (
|
||
|
|
<div key={i}>{line}</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{error && <div className="text-xs text-[var(--error)]">{error}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|