ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: docker optional capability

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-11-08 10:16:18 +01:00
parent 9ec765bd90
commit 9d27bffc21
2 changed files with 19 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/client/app/modules/volumes/routes/volume-details.tsx
View File

@@ -5,6 +5,7 @@ import { useState } from "react";
import {
deleteVolumeMutation,
getVolumeOptions,
getSystemInfoOptions,
mountVolumeMutation,
unmountVolumeMutation,
} from "~/api-client/@tanstack/react-query.gen";
@@ -58,6 +59,10 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
refetchOnWindowFocus: true,
});
const { data: systemInfo } = useQuery({
...getSystemInfoOptions(),
});
const deleteVol = useMutation({
...deleteVolumeMutation(),
onSuccess: () => {
@@ -109,6 +114,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
}
const { volume, statfs } = data;
const dockerAvailable = systemInfo?.capabilities?.docker ?? false;
return (
<>
@@ -146,7 +152,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
<TabsList className="mb-2">
<TabsTrigger value="info">Configuration</TabsTrigger>
<TabsTrigger value="files">Files</TabsTrigger>
<TabsTrigger value="docker">Docker</TabsTrigger>
{dockerAvailable && <TabsTrigger value="docker">Docker</TabsTrigger>}
</TabsList>
<TabsContent value="info">
<VolumeInfoTabContent volume={volume} statfs={statfs} />
@@ -154,9 +160,11 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
<TabsContent value="files">
<FilesTabContent volume={volume} />
</TabsContent>
<TabsContent value="docker">
<DockerTabContent volume={volume} />
</TabsContent>
{dockerAvailable && (
<TabsContent value="docker">
<DockerTabContent volume={volume} />
</TabsContent>
)}
</Tabs>
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>

55
apps/client/app/modules/volumes/tabs/docker.tsx
View File

@@ -1,12 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import { AlertCircle, Unplug } from "lucide-react";
import { Unplug } from "lucide-react";
import * as YML from "yaml";
import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { CodeBlock } from "~/components/ui/code-block";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
import type { Volume } from "~/lib/types";
import { getContainersUsingVolumeOptions, getSystemInfoOptions } from "../../../api-client/@tanstack/react-query.gen";
import { getContainersUsingVolumeOptions } from "../../../api-client/@tanstack/react-query.gen";
type Props = {
volume: Volume;
@@ -29,11 +28,6 @@ export const DockerTabContent = ({ volume }: Props) => {
const dockerRunCommand = `docker run -v im-${volume.name}:/path/in/container nginx:latest`;
const { data: systemInfo } = useQuery({
...getSystemInfoOptions(),
staleTime: 60000, // Cache for 1 minute
});
const {
data: containersData,
isLoading,
@@ -45,7 +39,6 @@ export const DockerTabContent = ({ volume }: Props) => {
});
const containers = containersData || [];
const dockerAvailable = systemInfo?.data?.capabilities?.docker ?? true;
const getStateClass = (state: string) => {
switch (state) {
@@ -60,28 +53,6 @@ export const DockerTabContent = ({ volume }: Props) => {
return (
<div className="grid gap-4 xl:grid-cols-[minmax(0,_1fr)_minmax(0,_1fr)]">
{!dockerAvailable && (
<div className="xl:col-span-2">
<Alert>
<AlertCircle className="h-4 w-4" />
<AlertTitle>Docker Integration Unavailable</AlertTitle>
<AlertDescription>
Docker integration features are currently disabled. To enable them, you need to mount the following paths
in your docker-compose.yml:
<ul className="mt-2 list-inside list-disc space-y-1 text-sm">
<li>
<code className="rounded bg-muted px-1 py-0.5">/var/run/docker.sock:/var/run/docker.sock</code>
</li>
<li>
<code className="rounded bg-muted px-1 py-0.5">/run/docker/plugins:/run/docker/plugins</code>
</li>
</ul>
<p className="mt-2 text-sm">After adding these mounts, restart the Ironmount container.</p>
</AlertDescription>
</Alert>
</div>
)}
<Card>
<CardHeader>
<CardTitle>Plug-and-play Docker integration</CardTitle>
@@ -112,31 +83,19 @@ export const DockerTabContent = ({ volume }: Props) => {
<Card>
<CardHeader>
<CardTitle>Containers Using This Volume</CardTitle>
<CardDescription>
{dockerAvailable
? "List of Docker containers mounting this volume."
: "Docker integration is unavailable - enable it to see container information."}
</CardDescription>
<CardDescription>List of Docker containers mounting this volume.</CardDescription>
</CardHeader>
<CardContent className="space-y-4 text-sm h-full">
{!dockerAvailable && (
<div className="flex flex-col items-center justify-center text-center h-full">
<AlertCircle className="mb-4 h-5 w-5 text-muted-foreground" />
<p className="text-muted-foreground">Docker integration is not available.</p>
</div>
)}
{dockerAvailable && isLoading && <div>Loading containers...</div>}
{dockerAvailable && error && (
<div className="text-destructive">Failed to load containers: {String(error)}</div>
)}
{dockerAvailable && !isLoading && !error && containers.length === 0 && (
{isLoading && <div>Loading containers...</div>}
{error && <div className="text-destructive">Failed to load containers: {String(error)}</div>}
{!isLoading && !error && containers.length === 0 && (
<div className="flex flex-col items-center justify-center text-center h-full">
<Unplug className="mb-4 h-5 w-5 text-muted-foreground" />
<p className="text-muted-foreground">No Docker containers are currently using this volume.</p>
</div>
)}
{dockerAvailable && !isLoading && !error && containers.length > 0 && (
{!isLoading && !error && containers.length > 0 && (
<div className="max-h-130 overflow-y-auto">
<Table>
<TableHeader>