Patches for packages alternative approach

assets/js/common/UpgradablePackagesList/UpgradablePackagesList.jsx

@@ -3,13 +3,14 @@ import { noop } from 'lodash';
 
 import Button from '@common/Button';
 import Table, { createStringSortingPredicate } from '@common/Table';
+import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 
 const upgradablePackagesDefault = [];
 
 function UpgradablePackagesList({
   upgradablePackages = upgradablePackagesDefault,
+  patchesLoading,
   onPatchClick = noop,
-  onLoad = noop,
 }) {
   const [sortDirection, setSortDirection] = useState('asc');
 
@@ -29,7 +30,6 @@ function UpgradablePackagesList({
   const config = {
     pagination: true,
     usePadding: false,
-    onPageChange: onLoad,
     columns: [
       {
         title: 'Installed Packages',
@@ -47,22 +47,31 @@ function UpgradablePackagesList({
       {
         title: 'Related Patches',
         key: 'patches',
-        render: (content, { to_package_id }) => (
-          <div>
-            {content &&
-              content.map(({ advisory }) => (
-                <div key={`${to_package_id}-${advisory}`}>
-                  <Button
-                    type="link"
-                    size="fit"
-                    onClick={() => onPatchClick(advisory)}
-                  >
-                    {advisory}
-                  </Button>
-                </div>
-              ))}
-          </div>
-        ),
+        render: (content, { to_package_id }) => {
+          if (patchesLoading) {
+            return (
+              <div>
+                <EOS_LOADING_ANIMATED />
+              </div>
+            );
+          }
+          return (
+            <div>
+              {content &&
+                content.map(({ advisory }) => (
+                  <div key={`${to_package_id}-${advisory}`}>
+                    <Button
+                      type="link"
+                      size="fit"
+                      onClick={() => onPatchClick(advisory)}
+                    >
+                      {advisory}
+                    </Button>
+                  </div>
+                ))}
+            </div>
+          );
+        },
       },
     ],
   };

assets/js/common/UpgradablePackagesList/UpgradablePackagesList.stories.jsx

@@ -16,6 +16,9 @@ export default {
       },
       description: 'List of upgradable packages',
     },
+    patchesLoading: {
+      description: 'Are patches loading?',
+    },
   },
 };
 
@@ -25,3 +28,11 @@ export const Default = {
     upgradablePackages: upgradablePackageFactory.buildList(4),
   },
 };
+
+export const PatchesLoading = {
+  args: {
+    hostname: 'Example Host',
+    patchesLoading: true,
+    upgradablePackages: upgradablePackageFactory.buildList(4),
+  },
+};

assets/js/lib/api/softwareUpdates.js

@@ -3,9 +3,9 @@ import { networkClient } from '@lib/network';
 export const getSoftwareUpdates = (hostID) =>
   networkClient.get(`/hosts/${hostID}/software_updates`);
 
-export const getPatchesForPackages = (packageIDs) =>
+export const getPatchesForPackages = (hostID) =>
   networkClient.get(`/software_updates/packages`, {
-    params: { package_ids: packageIDs },
+    params: { host_id: hostID },
   });
 
 export const getAdvisoryErrata = (advisoryName) =>

assets/js/pages/UpgradablePackagesPage/UpgradablePackages.jsx

@@ -10,6 +10,7 @@ import { containsSubstring } from '@lib/filter';
 export default function UpgradablePackages({
   hostName,
   upgradablePackages,
+  patchesLoading,
   onPatchClick = noop,
   onLoad = noop,
 }) {
@@ -41,6 +42,7 @@ export default function UpgradablePackages({
         </div>
       </div>
       <UpgradablePackagesList
+        patchesLoading={patchesLoading}
         upgradablePackages={displayedPackages}
         onPatchClick={onPatchClick}
         onLoad={onLoad}

assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx

@@ -4,7 +4,10 @@ import { useSelector, useDispatch } from 'react-redux';
 import { get } from 'lodash';
 
 import { getHost } from '@state/selectors/host';
-import { getUpgradablePackages } from '@state/selectors/softwareUpdates';
+import {
+  getUpgradablePackages,
+  getPatchesLoading,
+} from '@state/selectors/softwareUpdates';
 import {
   fetchSoftwareUpdates,
   fetchUpgradablePackagesPatches,
@@ -30,24 +33,26 @@ function UpgradablePackagesPage() {
     getUpgradablePackages(state, hostID)
   );
 
+  const patchesLoading = useSelector((state) =>
+    getPatchesLoading(state, hostID)
+  );
+
+  useEffect(() => {
+    if (upgradablePackages.length > 0) {
+      dispatch(fetchUpgradablePackagesPatches({ hostID }));
+    }
+  }, [upgradablePackages.length]);
+
   return (
     <>
       <BackButton url={`/hosts/${hostID}`}>Back to Host Details</BackButton>
       <UpgradablePackages
         hostName={hostname}
         upgradablePackages={upgradablePackages}
+        patchesLoading={patchesLoading}
         onPatchClick={(advisoryID) =>
           navigate(`/hosts/${hostID}/patches/${advisoryID}`)
         }
-        onLoad={(items) => {
-          if (items.length) {
-            const packageIDs = items.map(
-              ({ to_package_id: packageID }) => packageID
-            );
-
-            dispatch(fetchUpgradablePackagesPatches({ hostID, packageIDs }));
-          }
-        }}
       />
     </>
   );

assets/js/state/sagas/softwareUpdates.js

@@ -1,5 +1,5 @@
-import { get, chunk } from 'lodash';
-import { all, put, call, takeEvery } from 'redux-saga/effects';
+import { get } from 'lodash';
+import { put, call, takeEvery } from 'redux-saga/effects';
 import {
   getSoftwareUpdates,
   getPatchesForPackages,
@@ -43,27 +43,21 @@ export function* fetchSoftwareUpdates({ payload: hostID }) {
   }
 }
 
-export function* fetchUpgradablePackagesPatches({
-  payload: { hostID, packageIDs },
-}) {
-  const chunks = chunk(packageIDs, 50);
-
-  const effects = chunks.map((packageIDsChunk) =>
-    call(getPatchesForPackages, packageIDsChunk)
-  );
-
+export function* fetchUpgradablePackagesPatches({ payload: { hostID } }) {
   try {
-    const responses = yield all(effects);
-    const patches = responses
-      .map(({ data: { patches: patchesForChunk } }) =>
-        patchesForChunk.map((patch) => ({
+    const {
+      data: { patches },
+    } = yield call(getPatchesForPackages, hostID);
+
+    yield put(
+      setPatchesForPackages({
+        hostID,
+        patches: patches.map((patch) => ({
           ...patch,
           package_id: Number(patch.package_id),
-        }))
-      )
-      .flat();
-
-    yield put(setPatchesForPackages({ hostID, patches }));
+        })),
+      })
+    );
     yield put(setSettingsConfigured());
   } catch (error) {
     const errorCode = get(error, ['response', 'status']);

assets/js/state/sagas/softwareUpdates.test.js

@@ -168,37 +168,6 @@ describe('Software Updates saga', () => {
       ]);
     });
 
-    it('chunks 600 unique package IDs', async () => {
-      const axiosMock = new MockAdapter(networkClient);
-      const hostID = faker.string.uuid();
-      const packageIDs = Array.from(new Array(160)).map(() =>
-        faker.number.int()
-      );
-      const patches = patchForPackageFactory.buildList(3);
-      const response = {
-        patches: [{ package_id: packageIDs[0], patches }],
-      };
-
-      axiosMock.onGet(`/api/v1/software_updates/packages`).reply(200, response);
-
-      const dispatched = await recordSaga(fetchUpgradablePackagesPatches, {
-        payload: { hostID, packageIDs },
-      });
-
-      expect(dispatched).toEqual([
-        setPatchesForPackages({
-          hostID,
-          patches: [
-            ...response.patches,
-            ...response.patches,
-            ...response.patches,
-            ...response.patches,
-          ],
-        }),
-        setSettingsConfigured(),
-      ]);
-    });
-
     it('should set settings not configured when 422 with relevant error message', async () => {
       const axiosMock = new MockAdapter(networkClient);
       const hostID = faker.string.uuid();

assets/js/state/selectors/softwareUpdates.js

@@ -37,6 +37,11 @@ export const getSoftwareUpdatesLoading = createSelector(
   (softwareUpdates) => get(softwareUpdates, ['loading'], false)
 );
 
+export const getPatchesLoading = createSelector(
+  [(state, id) => getSoftwareUpdatesForHost(id)(state)],
+  (softwareUpdates) => get(softwareUpdates, ['loadingPatches'], false)
+);
+
 export const getSoftwareUpdatesErrors = createSelector(
   [(state, id) => getSoftwareUpdatesForHost(id)(state)],
   (softwareUpdates) => get(softwareUpdates, ['errors'], [])

assets/js/state/softwareUpdates.js

@@ -8,6 +8,7 @@ const initialState = {
 
 const initialHostState = {
   loading: false,
+  loadingPatches: false,
   errors: [],
 };
 
@@ -24,7 +25,7 @@ export const softwareUpdatesSlice = createSlice({
     startLoadingSoftwareUpdates: (state, { payload: { hostID } }) => {
       state.softwareUpdates = {
         ...state.softwareUpdates,
-        [hostID]: { ...initialHostState, loading: true },
+        [hostID]: { ...initialHostState, loading: true, loadingPatches: true },
       };
     },
     setSoftwareUpdates: (
@@ -71,6 +72,10 @@ export const softwareUpdatesSlice = createSlice({
         };
       });
 
+      if (state.softwareUpdates[hostID]) {
+        state.softwareUpdates[hostID].loadingPatches = false;
+      }
+
       if (!isEmpty(packages)) {
         state.softwareUpdates[hostID].upgradable_packages = newPackages;
       }

assets/js/state/softwareUpdates.test.js

@@ -18,7 +18,9 @@ describe('SoftwareUpdates reducer', () => {
     const action = startLoadingSoftwareUpdates({ hostID });
 
     const expectedState = {
-      softwareUpdates: { [hostID]: { loading: true, errors: [] } },
+      softwareUpdates: {
+        [hostID]: { loading: true, loadingPatches: true, errors: [] },
+      },
     };
 
     expect(softwareUpdatesReducer(initialState, action)).toEqual(expectedState);
@@ -34,6 +36,7 @@ describe('SoftwareUpdates reducer', () => {
           relevant_patches: [],
           upgradable_packages: [],
           loading: false,
+          loadingPatches: false,
           errors: [],
         },
         [host2]: {
@@ -64,6 +67,7 @@ describe('SoftwareUpdates reducer', () => {
             },
           ],
           loading: false,
+          loadingPatches: false,
           errors: [],
         },
       },
@@ -116,10 +120,12 @@ describe('SoftwareUpdates reducer', () => {
           relevant_patches: [],
           upgradable_packages: [],
           loading: false,
+          loadingPatches: false,
           errors: [],
         },
         [host2]: {
           ...newSoftwareUpdates,
+          loadingPatches: false,
           loading: false,
           errors: [],
         },
@@ -170,7 +176,7 @@ describe('SoftwareUpdates reducer', () => {
           errors: [],
           loading: false,
         },
-        [host2]: { errors: [], loading: false },
+        [host2]: { errors: [], loading: false, loadingPatches: false },
       },
     });
   });
@@ -230,7 +236,12 @@ describe('SoftwareUpdates reducer', () => {
 
     expect(actual).toEqual({
       softwareUpdates: {
-        [host1]: { ...initialState[host1], loading: false, errors },
+        [host1]: {
+          ...initialState[host1],
+          loading: false,
+          loadingPatches: false,
+          errors,
+        },
       },
     });
   });

lib/trento/infrastructure/software_updates/adapter/mock_suma.ex

@@ -149,7 +149,14 @@ defmodule Trento.Infrastructure.SoftwareUpdates.MockSuma do
       {:ok,
        [
          %{
-           name: "kernel",
+           name: "elixir",
+           version: "6.9.7",
+           release: "2",
+           arch_label: "x86_64",
+           epoch: "0"
+         },
+         %{
+           name: "systemd",
            version: "6.9.7",
            release: "2",
            arch_label: "x86_64",