[SECURITY_SOLUTION][ENDPOINT] Show Trusted Apps summary stats on Cust…

…om tab under fleet integrations (elastic#86018) (elastic#86043) * show trusted app summary Co-authored-by: Kibana Machine <[email protected]>
lcawl · Dec 16, 2020 · b70287d · b70287d
1 parent 17126c9
commit b70287d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 19 deletions.
diff --git a/...er_integration/endpoint_package_custom_extension/components/trusted_app_items_summary.tsx b/...er_integration/endpoint_package_custom_extension/components/trusted_app_items_summary.tsx
@@ -6,38 +6,69 @@
 
 import { EuiBadge, EuiBadgeProps, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import React, { FC, memo, useEffect, useState } from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { CoreStart } from 'kibana/public';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../../../../../../../../../src/plugins/kibana_react/public';
 import { TrustedAppsHttpService } from '../../../../../trusted_apps/service';
+import { GetTrustedAppsSummaryResponse } from '../../../../../../../../common/endpoint/types';
+
+const SUMMARY_KEYS: Readonly<Array<keyof GetTrustedAppsSummaryResponse>> = [
+  'windows',
+  'macos',
+  'linux',
+  'total',
+];
+
+const SUMMARY_LABELS: Readonly<{ [key in keyof GetTrustedAppsSummaryResponse]: string }> = {
+  windows: i18n.translate(
+    'xpack.securitySolution.endpoint.fleetCustomExtension.trustedAppItemsSummary.windows',
+    { defaultMessage: 'Windows' }
+  ),
+  linux: i18n.translate(
+    'xpack.securitySolution.endpoint.fleetCustomExtension.trustedAppItemsSummary.linux',
+    { defaultMessage: 'Linux' }
+  ),
+  macos: i18n.translate(
+    'xpack.securitySolution.endpoint.fleetCustomExtension.trustedAppItemsSummary.macos',
+    { defaultMessage: 'Mac' }
+  ),
+  total: i18n.translate(
+    'xpack.securitySolution.endpoint.fleetCustomExtension.trustedAppItemsSummary.total',
+    { defaultMessage: 'Total' }
+  ),
+};
+
+const CSS_BOLD: Readonly<React.CSSProperties> = { fontWeight: 'bold' };
 
 export const TrustedAppItemsSummary = memo(() => {
   const {
     services: { http },
   } = useKibana<CoreStart>();
-  const [total, setTotal] = useState<number>(0);
+  const [stats, setStats] = useState<GetTrustedAppsSummaryResponse | undefined>();
   const [trustedAppsApi] = useState(() => new TrustedAppsHttpService(http));
 
   useEffect(() => {
-    trustedAppsApi
-      .getTrustedAppsList({
-        page: 1,
-        per_page: 1,
-      })
-      .then((response) => {
-        setTotal(response.total);
-      });
+    trustedAppsApi.getTrustedAppsSummary().then((response) => {
+      setStats(response);
+    });
   }, [trustedAppsApi]);
 
   return (
-    <div>
-      <SummaryStat value={total} color="primary">
-        <FormattedMessage
-          id="xpack.securitySolution.endpoint.fleetCustomExtension.trustedAppItemsSummary.totalLabel"
-          defaultMessage="Total"
-        />
-      </SummaryStat>
-    </div>
+    <EuiFlexGroup responsive={false}>
+      {SUMMARY_KEYS.map((stat) => {
+        return (
+          <EuiFlexItem>
+            <SummaryStat
+              value={stats?.[stat] ?? 0}
+              color={stat === 'total' ? 'primary' : 'default'}
+              key={stat}
+            >
+              {SUMMARY_LABELS[stat]}
+            </SummaryStat>
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
   );
 });
 
@@ -53,7 +84,7 @@ const SummaryStat: FC<{ value: number; color?: EuiBadgeProps['color'] }> = memo(
           direction="row"
           alignItems="center"
         >
-          <EuiFlexItem grow={false} style={{ fontWeight: 'bold' }}>
+          <EuiFlexItem grow={false} style={color === 'primary' ? CSS_BOLD : undefined}>
             {children}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts
@@ -10,6 +10,7 @@ import {
   TRUSTED_APPS_CREATE_API,
   TRUSTED_APPS_DELETE_API,
   TRUSTED_APPS_LIST_API,
+  TRUSTED_APPS_SUMMARY_API,
 } from '../../../../../common/endpoint/constants';
 
 import {
@@ -18,6 +19,7 @@ import {
   GetTrustedAppsListRequest,
   PostTrustedAppCreateRequest,
   PostTrustedAppCreateResponse,
+  GetTrustedAppsSummaryResponse,
 } from '../../../../../common/endpoint/types/trusted_apps';
 
 import { resolvePathVariables } from './utils';
@@ -46,4 +48,8 @@ export class TrustedAppsHttpService implements TrustedAppsService {
       body: JSON.stringify(request),
     });
   }
+
+  async getTrustedAppsSummary() {
+    return this.http.get<GetTrustedAppsSummaryResponse>(TRUSTED_APPS_SUMMARY_API);
+  }
 }