[Security Solution] expandable flyout - small hosts and users details…

… UI updates (elastic#163957)
hop-dev · Aug 16, 2023 · 77a33cf · 77a33cf
1 parent 8d23926
commit 77a33cf
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 80 deletions.
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/host_details.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/host_details.tsx
@@ -12,12 +12,12 @@ import {
   EuiTitle,
   EuiSpacer,
   EuiInMemoryTable,
-  EuiHorizontalRule,
   EuiText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiToolTip,
   EuiIcon,
+  EuiPanel,
 } from '@elastic/eui';
 import type { EuiBasicTableColumn } from '@elastic/eui';
 import { ExpandablePanel } from '../../shared/components/expandable_panel';
@@ -207,7 +207,7 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp })
   return (
     <>
       <EuiTitle size="xs">
-        <h4>{i18n.HOSTS_TITLE}</h4>
+        <h4>{i18n.HOST_TITLE}</h4>
       </EuiTitle>
       <EuiSpacer size="s" />
       <ExpandablePanel
@@ -250,41 +250,43 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp })
             />
           )}
         </AnomalyTableProvider>
-        <EuiHorizontalRule margin="m" />
-        <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xxs">
-              <h5>{i18n.RELATED_USERS_TITLE}</h5>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiToolTip content={i18n.RELATED_USERS_TOOL_TIP}>
-              <EuiIcon color="subdued" type="iInCircle" className="eui-alignTop" />
-            </EuiToolTip>
-          </EuiFlexItem>
-        </EuiFlexGroup>
         <EuiSpacer size="s" />
-        <RelatedUsersManage
-          id={relatedUsersQueryId}
-          inspect={inspectRelatedUsers}
-          loading={isRelatedUsersLoading}
-          setQuery={setQuery}
-          deleteQuery={deleteQuery}
-          refetch={refetchRelatedUsers}
-        >
-          <EuiInMemoryTable
-            columns={relatedUsersColumns}
-            items={relatedUsers}
+        <EuiPanel hasBorder={true}>
+          <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xxs">
+                <h5>{i18n.RELATED_USERS_TITLE}</h5>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiToolTip content={i18n.RELATED_USERS_TOOL_TIP}>
+                <EuiIcon color="subdued" type="iInCircle" className="eui-alignTop" />
+              </EuiToolTip>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          <RelatedUsersManage
+            id={relatedUsersQueryId}
+            inspect={inspectRelatedUsers}
             loading={isRelatedUsersLoading}
-            data-test-subj={HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID}
-            pagination={pagination}
-          />
-          <InspectButton
-            queryId={relatedUsersQueryId}
-            title={i18n.RELATED_USERS_TITLE}
-            inspectIndex={0}
-          />
-        </RelatedUsersManage>
+            setQuery={setQuery}
+            deleteQuery={deleteQuery}
+            refetch={refetchRelatedUsers}
+          >
+            <EuiInMemoryTable
+              columns={relatedUsersColumns}
+              items={relatedUsers}
+              loading={isRelatedUsersLoading}
+              data-test-subj={HOST_DETAILS_RELATED_USERS_TABLE_TEST_ID}
+              pagination={pagination}
+            />
+            <InspectButton
+              queryId={relatedUsersQueryId}
+              title={i18n.RELATED_USERS_TITLE}
+              inspectIndex={0}
+            />
+          </RelatedUsersManage>
+        </EuiPanel>
       </ExpandablePanel>
     </>
   );

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/translations.ts b/x-pack/plugins/security_solution/public/flyout/left/components/translations.ts
@@ -21,8 +21,8 @@ export const SESSION_VIEW_ERROR_MESSAGE = i18n.translate(
   }
 );
 
