forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EDR Workflows] Endpoint Insights UI - Connector selection (elastic#2…
…01109)  This is the first part of the UI changes related to [the epic](elastic/security-team#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 <[email protected]>
- Loading branch information
1 parent
9ef127f
commit 2890570
Showing
7 changed files
with
270 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
...ic/management/pages/endpoint_hosts/view/details/components/insights/workflow_insights.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" /> | ||
| </> | ||
| ); | ||
| }; |
79 changes: 79 additions & 0 deletions
79
...ement/pages/endpoint_hosts/view/details/components/insights/workflow_insights_results.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
99 changes: 99 additions & 0 deletions
99
...nagement/pages/endpoint_hosts/view/details/components/insights/workflow_insights_scan.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters