[Security Solution] [Endpoint] Fleet summary card adjustments (#114291)…

… (#114826) * Fix API call and refactor component to show different summary when size is small * Refactored fleet trusted app card with new m design * Removed unused code * fix ts error Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: David Sánchez <davidsansol92@gmail.com>
elastic · Oct 13, 2021 · dc7b8fb · dc7b8fb
1 parent 55a4d2a
commit dc7b8fb
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 36 deletions.
diff --git a/...ager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx b/...ager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx
@@ -60,18 +60,23 @@ interface ExceptionItemsSummaryProps {
 export const ExceptionItemsSummary = memo<ExceptionItemsSummaryProps>(
   ({ stats, isSmall = false }) => {
     const getItem = useCallback(
-      (stat: keyof GetExceptionSummaryResponse) => (
-        <EuiFlexItem key={stat}>
-          <SummaryStat
-            value={stats?.[stat] ?? 0}
-            color={stat === 'total' ? 'primary' : 'default'}
-            key={stat}
-            isSmall={isSmall}
-          >
-            {SUMMARY_LABELS[stat]}
-          </SummaryStat>
-        </EuiFlexItem>
-      ),
+      (stat: keyof GetExceptionSummaryResponse) => {
+        if (stat !== 'total' && isSmall) {
+          return null;
+        }
+        return (
+          <EuiFlexItem key={stat}>
+            <SummaryStat
+              value={stats?.[stat] ?? 0}
+              color={stat === 'total' && !isSmall ? 'primary' : 'default'}
+              key={stat}
+              isSmall={isSmall}
+            >
+              {SUMMARY_LABELS[stat]}
+            </SummaryStat>
+          </EuiFlexItem>
+        );
+      },
       [stats, isSmall]
     );
 
@@ -100,9 +105,11 @@ const SummaryStat: FC<{ value: number; color?: EuiBadgeProps['color']; isSmall?:
           gutterSize={isSmall ? 'xs' : 'l'}
           isSmall={isSmall}
         >
-          <EuiFlexItem grow={false} style={color === 'primary' ? CSS_BOLD : undefined}>
-            {children}
-          </EuiFlexItem>
+          {!isSmall ? (
+            <EuiFlexItem grow={false} style={color === 'primary' ? CSS_BOLD : undefined}>
+              {children}
+            </EuiFlexItem>
+          ) : null}
           <EuiFlexItem grow={false}>
             <EuiBadge color={color}>{value}</EuiBadge>
           </EuiFlexItem>

diff --git a/...ager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx b/...ager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx
@@ -6,15 +6,19 @@
  */
 
 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';
 
 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<FleetTrustedAppsCardProps>(
         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<FleetTrustedAppsCardProps>(
       />
     );
 
+    const cardGrid = useMemo(() => {
+      if (cardSize === 'm') {
+        return (
+          <EuiFlexGroup
+            alignItems="baseline"
+            justifyContent="flexStart"
+            gutterSize="s"
+            direction="row"
+            responsive={false}
+          >
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <h5>{getTitleMessage()}</h5>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ExceptionItemsSummary stats={stats} isSmall={true} />
+            </EuiFlexItem>
+            <StyledEuiFlexItem grow={1}>{customLink}</StyledEuiFlexItem>
+          </EuiFlexGroup>
+        );
+      } else {
+        return (
+          <StyledEuiFlexGridGroup alignItems="baseline" justifyContent="center">
+            <StyledEuiFlexGridItem gridarea="title" alignitems="flex-start">
+              <EuiText>
+                <h4>{getTitleMessage()}</h4>
+              </EuiText>
+            </StyledEuiFlexGridItem>
+            <StyledEuiFlexGridItem gridarea="summary" alignitems={'center'}>
+              <ExceptionItemsSummary stats={stats} isSmall={false} />
+            </StyledEuiFlexGridItem>
+            <StyledEuiFlexGridItem gridarea="link" alignitems="flex-end">
+              {customLink}
+            </StyledEuiFlexGridItem>
+          </StyledEuiFlexGridGroup>
+        );
+      }
+    }, [cardSize, customLink, stats]);
+
     return (
       <EuiPanel hasShadow={false} paddingSize="l" hasBorder data-test-subj="fleetTrustedAppsCard">
-        <StyledEuiFlexGridGroup alignItems="baseline" justifyContent="center" cardSize={cardSize}>
-          <StyledEuiFlexGridItem gridarea="title" alignitems="flex-start">
-            <EuiText>
-              {cardSize === 'l' ? <h4>{getTitleMessage()}</h4> : <h5>{getTitleMessage()}</h5>}
-            </EuiText>
-          </StyledEuiFlexGridItem>
-          <StyledEuiFlexGridItem gridarea="summary">
-            <ExceptionItemsSummary stats={stats} isSmall={cardSize === 'm'} />
-          </StyledEuiFlexGridItem>
-          <StyledEuiFlexGridItem gridarea="link" alignitems="flex-end">
-            {customLink}
-          </StyledEuiFlexGridItem>
-        </StyledEuiFlexGridGroup>
+        {cardGrid}
       </EuiPanel>
     );
   }

diff --git a/...st_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx b/...st_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;
+`;