From 22ad583b9e895117335c915dfa6d52fa740bf316 Mon Sep 17 00:00:00 2001 From: David Edler Date: Mon, 29 Apr 2024 08:47:15 +0200 Subject: [PATCH] fix(storage) remove storage volume detail page and snapshots for custom isos WD-10867 Signed-off-by: David Edler --- src/pages/storage/StorageVolumeNameLink.tsx | 42 ++++++-------- src/pages/storage/StorageVolumes.tsx | 57 +++++++------------ .../actions/CustomStorageVolumeActions.tsx | 17 +++--- src/util/storageVolume.tsx | 24 ++++++++ 4 files changed, 68 insertions(+), 72 deletions(-) diff --git a/src/pages/storage/StorageVolumeNameLink.tsx b/src/pages/storage/StorageVolumeNameLink.tsx index b976bdd637..6541209eb7 100644 --- a/src/pages/storage/StorageVolumeNameLink.tsx +++ b/src/pages/storage/StorageVolumeNameLink.tsx @@ -3,52 +3,42 @@ import { FC } from "react"; import { Link } from "react-router-dom"; import { LxdStorageVolume } from "types/storage"; import classnames from "classnames"; +import { + generateLinkForVolumeDetail, + hasVolumeDetailPage, +} from "util/storageVolume"; +import { useProject } from "context/project"; interface Props { volume: LxdStorageVolume; - project: string; isExternalLink?: boolean; overrideName?: string; className?: string; } -export const generateLinkForVolumeDetail = (args: { - volume: LxdStorageVolume; - project: string; -}) => { - const { volume, project } = args; - let path = `storage/pool/${volume.pool}/volumes/${volume.type}/${volume.name}`; - - // NOTE: name of a volume created from an instance is exactly the same as the instance name - if (volume.type === "container" || volume.type === "virtual-machine") { - path = `instance/${volume.name}`; - } - - if (volume.type === "image") { - path = "images"; - } - - return `/ui/project/${project}/${path}`; -}; - const StorageVolumeNameLink: FC = ({ volume, - project, - isExternalLink, overrideName, className, }) => { + const { project } = useProject(); + const isExternalLink = !hasVolumeDetailPage(volume); + const caption = overrideName ? overrideName : volume.name; + return (
- - {overrideName ? overrideName : volume.name} + + {caption} + {isExternalLink && }
- {isExternalLink && }
); }; diff --git a/src/pages/storage/StorageVolumes.tsx b/src/pages/storage/StorageVolumes.tsx index fb7163da08..356a286d11 100644 --- a/src/pages/storage/StorageVolumes.tsx +++ b/src/pages/storage/StorageVolumes.tsx @@ -29,6 +29,7 @@ import { getSnapshotsPerVolume, isSnapshot, renderVolumeType, + hasVolumeDetailPage, } from "util/storageVolume"; import { ACTIONS_COL, @@ -44,10 +45,7 @@ import { } from "util/storageVolumeTable"; import StorageVolumeNameLink from "./StorageVolumeNameLink"; import CustomStorageVolumeActions from "./actions/CustomStorageVolumeActions"; -import classnames from "classnames"; import useEventListener from "@use-it/event-listener"; -import { useProject } from "context/project"; -import { isSnapshotsDisabled } from "util/snapshots"; import useSortTableData from "util/useSortTableData"; import { useSupportedFeatures } from "context/useSupportedFeatures"; @@ -62,8 +60,6 @@ const StorageVolumes: FC = () => { setSmallScreen(figureCollapsedScreen()); }; useEventListener("resize", resize); - const { project: projectConfig, isLoading: isProjectLoading } = useProject(); - const snapshotsDisabled = isSnapshotsDisabled(projectConfig); const filters: StorageVolumesFilterType = { queries: searchParams.getAll(QUERY), @@ -221,11 +217,7 @@ const StorageVolumes: FC = () => { { content: ( <> - + {isSmallScreen && (
{isoTimeToString(volume.created_at)} @@ -320,31 +312,24 @@ const StorageVolumes: FC = () => { ]), { className: "actions u-align--right", - content: - volume.type === "custom" ? ( - - ) : ( - - ), + content: hasVolumeDetailPage(volume) ? ( + + ) : ( + + ), role: "cell", "aria-label": ACTIONS_COL, style: { width: COLUMN_WIDTHS[ACTIONS_COL] }, @@ -366,7 +351,7 @@ const StorageVolumes: FC = () => { rows, }); - if (isLoading || isProjectLoading) { + if (isLoading) { return ; } diff --git a/src/pages/storage/actions/CustomStorageVolumeActions.tsx b/src/pages/storage/actions/CustomStorageVolumeActions.tsx index 1bfcdc7f9c..992489d83f 100644 --- a/src/pages/storage/actions/CustomStorageVolumeActions.tsx +++ b/src/pages/storage/actions/CustomStorageVolumeActions.tsx @@ -5,21 +5,18 @@ import { LxdStorageVolume } from "types/storage"; import DeleteStorageVolumeBtn from "./DeleteStorageVolumeBtn"; import VolumeAddSnapshotBtn from "./snapshots/VolumeAddSnapshotBtn"; import { useToastNotification } from "context/toastNotificationProvider"; +import { isSnapshotsDisabled } from "util/snapshots"; +import { useProject } from "context/project"; interface Props { volume: LxdStorageVolume; - project: string; className?: string; - snapshotDisabled?: boolean; } -const CustomStorageVolumeActions: FC = ({ - volume, - className, - project, - snapshotDisabled, -}) => { +const CustomStorageVolumeActions: FC = ({ volume, className }) => { const toastNotify = useToastNotification(); + const { project } = useProject(); + return ( = ({ key="add-snapshot" volume={volume} isCTA - isDisabled={snapshotDisabled} + isDisabled={isSnapshotsDisabled(project)} />, { toastNotify.success(`Storage volume ${volume.name} deleted.`); }} diff --git a/src/util/storageVolume.tsx b/src/util/storageVolume.tsx index 2977c3ea81..3b05cd31cc 100644 --- a/src/util/storageVolume.tsx +++ b/src/util/storageVolume.tsx @@ -120,3 +120,27 @@ export const getSnapshotsPerVolume = (volumes: LxdStorageVolume[]) => { const collapsedViewMaxWidth = 1250; export const figureCollapsedScreen = (): boolean => window.innerWidth <= collapsedViewMaxWidth; + +export const generateLinkForVolumeDetail = ( + volume: LxdStorageVolume, + project: string, +): string => { + // NOTE: name of a volume created from an instance is exactly the same as the instance name + if (volume.type === "container" || volume.type === "virtual-machine") { + return `/ui/project/${project}/instance/${volume.name}`; + } + + if (volume.type === "image") { + return `/ui/project/${project}/images`; + } + + if (volume.type === "custom" && volume.content_type === "iso") { + return `/ui/project/${project}/storage/custom-isos`; + } + + return `/ui/project/${project}/storage/pool/${volume.pool}/volumes/${volume.type}/${volume.name}`; +}; + +export const hasVolumeDetailPage = (volume: LxdStorageVolume): boolean => { + return generateLinkForVolumeDetail(volume, "").includes("/storage/pool/"); +};