mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[EDR Workflows] Endpoint Insights UI - Connector selection (#201109)
 This is the first part of the UI changes related to [the epic](https://github.com/elastic/security-team/issues/10730). This PR introduces a new “Issues” section on the endpoint details flyout and focuses specifically on the “Scan” subsection. The “Scan” subsection focuses on connector selection and adding new connectors. A stub for the results has been added, but implementing the results is out of scope for the ticket addressed in this PR. Testing should be covered in the follow up PR's. https://github.com/user-attachments/assets/400a71e2-8a39-4916-b539-6f1bf3293cbf --------- Co-authored-by: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>
This commit is contained in:
Konrad Szwarc
GitHub
parent
9ef127f99d
commit
28905708d4
7 changed files with 270 additions and 2 deletions
|
|
@ -8,6 +8,7 @@
|
|||
import { KnowledgeBaseConfig } from '../assistant/types';
|
||||
|
||||
export const ATTACK_DISCOVERY_STORAGE_KEY = 'attackDiscovery';
|
||||
export const DEFEND_INSIGHTS_STORAGE_KEY = 'defendInsights';
|
||||
export const DEFAULT_ASSISTANT_NAMESPACE = 'elasticAssistantDefault';
|
||||
export const LAST_CONVERSATION_ID_LOCAL_STORAGE_KEY = 'lastConversationId';
|
||||
export const MAX_ALERTS_LOCAL_STORAGE_KEY = 'maxAlerts';
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ export {
|
|||
/** The default maximum number of alerts to be sent as context when generating Attack discoveries */
|
||||
DEFAULT_ATTACK_DISCOVERY_MAX_ALERTS,
|
||||
DEFAULT_LATEST_ALERTS,
|
||||
DEFEND_INSIGHTS_STORAGE_KEY,
|
||||
KNOWLEDGE_BASE_LOCAL_STORAGE_KEY,
|
||||
/** The local storage key that specifies the maximum number of alerts to send as context */
|
||||
MAX_ALERTS_LOCAL_STORAGE_KEY,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiHorizontalRule, EuiAccordion, EuiSpacer, EuiText } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { WorkflowInsightsResults } from './workflow_insights_results';
|
||||
import { WorkflowInsightsScanSection } from './workflow_insights_scan';
|
||||
import { useIsExperimentalFeatureEnabled } from '../../../../../../../common/hooks/use_experimental_features';
|
||||
import { WORKFLOW_INSIGHTS } from '../../../translations';
|
||||
|
||||
export const WorkflowInsights = () => {
|
||||
const isWorkflowInsightsEnabled = useIsExperimentalFeatureEnabled('defendInsights');
|
||||
|
||||
if (!isWorkflowInsightsEnabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const results = null;
|
||||
|
||||
const renderLastResultsCaption = () => {
|
||||
if (!results) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<EuiText color={'subdued'} size={'xs'}>
|
||||
{WORKFLOW_INSIGHTS.titleRight}
|
||||
</EuiText>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiAccordion
|
||||
id={'workflow-insights-wrapper'}
|
||||
buttonContent={
|
||||
<EuiText size={'m'}>
|
||||
<h4>{WORKFLOW_INSIGHTS.title}</h4>
|
||||
</EuiText>
|
||||
}
|
||||
initialIsOpen
|
||||
extraAction={renderLastResultsCaption()}
|
||||
paddingSize={'none'}
|
||||
>
|
||||
<EuiSpacer size={'m'} />
|
||||
<WorkflowInsightsScanSection />
|
||||
<EuiSpacer size={'m'} />
|
||||
<WorkflowInsightsResults results={true} />
|
||||
<EuiHorizontalRule />
|
||||
</EuiAccordion>
|
||||
<EuiSpacer size="l" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
EuiButtonIcon,
|
||||
EuiCallOut,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiIcon,
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { WORKFLOW_INSIGHTS } from '../../../translations';
|
||||
|
||||
interface WorkflowInsightsResultsProps {
|
||||
results: boolean;
|
||||
}
|
||||
|
||||
const CustomEuiCallOut = styled(EuiCallOut)`
|
||||
& .euiButtonIcon {
|
||||
margin-top: 5px; /* Lower the close button */
|
||||
}
|
||||
`;
|
||||
|
||||
export const WorkflowInsightsResults = ({ results }: WorkflowInsightsResultsProps) => {
|
||||
const [showEmptyResultsCallout, setShowEmptyResultsCallout] = useState(true);
|
||||
const hideEmptyStateCallout = () => setShowEmptyResultsCallout(false);
|
||||
if (!results) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiText size={'s'}>
|
||||
<h4>{WORKFLOW_INSIGHTS.issues.title}</h4>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiPanel paddingSize="m" hasShadow={false} hasBorder>
|
||||
<EuiFlexGroup alignItems={'center'} gutterSize={'m'}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon type="warning" size="l" color="warning" />
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem>
|
||||
<EuiText size="s">
|
||||
<EuiText size={'s'}>
|
||||
<strong>{'McAfee EndpointSecurity'}</strong>
|
||||
</EuiText>
|
||||
<EuiText size={'s'} color={'subdued'}>
|
||||
{'Add McAfee as a trusted application'}
|
||||
</EuiText>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false} style={{ marginLeft: 'auto' }}>
|
||||
<EuiButtonIcon
|
||||
iconType="popout"
|
||||
aria-label="External link"
|
||||
href="https://google.com"
|
||||
target="_blank"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
{showEmptyResultsCallout && (
|
||||
<CustomEuiCallOut onDismiss={hideEmptyStateCallout} color={'success'}>
|
||||
{WORKFLOW_INSIGHTS.issues.emptyResults}
|
||||
</CustomEuiCallOut>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
|
||||
import {
|
||||
AssistantAvatar,
|
||||
DEFEND_INSIGHTS_STORAGE_KEY,
|
||||
ConnectorSelectorInline,
|
||||
DEFAULT_ASSISTANT_NAMESPACE,
|
||||
useLoadConnectors,
|
||||
} from '@kbn/elastic-assistant';
|
||||
import { noop } from 'lodash/fp';
|
||||
import useLocalStorage from 'react-use/lib/useLocalStorage';
|
||||
import { some } from 'lodash';
|
||||
import { useSpaceId } from '../../../../../../../common/hooks/use_space_id';
|
||||
import { WORKFLOW_INSIGHTS } from '../../../translations';
|
||||
import { useKibana } from '../../../../../../../common/lib/kibana';
|
||||
|
||||
export const WorkflowInsightsScanSection = () => {
|
||||
const CONNECTOR_ID_LOCAL_STORAGE_KEY = 'connectorId';
|
||||
|
||||
const spaceId = useSpaceId() ?? 'default';
|
||||
const { http } = useKibana().services;
|
||||
const { data: aiConnectors } = useLoadConnectors({
|
||||
http,
|
||||
});
|
||||
|
||||
// Store the selected connector id in local storage so that it persists across page reloads
|
||||
const [localStorageWorkflowInsightsConnectorId, setLocalStorageWorkflowInsightsConnectorId] =
|
||||
useLocalStorage<string>(
|
||||
`${DEFAULT_ASSISTANT_NAMESPACE}.${DEFEND_INSIGHTS_STORAGE_KEY}.${spaceId}.${CONNECTOR_ID_LOCAL_STORAGE_KEY}`
|
||||
);
|
||||
|
||||
const [connectorId, setConnectorId] = React.useState<string | undefined>(
|
||||
localStorageWorkflowInsightsConnectorId
|
||||
);
|
||||
|
||||
const onConnectorIdSelected = useCallback(
|
||||
(selectedConnectorId: string) => {
|
||||
setConnectorId(selectedConnectorId);
|
||||
setLocalStorageWorkflowInsightsConnectorId(selectedConnectorId);
|
||||
},
|
||||
[setLocalStorageWorkflowInsightsConnectorId]
|
||||
);
|
||||
|
||||
// Check if the selected connector exists in the list of connectors, i.e. it is not deleted
|
||||
const connectorExists = useMemo(
|
||||
() => some(aiConnectors, ['id', connectorId]),
|
||||
[aiConnectors, connectorId]
|
||||
);
|
||||
|
||||
// Render the scan button only if a connector is selected
|
||||
const renderScanButton = useMemo(() => {
|
||||
if (!connectorExists) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton size="s">{WORKFLOW_INSIGHTS.scan.button}</EuiButton>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
}, [connectorExists]);
|
||||
|
||||
return (
|
||||
<EuiPanel paddingSize="m" hasShadow={false} hasBorder>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="m">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<AssistantAvatar size={'xs'} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText size="s">
|
||||
<h4>{WORKFLOW_INSIGHTS.scan.title}</h4>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<ConnectorSelectorInline
|
||||
onConnectorSelected={noop}
|
||||
onConnectorIdSelected={onConnectorIdSelected}
|
||||
selectedConnectorId={connectorId}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
{renderScanButton}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
);
|
||||
};
|
||||
|
|
@ -11,11 +11,11 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiHealth,
|
||||
EuiLink,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { WorkflowInsights } from './components/insights/workflow_insights';
|
||||
import { isPolicyOutOfDate } from '../../utils';
|
||||
import { AgentStatus } from '../../../../../common/components/endpoint/agents/agent_status';
|
||||
import type { HostInfo } from '../../../../../../common/endpoint/types';
|
||||
|
|
@ -184,7 +184,7 @@ export const EndpointDetailsContent = memo<EndpointDetailsContentProps>(
|
|||
|
||||
return (
|
||||
<div>
|
||||
<EuiSpacer size="s" />
|
||||
<WorkflowInsights />
|
||||
<EuiDescriptionList
|
||||
columnWidths={[1, 3]}
|
||||
compressed
|
||||
|
|
|
|||
|
|
@ -11,6 +11,37 @@ export const OVERVIEW = i18n.translate('xpack.securitySolution.endpointDetails.o
|
|||
defaultMessage: 'Overview',
|
||||
});
|
||||
|
||||
export const WORKFLOW_INSIGHTS = {
|
||||
title: i18n.translate('xpack.securitySolution.endpointDetails.workflowInsights.sectionTitle', {
|
||||
defaultMessage: 'Issues',
|
||||
}),
|
||||
titleRight: i18n.translate(
|
||||
'xpack.securitySolution.endpointDetails.workflowInsights.extraAction',
|
||||
{
|
||||
defaultMessage: 'Last scans: ',
|
||||
}
|
||||
),
|
||||
scan: {
|
||||
title: i18n.translate('xpack.securitySolution.endpointDetails.workflowInsights.scan.title', {
|
||||
defaultMessage: 'AI-Powered issue scan',
|
||||
}),
|
||||
button: i18n.translate('xpack.securitySolution.endpointDetails.workflowInsights.scan.button', {
|
||||
defaultMessage: 'Scan',
|
||||
}),
|
||||
},
|
||||
issues: {
|
||||
title: i18n.translate('xpack.securitySolution.endpointDetails.workflowInsights.issues.title', {
|
||||
defaultMessage: 'Issues',
|
||||
}),
|
||||
emptyResults: i18n.translate(
|
||||
'xpack.securitySolution.endpointDetails.workflowInsights.issues.emptyResults',
|
||||
{
|
||||
defaultMessage: 'No issues had been found',
|
||||
}
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const ACTIVITY_LOG = {
|
||||
tabTitle: i18n.translate('xpack.securitySolution.endpointDetails.responseActionsHistory', {
|
||||
defaultMessage: 'Response actions history',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue