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: display containers using the volume

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-09-27 10:16:23 +02:00
parent 481eb13a44
commit 592a8f52b7
10 changed files with 353 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/client/app/api-client/@tanstack/react-query.gen.ts
View File

@@ -8,6 +8,7 @@ import {
deleteVolume,
getVolume,
updateVolume,
getContainersUsingVolume,
mountVolume,
unmountVolume,
} from "../sdk.gen";
@@ -23,6 +24,7 @@ import type {
GetVolumeData,
UpdateVolumeData,
UpdateVolumeResponse,
GetContainersUsingVolumeData,
MountVolumeData,
MountVolumeResponse,
UnmountVolumeData,
@@ -226,6 +228,27 @@ export const updateVolumeMutation = (
return mutationOptions;
};
export const getContainersUsingVolumeQueryKey = (options: Options<GetContainersUsingVolumeData>) =>
createQueryKey("getContainersUsingVolume", options);
/**
* Get containers using a volume by name
*/
export const getContainersUsingVolumeOptions = (options: Options<GetContainersUsingVolumeData>) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await getContainersUsingVolume({
...options,
...queryKey[0],
signal,
throwOnError: true,
});
return data;
},
queryKey: getContainersUsingVolumeQueryKey(options),
});
};
export const mountVolumeQueryKey = (options: Options<MountVolumeData>) => createQueryKey("mountVolume", options);
/**

19
apps/client/app/api-client/sdk.gen.ts
View File

@@ -16,6 +16,9 @@ import type {
UpdateVolumeData,
UpdateVolumeResponses,
UpdateVolumeErrors,
GetContainersUsingVolumeData,
GetContainersUsingVolumeResponses,
GetContainersUsingVolumeErrors,
MountVolumeData,
MountVolumeResponses,
MountVolumeErrors,
@@ -122,6 +125,22 @@ export const updateVolume = <ThrowOnError extends boolean = false>(
});
};
/**
* Get containers using a volume by name
*/
export const getContainersUsingVolume = <ThrowOnError extends boolean = false>(
options: Options<GetContainersUsingVolumeData, ThrowOnError>,
) => {
return (options.client ?? _heyApiClient).get<
GetContainersUsingVolumeResponses,
GetContainersUsingVolumeErrors,
ThrowOnError
>({
url: "/api/v1/volumes/{name}/containers",
...options,
});
};
/**
* Mount a volume
*/

33
apps/client/app/api-client/types.gen.ts
View File

@@ -349,6 +349,39 @@ export type UpdateVolumeResponses = {
export type UpdateVolumeResponse = UpdateVolumeResponses[keyof UpdateVolumeResponses];
export type GetContainersUsingVolumeData = {
body?: never;
path: {
name: string;
};
query?: never;
url: "/api/v1/volumes/{name}/containers";
};
export type GetContainersUsingVolumeErrors = {
/**
* Volume not found
*/
404: unknown;
};
export type GetContainersUsingVolumeResponses = {
/**
* List of containers using the volume
*/
200: {
containers: Array<{
id: string;
image: string;
name: string;
state: string;
}>;
};
};
export type GetContainersUsingVolumeResponse =
GetContainersUsingVolumeResponses[keyof GetContainersUsingVolumeResponses];
export type MountVolumeData = {
body?: never;
path: {

63
apps/client/app/modules/details/tabs/docker.tsx
View File

@@ -1,7 +1,10 @@
import { useQuery } from "@tanstack/react-query";
import * as YML from "yaml";
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 * as YML from "yaml";
import { getContainersUsingVolumeOptions } from "../../../api-client/@tanstack/react-query.gen";
type Props = {
volume: Volume;
@@ -24,8 +27,24 @@ export const DockerTabContent = ({ volume }: Props) => {
const dockerRunCommand = `docker run -v ${volume.name}:/path/in/container nginx:latest`;
const containersQuery = getContainersUsingVolumeOptions({ path: { name: volume.name } });
const { data: containersData, isLoading, error } = useQuery(containersQuery);
const containers = containersData?.containers || [];
const getStateClass = (state: string) => {
switch (state) {
case "running":
return "bg-green-100 text-green-800";
case "exited":
return "bg-orange-100 text-orange-800";
default:
return "bg-gray-100 text-gray-800";
}
};
return (
<div className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]">
<div className="grid gap-4 xl:grid-cols-[minmax(0,_1fr)_minmax(0,_1fr)]">
<Card>
<CardHeader>
<CardTitle>Plug-and-play Docker integration</CardTitle>
@@ -55,11 +74,45 @@ export const DockerTabContent = ({ volume }: Props) => {
<div className="grid">
<Card>
<CardHeader>
<CardTitle>Best practices</CardTitle>
<CardDescription>Validate the automation before enabling it in production.</CardDescription>
<CardTitle>Containers Using This Volume</CardTitle>
<CardDescription>List of Docker containers mounting this volume.</CardDescription>
</CardHeader>
<CardContent className="space-y-4 text-sm"></CardContent>
<CardContent className="space-y-4 text-sm">
{isLoading && <div>Loading containers...</div>}
{error && <div className="text-destructive">Failed to load containers: {String(error)}</div>}
{!isLoading && !error && containers.length === 0 && (
<div>No containers are currently using this volume.</div>
)}
{!isLoading && !error && containers.length > 0 && (
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>ID</TableHead>
<TableHead>State</TableHead>
<TableHead>Image</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{containers.map((container) => (
<TableRow key={container.id}>
<TableCell>{container.name}</TableCell>
<TableCell>{container.id.slice(0, 12)}</TableCell>
<TableCell>
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${getStateClass(container.state)}`}
>
{container.state}
</span>
</TableCell>
<TableCell>{container.image}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</CardContent>
</Card>
</div>
</div>