github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Security Solution] [EUI Refresh] styled component migration Dashboards (#208731) (#210967)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution] [EUI Refresh] styled component migration
Dashboards (#208731)](https://github.com/elastic/kibana/pull/208731)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Agustina Nahir
Ruidiaz","email":"61565784+agusruidiazgd@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-12T15:05:27Z","message":"[Security
Solution] [EUI Refresh] styled component migration Dashboards
(#208731)\n\n## Summary\r\n\r\nAddresses
https://github.com/elastic/kibana/issues/206439\r\nThis PR migrates
explore page from styled-components to @emotion/styled.\r\nIn the
process I also convert the kbn/ui-theme json tokens to
euiTheme\r\ncounterparts.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6cdfbf15-9a77-488c-a0b9-42acc3fe1768\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Karen Grigoryan
<karen.grigoryan@elastic.co>","sha":"f92e50a4a1d9bdea781d1e0fb45b4f8560a27ab5","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Explore","ci:cloud-deploy","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security Solution] [EUI
Refresh] styled component migration
Dashboards","number":208731,"url":"https://github.com/elastic/kibana/pull/208731","mergeCommit":{"message":"[Security
Solution] [EUI Refresh] styled component migration Dashboards
(#208731)\n\n## Summary\r\n\r\nAddresses
https://github.com/elastic/kibana/issues/206439\r\nThis PR migrates
explore page from styled-components to @emotion/styled.\r\nIn the
process I also convert the kbn/ui-theme json tokens to
euiTheme\r\ncounterparts.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6cdfbf15-9a77-488c-a0b9-42acc3fe1768\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Karen Grigoryan
<karen.grigoryan@elastic.co>","sha":"f92e50a4a1d9bdea781d1e0fb45b4f8560a27ab5"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/210886","number":210886,"state":"OPEN"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208731","number":208731,"mergeCommit":{"message":"[Security
Solution] [EUI Refresh] styled component migration Dashboards
(#208731)\n\n## Summary\r\n\r\nAddresses
https://github.com/elastic/kibana/issues/206439\r\nThis PR migrates
explore page from styled-components to @emotion/styled.\r\nIn the
process I also convert the kbn/ui-theme json tokens to
euiTheme\r\ncounterparts.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6cdfbf15-9a77-488c-a0b9-42acc3fe1768\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Karen Grigoryan
<karen.grigoryan@elastic.co>","sha":"f92e50a4a1d9bdea781d1e0fb45b4f8560a27ab5"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Agustina Nahir Ruidiaz <61565784+agusruidiazgd@users.noreply.github.com>
This commit is contained in:
Karen Grigoryan 2025-02-13 16:37:28 +01:00 • committed by GitHub
parent f1d15570a9
commit 12738e9f5f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 274 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/kbn-babel-preset/styled_components_files.js
View file

@ -383,16 +383,7 @@ module.exports = {
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detections[\/\\]pages[\/\\]detection_engine[\/\\]rules[\/\\]helpers.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]asset_criticality[\/\\]asset_criticality_selector.stories.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]asset_criticality_file_uploader[\/\\]asset_criticality_file_uploader.stories.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]entity_analytics_anomalies[\/\\]columns.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]entity_analytics_header[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]entity_analytics_risk_score[\/\\]columns.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]risk_details_tab_body[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]risk_information[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]risk_score_donut_chart[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]risk_score_onboarding[\/\\]use_risk_score_toast_content.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]severity[\/\\]common[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]severity[\/\\]severity_bar.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]styled_basic_table.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]components[\/\\]exceptions_list_card[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]components[\/\\]exceptions_utility[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]components[\/\\]shared_list_utilty_bar[\/\\]index.tsx/,
@ -462,20 +453,6 @@ module.exports = {
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]protection_updates[\/\\]protection_updates_layout.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]trusted_apps[\/\\]view[\/\\]components[\/\\]condition_entry_input[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]trusted_apps[\/\\]view[\/\\]components[\/\\]condition_group[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]detection_response[\/\\]alerts_by_status[\/\\]alerts_by_status.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]detection_response[\/\\]alerts_by_status[\/\\]chart_label.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]detection_response[\/\\]cases_by_status[\/\\]cases_by_status.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]detection_response[\/\\]soc_trends[\/\\]soc_trends.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]events_by_dataset[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]host_overview[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]link_panel[\/\\]inner_link_panel.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]link_panel[\/\\]link_panel.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]overview_host_stats[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]overview_network_stats[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]recent_timelines[\/\\]counts[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]recent_timelines[\/\\]recent_timelines.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]stat_value.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]overview[\/\\]components[\/\\]user_overview[\/\\]index.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]resolver[\/\\]view[\/\\]controls[\/\\]styles.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]resolver[\/\\]view[\/\\]edge_line.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]resolver[\/\\]view[\/\\]panels[\/\\]cube_for_process.tsx/,

