fix(LXD): Link to VMs tab for single LXD hosts MAASENG-2412 (#5216)

Co-authored-by: Peter Makowski <peter.makowski@canonical.com>

src/app/kvm/components/KVMResourcesCard/KVMResourcesCard.test.tsx

@@ -1,55 +1,68 @@
-import configureStore from "redux-mock-store";
-
 import KVMResourcesCard from "./KVMResourcesCard";
 
-import { actions as machineActions } from "app/store/machine";
+import urls from "app/base/urls";
 import { PodType } from "app/store/pod/constants";
-import type { RootState } from "app/store/root/types";
 import {
   podState as podStateFactory,
   rootState as rootStateFactory,
   pod as podFactory,
 } from "testing/factories";
 import { renderWithBrowserRouter, screen } from "testing/utils";
 
-const mockStore = configureStore<RootState>();
-
 describe("KVMResourcesCard", () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
 
-  it("fetches machines on load", () => {
+  it("shows a spinner if pods have not loaded yet", () => {
+    const state = rootStateFactory({
+      pod: podStateFactory({
+        items: [],
+        loaded: false,
+      }),
+    });
+    renderWithBrowserRouter(<KVMResourcesCard id={1} />, {
+      state,
+      route: "/kvm/1/project",
+    });
+
+    expect(screen.getByText(/Loading/i)).toBeInTheDocument();
+  });
+
+  it("links to the VMs tab for a LXD pod", () => {
     const state = rootStateFactory({
       pod: podStateFactory({
         items: [podFactory({ id: 1, type: PodType.LXD })],
         loaded: true,
       }),
     });
-    const store = mockStore(state);
+
     renderWithBrowserRouter(<KVMResourcesCard id={1} />, {
-      store,
+      state,
       route: "/kvm/1/project",
     });
 
-    const expectedAction = machineActions.fetch("mocked-nanoid");
-    expect(
-      store.getActions().some((action) => action.type === expectedAction.type)
-    ).toBe(true);
+    expect(screen.getByRole("link", { name: /Total VMs/ })).toHaveAttribute(
+      "href",
+      urls.kvm.lxd.single.vms({ id: 1 })
+    );
   });
 
-  it("shows a spinner if pods have not loaded yet", () => {
+  it("displays VmResources for a Virsh pod", () => {
     const state = rootStateFactory({
       pod: podStateFactory({
-        items: [],
-        loaded: false,
+        items: [podFactory({ id: 1, type: PodType.VIRSH })],
+        loaded: true,
       }),
     });
+
     renderWithBrowserRouter(<KVMResourcesCard id={1} />, {
       state,
       route: "/kvm/1/project",
     });
 
-    expect(screen.getByText(/Loading/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Resource VMs/ })
+    ).toBeInTheDocument();
   });
 });

src/app/kvm/components/KVMResourcesCard/KVMResourcesCard.tsx

@@ -1,11 +1,16 @@
 import { Spinner } from "@canonical/react-components";
 import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
 
 import CoreResources from "../CoreResources";
 import RamResources from "../RamResources";
 import VfResources from "../VfResources";
 import VmResources from "../VmResources";
 
+import urls from "app/base/urls";
+import { FilterGroupKey } from "app/store/machine/types";
+import { useFetchMachineCount } from "app/store/machine/utils/hooks";
+import { PodType } from "app/store/pod/constants";
 import podSelectors from "app/store/pod/selectors";
 import type { Pod } from "app/store/pod/types";
 import { resourceWithOverCommit } from "app/store/pod/utils";
@@ -18,6 +23,10 @@ const KVMResourcesCard = ({ id }: Props): JSX.Element => {
     podSelectors.getById(state, id)
   );
 
+  const { machineCount } = useFetchMachineCount({
+    [FilterGroupKey.Pod]: pod ? [pod.name] : [],
+  });
+
   if (pod) {
     const {
       cpu_over_commit_ratio,
@@ -33,6 +42,7 @@ const KVMResourcesCard = ({ id }: Props): JSX.Element => {
       general,
       memory_over_commit_ratio
     );
+
     return (
       <>
         <div className="kvm-resources-card">
@@ -53,7 +63,15 @@ const KVMResourcesCard = ({ id }: Props): JSX.Element => {
           />
           <VfResources dynamicLayout interfaces={interfaces} />
         </div>
-        <VmResources podId={id} />
+        {pod.type === PodType.LXD ? (
+          <div className="vms-link">
+            <Link to={urls.kvm.lxd.single.vms({ id })}>
+              Total VMs: {machineCount ?? 0}
+            </Link>
+          </div>
+        ) : (
+          <VmResources podId={id} />
+        )}
       </>
     );
   }

src/app/kvm/components/KVMResourcesCard/_index.scss

@@ -43,4 +43,8 @@
       }
     }
   }
+
+  .vms-link {
+    padding: $spv--large;
+  }
 }