fix(storage) remove storage volume detail page and snapshots for cust…

…om isos WD-10867 Signed-off-by: David Edler <[email protected]>
canonical · Apr 29, 2024 · 22ad583 · 22ad583
1 parent df2a65a
commit 22ad583
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 72 deletions.
diff --git 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<Props> = ({
   volume,
-  project,
-  isExternalLink,
   overrideName,
   className,
 }) => {
+  const { project } = useProject();
+  const isExternalLink = !hasVolumeDetailPage(volume);
+  const caption = overrideName ? overrideName : volume.name;
+
   return (
     <div className={classnames("u-flex", className)}>
       <div
         className={classnames("u-truncate", "volume-name-link")}
-        title={`Volume ${volume.name}`}
+        title={caption}
       >
-        <Link to={generateLinkForVolumeDetail({ volume, project })}>
-          {overrideName ? overrideName : volume.name}
+        <Link
+          to={generateLinkForVolumeDetail(volume, project?.name ?? "")}
+          className={isExternalLink ? "has-icon" : undefined}
+        >
+          {caption}
+          {isExternalLink && <Icon name={ICONS.externalLink} />}
         </Link>
       </div>
-      {isExternalLink && <Icon name={ICONS.externalLink} />}
     </div>
   );
 };

diff --git 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: (
             <>
-              <StorageVolumeNameLink
-                volume={volume}
-                project={project}
-                isExternalLink={volume.type !== "custom"}
-              />
+              <StorageVolumeNameLink volume={volume} />
               {isSmallScreen && (
                 <div className="u-text--muted">
                   {isoTimeToString(volume.created_at)}
@@ -320,31 +312,24 @@ const StorageVolumes: FC = () => {
             ]),
         {
           className: "actions u-align--right",
-          content:
-            volume.type === "custom" ? (
-              <CustomStorageVolumeActions
-                volume={volume}
-                project={project}
-                snapshotDisabled={snapshotsDisabled}
-                className={classnames(
-                  "storage-volume-actions",
-                  "u-no-margin--bottom",
-                )}
-              />
-            ) : (
-              <StorageVolumeNameLink
-                volume={volume}
-                project={project}
-                isExternalLink
-                overrideName={`go to ${
-                  volume.type === "image" ? "images list" : "instance"
-                }`}
-                className={classnames(
-                  "storage-volume-actions",
-                  "u-align--right",
-                )}
-              />
-            ),
+          content: hasVolumeDetailPage(volume) ? (
+            <CustomStorageVolumeActions
+              volume={volume}
+              className="storage-volume-actions u-no-margin--bottom"
+            />
+          ) : (
+            <StorageVolumeNameLink
+              volume={volume}
+              overrideName={`go to ${
+                volume.type === "image"
+                  ? "images list"
+                  : volume.content_type === "iso"
+                    ? "custom ISOs"
+                    : "instance"
+              }`}
+              className="storage-volume-actions u-align--right"
+            />
+          ),
           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 <Loader text="Loading storage volumes..." />;
   }
 

diff --git 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<Props> = ({
-  volume,
-  className,
-  project,
-  snapshotDisabled,
-}) => {
+const CustomStorageVolumeActions: FC<Props> = ({ volume, className }) => {
   const toastNotify = useToastNotification();
+  const { project } = useProject();
+
   return (
     <List
       inline
@@ -29,12 +26,12 @@ const CustomStorageVolumeActions: FC<Props> = ({
           key="add-snapshot"
           volume={volume}
           isCTA
-          isDisabled={snapshotDisabled}
+          isDisabled={isSnapshotsDisabled(project)}
         />,
         <DeleteStorageVolumeBtn
           key="delete"
           volume={volume}
-          project={project}
+          project={project?.name ?? ""}
           onFinish={() => {
             toastNotify.success(`Storage volume ${volume.name} deleted.`);
           }}

diff --git 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/");
+};