fix(storage) add link to storage pool from storage volume, add test f…

…or storage pool used by storage volume link WD-8591

Signed-off-by: David Edler <david.edler@canonical.com>

src/pages/storage/StorageVolumeOverview.tsx

@@ -7,6 +7,7 @@ import { LxdStorageVolume } from "types/storage";
 import { isoTimeToString } from "util/helpers";
 import StorageVolumeSize from "pages/storage/StorageVolumeSize";
 import { renderContentType, renderVolumeType } from "util/storageVolume";
+import { Link } from "react-router-dom";
 
 interface Props {
   project: string;
@@ -49,6 +50,16 @@ const StorageVolumeOverview: FC<Props> = ({ project, volume }) => {
                 <th className="p-muted-heading">Location</th>
                 <td>{volume.location}</td>
               </tr>
+              <tr>
+                <th className="p-muted-heading">Pool</th>
+                <td>
+                  <Link
+                    to={`/ui/project/${project}/storage/detail/${volume.pool}`}
+                  >
+                    {volume.pool}
+                  </Link>
+                </td>
+              </tr>
               <tr>
                 <th className="p-muted-heading">Date created</th>
                 <td>{isoTimeToString(volume.created_at)}</td>

tests/storage.spec.ts

@@ -1,4 +1,4 @@
-import { test } from "./fixtures/lxd-test";
+import { expect, test } from "./fixtures/lxd-test";
 import {
   createPool,
   deletePool,
@@ -105,3 +105,10 @@ test("custom storage volume add snapshot from CTA", async ({ page }) => {
 
   await deleteVolume(page, volume);
 });
+
+test("navigate to custom volume via pool used by list", async ({ page }) => {
+  await visitVolume(page, volume);
+  await page.locator(`tr:has-text("Pool")`).getByRole("link").click();
+  await page.getByRole("link", { name: volume }).click();
+  await expect(page).toHaveURL(/volumes\/custom\//);
+});