4
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_analytics_anomalies/columns.test.tsx
View file

@ -46,9 +46,9 @@ describe('useAnomaliesColumns', () => {
});
expect(renderedComponent).toMatchInlineSnapshot(`
<styled.span>
<Styled(span)>
test-job-name
</styled.span>
</Styled(span)>
`);
});
});

4
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_analytics_anomalies/columns.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useMemo } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { EuiTableFieldDataColumnType } from '@elastic/eui';
import * as i18n from './translations';
import type { SecurityJob } from '../../../common/components/ml_popover/types';
@ -17,7 +17,7 @@ import type { AnomaliesCount } from '../../../common/components/ml/anomaly/use_a
type AnomaliesColumns = Array<EuiTableFieldDataColumnType<AnomaliesCount>>;
const DarkShadeText = styled.span`
color: ${({ theme }) => theme.eui.euiColorDarkShade};
color: ${({ theme: { euiTheme } }) => euiTheme.colors.darkShade};
`;
export const useAnomaliesColumns = (

2
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_analytics_header/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useMemo, useCallback } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle, EuiLink } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { useDispatch } from 'react-redux';
import { capitalize, sumBy } from 'lodash/fp';
import { FormattedMessage } from '@kbn/i18n-react';

4
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_analytics_risk_score/columns.tsx
View file

@ -9,7 +9,7 @@ import type { SyntheticEvent } from 'react';
import React from 'react';
import type { EuiBasicTableColumn } from '@elastic/eui';
import { EuiLink } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { get } from 'lodash/fp';
import { EntityTypeToIdentifierField } from '../../../../common/entity_analytics/types';
@ -40,7 +40,7 @@ import { FormattedRelativePreferenceDate } from '../../../common/components/form
import { formatRiskScore } from '../../common';
const StyledCellActions = styled(SecurityCellActions)`
padding-left: ${({ theme }) => theme.eui.euiSizeS};
padding-left: ${({ theme: { euiTheme } }) => euiTheme.size.s};
`;
type OpenEntityOnAlertsPage = (entityName: string) => void;

2
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/entity_analytics_risk_score/index.tsx
View file

