github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] [Endpoint] Unify loading states for artifacts lists (#121388)

Browse source 
* Creates new page loader component under management and use it in different places (TBD)

* Use new ManagementPageLoader component in artifact pages under management

* Remove unused euiProgress component

* Fix typo

* Fix other typos

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
David Sánchez 2021-12-17 16:30:18 +01:00 • committed by GitHub
parent 38411efe38
commit 4c1d1aef73
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 44 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

22
x-pack/plugins/security_solution/public/management/components/management_page_loader.tsx Normal file
View file

@ -0,0 +1,22 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { memo } from 'react';
import { EuiLoadingSpinner } from '@elastic/eui';
import { ManagementEmptyStateWraper } from './management_empty_state_wraper';
export const ManagementPageLoader = memo<{ 'data-test-subj': string }>(
({ 'data-test-subj': dataTestSubj }) => {
return (
<ManagementEmptyStateWraper>
<EuiLoadingSpinner data-test-subj={dataTestSubj} size="l" />
</ManagementEmptyStateWraper>
);
}
);
ManagementPageLoader.displayName = 'ManagementPageLoader';

2
x-pack/plugins/security_solution/public/management/pages/event_filters/view/event_filters_list_page.test.tsx
View file

@ -98,7 +98,7 @@ describe('When on the Event Filters List Page', () => {
);
render();
expect(renderResult.getByTestId('eventFiltersContent-loader')).toBeTruthy();
expect(renderResult.getByTestId('eventFilterListLoader')).toBeTruthy();
const wasReceived = dataReceived();
releaseApiResponse!();

5
x-pack/plugins/security_solution/public/management/pages/event_filters/view/event_filters_list_page.tsx
View file

@ -51,6 +51,7 @@ import { useGetEndpointSpecificPolicies } from '../../../services/policies/hooks
import { useToasts } from '../../../../common/lib/kibana';
import { getLoadPoliciesError } from '../../../common/translations';
import { useEndpointPoliciesToArtifactPolicies } from '../../../components/artifact_entry_card/hooks/use_endpoint_policies_to_artifact_policies';
import { ManagementPageLoader } from '../../../components/management_page_loader';
type ArtifactEntryCardType = typeof ArtifactEntryCard;
@ -234,6 +235,10 @@ export const EventFiltersListPage = memo(() => {
[artifactCardPropsPerItem]
);
if (isLoading && !doesDataExist) {
return <ManagementPageLoader data-test-subj="eventFilterListLoader" />;
}
return (
<AdministrationListPage
headerBackComponent={backButton}

4
x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/view/host_isolation_exceptions_list.test.tsx
View file

@ -107,14 +107,14 @@ describe('When on the host isolation exceptions page', () => {
await waitForApiCall();
// see if loader is present
expect(renderResult.getByTestId('hostIsolationExceptionsContent-loader')).toBeTruthy();
expect(renderResult.getByTestId('hostIsolationExceptionListLoader')).toBeTruthy();
// release the request
releaseApiResponse!(getFoundExceptionListItemSchemaMock());
// check the loader is gone
await waitForElementToBeRemoved(
renderResult.getByTestId('hostIsolationExceptionsContent-loader')
renderResult.getByTestId('hostIsolationExceptionListLoader')
);
});

5
x-pack/plugins/security_solution/public/management/pages/host_isolation_exceptions/view/host_isolation_exceptions_list.tsx
View file

@ -24,6 +24,7 @@ import { getLoadPoliciesError } from '../../../common/translations';
import { AdministrationListPage } from '../../../components/administration_list_page';
import { ArtifactEntryCard, ArtifactEntryCardProps } from '../../../components/artifact_entry_card';
import { useEndpointPoliciesToArtifactPolicies } from '../../../components/artifact_entry_card/hooks/use_endpoint_policies_to_artifact_policies';
import { ManagementPageLoader } from '../../../components/management_page_loader';
import { PaginatedContent, PaginatedContentProps } from '../../../components/paginated_content';
import { SearchExceptions } from '../../../components/search_exceptions';
import { useGetEndpointSpecificPolicies } from '../../../services/policies/hooks';
@ -171,6 +172,10 @@ export const HostIsolationExceptionsList = () => {
[navigateCallback]
);
if (isLoading && !hasDataToShow) {
return <ManagementPageLoader data-test-subj="hostIsolationExceptionListLoader" />;
}
return (
<AdministrationListPage
title={

9
x-pack/plugins/security_solution/public/management/pages/policy/view/event_filters/layout/policy_event_filters_layout.tsx
View file

@ -15,14 +15,13 @@ import {
EuiText,
EuiSpacer,
EuiLink,
EuiLoadingSpinner,
} from '@elastic/eui';
import { useAppUrl } from '../../../../../../common/lib/kibana';
import { APP_UI_ID } from '../../../../../../../common/constants';
import { ImmutableObject, PolicyData } from '../../../../../../../common/endpoint/types';
import { getEventFiltersListPath } from '../../../../../common/routing';
import { useGetAllAssignedEventFilters, useGetAllEventFilters } from '../hooks';
import { ManagementEmptyStateWraper } from '../../../../../components/management_empty_state_wraper';
import { ManagementPageLoader } from '../../../../../components/management_page_loader';
import { PolicyEventFiltersEmptyUnassigned, PolicyEventFiltersEmptyUnexisting } from '../empty';
interface PolicyEventFiltersLayoutProps {
@ -86,11 +85,7 @@ export const PolicyEventFiltersLayout = React.memo<PolicyEventFiltersLayoutProps
const isEmptyState = useMemo(() => allAssigned && allAssigned.total === 0, [allAssigned]);
if (!policyItem || isGlobalLoading) {
return (
<ManagementEmptyStateWraper>
<EuiLoadingSpinner data-test-subj="policy-event-filters-loading-spinner" size="l" />
</ManagementEmptyStateWraper>
);
return <ManagementPageLoader data-test-subj="policy-event-filters-loading-spinner" />;
}
if (isEmptyState) {

8
x-pack/plugins/security_solution/public/management/pages/policy/view/host_isolation_exceptions/host_isolation_exceptions_tab.tsx
View file

@ -9,7 +9,6 @@ import {
EuiPageContent,
EuiPageHeader,
EuiPageHeaderSection,
EuiProgress,
EuiSpacer,
EuiText,
EuiTitle,
@ -31,6 +30,7 @@ import { usePolicyDetailsSelector } from '../policy_hooks';
import { PolicyHostIsolationExceptionsEmptyUnexisting } from './components/empty_unexisting';
import { PolicyHostIsolationExceptionsEmptyUnassigned } from './components/empty_unassigned';
import { PolicyHostIsolationExceptionsList } from './components/list';
import { ManagementPageLoader } from '../../../../components/management_page_loader';
export const PolicyHostIsolationExceptionsTab = ({ policy }: { policy: PolicyData }) => {
const { getAppUrl } = useAppUrl();
@ -154,11 +154,7 @@ export const PolicyHostIsolationExceptionsTab = ({ policy }: { policy: PolicyDat
</EuiPageContent>
</div>
) : (
<EuiProgress
size="xs"
color="primary"
data-test-subj="policyHostIsolationExceptionsTabLoading"
/>
<ManagementPageLoader data-test-subj="policyHostIsolationExceptionsTabLoading" />
);
};
PolicyHostIsolationExceptionsTab.displayName = 'PolicyHostIsolationExceptionsTab';

4
x-pack/plugins/security_solution/public/management/pages/policy/view/trusted_apps/layout/policy_trusted_apps_layout.tsx
View file

@ -17,7 +17,6 @@ import {
EuiText,
EuiSpacer,
EuiLink,
EuiProgress,
} from '@elastic/eui';
import { PolicyTrustedAppsEmptyUnassigned, PolicyTrustedAppsEmptyUnexisting } from '../empty';
import {
@ -36,6 +35,7 @@ import { useAppUrl } from '../../../../../../common/lib/kibana';
import { APP_UI_ID } from '../../../../../../../common/constants';
import { getTrustedAppsListPath } from '../../../../../common/routing';
import { useUserPrivileges } from '../../../../../../common/components/user_privileges';
import { ManagementPageLoader } from '../../../../../components/management_page_loader';
export const PolicyTrustedAppsLayout = React.memo(() => {
const { getAppUrl } = useAppUrl();
@ -168,7 +168,7 @@ export const PolicyTrustedAppsLayout = React.memo(() => {
) : displayHeaderAndContent ? (
<PolicyTrustedAppsList />
) : (
<EuiProgress size="xs" color="primary" />
<ManagementPageLoader data-test-subj="policyTrustedAppsListLoader" />
)}
</EuiPageContent>
{canCreateArtifactsByPolicy && showListFlyout ? <PolicyTrustedAppsFlyout /> : null}

16
x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
View file

@ -10,15 +10,7 @@ import { useDispatch } from 'react-redux';
import { Dispatch } from 'redux';
import { useLocation } from 'react-router-dom';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiButton,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import {
@ -42,6 +34,7 @@ import { SearchExceptions } from '../../../components/search_exceptions';
import { BackToExternalAppButton } from '../../../components/back_to_external_app_button';
import { ListPageRouteState } from '../../../../../common/endpoint/types';
import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
import { ManagementPageLoader } from '../../../components/management_page_loader';
export const TrustedAppsPage = memo(() => {
const isTrustedAppsByPolicyEnabled = useIsExperimentalFeatureEnabled(
@ -177,10 +170,7 @@ export const TrustedAppsPage = memo(() => {
<TrustedAppsNotifications />
{isCheckingIfEntriesExists && !didEntriesExist ? (
<EuiEmptyPrompt
data-test-subj="trustedAppsListLoader"
body={<EuiLoadingSpinner className="essentialAnimation" size="xl" />}
/>
<ManagementPageLoader data-test-subj="trustedAppsListLoader" />
) : (
content
)}