diff --git a/screenshots/screenshot-dokemon-compose-up.jpg b/screenshots/screenshot-dokemon-compose-up.jpg index db5f6687..4b5417ac 100644 Binary files a/screenshots/screenshot-dokemon-compose-up.jpg and b/screenshots/screenshot-dokemon-compose-up.jpg differ diff --git a/screenshots/screenshot-dokemon-containers.jpg b/screenshots/screenshot-dokemon-containers.jpg index e662c83d..0186b08d 100644 Binary files a/screenshots/screenshot-dokemon-containers.jpg and b/screenshots/screenshot-dokemon-containers.jpg differ diff --git a/screenshots/screenshot-dokemon-nodes.jpg b/screenshots/screenshot-dokemon-nodes.jpg index b4ee2a19..8f88d557 100644 Binary files a/screenshots/screenshot-dokemon-nodes.jpg and b/screenshots/screenshot-dokemon-nodes.jpg differ diff --git a/screenshots/screenshot-dokemon-variables.jpg b/screenshots/screenshot-dokemon-variables.jpg index b6eaf0a2..e8545a91 100644 Binary files a/screenshots/screenshot-dokemon-variables.jpg and b/screenshots/screenshot-dokemon-variables.jpg differ diff --git a/web/src/app/volumes/volume-list.tsx b/web/src/app/volumes/volume-list.tsx index c9d09d06..ed51cf04 100644 --- a/web/src/app/volumes/volume-list.tsx +++ b/web/src/app/volumes/volume-list.tsx @@ -1,4 +1,8 @@ -import Loading from "@/components/widgets/loading" +import { useState } from "react" +import { useParams } from "react-router-dom" +import useVolumes from "@/hooks/useVolumes" +import useNodeHead from "@/hooks/useNodeHead" +import { IVolume } from "@/lib/api-models" import { Breadcrumb, BreadcrumbCurrent, @@ -13,15 +17,11 @@ import { TableHeader, TableRow, } from "@/components/ui/table" -import { IVolume } from "@/lib/api-models" -import { useState } from "react" +import Loading from "@/components/widgets/loading" import MainArea from "@/components/widgets/main-area" import TopBar from "@/components/widgets/top-bar" import TopBarActions from "@/components/widgets/top-bar-actions" import MainContent from "@/components/widgets/main-content" -import useVolumes from "@/hooks/useVolumes" -import { useParams } from "react-router-dom" -import useNodeHead from "@/hooks/useNodeHead" import TableButtonDelete from "@/components/widgets/table-button-delete" import { TableNoData } from "@/components/widgets/table-no-data" import DeleteDialog from "@/components/delete-dialog" @@ -33,17 +33,15 @@ export default function VolumeList() { const { nodeHead } = useNodeHead(nodeId!) const { isLoading, volumes, mutateVolumes } = useVolumes(nodeId!) - const [volume, setVolume] = useState(null) - const [deleteVolumeOpenConfirmation, setDeleteVolumeOpenConfirmation] = + const [volumeToDelete, setVolumeToDelete] = useState(null) + const [isDeleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false) - const [deleteInProgress, setDeleteInProgress] = useState(false) - const [pruneInProgress, setPruneInProgress] = useState(false) - - if (isLoading) return + const [isDeleteInProgress, setDeleteInProgress] = useState(false) + const [isPruneInProgress, setPruneInProgress] = useState(false) - const handleDeleteVolumeConfirmation = (volume: IVolume) => { - setVolume({ ...volume }) - setDeleteVolumeOpenConfirmation(true) + const handleDeleteConfirmation = (volume: IVolume) => { + setVolumeToDelete(volume) + setDeleteConfirmationOpen(true) } const handleDelete = async () => { @@ -53,17 +51,17 @@ export default function VolumeList() { { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ name: volume?.name }), + body: JSON.stringify({ name: volumeToDelete?.name }), } ) if (!response.ok) { - const r = await response.json() - setDeleteVolumeOpenConfirmation(false) - toastFailed(r.errors?.body) + const responseData = await response.json() + setDeleteConfirmationOpen(false) + toastFailed(responseData.errors?.body) } else { mutateVolumes() setTimeout(() => { - setDeleteVolumeOpenConfirmation(false) + setDeleteConfirmationOpen(false) toastSuccess("Volume deleted.") }, 500) } @@ -81,20 +79,20 @@ export default function VolumeList() { } ) if (!response.ok) { - const r = await response.json() - toastFailed(r.errors?.body) + const responseData = await response.json() + toastFailed(responseData.errors?.body) } else { mutateVolumes() - const r = await response.json() + const responseData = await response.json() let description = "Nothing found to delete" - if (r.volumesDeleted?.length > 0) { + if (responseData.volumesDeleted?.length > 0) { description = `${ - r.volumesDeleted.length + responseData.volumesDeleted.length } unused volumes deleted. Space reclaimed: ${convertByteToMb( - r.spaceReclaimed + responseData.spaceReclaimed )}` } - setTimeout(async () => { + setTimeout(() => { toastSuccess(description) }, 500) }