[SECURITY SOLUTION] Task/endpoint details to fleet (#68710)

[SECURITYSOLUTION][INGEST] Fixes endpoint link, adds link from endpoint details to fleet Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jun 15, 2020 · 52c8e96 · 52c8e96
1 parent eef8dc7
commit 52c8e96
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 28 deletions.
diff --git a/...ns/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx b/...ns/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx
@@ -12,12 +12,14 @@ import {
  EuiLink,
  EuiListGroup,
  EuiListGroupItem,
+ EuiIcon,
+ EuiText,
 } from '@elastic/eui';
 import React, { memo, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { HostMetadata } from '../../../../../../common/endpoint/types';
-import { useHostSelector, useHostLogsUrl } from '../hooks';
+import { useHostSelector, useHostLogsUrl, useHostIngestUrl } from '../hooks';
 import { policyResponseStatus, uiQueryParams } from '../../store/selectors';
 import { POLICY_STATUS_TO_HEALTH_COLOR } from '../host_constants';
 import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time';
@@ -32,8 +34,19 @@ const HostIds = styled(EuiListGroupItem)`
  }
 `;
 
+const LinkToExternalApp = styled.div`
+ margin-top: ${(props) => props.theme.eui.ruleMargins.marginMedium};
+ .linkToAppIcon {
+ margin-right: ${(props) => props.theme.eui.ruleMargins.marginXSmall};
+ }
+ .linkToAppPopoutIcon {
+ margin-left: ${(props) => props.theme.eui.ruleMargins.marginXSmall};
+ }
+`;
+
 export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
- const { appId, appPath, url } = useHostLogsUrl(details.host.id);
+ const { url: logsUrl, appId: logsAppId, appPath: logsAppPath } = useHostLogsUrl(details.host.id);
+ const { url: ingestUrl, appId: ingestAppId, appPath: ingestAppPath } = useHostIngestUrl();
  const queryParams = useHostSelector(uiQueryParams);
  const policyStatus = useHostSelector(
  policyResponseStatus
@@ -80,7 +93,7 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
 
  const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseRoutePath);
 
- const detailsResultsLower = useMemo(() => {
+ const detailsResultsPolicy = useMemo(() => {
  return [
  {
  title: i18n.translate('xpack.securitySolution.endpoint.host.details.policy', {
@@ -103,15 +116,21 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
  href={policyResponseUri}
  onClick={policyStatusClickHandler}
  >
- <FormattedMessage
- id="xpack.securitySolution.endpoint.host.details.policyStatusValue"
- defaultMessage="{policyStatus, select, success {Success} warning {Warning} failure {Failed} other {Unknown}}"
- values={{ policyStatus }}
- />
+ <EuiText size="m">
+ <FormattedMessage
+ id="xpack.securitySolution.endpoint.host.details.policyStatusValue"
+ defaultMessage="{policyStatus, select, success {Success} warning {Warning} failure {Failed} other {Unknown}}"
+ values={{ policyStatus }}
+ />
+ </EuiText>
  </EuiLink>
  </EuiHealth>
  ),
  },
+ ];
+ }, [details, policyResponseUri, policyStatus, policyStatusClickHandler]);
+ const detailsResultsLower = useMemo(() => {
+ return [
  {
  title: i18n.translate('xpack.securitySolution.endpoint.host.details.ipAddress', {
  defaultMessage: 'IP Address',
@@ -137,15 +156,8 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
  description: details.agent.version,
  },
  ];
- }, [
- details.agent.version,
- details.endpoint.policy.applied.id,
- details.host.hostname,
- details.host.ip,
- policyStatus,
- policyResponseUri,
- policyStatusClickHandler,
- ]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [details.agent.version, details.host.hostname, details.host.ip]);
 
  return (
  <>
@@ -154,26 +166,49 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
  listItems={detailsResultsUpper}
  data-test-subj="hostDetailsUpperList"
  />
- <EuiHorizontalRule margin="s" />
+ <EuiHorizontalRule margin="m" />
+ <EuiDescriptionList
+ type="column"
+ listItems={detailsResultsPolicy}
+ data-test-subj="hostDetailsPolicyList"
+ />
+ <LinkToExternalApp>
+ <LinkToApp
+ appId={ingestAppId}
+ appPath={ingestAppPath}
+ href={ingestUrl}
+ data-test-subj="hostDetailsLinkToIngest"
+ >
+ <EuiIcon type="savedObjectsApp" className="linkToAppIcon" />
+ <FormattedMessage
+ id="xpack.securitySolution.endpoint.host.details.linkToIngestTitle"
+ defaultMessage="Reassign Policy"
+ />
+ <EuiIcon type="popout" className="linkToAppPopoutIcon" />
+ </LinkToApp>
+ </LinkToExternalApp>
+ <EuiHorizontalRule margin="m" />
  <EuiDescriptionList
  type="column"
  listItems={detailsResultsLower}
  data-test-subj="hostDetailsLowerList"
  />
- <EuiHorizontalRule margin="s" />
- <p>
+ <EuiHorizontalRule margin="m" />
+ <LinkToExternalApp>
  <LinkToApp
- appId={appId}
- appPath={appPath}
- href={url}
+ appId={logsAppId}
+ appPath={logsAppPath}
+ href={logsUrl}
  data-test-subj="hostDetailsLinkToLogs"
  >
+ <EuiIcon type="logsApp" className="linkToAppIcon" />
  <FormattedMessage
  id="xpack.securitySolution.endpoint.host.details.linkToLogsTitle"
  defaultMessage="Endpoint Logs"
  />
+ <EuiIcon type="popout" className="linkToAppPopoutIcon" />
  </LinkToApp>
- </p>
+ </LinkToExternalApp>
  </>
  );
 });

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts
@@ -6,14 +6,13 @@
 
 import { useSelector } from 'react-redux';
 import { useMemo } from 'react';
+import { useKibana } from '../../../../common/lib/kibana';
 import { HostState } from '../types';
 import {
  MANAGEMENT_STORE_ENDPOINTS_NAMESPACE,
  MANAGEMENT_STORE_GLOBAL_NAMESPACE,
 } from '../../../common/constants';
-import { useKibana } from '../../../../common/lib/kibana';
 import { State } from '../../../../common/store';
-
 export function useHostSelector<TSelected>(selector: (state: HostState) => TSelected) {
  return useSelector(function (state: State) {
  return selector(
@@ -37,3 +36,18 @@ export const useHostLogsUrl = (hostId: string): { url: string; appId: string; ap
  };
  }, [hostId, services.application]);
 };
+
+/**
+ * Returns an object that contains Ingest app and URL information
+ */
+export const useHostIngestUrl = (): { url: string; appId: string; appPath: string } => {
+ const { services } = useKibana();
+ return useMemo(() => {
+ const appPath = `#/fleet`;
+ return {
+ url: `${services.application.getUrlForApp('ingestManager')}${appPath}`,
+ appId: 'ingestManager',
+ appPath,
+ };
+ }, [services.application]);
+};
diff --git a/...n/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx b/...n/public/management/pages/policy/view/ingest_manager_integration/configure_datasource.tsx
@@ -37,9 +37,9 @@ export const ConfigureEndpointDatasource = memo<CustomConfigureDatasourceContent
  <p>
  {from === 'edit' ? (
  <LinkToApp
- appId="siem"
+ appId="securitySolution"
  appPath={policyUrl}
- href={`${services.application.getUrlForApp('siem')}${policyUrl}`}
+ href={`${services.application.getUrlForApp('securitySolution')}${policyUrl}`}
  >
  <FormattedMessage
  id="xpack.securitySolution.endpoint.ingestManager.editDatasource.stepConfigure"