Skip to content

Commit 82de12b

Browse files
PhilippeObertiPhilippeOberti
committed
[Security Solution][THI] replace deprecated styled-components within detections folder
1 parent 70ece10 commit 82de12b

35 files changed

Lines changed: 417 additions & 673 deletions

File tree

‎packages/kbn-babel-preset/styled_components_files.js‎

Lines changed: 0 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/platform/plugins/private/translations/translations/fr-FR.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34471,7 +34471,6 @@
3447134471
"xpack.securitySolution.components.chartCollapse.noResultMessage": "Aucun",
3447234472
"xpack.securitySolution.components.chartCollapse.topGroup": "Générant le plus d'alertes",
3447334473
"xpack.securitySolution.components.chartCollapse.topRule": "Règle Générant le plus d'alertes :",
34474-
"xpack.securitySolution.components.chartSelect.chartsOption": "Graphiques",
3447534474
"xpack.securitySolution.components.chartSelect.chartsOptionTitle": "Résumé",
3447634475
"xpack.securitySolution.components.chartSelect.legendTitle": "Sélectionner un onglet",
3447734476
"xpack.securitySolution.components.chartSelect.tableOptionTitle": "Comptes",
@@ -34770,12 +34769,9 @@
3477034769
"xpack.securitySolution.detectionEngine.alerts.alertsByGrouping.sourceLabel": "source",
3477134770
"xpack.securitySolution.detectionEngine.alerts.alertsByGrouping.userNameLabel": "utilisateur",
3477234771
"xpack.securitySolution.detectionEngine.alerts.alertsByType.alertRuleChartTitle": "Alertes par nom",
34773-
"xpack.securitySolution.detectionEngine.alerts.chartsTitle": "Graphiques",
3477434772
"xpack.securitySolution.detectionEngine.alerts.closedAlertFailedToastMessage": "Impossible de fermer l'alerte ou les alertes.",
3477534773
"xpack.securitySolution.detectionEngine.alerts.closedAlertsTitle": "Fermé",
3477634774
"xpack.securitySolution.detectionEngine.alerts.closedAlertSuccessToastMessage": "Fermeture réussie de {totalAlerts} {totalAlerts, plural, =1 {alerte} other {alertes}}.",
34777-
"xpack.securitySolution.detectionEngine.alerts.count.columnLabel": "{topN} principales valeurs de {fieldName}",
34778-
"xpack.securitySolution.detectionEngine.alerts.count.countTableColumnTitle": "Nombre d'enregistrements",
3477934775
"xpack.securitySolution.detectionEngine.alerts.count.countTableTitle": "Décompte",
3478034776
"xpack.securitySolution.detectionEngine.alerts.createNewTermsTimelineFailure": "Impossible de créer une chronologie pour l’ID de document : {id}",
3478134777
"xpack.securitySolution.detectionEngine.alerts.createNewTermsTimelineFailureTitle": "Impossible de créer une chronologie d'alerte de nouveaux termes",
@@ -34785,7 +34781,6 @@
3478534781
"xpack.securitySolution.detectionEngine.alerts.createThresholdTimelineFailureTitle": "Impossible de créer une chronologie d'alerte de seuil",
3478634782
"xpack.securitySolution.detectionEngine.alerts.fetchExceptionFilterFailure": "Erreur lors de la récupération du filtre d'exception.",
3478734783
"xpack.securitySolution.detectionEngine.alerts.histogram.headerTitle": "Tendance",
34788-
"xpack.securitySolution.detectionEngine.alerts.histogram.notAvailableTooltip": "Non disponible pour la vue de tendance",
3478934784
"xpack.securitySolution.detectionEngine.alerts.histogram.showingAlertsTitle": "Affichage de : {modifier}{totalAlertsFormatted} {totalAlerts, plural, =1 {alerte} other {alertes}}",
3479034785
"xpack.securitySolution.detectionEngine.alerts.histogram.stackByOptions.groupByLabel": "Regrouper par",
3479134786
"xpack.securitySolution.detectionEngine.alerts.histogram.stackByOptions.groupByTopLabel": "Regrouper par top",