-export const USERS_TITLE = i18n.translate('xpack.securitySolution.flyout.entities.usersTitle', {
-  defaultMessage: 'Users',
+export const USER_TITLE = i18n.translate('xpack.securitySolution.flyout.entities.userTitle', {
+  defaultMessage: 'User',
 });
 
 export const USERS_INFO_TITLE = i18n.translate(
@@ -60,8 +60,8 @@ export const RELATED_ENTITIES_IP_COLUMN_TITLE = i18n.translate(
   }
 );
 
-export const HOSTS_TITLE = i18n.translate('xpack.securitySolution.flyout.entities.hostsTitle', {
-  defaultMessage: 'Hosts',
+export const HOST_TITLE = i18n.translate('xpack.securitySolution.flyout.entities.hostTitle', {
+  defaultMessage: 'Host',
 });
 
 export const HOSTS_INFO_TITLE = i18n.translate(

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/user_details.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/user_details.tsx
@@ -12,12 +12,12 @@ import {
   EuiTitle,
   EuiSpacer,
   EuiInMemoryTable,
-  EuiHorizontalRule,
   EuiText,
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiToolTip,
+  EuiPanel,
 } from '@elastic/eui';
 import type { EuiBasicTableColumn } from '@elastic/eui';
 import { ExpandablePanel } from '../../shared/components/expandable_panel';
@@ -208,7 +208,7 @@ export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp })
   return (
     <>
       <EuiTitle size="xs">
-        <h4>{i18n.USERS_TITLE}</h4>
+        <h4>{i18n.USER_TITLE}</h4>
       </EuiTitle>
       <EuiSpacer size="s" />
       <ExpandablePanel
@@ -253,41 +253,43 @@ export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp })
             />
           )}
         </AnomalyTableProvider>
-        <EuiHorizontalRule margin="m" />
-        <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xxs">
-              <h5>{i18n.RELATED_HOSTS_TITLE}</h5>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiToolTip content={i18n.RELATED_HOSTS_TOOL_TIP}>
-              <EuiIcon color="subdued" type="iInCircle" className="eui-alignTop" />
-            </EuiToolTip>
-          </EuiFlexItem>
-        </EuiFlexGroup>
         <EuiSpacer size="s" />
-        <RelatedHostsManage
-          id={relatedHostsQueryId}
-          inspect={inspectRelatedHosts}
-          loading={isRelatedHostLoading}
-          setQuery={setQuery}
-          deleteQuery={deleteQuery}
-          refetch={refetchRelatedHosts}
-        >
-          <EuiInMemoryTable
-            columns={relatedHostsColumns}
-            items={relatedHosts}
+        <EuiPanel hasBorder={true}>
+          <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xxs">
+                <h5>{i18n.RELATED_HOSTS_TITLE}</h5>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiToolTip content={i18n.RELATED_HOSTS_TOOL_TIP}>
+                <EuiIcon color="subdued" type="iInCircle" className="eui-alignTop" />
+              </EuiToolTip>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          <RelatedHostsManage
+            id={relatedHostsQueryId}
+            inspect={inspectRelatedHosts}
             loading={isRelatedHostLoading}
-            data-test-subj={USER_DETAILS_RELATED_HOSTS_TABLE_TEST_ID}
-            pagination={pagination}
-          />
-          <InspectButton
-            queryId={relatedHostsQueryId}
-            title={i18n.RELATED_HOSTS_TITLE}
-            inspectIndex={0}
-          />
-        </RelatedHostsManage>
+            setQuery={setQuery}
+            deleteQuery={deleteQuery}
+            refetch={refetchRelatedHosts}
+          >
+            <EuiInMemoryTable
+              columns={relatedHostsColumns}
+              items={relatedHosts}
+              loading={isRelatedHostLoading}
+              data-test-subj={USER_DETAILS_RELATED_HOSTS_TABLE_TEST_ID}
+              pagination={pagination}
+            />
+            <InspectButton
+              queryId={relatedHostsQueryId}
+              title={i18n.RELATED_HOSTS_TITLE}
+              inspectIndex={0}
+            />
+          </RelatedHostsManage>
+        </EuiPanel>
       </ExpandablePanel>
     </>
   );

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -33363,15 +33363,13 @@
     "xpack.securitySolution.flyout.entities.failRelatedHostsDescription": "Impossible de lancer la recherche sur les hôtes associés",
     "xpack.securitySolution.flyout.entities.failRelatedUsersDescription": "Impossible de lancer la recherche sur les utilisateurs associés",
     "xpack.securitySolution.flyout.entities.hostsInfoTitle": "Informations sur l’hôte",
