Add a spinner to the related patches column in case it takes more time

trento-project · Oct 1, 2024 · 8647bc9 · 8647bc9
1 parent c9768d2
commit 8647bc9
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 21 deletions.
diff --git a/assets/js/common/UpgradablePackagesList/UpgradablePackagesList.jsx b/assets/js/common/UpgradablePackagesList/UpgradablePackagesList.jsx
@@ -3,11 +3,13 @@ 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,
 }) {
   const [sortDirection, setSortDirection] = useState('asc');
@@ -45,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>
+          );
+        },
       },
     ],
   };

diff --git a/assets/js/common/UpgradablePackagesList/UpgradablePackagesList.stories.jsx b/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),
+  },
+};
diff --git a/assets/js/pages/UpgradablePackagesPage/UpgradablePackages.jsx b/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}

diff --git a/assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx b/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,6 +33,10 @@ function UpgradablePackagesPage() {
     getUpgradablePackages(state, hostID)
   );
 
+  const patchesLoading = useSelector((state) =>
+    getPatchesLoading(state, hostID)
+  );
+
   useEffect(() => {
     if (upgradablePackages.length > 0) {
       dispatch(fetchUpgradablePackagesPatches({ hostID }));
@@ -42,6 +49,7 @@ function UpgradablePackagesPage() {
       <UpgradablePackages
         hostName={hostname}
         upgradablePackages={upgradablePackages}
+        patchesLoading={patchesLoading}
         onPatchClick={(advisoryID) =>
           navigate(`/hosts/${hostID}/patches/${advisoryID}`)
         }

diff --git a/assets/js/state/selectors/softwareUpdates.js b/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'], [])

diff --git a/assets/js/state/softwareUpdates.js b/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;
       }

diff --git a/assets/js/state/softwareUpdates.test.js b/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,
+        },
       },
     });
   });