refactor: machine request cache keys MAASENG-1905

canonical · Jun 29, 2023 · b018317 · b018317
1 parent 707684e
commit b018317
Show file tree

Hide file tree

Showing 37 changed files with 701 additions and 491 deletions.
diff --git a/package.json b/package.json
@@ -115,6 +115,7 @@
     "eslint-plugin-unused-imports": "2.0.0",
     "formik-devtools-extension": "0.1.8",
     "http-proxy-middleware": "2.0.6",
+    "immer": "9.0.16",
     "jest-fetch-mock": "3.0.3",
     "mock-socket": "9.2.1",
     "mockdate": "3.0.5",

diff --git a/src/app/base/components/DhcpFormFields/DhcpFormFields.test.tsx b/src/app/base/components/DhcpFormFields/DhcpFormFields.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import { CompatRouter } from "react-router-dom-v5-compat";
@@ -9,6 +8,7 @@ import { Labels } from "./DhcpFormFields";
 import DhcpForm from "app/base/components/DhcpForm";
 import { getIpRangeDisplayName } from "app/store/iprange/utils";
 import type { RootState } from "app/store/root/types";
+import { callId, enableCallIdMocks } from "testing/callId-mock";
 import {
   ipRange as ipRangeFactory,
   ipRangeState as ipRangeStateFactory,
@@ -26,14 +26,15 @@ import {
 } from "testing/factories";
 import { userEvent, render, screen, waitFor, within } from "testing/utils";
 
+enableCallIdMocks();
 const mockStore = configureStore();
 const machines = [machineFactory()];
 const ipRange = ipRangeFactory();
+
 describe("DhcpFormFields", () => {
   let state: RootState;
 
   beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
     state = rootStateFactory({
       controller: controllerStateFactory({ loaded: true }),
       device: deviceStateFactory({ loaded: true }),
@@ -58,7 +59,7 @@ describe("DhcpFormFields", () => {
       machine: machineStateFactory({
         items: machines,
         lists: {
-          "123456": machineStateListFactory({
+          [callId]: machineStateListFactory({
             loading: false,
             loaded: true,
             groups: [

diff --git a/...p/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.test.tsx b/...p/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.test.tsx
@@ -1,10 +1,10 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import MachineSelectBox from "./MachineSelectBox";
 
 import { DEFAULT_DEBOUNCE_INTERVAL } from "app/base/components/DebounceSearchBox/DebounceSearchBox";
 import { actions as machineActions } from "app/store/machine";
+import * as query from "app/store/machine/utils/query";
 import type { RootState } from "app/store/root/types";
 import { rootState as rootStateFactory } from "testing/factories";
 import { userEvent, screen, waitFor, renderWithMockStore } from "testing/utils";
@@ -13,7 +13,7 @@ const mockStore = configureStore<RootState>();
 
 beforeEach(() => {
   jest
-    .spyOn(reduxToolkit, "nanoid")
+    .spyOn(query, "generateCallId")
     .mockReturnValueOnce("mocked-nanoid-1")
     .mockReturnValueOnce("mocked-nanoid-2");
   jest.useFakeTimers();

diff --git a/src/app/base/components/node/MachinesHeader/MachinesHeader.test.tsx b/src/app/base/components/node/MachinesHeader/MachinesHeader.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import { render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
@@ -8,6 +7,7 @@ import configureStore from "redux-mock-store";
 import MachinesHeader from "./MachinesHeader";
 
 import type { RootState } from "app/store/root/types";
+import { callId, enableCallIdMocks } from "testing/callId-mock";
 import {
   machine as machineFactory,
   machineState as machineStateFactory,
@@ -17,18 +17,18 @@ import {
   rootState as rootStateFactory,
 } from "testing/factories";
 
+enableCallIdMocks();
 const mockStore = configureStore();
 
 describe("MachinesHeader", () => {
   let state: RootState;
 
   beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("mocked-nanoid");
     state = rootStateFactory({
       machine: machineStateFactory({
         loaded: true,
         counts: machineStateCountsFactory({
-          "mocked-nanoid": machineStateCountFactory({
+          [callId]: machineStateCountFactory({
             count: 2,
             loaded: true,
             loading: false,
@@ -46,10 +46,6 @@ describe("MachinesHeader", () => {
     });
   });
 
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
   it("renders", () => {
     state.machine.loaded = true;
     const store = mockStore(state);

diff --git a/src/app/dashboard/views/DiscoveriesList/DiscoveriesList.test.tsx b/src/app/dashboard/views/DiscoveriesList/DiscoveriesList.test.tsx
@@ -1,10 +1,10 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import DiscoveriesList, {
   Labels as DiscoveriesListLabels,
 } from "./DiscoveriesList";
 
+import * as query from "app/store/machine/utils/query";
 import type { RootState } from "app/store/root/types";
 import {
   NodeStatus,
@@ -38,12 +38,11 @@ import {
 
 const mockStore = configureStore<RootState, {}>();
 const route = "/dashboard";
-
 describe("DiscoveriesList", () => {
   let state: RootState;
 
   beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
+    jest.spyOn(query, "generateCallId").mockReturnValueOnce("123456");
     const machines = [
       machineFactory({
         actions: [],

diff --git a/src/app/dashboard/views/DiscoveryAddForm/DiscoveryAddForm.test.tsx b/src/app/dashboard/views/DiscoveryAddForm/DiscoveryAddForm.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import DiscoveryAddForm, {
@@ -16,6 +15,7 @@ import {
   NodeStatusCode,
   TestStatusStatus,
 } from "app/store/types/node";
+import { callId, enableCallIdMocks } from "testing/callId-mock";
 import {
   discovery as discoveryFactory,
   domain as domainFactory,
@@ -41,15 +41,15 @@ import {
   within,
   renderWithBrowserRouter,
 } from "testing/utils";
-
 const mockStore = configureStore<RootState, {}>();
 
+enableCallIdMocks();
+
 describe("DiscoveryAddForm", () => {
   let state: RootState;
   let discovery: Discovery;
 
   beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
     const machines = [
       machineFactory({
         actions: [],
@@ -117,7 +117,7 @@ describe("DiscoveryAddForm", () => {
         loaded: true,
         items: machines,
         lists: {
-          "123456": machineStateListFactory({
+          [callId]: machineStateListFactory({
             loaded: true,
             groups: [
               machineStateListGroupFactory({

diff --git a/src/app/kvm/components/KVMResourcesCard/KVMResourcesCard.test.tsx b/src/app/kvm/components/KVMResourcesCard/KVMResourcesCard.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import KVMResourcesCard from "./KVMResourcesCard";
@@ -16,10 +15,6 @@ import { renderWithBrowserRouter, screen } from "testing/utils";
 const mockStore = configureStore<RootState>();
 
 describe("KVMResourcesCard", () => {
-  beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("mocked-nanoid");
-  });
-
   afterEach(() => {
     jest.restoreAllMocks();
   });

diff --git a/src/app/kvm/components/LXDHostVMs/NumaResources/NumaResourcesCard/NumaResourcesCard.test.tsx b/src/app/kvm/components/LXDHostVMs/NumaResources/NumaResourcesCard/NumaResourcesCard.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import NumaResourcesCard from "./NumaResourcesCard";
@@ -23,10 +22,6 @@ import { renderWithMockStore, screen, within } from "testing/utils";
 const mockStore = configureStore<RootState>();
 
 describe("NumaResourcesCard", () => {
-  beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("mocked-nanoid");
-  });
-
   afterEach(() => {
     jest.restoreAllMocks();
   });

diff --git a/src/app/kvm/components/LXDVMsTable/LXDVMsTable.test.tsx b/src/app/kvm/components/LXDVMsTable/LXDVMsTable.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import configureStore from "redux-mock-store";
@@ -7,16 +6,13 @@ import LXDVMsTable from "./LXDVMsTable";
 
 import { actions as machineActions } from "app/store/machine";
 import { FetchSortDirection, FetchGroupKey } from "app/store/machine/types";
+import { generateCallId } from "app/store/machine/utils/query";
 import { rootState as rootStateFactory } from "testing/factories";
 import { render, screen } from "testing/utils";
 
 const mockStore = configureStore();
 
 describe("LXDVMsTable", () => {
-  beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("mocked-nanoid");
-  });
-
   afterEach(() => {
     jest.restoreAllMocks();
   });
@@ -40,7 +36,16 @@ describe("LXDVMsTable", () => {
       </Provider>
     );
 
-    const expectedAction = machineActions.fetch("mocked-nanoid", {
+    const options = {
+      filter: { pod: ["pod1"] },
+      group_collapsed: undefined,
+      group_key: null,
+      page_number: 1,
+      page_size: 10,
+      sort_direction: FetchSortDirection.Descending,
+      sort_key: FetchGroupKey.Hostname,
+    };
+    const expectedAction = machineActions.fetch(generateCallId(options), {
       filter: { pod: ["pod1"] },
       group_collapsed: undefined,
       group_key: null,

diff --git a/src/app/kvm/components/LXDVMsTable/VMsTable/VMsTable.test.tsx b/src/app/kvm/components/LXDVMsTable/VMsTable/VMsTable.test.tsx
@@ -1,11 +1,11 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import VMsTable, { Label } from "./VMsTable";
 
 import { SortDirection } from "app/base/types";
 import { FetchGroupKey } from "app/store/machine/types";
 import type { RootState } from "app/store/root/types";
+import { callId, enableCallIdMocks } from "testing/callId-mock";
 import {
   pod as podFactory,
   podState as podStateFactory,
@@ -25,13 +25,13 @@ import {
   renderWithBrowserRouter,
 } from "testing/utils";
 
+enableCallIdMocks();
 const mockStore = configureStore<RootState>();
 
 describe("VMsTable", () => {
   let getResources: jest.Mock;
 
   beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
     getResources = jest.fn().mockReturnValue({
       hugepagesBacked: false,
       pinnedCores: [],
@@ -75,7 +75,7 @@ describe("VMsTable", () => {
       machine: machineStateFactory({
         items: vms,
         lists: {
-          "123456": machineStateListFactory({
+          [callId]: machineStateListFactory({
             loaded: true,
             groups: [
               machineStateListGroupFactory({

diff --git a/src/app/kvm/components/VmResources/VmResources.test.tsx b/src/app/kvm/components/VmResources/VmResources.test.tsx
@@ -1,4 +1,3 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import VmResources, { Label } from "./VmResources";
@@ -7,6 +6,7 @@ import { Label as MachineListLabel } from "app/machines/views/MachineList/Machin
 import { actions as machineActions } from "app/store/machine";
 import { PodType } from "app/store/pod/constants";
 import type { RootState } from "app/store/root/types";
+import { callId, enableCallIdMocks } from "testing/callId-mock";
 import {
   rootState as rootStateFactory,
   machineState as machineStateFactory,
@@ -23,19 +23,19 @@ import {
   renderWithMockStore,
 } from "testing/utils";
 
+enableCallIdMocks();
 const mockStore = configureStore<RootState, {}>();
 
 describe("VmResources", () => {
   let state: RootState;
 
   beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
     const machines = [machineFactory(), machineFactory()];
     state = rootStateFactory({
       machine: machineStateFactory({
         items: machines,
         lists: {
-          "123456": machineStateListFactory({
+          [callId]: machineStateListFactory({
             count: machines.length,
             loaded: true,
             groups: [
@@ -54,8 +54,8 @@ describe("VmResources", () => {
   });
 
   it("disables the dropdown if no VMs are provided", () => {
-    state.machine.lists["123456"].count = 0;
-    state.machine.lists["123456"].groups = [
+    state.machine.lists[callId].count = 0;
+    state.machine.lists[callId].groups = [
       machineStateListGroupFactory({
         items: [],
         name: "Deployed",
@@ -73,7 +73,7 @@ describe("VmResources", () => {
       <VmResources filters={{ id: ["abc123"] }} podId={1} />,
       { store }
     );
-    const expected = machineActions.fetch("123456");
+    const expected = machineActions.fetch(callId);
     const result = store
       .getActions()
       .find((action) => action.type === expected.type);

diff --git a/src/app/kvm/views/LXDClusterDetails/LXDClusterVMs/LXDClusterVMs.test.tsx b/src/app/kvm/views/LXDClusterDetails/LXDClusterVMs/LXDClusterVMs.test.tsx
@@ -1,11 +1,11 @@
-import reduxToolkit from "@reduxjs/toolkit";
 import configureStore from "redux-mock-store";
 
 import LXDClusterVMs from "./LXDClusterVMs";
 
 import urls from "app/base/urls";
 import { actions as machineActions } from "app/store/machine";
 import type { RootState } from "app/store/root/types";
+import { callId, enableCallIdMocks } from "testing/callId-mock";
 import {
   machine as machineFactory,
   machineState as machineStateFactory,
@@ -19,13 +19,10 @@ import {
 } from "testing/factories";
 import { renderWithBrowserRouter, screen } from "testing/utils";
 
+enableCallIdMocks();
 const mockStore = configureStore<RootState, {}>();
 
 describe("LXDClusterVMs", () => {
-  beforeEach(() => {
-    jest.spyOn(reduxToolkit, "nanoid").mockReturnValue("123456");
-  });
-
   it("renders a link to a cluster's host's VM page", () => {
     const machine = machineFactory({
       pod: { id: 11, name: "podrick" },
@@ -35,7 +32,7 @@ describe("LXDClusterVMs", () => {
       machine: machineStateFactory({
         items: [machine],
         lists: {
-          "123456": machineStateListFactory({
+          [callId]: machineStateListFactory({
             loaded: true,
             groups: [
               machineStateListGroupFactory({
@@ -96,7 +93,7 @@ describe("LXDClusterVMs", () => {
       />,
       { route: urls.kvm.lxd.cluster.vms.index({ clusterId: 1 }), store }
     );
-    const expected = machineActions.fetch("123456", {
+    const expected = machineActions.fetch([callId], {
       filter: { pod: ["host 1", "host 2"] },
     });
     const fetches = store