@ -245,7 +245,7 @@ const EntityAnalyticsRiskScoresComponent = <T extends EntityType>({
</EuiFlexItem>
<EuiFlexItem>
<StyledBasicTable
responsive={false}
responsiveBreakpoint={false}
items={data ?? []}
columns={columns}
loading={isTableLoading}

4
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_details_tab_body/index.tsx
View file

@ -7,7 +7,7 @@
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { useUpsellingComponent } from '../../../common/hooks/use_upselling';
import { RISKY_HOSTS_DASHBOARD_TITLE, RISKY_USERS_DASHBOARD_TITLE } from '../risk_score/constants';
@ -38,7 +38,7 @@ import { useMissingRiskEnginePrivileges } from '../../hooks/use_missing_risk_eng
import { RiskEnginePrivilegesCallOut } from '../risk_engine_privileges_callout';
const StyledEuiFlexGroup = styled(EuiFlexGroup)`
margin-top: ${({ theme }) => theme.eui.euiSizeL};
margin-top: ${({ theme: { euiTheme } }) => euiTheme.size.l};
`;
type ComponentsQueryProps = HostsComponentsQueryProps | UsersComponentsQueryProps;

4
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx
View file

@ -6,7 +6,7 @@
*/
import type { EuiBasicTableColumn } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import {
EuiBasicTable,
EuiButton,
@ -39,7 +39,7 @@ import { AssetCriticalityBadge } from '../asset_criticality';
const SpacedOrderedList = styled.ol`
li {
margin-bottom: ${({ theme }) => theme.eui.euiSizeM};
margin-bottom: ${({ theme: { euiTheme } }) => euiTheme.size.m};
}
`;

6
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx
View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { i18n } from '@kbn/i18n';
import { ChartLabel } from '../../../overview/components/detection_response/alerts_by_status/chart_label';
import { RISK_SEVERITY_COLOUR } from '../../common/utils';
@ -22,8 +22,8 @@ import type { RiskSeverity } from '../../../../common/search_strategy';
const DONUT_HEIGHT = 120;
const DonutContainer = styled(EuiFlexItem)`
padding-right: ${({ theme }) => theme.eui.euiSizeXXL};
padding-left: ${({ theme }) => theme.eui.euiSizeM};
padding-right: ${({ theme: { euiTheme } }) => euiTheme.size.xxl};
padding-left: ${({ theme: { euiTheme } }) => euiTheme.size.m};
`;
const StyledLegendItems = styled(EuiFlexItem)`

24
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx
View file

@ -5,18 +5,21 @@
* 2.0.
*/
import { render } from '@testing-library/react';
import { render, renderHook } from '@testing-library/react';
import React from 'react';
import { matchers } from '@emotion/jest';
import { TestProviders } from '../../../../common/mock';
import type { EuiHealthProps } from '@elastic/eui';
import { EuiHealth } from '@elastic/eui';
import { EuiHealth, useEuiTheme } from '@elastic/eui';
import { RiskSeverity } from '../../../../../common/search_strategy';
import { RiskScoreLevel } from '.';
import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils';
expect.extend(matchers);
jest.mock('@elastic/eui', () => {
const original = jest.requireActual('@elastic/eui');
return {
@ -109,6 +112,21 @@ describe('RiskScore', () => {
</TestProviders>
);
expect(queryByTestId('risk-score')).toHaveStyleRule('background-color', undefined);
expect(queryByTestId('risk-score')).not.toHaveStyleRule('background-color');
});
it('renders background-color when hideBackgroundColor is false', () => {
const { queryByTestId } = render(
<TestProviders>
<RiskScoreLevel severity={RiskSeverity.Critical} />
</TestProviders>
);
const { result } = renderHook(() => useEuiTheme());
expect(queryByTestId('risk-score')).toHaveStyleRule(
'background-color',
result.current.euiTheme.colors.backgroundBaseDanger
);
});
});

30
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx
View file

@ -6,34 +6,36 @@
*/
import React from 'react';
import { EuiHealth, EuiTextColor, useEuiTheme } from '@elastic/eui';
import styled, { css } from 'styled-components';
import styled from '@emotion/styled';
import { css } from '@emotion/react';
import { RISK_SEVERITY_COLOUR } from '../../../common/utils';
import { HoverPopover } from '../../../../common/components/hover_popover';
import type { RiskSeverity } from '../../../../../common/search_strategy';
const RiskBadge = styled.div<{
$severity: RiskSeverity;
$hideBackgroundColor: boolean;
const RiskBadge = styled('div', {
shouldForwardProp: (prop) => !['severity', 'hideBackgroundColor'].includes(prop),
})<{
severity: RiskSeverity;
hideBackgroundColor: boolean;
}>`
${({ theme, color, $severity, $hideBackgroundColor }) => css`
${({ theme: { euiTheme }, color, severity, hideBackgroundColor }) => css`
width: fit-content;
padding-right: ${theme.eui.euiSizeS};
padding-left: ${theme.eui.euiSizeXS};
padding-right: ${euiTheme.size.s};
padding-left: ${euiTheme.size.xs};
${($severity === 'Critical' || $severity === 'High') &&
!$hideBackgroundColor &&
${(severity === 'Critical' || severity === 'High') &&
!hideBackgroundColor &&
css`
background-color: ${color};
border-radius: 999px; // pill shaped
`};
`}
`;
const TooltipContainer = styled.div`
padding: ${({ theme }) => theme.euiSizeS};
padding: ${({ theme: { euiTheme } }) => euiTheme.size.s};
`;
export const RiskScoreLevel: React.FC<{
@ -77,8 +79,8 @@ const RiskScoreBadge: React.FC<{
return (
<RiskBadge
color={euiTheme.colors.backgroundBaseDanger}
$severity={severity}
$hideBackgroundColor={hideBackgroundColor}
severity={severity}
hideBackgroundColor={hideBackgroundColor}
data-test-subj={dataTestSubj ?? 'risk-score'}
>
<EuiTextColor color="default">

2
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiColorPaletteDisplay } from '@elastic/eui';
import React, { useMemo } from 'react';

4
x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/styled_basic_table.tsx
View file

@ -4,11 +4,11 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiBasicTable } from '@elastic/eui';
// @ts-expect-error TS2769
export const StyledBasicTable = styled(EuiBasicTable)`
export const StyledBasicTable: typeof EuiBasicTable = styled(EuiBasicTable)`
.euiTableRow {
.euiTableRowCell {
border-bottom: none !important;

2
x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx
View file

@ -16,8 +16,8 @@ import {
useIsWithinMinBreakpoint,
} from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';
import styled from '@emotion/styled';
import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
import styled from 'styled-components';
import { ALERT_WORKFLOW_STATUS, ALERT_SEVERITY } from '@kbn/rule-data-utils';
import { FILTER_OPEN, FILTER_ACKNOWLEDGED, FILTER_CLOSED } from '../../../../../common/types';

4
x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/chart_label.tsx
View file

@ -6,7 +6,7 @@
*/
import { EuiLink } from '@elastic/eui';
import React, { useCallback } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { FormattedCount } from '../../../../common/components/formatted_number';
interface ChartLabelProps {
@ -15,7 +15,7 @@ interface ChartLabelProps {
}
const PlaceHolder = styled.div`
padding: ${(props) => props.theme.eui.euiSizeS};
padding: ${(props) => props.theme.euiTheme.size.s};
`;
const ChartLabelComponent: React.FC<ChartLabelProps> = ({ count, onClick }) => {

2
x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/cases_by_status/cases_by_status.tsx
View file

@ -9,7 +9,7 @@ import React, { useCallback, useMemo } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, useEuiTheme } from '@elastic/eui';
import type { AxisStyle, Rotation } from '@elastic/charts';
import { ScaleType } from '@elastic/charts';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { FormattedNumber } from '@kbn/i18n-react';
import numeral from '@elastic/numeral';
import { BarChart } from '../../../../common/components/charts/barchart';

2
x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/soc_trends/soc_trends.tsx
View file

@ -17,7 +17,7 @@ import {
EuiText,
EuiToolTip,
} from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { InputsModelId } from '../../../../common/store/inputs/constants';
import { SocTrendsDatePickerLock } from './date_picker_lock';
import { SuperDatePicker } from '../../../../common/components/super_date_picker';

6
x-pack/solutions/security/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx
View file

@ -10,7 +10,7 @@ import numeral from '@elastic/numeral';
import React, { useEffect, useMemo, useCallback } from 'react';
import type { DataViewBase, Filter, Query } from '@kbn/es-query';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiButton } from '@elastic/eui';
import { getEsQueryConfig } from '@kbn/data-plugin/common';
import { DEFAULT_NUMBER_FORMAT, APP_UI_ID } from '../../../../common/constants';
@ -66,8 +66,8 @@ const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
const StyledLinkButton = styled(EuiButton)`
margin-left: 0;
@media only screen and (min-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
margin-left: ${({ theme }) => theme.eui.euiSizeL};
@media only screen and (min-width: ${(props) => props.theme.euiTheme.breakpoint.m}) {
margin-left: ${({ theme }) => theme.euiTheme.size.l};
}
`;

4
x-pack/solutions/security/plugins/security_solution/public/overview/components/host_overview/index.tsx
View file

@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
import { euiDarkVars as darkTheme, euiLightVars as lightTheme } from '@kbn/ui-theme';
import { getOr } from 'lodash/fp';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { useGlobalTime } from '../../../common/containers/use_global_time';
import { useQueryInspector } from '../../../common/components/page/manage_query';
import { FIRST_RECORD_PAGINATION } from '../../../entity_analytics/common';
@ -58,7 +58,7 @@ interface HostSummaryProps {
}
const HostRiskOverviewWrapper = styled(EuiFlexGroup)`
padding-top: ${({ theme }) => theme.eui.euiSizeM};
padding-top: ${({ theme: { euiTheme } }) => euiTheme.size.m};
width: ${({ $width }: { $width: string }) => $width};
`;

14
x-pack/solutions/security/plugins/security_solution/public/overview/components/link_panel/inner_link_panel.tsx
View file

@ -6,29 +6,29 @@
*/
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSplitPanel, EuiText } from '@elastic/eui';
import * as i18n from './translations';
const ButtonContainer = styled(EuiFlexGroup)`
padding: ${({ theme }) => theme.eui.euiSizeS};
padding: ${({ theme: { euiTheme } }) => euiTheme.size.s};
`;
const Icon = styled(EuiIcon)`
padding: 0;
margin-top: ${({ theme }) => theme.eui.euiSizeM};
margin-top: ${({ theme: { euiTheme } }) => euiTheme.size.m};
margin-left: 12px;
transform: scale(${({ color }) => (color === 'primary' ? 1.4 : 1)});
`;
const PanelContainer = styled(EuiSplitPanel.Inner)`
margin-bottom: ${({ theme }) => theme.eui.euiSizeM};
margin-bottom: ${({ theme: { euiTheme } }) => euiTheme.size.m};
`;
const Title = styled(EuiText)<{ textcolor: 'primary' | 'warning' }>`
color: ${({ theme, textcolor }) =>
textcolor === 'primary' ? theme.eui.euiColorPrimary : theme.eui.euiColorWarningText};
margin-bottom: ${({ theme }) => theme.eui.euiSizeM};
color: ${({ theme: { euiTheme }, textcolor }) =>
textcolor === 'primary' ? euiTheme.colors.primary : euiTheme.colors.textWarning};
margin-bottom: ${({ theme: { euiTheme } }) => euiTheme.size.m};
`;
export const InnerLinkPanel = ({

30
x-pack/solutions/security/plugins/security_solution/public/overview/components/link_panel/link_panel.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { css } from '@emotion/react';
import { chunk } from 'lodash';
import type { EuiTableFieldDataColumnType, CriteriaWithPagination } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiBasicTable, EuiPanel, EuiSpacer } from '@elastic/eui';
@ -13,20 +13,6 @@ import { InspectButtonContainer } from '../../../common/components/inspect';
import { HeaderSection } from '../../../common/components/header_section';
import type { LinkPanelListItem } from './types';
// @ts-expect-error TS2769
const StyledTable = styled(EuiBasicTable)`
[data-test-subj='panel-link'],
[data-test-subj='panel-no-link'] {
opacity: 0;
}
tr:hover {
[data-test-subj='panel-link'],
[data-test-subj='panel-no-link'] {
opacity: 1;
}
}
`;
const PAGE_SIZE = 5;
const sortAndChunkItems = (
@ -128,7 +114,19 @@ const LinkPanelComponent = ({
{splitPanel}
{infoPanel}
{chunkedItems.length > 0 && (
<StyledTable
<EuiBasicTable
css={css`
[data-test-subj='panel-link'],
[data-test-subj='panel-no-link'] {
opacity: 0;
}
tr:hover {
[data-test-subj='panel-link'],
[data-test-subj='panel-no-link'] {
opacity: 1;
}
}
`}
columns={columns}
itemId="id"
items={chunkedItems[pageIndex] || []}

228
x-pack/solutions/security/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap generated
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Overview Host Stat Data rendering it renders the default OverviewHostStats 1`] = `
<styled.div
<overview_host_stats--HostStatsContainer
data-test-subj="overview-hosts-stats"
>
<EuiHorizontalRule
@ -23,7 +23,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
grow={false}
>
<Memo(StatValueComponent)
@ -32,13 +32,13 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</Styled(EuiFlexItem)>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
id="host-stat-accordion-groupauditbeat"
>
<styled.div>
<overview_host_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -51,27 +51,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Audit"
id="xpack.securitySolution.overview.auditBeatAuditTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-auditbeatAuditd"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={73847}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -85,27 +85,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="File Integrity Module"
id="xpack.securitySolution.overview.auditBeatFimTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-auditbeatFIM"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={107307}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -119,27 +119,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Login"
id="xpack.securitySolution.overview.auditBeatLoginTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-auditbeatLogin"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={60015}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -153,27 +153,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Package"
id="xpack.securitySolution.overview.auditBeatPackageTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-auditbeatPackage"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={2003}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -187,27 +187,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Process"
id="xpack.securitySolution.overview.auditBeatProcessTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-auditbeatProcess"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={1200}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -221,29 +221,29 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="User"
id="xpack.securitySolution.overview.auditBeatUserTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-auditbeatUser"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={1979}
isGroupStat={false}
isLoading={false}
max={246351}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_host_stats--AccordionContent>
</EuiAccordionClass>
<EuiHorizontalRule
margin="xs"
@ -264,7 +264,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
grow={false}
>
<Memo(StatValueComponent)
@ -273,13 +273,13 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</Styled(EuiFlexItem)>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
id="host-stat-accordion-groupendgame"
>
<styled.div>
<overview_host_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -292,27 +292,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="DNS"
id="xpack.securitySolution.overview.endgameDnsTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameDns"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39123}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -326,27 +326,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="File"
id="xpack.securitySolution.overview.endgameFileTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameFile"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39456}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -360,27 +360,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Image Load"
id="xpack.securitySolution.overview.endgameImageLoadTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameImageLoad"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39789}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -394,27 +394,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Network"
id="xpack.securitySolution.overview.endgameNetworkTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameNetwork"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39101112}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -428,27 +428,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Process"
id="xpack.securitySolution.overview.endgameProcessTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameProcess"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39131415}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -462,27 +462,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Registry"
id="xpack.securitySolution.overview.endgameRegistryTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameRegistry"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39161718}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -496,29 +496,29 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Security"
id="xpack.securitySolution.overview.endgameSecurityTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-endgameSecurity"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={39202122}
isGroupStat={false}
isLoading={false}
max={156714735}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_host_stats--AccordionContent>
</EuiAccordionClass>
<EuiHorizontalRule
margin="xs"
@ -539,7 +539,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
grow={false}
>
<Memo(StatValueComponent)
@ -548,13 +548,13 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</Styled(EuiFlexItem)>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
id="host-stat-accordion-groupfilebeat"
>
<styled.div>
<overview_host_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -567,29 +567,29 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="System Module"
id="xpack.securitySolution.overview.filebeatSystemModuleTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-filebeatSystemModule"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={568}
isGroupStat={false}
isLoading={false}
max={568}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_host_stats--AccordionContent>
</EuiAccordionClass>
<EuiHorizontalRule
margin="xs"
@ -610,7 +610,7 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
/>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
grow={false}
>
<Memo(StatValueComponent)
@ -619,13 +619,13 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
isLoading={false}
max={157258653}
/>
</Styled(EuiFlexItem)>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
}
buttonContentClassName="accordion-button"
id="host-stat-accordion-groupwinlogbeat"
>
<styled.div>
<overview_host_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -638,27 +638,27 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Security"
id="xpack.securitySolution.overview.winlogbeatSecurityTitle"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-winlogbeatSecurity"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={195929}
isGroupStat={false}
isLoading={false}
max={296999}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -672,29 +672,29 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
color="subdued"
size="s"
>
<styled.div>
<overview_host_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Microsoft-Windows-Sysmon/Operational"
id="xpack.securitySolution.overview.winlogbeatMWSysmonOperational"
/>
</styled.div>
</overview_host_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_host_stats--NoMarginTopFlexItem
data-test-subj="host-stat-winlogbeatMWSysmonOperational"
grow={false}
>
<styled.div>
<overview_host_stats--MoveItLeft>
<Memo(StatValueComponent)
count={101070}
isGroupStat={false}
isLoading={false}
max={296999}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_host_stats--MoveItLeft>
</overview_host_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_host_stats--AccordionContent>
</EuiAccordionClass>
</styled.div>
</overview_host_stats--HostStatsContainer>
`;

6
x-pack/solutions/security/plugins/security_solution/public/overview/components/overview_host_stats/index.tsx
View file

@ -8,7 +8,7 @@
import { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { HostsOverviewStrategyResponse } from '../../../../common/search_strategy';
import type { FormattedStat, StatGroup } from '../types';
@ -247,7 +247,7 @@ const hostStatGroups: StatGroup[] = [
const MoveItLeftTitle = styled.div`
margin-left: 24px;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
@media only screen and (min-width: ${({ theme: { euiTheme } }) => euiTheme.breakpoint.m}) {
max-width: 40px;
}
`;
@ -256,7 +256,7 @@ const MoveItLeft = styled.div`
`;
const NoMarginTopFlexItem = styled(EuiFlexItem)`
@media only screen and (max-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
@media only screen and (max-width: ${({ theme: { euiTheme } }) => euiTheme.breakpoint.m}) {
margin-top: -10px !important;
}
`;

124
x-pack/solutions/security/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap generated
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Overview Network Stat Data rendering it renders the default OverviewNetworkStats 1`] = `
<styled.div
<overview_network_stats--NetworkStatsContainer
data-test-subj="overview-network-stats"
>
<EuiHorizontalRule
@ -39,7 +39,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
buttonContentClassName="accordion-button"
id="network-stat-accordion-groupauditbeat"
>
<styled.div>
<overview_network_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -52,29 +52,29 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Socket"
id="xpack.securitySolution.overview.auditBeatSocketTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-auditbeatSocket"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={12}
isGroupStat={false}
isLoading={false}
max={12}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_network_stats--AccordionContent>
</EuiAccordionClass>
<EuiHorizontalRule
margin="xs"
@ -111,7 +111,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
buttonContentClassName="accordion-button"
id="network-stat-accordion-groupfilebeat"
>
<styled.div>
<overview_network_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -124,27 +124,27 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Cisco"
id="xpack.securitySolution.overview.filebeatCiscoTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-filebeatCisco"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={999}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -158,27 +158,27 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Netflow"
id="xpack.securitySolution.overview.filebeatNetflowTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-filebeatNetflow"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={7777}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -192,27 +192,27 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Palo Alto Networks"
id="xpack.securitySolution.overview.filebeatPanwTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-filebeatPanw"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={66}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -226,27 +226,27 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Suricata"
id="xpack.securitySolution.overview.fileBeatSuricataTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-filebeatSuricata"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={60015}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -260,29 +260,29 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Zeek"
id="xpack.securitySolution.overview.fileBeatZeekTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-filebeatZeek"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={2003}
isGroupStat={false}
isLoading={false}
max={70860}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_network_stats--AccordionContent>
</EuiAccordionClass>
<EuiHorizontalRule
margin="xs"
@ -319,7 +319,7 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
buttonContentClassName="accordion-button"
id="network-stat-accordion-grouppacketbeat"
>
<styled.div>
<overview_network_stats--AccordionContent>
<EuiFlexGroup
gutterSize="s"
justifyContent="spaceBetween"
@ -332,27 +332,27 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="DNS"
id="xpack.securitySolution.overview.packetBeatDnsTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-packetbeatDNS"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={10277307}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -366,27 +366,27 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="Flow"
id="xpack.securitySolution.overview.packetBeatFlowTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-packetbeatFlow"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={16}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
gutterSize="s"
@ -400,29 +400,29 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
color="subdued"
size="s"
>
<styled.div>
<overview_network_stats--MoveItLeftTitle>
<MemoizedFormattedMessage
defaultMessage="TLS"
id="xpack.securitySolution.overview.packetbeatTLSTitle"
/>
</styled.div>
</overview_network_stats--MoveItLeftTitle>
</EuiText>
</EuiFlexItem>
<Styled(EuiFlexItem)
<overview_network_stats--NoMarginTopFlexItem
data-test-subj="network-stat-packetbeatTLS"
grow={false}
>
<styled.div>
<overview_network_stats--MoveItLeft>
<Memo(StatValueComponent)
count={3400000}
isGroupStat={false}
isLoading={false}
max={13677323}
/>
</styled.div>
</Styled(EuiFlexItem)>
</overview_network_stats--MoveItLeft>
</overview_network_stats--NoMarginTopFlexItem>
</EuiFlexGroup>
</styled.div>
</overview_network_stats--AccordionContent>
</EuiAccordionClass>
</styled.div>
</overview_network_stats--NetworkStatsContainer>
`;

6
x-pack/solutions/security/plugins/security_solution/public/overview/components/overview_network_stats/index.tsx
View file

@ -8,7 +8,7 @@
import { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { NetworkOverviewStrategyResponse } from '../../../../common/search_strategy';
import type { FormattedStat, StatGroup } from '../types';
@ -160,7 +160,7 @@ const NetworkStatsContainer = styled.div`
`;
const MoveItLeftTitle = styled.div`
margin-left: 24px;
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
@media only screen and (min-width: ${({ theme: { euiTheme } }) => euiTheme.breakpoint.m}) {
max-width: 40px;
}
`;
@ -169,7 +169,7 @@ const MoveItLeft = styled.div`
`;
const NoMarginTopFlexItem = styled(EuiFlexItem)`
@media only screen and (max-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
@media only screen and (max-width: ${({ theme: { euiTheme } }) => euiTheme.breakpoint.m}) {
margin-top: -10px !important;
}
`;

2
x-pack/solutions/security/plugins/security_solution/public/overview/components/recent_timelines/counts/index.tsx
View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import {
getPinnedEventCount,

2
x-pack/solutions/security/plugins/security_solution/public/overview/components/recent_timelines/recent_timelines.tsx
View file

@ -8,7 +8,7 @@
import { EuiSpacer, EuiText, EuiToolTip, EuiButtonIcon } from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { RecentTimelineHeader } from './header';
import type {
OnOpenTimeline,

2
x-pack/solutions/security/plugins/security_solution/public/overview/components/stat_value.tsx
View file

@ -8,7 +8,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiSkeletonText, EuiProgress, EuiText } from '@elastic/eui';
import numeral from '@elastic/numeral';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { DEFAULT_NUMBER_FORMAT } from '../../../common/constants';
import { useUiSetting$ } from '../../common/lib/kibana';

4
x-pack/solutions/security/plugins/security_solution/public/overview/components/user_overview/index.tsx
View file

@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { euiDarkVars as darkTheme, euiLightVars as lightTheme } from '@kbn/ui-theme';
import { getOr } from 'lodash/fp';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { buildUserNamesFilter } from '../../../../common/search_strategy';
import { useGlobalTime } from '../../../common/containers/use_global_time';
import { FIRST_RECORD_PAGINATION } from '../../../entity_analytics/common';
@ -57,7 +57,7 @@ export interface UserSummaryProps {
}
const UserRiskOverviewWrapper = styled(EuiFlexGroup)`
padding-top: ${({ theme }) => theme.eui.euiSizeM};
padding-top: ${({ theme: { euiTheme } }) => euiTheme.size.m};
width: ${({ $width }: { $width: string }) => $width};
`;

1
x-pack/solutions/security/plugins/security_solution/public/overview/links.ts
View file

@ -29,6 +29,7 @@ export const overviewLinks: LinkItem = {
defaultMessage:
'Summary of your security environment activity, including alerts, events, recent items, and a news feed!',
}),
path: OVERVIEW_PATH,
capabilities: [`${SECURITY_FEATURE_ID}.show`],
globalSearchKeywords: [