-    "xpack.securitySolution.flyout.entities.hostsTitle": "Hôtes",
     "xpack.securitySolution.flyout.entities.relatedEntitiesIpColumn": "Adresses IP",
     "xpack.securitySolution.flyout.entities.relatedEntitiesNameColumn": "Nom",
     "xpack.securitySolution.flyout.entities.relatedHostsTitle": "Hôtes associés",
     "xpack.securitySolution.flyout.entities.relatedHostsToolTip": "L’utilisateur a été authentifié avec succès sur ces hôtes après l’alerte.",
     "xpack.securitySolution.flyout.entities.relatedUsersTitle": "Utilisateurs associés",
     "xpack.securitySolution.flyout.entities.relatedUsersToolTip": "Ces utilisateurs ont été authentifiés avec succès sur l’hôte concerné après l’alerte.",
     "xpack.securitySolution.flyout.entities.usersInfoTitle": "Informations sur l’utilisateur",
-    "xpack.securitySolution.flyout.entities.usersTitle": "Utilisateurs",
     "xpack.securitySolution.flyout.prevalenceErrorMessage": "prévalence",
     "xpack.securitySolution.flyout.prevalenceTableAlertCountColumnTitle": "Nombre d'alertes",
     "xpack.securitySolution.flyout.prevalenceTableDocCountColumnTitle": "Compte du document",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -33362,15 +33362,13 @@
     "xpack.securitySolution.flyout.entities.failRelatedHostsDescription": "関連するホストで検索を実行できませんでした",
     "xpack.securitySolution.flyout.entities.failRelatedUsersDescription": "関連するユーザーで検索を実行できませんでした",
     "xpack.securitySolution.flyout.entities.hostsInfoTitle": "ホスト情報",
-    "xpack.securitySolution.flyout.entities.hostsTitle": "ホスト",
     "xpack.securitySolution.flyout.entities.relatedEntitiesIpColumn": "IPアドレス",
     "xpack.securitySolution.flyout.entities.relatedEntitiesNameColumn": "名前",
     "xpack.securitySolution.flyout.entities.relatedHostsTitle": "関連するホスト",
     "xpack.securitySolution.flyout.entities.relatedHostsToolTip": "アラート後、ユーザーはこれらのホストへの認証に成功しました。",
     "xpack.securitySolution.flyout.entities.relatedUsersTitle": "関連するユーザー",
     "xpack.securitySolution.flyout.entities.relatedUsersToolTip": "アラート後、ユーザーは影響を受けるホストへの認証に成功しました。",
     "xpack.securitySolution.flyout.entities.usersInfoTitle": "ユーザー情報",
-    "xpack.securitySolution.flyout.entities.usersTitle": "ユーザー",
     "xpack.securitySolution.flyout.prevalenceErrorMessage": "発生率",
     "xpack.securitySolution.flyout.prevalenceTableAlertCountColumnTitle": "アラート件数",
     "xpack.securitySolution.flyout.prevalenceTableDocCountColumnTitle": "ドキュメントカウント",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -33358,15 +33358,13 @@
     "xpack.securitySolution.flyout.entities.failRelatedHostsDescription": "无法对相关主机执行搜索",
     "xpack.securitySolution.flyout.entities.failRelatedUsersDescription": "无法对相关用户执行搜索",
     "xpack.securitySolution.flyout.entities.hostsInfoTitle": "主机信息",
-    "xpack.securitySolution.flyout.entities.hostsTitle": "主机",
     "xpack.securitySolution.flyout.entities.relatedEntitiesIpColumn": "IP 地址",
     "xpack.securitySolution.flyout.entities.relatedEntitiesNameColumn": "名称",
     "xpack.securitySolution.flyout.entities.relatedHostsTitle": "相关主机",
     "xpack.securitySolution.flyout.entities.relatedHostsToolTip": "告警后，用户已成功通过这些主机的身份验证。",
     "xpack.securitySolution.flyout.entities.relatedUsersTitle": "相关用户",
     "xpack.securitySolution.flyout.entities.relatedUsersToolTip": "告警后，这些用户已成功通过受影响主机的身份验证。",
     "xpack.securitySolution.flyout.entities.usersInfoTitle": "用户信息",
-    "xpack.securitySolution.flyout.entities.usersTitle": "用户",
     "xpack.securitySolution.flyout.prevalenceErrorMessage": "普及率",
     "xpack.securitySolution.flyout.prevalenceTableAlertCountColumnTitle": "告警计数",
     "xpack.securitySolution.flyout.prevalenceTableDocCountColumnTitle": "文档计数",