Fix used by links to snapshots of custom storage volumes

src/pages/storage/StorageUsedBy.tsx

@@ -85,14 +85,30 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
           <td>
             <ExpandableList
               items={data[SNAPSHOTS].map((item) => (
-                <div key={`${item.instance}-${item.name}-${item.project}`}>
-                  <Link
-                    to={`/ui/project/${item.project}/instances/detail/${item.instance}/snapshots`}
-                  >
-                    {`${item.instance} ${item.name}`}
-                  </Link>
-                  {item.project !== project && ` (project ${item.project})`}
-                </div>
+                <>
+                  {item.instance && (
+                    <div key={`${item.instance}-${item.name}-${item.project}`}>
+                      <Link
+                        to={`/ui/project/${item.project}/instances/detail/${item.instance}/snapshots`}
+                      >
+                        {`${item.instance} ${item.name}`}
+                      </Link>
+                      {item.project !== project && ` (project ${item.project})`}
+                    </div>
+                  )}
+                  {item.volume && (
+                    <div
+                      key={`${item.volume}-${item.name}-${item.project}-${item.pool}`}
+                    >
+                      <Link
+                        to={`/ui/project/${item.project}/storage/detail/${item.pool}/volumes/custom/${item.volume}/snapshots`}
+                      >
+                        {`${item.volume} ${item.name}`}
+                      </Link>
+                      {item.project !== project && ` (project ${item.project})`}
+                    </div>
+                  )}
+                </>
               ))}
             />
           </td>

src/util/usedBy.spec.ts

@@ -24,6 +24,7 @@ describe("filterUsedByType", () => {
 
     expect(results[0].name).toBe("my_profile");
     expect(results[0].project).toBe("foo");
+    expect(results[0].instance).toBe(undefined);
   });
 
   it("decodes url encoded volume names", () => {
@@ -34,5 +35,31 @@ describe("filterUsedByType", () => {
 
     expect(results[0].name).toBe("tüdeldü");
     expect(results[0].project).toBe("default");
+    expect(results[0].instance).toBe(undefined);
+  });
+
+  it("finds instance snapshot", () => {
+    const paths = [
+      "/1.0/instances/absolute-jennet/snapshots/snap0?project=Animals",
+    ];
+    const results = filterUsedByType("snapshots", paths);
+
+    expect(results[0].name).toBe("snap0");
+    expect(results[0].project).toBe("Animals");
+    expect(results[0].instance).toBe("absolute-jennet");
+    expect(results[0].volume).toBe(undefined);
+  });
+
+  it("finds volume snapshot", () => {
+    const paths = [
+      "/1.0/storage-pools/poolName/volumes/custom/volumeName/snapshots/snap1?project=fooProject",
+    ];
+    const results = filterUsedByType("snapshots", paths);
+
+    expect(results[0].name).toBe("snap1");
+    expect(results[0].project).toBe("fooProject");
+    expect(results[0].instance).toBe(undefined);
+    expect(results[0].volume).toBe("volumeName");
+    expect(results[0].pool).toBe("poolName");
   });
 });

src/util/usedBy.tsx

@@ -1,7 +1,9 @@
 export interface LxdUsedBy {
   name: string;
   project: string;
-  instance: string;
+  instance?: string;
+  volume?: string;
+  pool?: string;
 }
 
 /**
@@ -11,6 +13,7 @@ export interface LxdUsedBy {
  * "/1.0/instances/pet-lark"
  * "/1.0/instances/relaxed-basilisk/snapshots/ff?project=foo"
  * "/1.0/profiles/default?project=foo"
+ * "/1.0/storage-pools/pool-dir/volumes/custom/test/snapshots/snap1?project=bar"
  */
 export const filterUsedByType = (
   type: "instances" | "profiles" | "snapshots" | "images" | "volumes",
@@ -23,6 +26,10 @@ export const filterUsedByType = (
           return false;
         }
 
+        if (type === "volumes" && path.includes("/snapshots/")) {
+          return false;
+        }
+
         if (type === "snapshots") {
           return path.includes("/snapshots/");
         }
@@ -42,7 +49,18 @@ export const filterUsedByType = (
         return {
           name,
           project: url.searchParams.get("project") ?? "default",
-          instance: type === "snapshots" ? url.pathname.split("/")[4] : "",
+          instance:
+            type === "snapshots" && url.pathname.includes("1.0/instances")
+              ? url.pathname.split("/")[4]
+              : undefined,
+          volume:
+            type === "snapshots" && url.pathname.includes("1.0/storage-pools")
+              ? url.pathname.split("/")[7]
+              : undefined,
+          pool:
+            type === "snapshots" && url.pathname.includes("1.0/storage-pools")
+              ? url.pathname.split("/")[4]
+              : undefined,
         };
       })
       .sort((a, b) => {