Skip to content

Commit

Permalink
[Security Solution] Adjusts the width of the Actions column and act…
Browse files Browse the repository at this point in the history
…ion icon buttons (elastic#118454)

## [Security Solution] Adjusts the width of the `Actions` column and action icon buttons

This PR adjusts the width of the `Actions` column, and normalizes the action icon button sizes throughout the Security Solution, per elastic#115726

### Before / after screenshots

This section provides before / after screenshots for the following views:

- Alerts
- Alerts > Event rendered
- Rules > Details
- Rules > Details > Event rendered
- Host > Events
- Host > External alerts
- Network > External alerts
- Timeline > Query tab
- Timeline > Correlation tab
- Timeline > Pinned tab
- Observability > alerts (no change)

#### Alerts (before)

![01-security_alerts_before](https://user-images.githubusercontent.com/4459398/141429498-a6040f8b-5bfb-468e-aa1a-993caa7f179c.png)

#### Alerts (after)

![01a-security_alerts_after](https://user-images.githubusercontent.com/4459398/141429618-8ad313e1-fabc-424e-9e7d-c24240861c1d.png)

#### Alerts > Event rendered (before)

![02-security_alerts_event_rendered_before](https://user-images.githubusercontent.com/4459398/141430881-2bfeb57a-9881-47f1-99e4-cc7eadcfff69.png)

#### Alerts > Event rendered (after)

![02a-security_alerts_event_rendered_after](https://user-images.githubusercontent.com/4459398/141430976-88f8099a-81b1-4f1c-99a2-26f86218f909.png)

#### Rules > Details (before)

![03-security_rules_details_before](https://user-images.githubusercontent.com/4459398/141431149-a308f171-a170-4ce9-9616-77e5c08dc406.png)

#### Rules > Details (after)

![03a-security_rules_details_after](https://user-images.githubusercontent.com/4459398/141431221-06701540-97bb-400a-97bf-f2d22cd65caf.png)

#### Rules > Details > Event rendered (before)

![04-security_rule_details_event_rendered_before](https://user-images.githubusercontent.com/4459398/141431394-12b29689-41c8-44b6-b69f-7796f99c5424.png)

#### Rules > Details > Event rendered (after)

![04a-security_rule_details_event_rendered_after](https://user-images.githubusercontent.com/4459398/141431477-049804c0-1455-4216-a241-a44df5c9d398.png)

#### Host > Events (before)

![05-host_events_before](https://user-images.githubusercontent.com/4459398/141431858-31116980-47f7-4779-af26-3b3785638137.png)

#### Host > Events (after)

![05a-host_events_after](https://user-images.githubusercontent.com/4459398/141431956-664f86b9-2ad7-4281-bf82-8278fa23c755.png)

#### Host > External alerts (before)

![06-host_external_alerts_before](https://user-images.githubusercontent.com/4459398/141432103-8cc9c10e-4d2d-42ec-a62c-a1e5867bf2d8.png)

#### Host > External alerts (after)

![06a-host_external_alerts_after](https://user-images.githubusercontent.com/4459398/141432185-4d7e4007-dea9-47f3-af4b-1719f338a5ba.png)

#### Network > External alerts (before)

![07-network_external_alerts_before](https://user-images.githubusercontent.com/4459398/141432331-2bb5a714-f733-4c97-91dc-73ff76633daa.png)

#### Network > External alerts (after)

![07a-network_external_alerts_after](https://user-images.githubusercontent.com/4459398/141432428-b7b20450-db87-44ab-8014-cf4d6032dfe3.png)

#### Timeline > Query tab (before)

![08-timeline_query_tab_before](https://user-images.githubusercontent.com/4459398/141432638-e484813b-275d-4eff-aa38-1705f913ce59.png)

#### Timeline > Query tab (after)

![08a-timeline_query_tab_after](https://user-images.githubusercontent.com/4459398/141434461-1d36bba5-8fd1-484a-bacd-733aede95815.png)

#### Timeline > Correlation tab (before)

![09-timeline_correlation_tab_before](https://user-images.githubusercontent.com/4459398/141434637-33f05447-e3d3-4eac-b38a-3612945e8379.png)

#### Timeline > Correlation tab (after)

![09a-timeline_correlation_tab_after](https://user-images.githubusercontent.com/4459398/141434751-250fd26b-25fc-48cc-8a06-dbb17e53dce7.png)

#### Timeline > Pinned tab (before)

![10-timeline_pinned_tab_before](https://user-images.githubusercontent.com/4459398/141434893-3f2b3d17-7e4b-4e0c-9096-ab1ee57f096f.png)

#### Timeline > Pinned tab (after)

![10a-timeline_pinned_tab_after](https://user-images.githubusercontent.com/4459398/141435431-26eac065-bce4-4a25-99fd-095d447fb6f3.png)

#### Observability > alerts (before)

![11-observability_alerts_before](https://user-images.githubusercontent.com/4459398/141435607-da059e9c-af03-4a21-bb1b-e47d44d61dde.png)

#### Observability > alerts (after / no change)

![11a-observability_alerts_after_no_change](https://user-images.githubusercontent.com/4459398/141435696-52bcc5e1-6823-4b6a-b2da-32e3f8733dc8.png)

### Additional details

- Per [this comment](elastic#115726 (comment)) from @monina-n , the size of all action buttons have been normalized match the size off the `...` overflow button (`28 x 32` at the time of this writing) via the `EuiButtonIcon` `size` prop:

```
size="s"
```

- The horizontal alignment of the `Analyze event` icon was updated by the EUI team in the following PR: elastic/eui#5365
  • Loading branch information
andrew-goldstein authored and fkanout committed Nov 17, 2021
1 parent 6182add commit 57ec0ac
Show file tree
Hide file tree
Showing 41 changed files with 311 additions and 1,206 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { SourcererScopeName } from '../../store/sourcerer/model';
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
import type { EntityType } from '../../../../../timelines/common';
import { getDefaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';

export interface OwnProps {
end: string;
Expand Down Expand Up @@ -79,6 +80,7 @@ const AlertsTableComponent: React.FC<Props> = ({
const dispatch = useDispatch();
const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
const { filterManager } = useKibana().services.data.query;
const ACTION_BUTTON_COUNT = 3;

const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');

Expand All @@ -104,6 +106,8 @@ const AlertsTableComponent: React.FC<Props> = ({
);
}, [dispatch, filterManager, tGridEnabled, timelineId]);

const leadingControlColumns = useMemo(() => getDefaultControlColumn(ACTION_BUTTON_COUNT), []);

return (
<StatefulEventsViewer
pageFilters={alertsFilter}
Expand All @@ -112,6 +116,7 @@ const AlertsTableComponent: React.FC<Props> = ({
end={endDate}
entityType={entityType}
id={timelineId}
leadingControlColumns={leadingControlColumns}
renderCellValue={DefaultCellRenderer}
rowRenderers={defaultRowRenderers}
scopeId={SourcererScopeName.default}
Expand Down
Loading

0 comments on commit 57ec0ac

Please sign in to comment.