From b70287dad89eb4c92bfc2701c1af132657b84a77 Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Wed, 16 Dec 2020 10:49:25 -0500
Subject: [PATCH] [SECURITY_SOLUTION][ENDPOINT] Show Trusted Apps summary stats
 on Custom tab under fleet integrations (#86018) (#86043)

* show trusted app summary

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../components/trusted_app_items_summary.tsx  | 69 ++++++++++++++-----
 .../pages/trusted_apps/service/index.ts       |  6 ++
 2 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/trusted_app_items_summary.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/trusted_app_items_summary.tsx
index f0d3b51d20d67..97e1ee5fd3ee6 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/trusted_app_items_summary.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_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
index 4fb1e1b4575c8..d3a0bcd94a553 100644
--- 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);
+  }
 }