Improve advisor availability filter and general page loading user experience

src/App.js

@@ -16,8 +16,8 @@ import './App.scss';
 import ReadOnlyBanner from './Components/PresentationalComponents/ReadOnlyBanner/ReadOnlyBanner';
 import { useRbac } from './Helpers/Hooks';
 import { PERMISSIONS } from './Helpers/constants';
-import Spinner from '@redhat-cloud-services/frontend-components/Spinner';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import PageLoading from './Components/PresentationalComponents/Snippets/PageLoading';
 
 ReducerRegistry.register({ notifications });
 
@@ -53,7 +53,7 @@ const App = () => {
     window.setReadOnlyBannerVisible = setVisible => setReadOnlyBannerVisible(setVisible);
 
     return (
-        isLoading ? <Spinner size="lg" /> : isUserAuthorized ?
+        isLoading ? <PageLoading /> : isUserAuthorized ?
             <Fragment>
                 <NotificationPortal />
                 {isReadOnlyBannerVisible && <ReadOnlyBanner />}

src/App.scss

@@ -5,6 +5,7 @@
 
 .vuln-root {
     overflow: inherit !important;
+    height: 100% !important;
 
     .ins-c-conditional-filter {
         .ins-c-conditional-filter__group {

src/Components/PresentationalComponents/Snippets/PageLoading.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Bullseye } from '@patternfly/react-core';
+import { Spinner } from '@patternfly/react-core';
+
+const PageLoading = () => (
+    <Bullseye>
+        <Spinner />
+    </Bullseye>
+);
+
+export default PageLoading;
+

src/Components/SmartComponents/CVEs/CVEs.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Alert, Stack, StackItem } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
@@ -23,11 +23,12 @@ import {
     clearNotifications
 } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import ErrorHandler from '../../PresentationalComponents/ErrorHandler/ErrorHandler';
-import { Spinner } from '@redhat-cloud-services/frontend-components/Spinner';
 import { useColumnManagement, useHybridSystemFilterFlag, useRbac } from '../../../Helpers/Hooks';
 import { NotAuthorized } from '../../PresentationalComponents/EmptyStates/EmptyStates';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { getCveDefaultFilters } from './CVEsAssets';
+import { AccountStatContext } from '../../../Utilities/VulnerabilityRoutes';
+import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
 
 export const CVETableContext = React.createContext({});
 
@@ -36,6 +37,7 @@ export const CVEs = ({ rbac }) => {
     const [CveStatusModal, setStatusModal] = useState(() => () => null);
     const [CveBusinessRiskModal, setBusinessRiskModal] = useState(() => () => null);
     const [isFirstLoad, setFirstLoad] = useState(true);
+    const { isAdvisoryAvailable, includesCvesWithoutErrata } = useContext(AccountStatContext);
 
     const [[
         canEditStatusOrBusinessRisk,
@@ -148,7 +150,7 @@ export const CVEs = ({ rbac }) => {
 
     if (!cves.errors) {
         return (
-            isRbacLoading ? <Spinner centered /> : canReadVulnerabilityResults ?
+            isRbacLoading ? <PageLoading /> : canReadVulnerabilityResults ?
                 (
                     <CVETableContext.Provider
                         value={{
@@ -175,7 +177,7 @@ export const CVEs = ({ rbac }) => {
 
                         <Stack>
                             <StackItem>
-                                {cves.meta.cves_without_errata && cves.meta.advisory_available !== 'True' &&
+                                {includesCvesWithoutErrata && isAdvisoryAvailable !== 'True' &&
                                     <Alert
                                         variant="info"
                                         isInline

src/Components/SmartComponents/CVEs/CVEsTableToolbar.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import propTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import messages from '../../../Messages';
@@ -36,42 +36,41 @@ import { fetchCvesIds } from '../../../Store/Actions/Actions';
 import { setCvesWithoutErrata } from '../../../Helpers/APIHelper';
 import { getCveDefaultFilters } from './CVEsAssets';
 import { useHybridSystemFilterFlag } from '../../../Helpers/Hooks';
+import { AccountStatContext } from '../../../Utilities/VulnerabilityRoutes';
 
 const CVEsTableToolbarWithContext = ({ context, canEditStatusOrBusinessRisk, canExport, canToggleCvesWithoutErrata, intl }) => {
     const [exportPDF, setExportPDF] = useState(false);
 
     const { cves, params, methods, selectedCves } = context;
-    const { isLoading } = cves;
 
     const { filter } = params;
     const selectedCvesCount = selectedCves && selectedCves.length;
 
     const [showCvesWithoutErrata, setShowCvesWithoutErrata] = useState(null);
     const shouldUseHybridSystemFilter = useHybridSystemFilterFlag();
+    const { includesCvesWithoutErrata } = useContext(AccountStatContext);
 
     useEffect(() => {
-        if (!isLoading) {
-            // if the API response feature flag value differs currently saved one
-            if (showCvesWithoutErrata !== cves?.meta?.cves_without_errata) {
-                if (cves?.meta?.cves_without_errata === true) {
-                    if (!params.advisory_available) {
-                        methods.apply({ advisory_available: 'true' });
-                    }
+        // if the API response feature flag value differs currently saved one
+        if (showCvesWithoutErrata !== includesCvesWithoutErrata) {
+            if (includesCvesWithoutErrata === true) {
+                if (!params.advisory_available) {
+                    methods.apply({ advisory_available: 'true' });
                 }
-                else {
-                    if (params.advisory_available) {
-                        methods.apply({ advisory_available: undefined });
-                    }
+            }
+            else {
+                if (params.advisory_available) {
+                    methods.apply({ advisory_available: undefined });
                 }
             }
-
-            setShowCvesWithoutErrata(cves?.meta?.cves_without_errata);
         }
-    }, [cves?.meta?.cves_without_errata, isLoading]);
+
+        setShowCvesWithoutErrata(includesCvesWithoutErrata);
+    }, [includesCvesWithoutErrata, showCvesWithoutErrata, params]);
 
     const defaultFilters = {
         ...getCveDefaultFilters(shouldUseHybridSystemFilter),
-        ...cves?.meta?.cves_without_errata ? { advisory_available: 'true' } : {}
+        ...includesCvesWithoutErrata ? { advisory_available: 'true' } : {}
     };
 
     const selectOptions = selectAllCheckbox({

src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js

@@ -18,13 +18,13 @@ import {
 import ErrorHandler from '../../../PresentationalComponents/ErrorHandler/ErrorHandler';
 import { EmptyStateNoSystems } from '../../../PresentationalComponents/EmptyStates/EmptyStates';
 import { useGetEntities, mergeAppColumns, useOnLoad } from './helpers.js';
-import Spinner from '@redhat-cloud-services/frontend-components/Spinner';
 import { buildActiveFilters, removeFilters, isFilterInDefaultState } from '../../../../Helpers/TableToolbarHelper';
 import useSearchFilter from '../../../PresentationalComponents/Filters/PrimaryToolbarFilters/SearchFilter';
 import useSecurityRuleFilter from '../../../PresentationalComponents/Filters/PrimaryToolbarFilters/SecurityRuleFilter';
 import AsynComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
 import { useRbac } from '../../../../Helpers/Hooks';
 import messages from '../../../../Messages';
+import PageLoading from '../../../PresentationalComponents/Snippets/PageLoading';
 
 const ImmutableDevices = ({ intl, cveName, filterRuleValues, inventoryRef, headerFilters }) => {
     const [[canReadHostsInventory], isLoadingInventory] = useRbac([
@@ -97,7 +97,7 @@ const ImmutableDevices = ({ intl, cveName, filterRuleValues, inventoryRef, heade
     const onLoad = useOnLoad(parameters);
 
     if (isLoadingInventory) {
-        return <Spinner size="lg" />;
+        return <PageLoading />;
     }
 
     if (error?.hasError || !canReadHostsInventory) {

src/Components/SmartComponents/Reports/ReportsPage.js

@@ -16,8 +16,8 @@ import styles from './Common/styles';
 import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { useHybridSystemFilterFlag, useRbac } from '../../../Helpers/Hooks';
 import NoAccessPage from '../../PresentationalComponents/StaticPages/NoAccessPage';
-import Spinner from '@redhat-cloud-services/frontend-components/Spinner';
 import { getCveListByAccount } from '../../../Helpers/APIHelper';
+import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
 
 const ReportsPage = () => {
     const [[canDoAdvancedReporting, canReadVulnerabilities, canReadInventory], isLoading]
@@ -75,7 +75,7 @@ const ReportsPage = () => {
     };
 
     return (
-        isLoading ? <Spinner centered /> :
+        isLoading ? <PageLoading /> :
             (canDoAdvancedReporting && canReadInventory) ? (
                 <React.Fragment>
                     <Header title={intl.formatMessage(messages.reportsPageTitle)} showBreadcrumb={false} />

src/Components/SmartComponents/SystemCves/SystemCveTableToolbar.js

@@ -49,12 +49,12 @@ const SystemCveToolbarWithContext = ({
     const isAdvisoryAvailableFilterAllowed = !Array.isArray(filters) || filters.includes('advisory_available');
 
     useEffect(() => {
-        if (isAdvisoryAvailableFilterAllowed && cves?.meta?.cves_without_errata === true) {
+        if (isAdvisoryAvailableFilterAllowed && showingCvesWithoutErrata) {
             if (!parameters.advisory_available) {
                 methods.apply({ advisory_available: 'true' });
             }
         }
-    }, [cves?.meta?.cves_without_errata]);
+    }, [showingCvesWithoutErrata]);
 
     const selectOptions = useMemo(() => selectAllCheckbox({
         selectedItems: selectedCves,
@@ -98,7 +98,7 @@ const SystemCveToolbarWithContext = ({
     ];
 
     const defaultFilters = {
-        ...(cves?.meta?.cves_without_errata && isAdvisoryAvailableFilterAllowed)
+        ...(showingCvesWithoutErrata && isAdvisoryAvailableFilterAllowed)
             ? { advisory_available: 'true' }
             : {}
     };

src/Components/SmartComponents/SystemCves/SystemCves.js

@@ -3,7 +3,8 @@ import React, {
     useEffect,
     Fragment,
     createContext,
-    useState
+    useState,
+    useContext
 } from 'react';
 import {
     fetchCveListBySystem,
@@ -44,6 +45,7 @@ import {
 import { NotConnected } from '@redhat-cloud-services/frontend-components/NotConnected';
 import { useColumnManagement } from '../../../Helpers/Hooks';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+import { AccountStatContext } from '../../../Utilities/VulnerabilityRoutes';
 
 export const CVETableContext = createContext({});
 
@@ -92,6 +94,7 @@ export const SystemCVEs = ({
         entity.id, systemCVEs, columns, linkToCustomerPortal
     ), [systemCVEs, systemCVEs.isLoading, entity.id, columns]);
     const [urlParameters, setUrlParams] = useUrlParams(CVES_ALLOWED_PARAMS);
+    const { includesCvesWithoutErrata } = useContext(AccountStatContext);
 
     const downloadReport = format => {
         const params = { ...parameters, system: entity.id };
@@ -235,7 +238,7 @@ export const SystemCVEs = ({
                             canSelect={canSelect && canEditPairStatus}
                             canManageColumns={canManageColumns}
                             filters={filters}
-                            showingCvesWithoutErrata={cves?.meta?.cves_without_errata}
+                            showingCvesWithoutErrata={includesCvesWithoutErrata}
                         />
                     </StackItem>
                 </Stack>

src/Components/SmartComponents/SystemDetailsPage/SystemDetails.js

@@ -6,11 +6,11 @@ import {
     EmptyStateExcludedSystem,
     NotAuthorized
 } from '../../PresentationalComponents/EmptyStates/EmptyStates';
-import { Spinner } from '@redhat-cloud-services/frontend-components/Spinner';
 import { intl } from '../../../Utilities/IntlProvider';
 import messages from '../../../Messages';
 import { PERMISSIONS, SERVICE_NAME } from '../../../Helpers/constants';
 import { useRbac } from '../../../Helpers/Hooks';
+import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
 
 const SystemDetails = ({ optOutSystemHandler }) => {
     const { loaded, opt_out: isOptOut } = useSelector(({ SystemDetailsPageStore }) => SystemDetailsPageStore) ?? {};
@@ -29,7 +29,7 @@ const SystemDetails = ({ optOutSystemHandler }) => {
     );
 
     if (isRbacLoading) {
-        return <Spinner centered />;
+        return <PageLoading />;
     } else if (canReadVulnerabilityResults) {
         if (entity && loaded && isOptOut) {
             if (canReadExcluded) {
@@ -46,7 +46,7 @@ const SystemDetails = ({ optOutSystemHandler }) => {
                 canEditPairStatus={canEditPairStatus}
             />;
         } else {
-            return loaded ? null : <Spinner centered />;
+            return loaded ? null : <PageLoading />;
         }
     } else {
         return <NotAuthorized serviceName={SERVICE_NAME} />;

src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js

@@ -38,14 +38,14 @@ import {
 import { EmptyStateNoSystems } from '../../PresentationalComponents/EmptyStates/EmptyStates';
 import { useBulkSelect, useColumnManagement, useGetEntities, useRbac } from '../../../Helpers/Hooks';
 import * as APIHelper from '../../../Helpers/APIHelper';
-import Spinner from '@redhat-cloud-services/frontend-components/Spinner';
 import { buildActiveFilters, exportConfig, isFilterInDefaultState, removeFilters } from '../../../Helpers/TableToolbarHelper';
 import Remediation from '../Remediation/Remediation';
 import securityRuleFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/SecurityRuleFilter';
 import statusFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/StatusFilter';
 import useSearchFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/SearchFilter';
 import remediationFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/RemediationFilter';
 import advisoryAvailabilityFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/AdvisoryAvailabilityFilter';
+import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
 
 const SystemsExposedTable = ({
     intl, cveName, cveStatusDetails, filterRuleValues,
@@ -225,7 +225,7 @@ const SystemsExposedTable = ({
         <Fragment>
             {StatusModal && <StatusModal />}
             {ColumnManagementModal}
-            {isLoadingInventory ? <Spinner centered /> :
+            {isLoadingInventory ? <PageLoading /> :
                 error?.hasError && !canReadHostsInventory
                     ? <ErrorHandler code={error?.errorCode} />
                     : <InventoryTable

src/Components/SmartComponents/SystemsPage/SystemsPage.js

@@ -38,6 +38,7 @@ import DownloadReport from '../../../Helpers/DownloadReport';
 import useSearchFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/SearchFilter';
 import excludedFilter from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/ExcludedFilter';
 import EdgeDevicesWarning from './EdgeDevicesWarning';
+import PageLoading from '../../PresentationalComponents/Snippets/PageLoading';
 
 const SystemsPage = () => {
     const [[
@@ -178,7 +179,7 @@ const SystemsPage = () => {
     const canSelect = canSetExcludedIncluded;
 
     return (
-        isLoading ? <Spinner centered /> :
+        isLoading ? <PageLoading /> :
             canReadVulnerabilityResults ? <Fragment>
                 {ColumnManagementModal}