Skip to content

Commit

Permalink
Revert "Switch to panels"
Browse files Browse the repository at this point in the history 
This reverts commit 23bb0c7.
  • Loading branch information
@cnasikas
cnasikas committed Dec 5, 2020
1 parent 818fd53 commit 241765d
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 70 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/cypress/screens/alerts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

export const ADD_EXCEPTION_BTN = '[data-test-subj="add-exception-menu-item"]';
export const ADD_EXCEPTION_BTN = '[data-test-subj="addExceptionButton"]';

export const ALERTS = '[data-test-subj="event"]';

Expand Down
150 changes: 81 additions & 69 deletions ...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@

import React, { useCallback, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import { EuiText, EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
import {
EuiText,
EuiButtonIcon,
EuiContextMenuPanel,
EuiPopover,
EuiContextMenuItem,
} from '@elastic/eui';
import styled from 'styled-components';
import { getOr } from 'lodash/fp';

Expand Down Expand Up @@ -202,16 +208,18 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setEventsLoading,
]);

const openAlertActionPanelItem = useMemo(
() => ({
name: <EuiText size="m">{i18n.ACTION_OPEN_ALERT}</EuiText>,
key: 'open-alert',
'aria-label': 'Open alert',
'data-test-subj': 'open-alert-status',
onClick: openAlertActionOnClick,
disabled: !canUserCRUD || !hasIndexWrite,
}),
[canUserCRUD, hasIndexWrite, openAlertActionOnClick]
// eslint-disable-next-line react-hooks/exhaustive-deps
const openAlertActionComponent = (
<EuiContextMenuItem
key="open-alert"
aria-label="Open alert"
data-test-subj="open-alert-status"
id={FILTER_OPEN}
onClick={openAlertActionOnClick}
disabled={!canUserCRUD || !hasIndexWrite}
>
<EuiText size="m">{i18n.ACTION_OPEN_ALERT}</EuiText>
</EuiContextMenuItem>
);

const closeAlertActionClick = useCallback(() => {
Expand All @@ -233,16 +241,18 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setEventsLoading,
]);

const closeAlertActionPanelItem = useMemo(
() => ({
name: <EuiText size="m">{i18n.ACTION_CLOSE_ALERT}</EuiText>,
key: 'close-alert',
'aria-label': 'Close alert',
'data-test-subj': 'close-alert-status',
onClick: closeAlertActionClick,
disabled: !canUserCRUD || !hasIndexWrite,
}),
[canUserCRUD, closeAlertActionClick, hasIndexWrite]
// eslint-disable-next-line react-hooks/exhaustive-deps
const closeAlertActionComponent = (
<EuiContextMenuItem
key="close-alert"
aria-label="Close alert"
data-test-subj="close-alert-status"
id={FILTER_CLOSED}
onClick={closeAlertActionClick}
disabled={!canUserCRUD || !hasIndexWrite}
>
<EuiText size="m">{i18n.ACTION_CLOSE_ALERT}</EuiText>
</EuiContextMenuItem>
);

const inProgressAlertActionClick = useCallback(() => {
Expand All @@ -264,17 +274,18 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setEventsLoading,
]);

const inProgressAlertActionPanelItem = useMemo(
() => ({
name: <EuiText size="m">{i18n.ACTION_IN_PROGRESS_ALERT}</EuiText>,
key: 'in-progress-alert',
'aria-label': 'Mark alert in progress',
'data-test-subj': 'in-progress-alert-status',
id: FILTER_IN_PROGRESS,
onClick: inProgressAlertActionClick,
disabled: !canUserCRUD || !hasIndexWrite,
}),
[canUserCRUD, hasIndexWrite, inProgressAlertActionClick]
// eslint-disable-next-line react-hooks/exhaustive-deps
const inProgressAlertActionComponent = (
<EuiContextMenuItem
key="in-progress-alert"
aria-label="Mark alert in progress"
data-test-subj="in-progress-alert-status"
id={FILTER_IN_PROGRESS}
onClick={inProgressAlertActionClick}
disabled={!canUserCRUD || !hasIndexWrite}
>
<EuiText size="m">{i18n.ACTION_IN_PROGRESS_ALERT}</EuiText>
</EuiContextMenuItem>
);

const button = (
Expand All @@ -293,16 +304,18 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
setOpenAddExceptionModal('endpoint');
}, [closePopover]);

const addEndpointExceptionPanelItem = useMemo(
() => ({
key: 'add-endpoint-exception-menu-item',
'aria-label': 'Add Endpoint Exception',
'data-test-subj': 'add-endpoint-exception-menu-item',
onClick: handleAddEndpointExceptionClick,
disabled: !canUserCRUD || !hasIndexWrite || !isEndpointAlert,
name: <EuiText size="m">{i18n.ACTION_ADD_ENDPOINT_EXCEPTION}</EuiText>,
}),
[canUserCRUD, handleAddEndpointExceptionClick, hasIndexWrite, isEndpointAlert]
// eslint-disable-next-line react-hooks/exhaustive-deps
const addEndpointExceptionComponent = (
<EuiContextMenuItem
key="add-endpoint-exception-menu-item"
aria-label="Add Endpoint Exception"
data-test-subj="add-endpoint-exception-menu-item"
id="addEndpointException"
onClick={handleAddEndpointExceptionClick}
disabled={!canUserCRUD || !hasIndexWrite || !isEndpointAlert}
>
<EuiText size="m">{i18n.ACTION_ADD_ENDPOINT_EXCEPTION}</EuiText>
</EuiContextMenuItem>
);

const handleAddExceptionClick = useCallback((): void => {
Expand All @@ -316,16 +329,20 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
return !isThresholdRule(ruleType);
}, [ecsRowData]);

const addExceptionPanelItem = useMemo(
() => ({
key: 'add-exception-menu-item',
'aria-label': 'Add Exception',
'data-test-subj': 'add-exception-menu-item',
onClick: handleAddExceptionClick,
disabled: !canUserCRUD || !hasIndexWrite || !areExceptionsAllowed,
name: <EuiText size="m">{i18n.ACTION_ADD_EXCEPTION}</EuiText>,
}),
[areExceptionsAllowed, canUserCRUD, handleAddExceptionClick, hasIndexWrite]
// eslint-disable-next-line react-hooks/exhaustive-deps
const addExceptionComponent = (
<EuiContextMenuItem
key="add-exception-menu-item"
aria-label="Add Exception"
data-test-subj="add-exception-menu-item"
id="addException"
onClick={handleAddExceptionClick}
disabled={!canUserCRUD || !hasIndexWrite || !areExceptionsAllowed}
>
<EuiText data-test-subj="addExceptionButton" size="m">
{i18n.ACTION_ADD_EXCEPTION}
</EuiText>
</EuiContextMenuItem>
);

const statusFilters = useMemo(() => {
Expand All @@ -335,29 +352,24 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({

switch (alertStatus) {
case 'open':
return [inProgressAlertActionPanelItem, closeAlertActionPanelItem];
return [inProgressAlertActionComponent, closeAlertActionComponent];
case 'in-progress':
return [openAlertActionPanelItem, closeAlertActionPanelItem];
return [openAlertActionComponent, closeAlertActionComponent];
case 'closed':
return [openAlertActionPanelItem, inProgressAlertActionPanelItem];
return [openAlertActionComponent, inProgressAlertActionComponent];
default:
return [];
}
}, [
alertStatus,
closeAlertActionPanelItem,
inProgressAlertActionPanelItem,
openAlertActionPanelItem,
closeAlertActionComponent,
inProgressAlertActionComponent,
openAlertActionComponent,
]);

const panels = useMemo(
() => [
{
id: 0,
items: [...statusFilters, addEndpointExceptionPanelItem, addExceptionPanelItem],
},
],
[addEndpointExceptionPanelItem, addExceptionPanelItem, statusFilters]
const items = useMemo(
() => [...statusFilters, addEndpointExceptionComponent, addExceptionComponent],
[addEndpointExceptionComponent, addExceptionComponent, statusFilters]
);

return (
Expand All @@ -373,7 +385,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
anchorPosition="downLeft"
repositionOnScroll
>
<ContextMenu initialPanelId={0} panels={panels} />
<ContextMenuPanel items={items} />
</EuiPopover>
</EventsTdContent>
</EventsTd>
Expand All @@ -394,10 +406,10 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
);
};

const ContextMenu = styled(EuiContextMenu)`
const ContextMenuPanel = styled(EuiContextMenuPanel)`
font-size: ${({ theme }) => theme.eui.euiFontSizeS};
`;

ContextMenu.displayName = 'ContextMenu';
ContextMenuPanel.displayName = 'ContextMenuPanel';

export const AlertContextMenu = React.memo(AlertContextMenuComponent);

0 comments on commit 241765d

Please sign in to comment.