‎x-pack/platform/plugins/private/translations/translations/ja-JP.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34333,7 +34333,6 @@
3433334333
"xpack.securitySolution.components.chartCollapse.noResultMessage": "なし",
3433434334
"xpack.securitySolution.components.chartCollapse.topGroup": "上位のアラート",
3433534335
"xpack.securitySolution.components.chartCollapse.topRule": "上位のアラートルール：",
34336-
"xpack.securitySolution.components.chartSelect.chartsOption": "チャート",
3433734336
"xpack.securitySolution.components.chartSelect.chartsOptionTitle": "まとめ",
3433834337
"xpack.securitySolution.components.chartSelect.legendTitle": "タブを選択",
3433934338
"xpack.securitySolution.components.chartSelect.tableOptionTitle": "カウント",
@@ -34631,12 +34630,9 @@
3463134630
"xpack.securitySolution.detectionEngine.alerts.alertsByGrouping.sourceLabel": "ソース",
3463234631
"xpack.securitySolution.detectionEngine.alerts.alertsByGrouping.userNameLabel": "ユーザー",
3463334632
"xpack.securitySolution.detectionEngine.alerts.alertsByType.alertRuleChartTitle": "名前別アラート",
34634-
"xpack.securitySolution.detectionEngine.alerts.chartsTitle": "チャート",
3463534633
"xpack.securitySolution.detectionEngine.alerts.closedAlertFailedToastMessage": "アラートをクローズできませんでした。",
3463634634
"xpack.securitySolution.detectionEngine.alerts.closedAlertsTitle": "停止中",
3463734635
"xpack.securitySolution.detectionEngine.alerts.closedAlertSuccessToastMessage": "{totalAlerts} {totalAlerts, plural, other {件のアラート}}を正常にクローズしました。",
34638-
"xpack.securitySolution.detectionEngine.alerts.count.columnLabel": "{fieldName}の上位{topN}の値",
34639-
"xpack.securitySolution.detectionEngine.alerts.count.countTableColumnTitle": "レコード数",
3464034636
"xpack.securitySolution.detectionEngine.alerts.count.countTableTitle": "カウント",
3464134637
"xpack.securitySolution.detectionEngine.alerts.createNewTermsTimelineFailure": "document _idのタイムラインを作成できませんでした：{id}",
3464234638
"xpack.securitySolution.detectionEngine.alerts.createNewTermsTimelineFailureTitle": "新しい用語アラートタイムラインを作成できませんでした",
@@ -34646,7 +34642,6 @@
3464634642
"xpack.securitySolution.detectionEngine.alerts.createThresholdTimelineFailureTitle": "しきい値アラートタイムラインを作成できませんでした",
3464734643
"xpack.securitySolution.detectionEngine.alerts.fetchExceptionFilterFailure": "例外フィルターの取得エラー。",
3464834644
"xpack.securitySolution.detectionEngine.alerts.histogram.headerTitle": "傾向",
34649-
"xpack.securitySolution.detectionEngine.alerts.histogram.notAvailableTooltip": "傾向ビューでは使用できません",
3465034645
"xpack.securitySolution.detectionEngine.alerts.histogram.showingAlertsTitle": "{modifier}{totalAlertsFormatted} {totalAlerts, plural, other {件のアラート}}を表示しています",
3465134646
"xpack.securitySolution.detectionEngine.alerts.histogram.stackByOptions.groupByLabel": "グループ分けの条件",
3465234647
"xpack.securitySolution.detectionEngine.alerts.histogram.stackByOptions.groupByTopLabel": "上位でグループ化",

‎x-pack/platform/plugins/private/translations/translations/zh-CN.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33802,7 +33802,6 @@
3380233802
"xpack.securitySolution.components.chartCollapse.noResultMessage": "无",
3380333803
"xpack.securitySolution.components.chartCollapse.topGroup": "排名靠前已告警项",
3380433804
"xpack.securitySolution.components.chartCollapse.topRule": "排名靠前已告警规则：",
33805-
"xpack.securitySolution.components.chartSelect.chartsOption": "图表",
3380633805
"xpack.securitySolution.components.chartSelect.chartsOptionTitle": "摘要",
3380733806
"xpack.securitySolution.components.chartSelect.legendTitle": "选择选项卡",
3380833807
"xpack.securitySolution.components.chartSelect.tableOptionTitle": "计数",
@@ -34101,12 +34100,9 @@
3410134100
"xpack.securitySolution.detectionEngine.alerts.alertsByGrouping.sourceLabel": "源",
3410234101
"xpack.securitySolution.detectionEngine.alerts.alertsByGrouping.userNameLabel": "user",
3410334102
"xpack.securitySolution.detectionEngine.alerts.alertsByType.alertRuleChartTitle": "按名称排列的告警",
34104-
"xpack.securitySolution.detectionEngine.alerts.chartsTitle": "图表",
3410534103
"xpack.securitySolution.detectionEngine.alerts.closedAlertFailedToastMessage": "无法关闭告警。",
3410634104
"xpack.securitySolution.detectionEngine.alerts.closedAlertsTitle": "已关闭",
3410734105
"xpack.securitySolution.detectionEngine.alerts.closedAlertSuccessToastMessage": "已成功关闭 {totalAlerts} 个{totalAlerts, plural, other {告警}}。",
34108-
"xpack.securitySolution.detectionEngine.alerts.count.columnLabel": "排名前 {topN} 的 {fieldName} 值",
34109-
"xpack.securitySolution.detectionEngine.alerts.count.countTableColumnTitle": "记录计数",
3411034106
"xpack.securitySolution.detectionEngine.alerts.count.countTableTitle": "计数",
3411134107
"xpack.securitySolution.detectionEngine.alerts.createNewTermsTimelineFailure": "无法创建文档 _id 的时间线：{id}",
3411234108
"xpack.securitySolution.detectionEngine.alerts.createNewTermsTimelineFailureTitle": "无法创建新的字词告警时间线",
@@ -34116,7 +34112,6 @@
3411634112
"xpack.securitySolution.detectionEngine.alerts.createThresholdTimelineFailureTitle": "无法创建阈值告警时间线",
3411734113
"xpack.securitySolution.detectionEngine.alerts.fetchExceptionFilterFailure": "提取例外筛选时出错。",
3411834114
"xpack.securitySolution.detectionEngine.alerts.histogram.headerTitle": "趋势",
34119-
"xpack.securitySolution.detectionEngine.alerts.histogram.notAvailableTooltip": "不适用于趋势视图",
3412034115
"xpack.securitySolution.detectionEngine.alerts.histogram.showingAlertsTitle": "正在显示：{modifier}{totalAlertsFormatted} 个{totalAlerts, plural, other {告警}}",
3412134116
"xpack.securitySolution.detectionEngine.alerts.histogram.stackByOptions.groupByLabel": "分组依据",
3412234117
"xpack.securitySolution.detectionEngine.alerts.histogram.stackByOptions.groupByTopLabel": "按顶部分组",

