diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx index 5f0c5cca0ad2c..59de05415f86b 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx @@ -60,18 +60,23 @@ interface ExceptionItemsSummaryProps { export const ExceptionItemsSummary = memo( ({ stats, isSmall = false }) => { const getItem = useCallback( - (stat: keyof GetExceptionSummaryResponse) => ( - - - {SUMMARY_LABELS[stat]} - - - ), + (stat: keyof GetExceptionSummaryResponse) => { + if (stat !== 'total' && isSmall) { + return null; + } + return ( + + + {SUMMARY_LABELS[stat]} + + + ); + }, [stats, isSmall] ); @@ -100,9 +105,11 @@ const SummaryStat: FC<{ value: number; color?: EuiBadgeProps['color']; isSmall?: gutterSize={isSmall ? 'xs' : 'l'} isSmall={isSmall} > - - {children} - + {!isSmall ? ( + + {children} + + ) : null} {value} diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx index 08e8ec39dbaa8..54b1c37c7093f 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx @@ -6,7 +6,7 @@ */ import React, { memo, useMemo, useState, useEffect, useRef } from 'react'; -import { EuiPanel, EuiText } from '@elastic/eui'; +import { EuiPanel, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { GetExceptionSummaryResponse } from '../../../../../../../../common/endpoint/types'; @@ -14,7 +14,11 @@ import { GetExceptionSummaryResponse } from '../../../../../../../../common/endp import { useKibana, useToasts } from '../../../../../../../common/lib/kibana'; import { ExceptionItemsSummary } from './exception_items_summary'; import { TrustedAppsHttpService } from '../../../../../trusted_apps/service'; -import { StyledEuiFlexGridGroup, StyledEuiFlexGridItem } from './styled_components'; +import { + StyledEuiFlexGridGroup, + StyledEuiFlexGridItem, + StyledEuiFlexItem, +} from './styled_components'; interface FleetTrustedAppsCardProps { customLink: React.ReactNode; @@ -38,7 +42,7 @@ export const FleetTrustedAppsCard = memo( try { const response = await trustedAppsApi.getTrustedAppsSummary({ kuery: policyId - ? `exception-list-agnostic.attributes.tags:"policy:${policyId}" OR exception-list-agnostic.attributes.tags:"policy:all"` + ? `(exception-list-agnostic.attributes.tags:"policy:${policyId}" OR exception-list-agnostic.attributes.tags:"policy:all")` : undefined, }); if (isMounted) { @@ -72,21 +76,49 @@ export const FleetTrustedAppsCard = memo( /> ); + const cardGrid = useMemo(() => { + if (cardSize === 'm') { + return ( + + + +
{getTitleMessage()}
+
+
+ + + + {customLink} +
+ ); + } else { + return ( + + + +

{getTitleMessage()}

+
+
+ + + + + {customLink} + +
+ ); + } + }, [cardSize, customLink, stats]); + return ( - - - - {cardSize === 'l' ?

{getTitleMessage()}

:
{getTitleMessage()}
} -
-
- - - - - {customLink} - -
+ {cardGrid}
); } diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx index d2d5de5d43a3f..ad1d823677f22 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx @@ -7,12 +7,9 @@ import styled from 'styled-components'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -export const StyledEuiFlexGridGroup = styled(EuiFlexGroup)<{ - cardSize?: 'm' | 'l'; -}>` +export const StyledEuiFlexGridGroup = styled(EuiFlexGroup)` display: grid; - grid-template-columns: ${({ cardSize = 'l' }) => - cardSize === 'l' ? '25% 45% 30%' : '30% 35% 35%'}; + grid-template-columns: 25% 45% 30%; grid-template-areas: 'title summary link'; `; @@ -25,3 +22,7 @@ export const StyledEuiFlexGridItem = styled(EuiFlexItem)<{ margin: 0px; padding: 12px; `; + +export const StyledEuiFlexItem = styled(EuiFlexItem)` + flex-direction: row-reverse; +`;