From 9881d184cec75702203b77b2cb8831f1dcd3b5bd Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Tue, 27 Feb 2024 19:54:58 +0100
Subject: [PATCH] fix(storage) correct used by links to snapshots of custom
 storage values

Signed-off-by: David Edler <david.edler@canonical.com>
---
 src/pages/storage/StorageUsedBy.tsx | 32 +++++++++++++++++++++--------
 src/util/usedBy.spec.ts             | 27 ++++++++++++++++++++++++
 src/util/usedBy.tsx                 | 22 ++++++++++++++++++--
 3 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/pages/storage/StorageUsedBy.tsx b/src/pages/storage/StorageUsedBy.tsx
index fbf8c83f89..43a10adc5b 100644
--- a/src/pages/storage/StorageUsedBy.tsx
+++ b/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>
diff --git a/src/util/usedBy.spec.ts b/src/util/usedBy.spec.ts
index 2048d0987b..adfb4d07b3 100644
--- a/src/util/usedBy.spec.ts
+++ b/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");
   });
 });
diff --git a/src/util/usedBy.tsx b/src/util/usedBy.tsx
index cebded94fe..674de842e6 100644
--- a/src/util/usedBy.tsx
+++ b/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) => {