‎x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ const TopNComponent: React.FC<Props> = ({
142142
filters={applicableFilters}
143143
headerChildren={headerChildren}
144144
onlyField={field}
145-
paddingSize={paddingSize}
146145
setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget}
147146
hideQueryToggle
148147
/>

‎x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -747,6 +747,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
747747
filters={alertMergedFilters}
748748
signalIndexName={signalIndexName}
749749
defaultStackByOption={defaultRuleStackByOption}
750+
title={i18n.HISTOGRAM_HEADER}
750751
updateDateRange={updateDateRangeCallback}
751752
/>
752753
<EuiSpacer />

‎x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/translations.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,10 @@ export const DELETE_CONFIRMATION_BODY = i18n.translate(
7676
defaultMessage: 'This action will delete the rule. Click "Delete" to continue.',
7777
}
7878
);
79+
80+
export const HISTOGRAM_HEADER = i18n.translate(
81+
'xpack.securitySolution.detectionEngine.alerts.histogram.headerTitle',
82+
{
83+
defaultMessage: 'Trend',
84+
}
85+
);

‎x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
*/
77

88
import type { EuiBasicTableColumn } from '@elastic/eui';
9-
import { EuiInMemoryTable, EuiSpacer, EuiText } from '@elastic/eui';
9+
import { EuiInMemoryTable, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui';
1010
import React from 'react';
11-
import styled from 'styled-components';
11+
import { css } from '@emotion/react';
1212
import type { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
1313
import { ALERT_RULE_NAME } from '@kbn/rule-data-utils';
1414
import { TableId } from '@kbn/securitysolution-data-table';
@@ -18,18 +18,13 @@ import { ALERTS_HEADERS_RULE_NAME } from '../../alerts_table/translations';
1818
import { COUNT_TABLE_TITLE } from '../alerts_count_panel/translations';
1919
import {
2020
CellActionsMode,
21-
SecurityCellActionsTrigger,
2221
SecurityCellActions,
22+
SecurityCellActionsTrigger,
2323
SecurityCellActionType,
2424
} from '../../../../common/components/cell_actions';
2525
import { getSourcererScopeId } from '../../../../helpers';
2626

27-
const Wrapper = styled.div`
28-
margin-top: -${({ theme }) => theme.eui.euiSizeM};
29-
`;
30-
const TableWrapper = styled.div`
31-
height: 210px;
32-
`;
27+
const TABLE_HEIGHT = 210; // px
3328

3429
export interface AlertsByRuleProps {
3530
data: AlertsByRuleData[];
@@ -89,16 +84,28 @@ const SORTING: { sort: { field: keyof AlertsByRuleData; direction: SortOrder } }
8984
},
9085
};
9186

92-
const PAGINATION: {} = {
87+
const PAGINATION = {
9388
pageSize: 25,
9489
showPerPageOptions: false,
9590
};
9691

9792
export const AlertsByRule: React.FC<AlertsByRuleProps> = ({ data, isLoading }) => {
93+
const { euiTheme } = useEuiTheme();
94+
9895
return (
99-
<Wrapper data-test-subj="alerts-by-rule">
96+
<div
97+
data-test-subj="alerts-by-rule"
98+
css={css`
99+
margin-top: -${euiTheme.size.m};
100+
`}
101+
>
100102
<EuiSpacer size="xs" />
101-
<TableWrapper className="eui-yScroll">
103+
<div
104+
className="eui-yScroll"
105+
css={css`
106+
height: ${TABLE_HEIGHT}px;
107+
`}
108+
>
102109
<EuiInMemoryTable
103110
data-test-subj="alerts-by-rule-table"
104111
columns={COLUMNS}
@@ -107,8 +114,8 @@ export const AlertsByRule: React.FC<AlertsByRuleProps> = ({ data, isLoading }) =
107114
sorting={SORTING}
108115
pagination={PAGINATION}
109116
/>
110-
</TableWrapper>
111-
</Wrapper>
117+
</div>
118+
</div>
112119
);
113120
};
114121

‎x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.test.tsx‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,9 @@ import { act } from '@testing-library/react';
1010
import { mount } from 'enzyme';
1111
import type { Action } from '@kbn/ui-actions-plugin/public';
1212
import { AlertsCountPanel } from '.';
13-
14-
import type { Status } from '../../../../../common/api/detection_engine';
1513
import { DEFAULT_STACK_BY_FIELD, DEFAULT_STACK_BY_FIELD1 } from '../common/config';
1614
import { TestProviders } from '../../../../common/mock';
1715
import { ChartContextMenu } from '../chart_panels/chart_context_menu';
18-
import { COUNTS } from '../chart_panels/chart_select/translations';
1916
import { VisualizationEmbeddable } from '../../../../common/components/visualization_actions/visualization_embeddable';
2017

2118
const from = '2022-07-28T08:20:18.966Z';
@@ -46,18 +43,17 @@ jest.mock('../common/hooks', () => ({
4643

4744
const mockSetIsExpanded = jest.fn();
4845
const defaultProps = {
49-
inspectTitle: COUNTS,
50-
signalIndexName: 'signalIndexName',
51-
stackByField0: DEFAULT_STACK_BY_FIELD,
52-
stackByField1: DEFAULT_STACK_BY_FIELD1,
46+
chartOptionsContextMenu: jest.fn(),
47+
extraActions: [{ id: 'resetGroupByFields' }] as Action[],
48+
filters: [],
49+
panelHeight: 300,
5350
setStackByField0: jest.fn(),
5451
setStackByField1: jest.fn(),
52+
stackByField0: DEFAULT_STACK_BY_FIELD,
53+
stackByField1: DEFAULT_STACK_BY_FIELD1,
54+
title: <div>{'test'}</div>,
5555
isExpanded: true,
5656
setIsExpanded: mockSetIsExpanded,
57-
showBuildingBlockAlerts: false,
58-
showOnlyThreatIndicatorAlerts: false,
59-
status: 'open' as Status,
60-
extraActions: [{ id: 'resetGroupByFields' }] as Action[],
6157
};
6258

6359
describe('AlertsCountPanel', () => {
@@ -77,34 +73,6 @@ describe('AlertsCountPanel', () => {
7773
});
7874
});
7975

80-
it('renders with the specified `alignHeader` alignment', async () => {
81-
await act(async () => {
82-
const wrapper = mount(
83-
<TestProviders>
84-
<AlertsCountPanel {...defaultProps} alignHeader="flexEnd" />
85-
</TestProviders>
86-
);
87-
88-
expect(
89-
wrapper.find('[data-test-subj="headerSectionInnerFlexGroup"]').last().getDOMNode().className
90-
).toContain('flexEnd');
91-
});
92-
});
93-
94-
it('renders the inspect button by default', async () => {
95-
await act(async () => {
96-
const wrapper = mount(
97-
<TestProviders>
98-
<AlertsCountPanel {...defaultProps} alignHeader="flexEnd" />
99-
</TestProviders>
100-
);
101-
102-
expect(wrapper.find('button[data-test-subj="inspect-icon-button"]').first().exists()).toBe(
103-
true
104-
);
105-
});
106-
});
107-
10876
it('it does NOT render the inspect button when a `chartOptionsContextMenu` is provided', async () => {
10977
const chartOptionsContextMenu = (queryId: string) => (
11078
<ChartContextMenu
@@ -152,6 +120,7 @@ describe('AlertsCountPanel', () => {
152120
expect(wrapper.find('[data-test-subj="visualization-embeddable"]').exists()).toEqual(true);
153121
});
154122
});
123+
155124
it('when isExpanded is false, hide counts panel', async () => {
156125
await act(async () => {
157126
const wrapper = mount(

0 commit comments

Comments
 (0)