Skip to content

Commit 4df9a1c

Browse files
patrykkopycinskielasticmachine
authored and
XavierM
committed
[SIEM] Fix filters on Hosts and Network page (#56234)
* [SIEM] Fix Hosts and Network Tabs filters * cleanup Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 4eb0516 commit 4df9a1c

11 files changed

Lines changed: 64 additions & 64 deletions

File tree

‎x-pack/legacy/plugins/siem/public/components/alerts_viewer/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66
import { noop } from 'lodash/fp';
77
import React, { useEffect, useCallback } from 'react';
8-
import { EuiSpacer } from '@elastic/eui';
98
import numeral from '@elastic/numeral';
109

1110
import { AlertsComponentsQueryProps } from './types';
@@ -79,7 +78,6 @@ export const AlertsView = ({
7978
type={type}
8079
updateDateRange={updateDateRange}
8180
/>
82-
<EuiSpacer size="l" />
8381
<AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
8482
</>
8583
);

‎x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx‎

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import React, { useState, useEffect, useCallback } from 'react';
88
import { ScaleType } from '@elastic/charts';
99

10-
import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect } from '@elastic/eui';
10+
import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect, EuiSpacer } from '@elastic/eui';
1111
import { noop } from 'lodash/fp';
1212
import * as i18n from './translations';
1313
import { BarChart } from '../charts/barchart';
@@ -141,48 +141,51 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
141141
}
142142

143143
return (
144-
<InspectButtonContainer show={!isInitialLoading}>
145-
<Panel data-test-subj={`${id}Panel`}>
146-
{loading && !isInitialLoading && (
147-
<EuiProgress
148-
data-test-subj="initialLoadingPanelMatrixOverTime"
149-
size="xs"
150-
position="absolute"
151-
color="accent"
152-
/>
153-
)}
144+
<>
145+
<InspectButtonContainer show={!isInitialLoading}>
146+
<Panel data-test-subj={`${id}Panel`}>
147+
{loading && !isInitialLoading && (
148+
<EuiProgress
149+
data-test-subj="initialLoadingPanelMatrixOverTime"
150+
size="xs"
151+
position="absolute"
152+
color="accent"
153+
/>
154+
)}
154155

155-
{isInitialLoading ? (
156-
<>
157-
<HeaderSection id={id} title={titleWithStackByField} />
158-
<MatrixLoader />
159-
</>
160-
) : (
161-
<>
162-
<HeaderSection
163-
id={id}
164-
title={titleWithStackByField}
165-
subtitle={!loading && (totalCount >= 0 ? subtitleWithCounts : null)}
166-
>
167-
<EuiFlexGroup alignItems="center" gutterSize="none">
168-
<EuiFlexItem grow={false}>
169-
{stackByOptions?.length > 1 && (
170-
<EuiSelect
171-
onChange={setSelectedChartOptionCallback}
172-
options={stackByOptions}
173-
prepend={i18n.STACK_BY}
174-
value={selectedStackByOption?.value}
175-
/>
176-
)}
177-
</EuiFlexItem>
178-
<EuiFlexItem grow={false}>{headerChildren}</EuiFlexItem>
179-
</EuiFlexGroup>
180-
</HeaderSection>
181-
<BarChart barChart={barChartData} configs={barchartConfigs} />
182-
</>
183-
)}
184-
</Panel>
185-
</InspectButtonContainer>
156+
{isInitialLoading ? (
157+
<>
158+
<HeaderSection id={id} title={titleWithStackByField} />
159+
<MatrixLoader />
160+
</>
161+
) : (
162+
<>
163+
<HeaderSection
164+
id={id}
165+
title={titleWithStackByField}
166+
subtitle={!loading && (totalCount >= 0 ? subtitleWithCounts : null)}
167+
>
168+
<EuiFlexGroup alignItems="center" gutterSize="none">
169+
<EuiFlexItem grow={false}>
170+
{stackByOptions?.length > 1 && (
171+
<EuiSelect
172+
onChange={setSelectedChartOptionCallback}
173+
options={stackByOptions}
174+
prepend={i18n.STACK_BY}
175+
value={selectedStackByOption?.value}
176+
/>
177+
)}
178+
</EuiFlexItem>
179+
<EuiFlexItem grow={false}>{headerChildren}</EuiFlexItem>
180+
</EuiFlexGroup>
181+
</HeaderSection>
182+
<BarChart barChart={barChartData} configs={barchartConfigs} />
183+
</>
184+
)}
185+
</Panel>
186+
</InspectButtonContainer>
187+
<EuiSpacer size="l" />
188+
</>
186189
);
187190
};
188191

‎x-pack/legacy/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66

77
import React, { useEffect } from 'react';
8-
import { EuiSpacer } from '@elastic/eui';
98
import * as i18n from './translations';
109
import { AnomaliesQueryTabBodyProps } from './types';
1110
import { getAnomaliesFilterQuery } from './utils';
@@ -80,7 +79,6 @@ export const AnomaliesQueryTabBody = ({
8079
type={type}
8180
updateDateRange={updateDateRange}
8281
/>
83-
<EuiSpacer />
8482
<AnomaliesTableComponent
8583
startDate={startDate}
8684
endDate={endDate}

‎x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
203203
setQuery={setQuery}
204204
to={to}
205205
/>
206-
<EuiSpacer size="l" />
207206
<AlertsTable endDate={to} startDate={from} />
208207
</>
209208
)}

‎x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const HostsComponent = React.memo<HostsComponentProps>(
5656
const capabilities = React.useContext(MlCapabilitiesContext);
5757
const kibana = useKibana();
5858
const { tabName } = useParams();
59-
const hostsFilters = React.useMemo(() => {
59+
const tabsFilters = React.useMemo(() => {
6060
if (tabName === HostsTableType.alerts) {
6161
return filters.length > 0 ? [...filters, ...filterAlertsHosts] : filterAlertsHosts;
6262
}
@@ -77,7 +77,13 @@ export const HostsComponent = React.memo<HostsComponentProps>(
7777
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
7878
indexPattern,
7979
queries: [query],
80-
filters: hostsFilters,
80+
filters,
81+
});
82+
const tabsFilterQuery = convertToBuildEsQuery({
83+
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
84+
indexPattern,
85+
queries: [query],
86+
filters: tabsFilters,
8187
});
8288
return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
8389
<StickyContainer>
@@ -123,7 +129,7 @@ export const HostsComponent = React.memo<HostsComponentProps>(
123129
<HostsTabs
124130
deleteQuery={deleteQuery}
125131
to={to}
126-
filterQuery={filterQuery}
132+
filterQuery={tabsFilterQuery}
127133
isInitializing={isInitializing}
128134
setQuery={setQuery}
129135
from={from}

‎x-pack/legacy/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import { getOr } from 'lodash/fp';
88
import React, { useEffect } from 'react';
9-
import { EuiSpacer } from '@elastic/eui';
109
import { AuthenticationTable } from '../../../components/page/hosts/authentications_table';
1110
import { manageQuery } from '../../../components/page/manage_query';
1211
import { AuthenticationsQuery } from '../../../containers/authentications';
@@ -86,7 +85,6 @@ export const AuthenticationsQueryTabBody = ({
8685
type={hostsModel.HostsType.page}
8786
updateDateRange={updateDateRange}
8887
/>
89-
<EuiSpacer size="l" />
9088
<AuthenticationsQuery
9189
endDate={endDate}
9290
filterQuery={filterQuery}

‎x-pack/legacy/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66

77
import React, { useEffect } from 'react';
8-
import { EuiSpacer } from '@elastic/eui';
98
import { StatefulEventsViewer } from '../../../components/events_viewer';
109
import { HostsComponentsQueryProps } from './types';
1110
import { hostsModel } from '../../../store/hosts';
@@ -65,7 +64,6 @@ export const EventsQueryTabBody = ({
6564
updateDateRange={updateDateRange}
6665
id={EVENTS_HISTOGRAM_ID}
6766
/>
68-
<EuiSpacer size="l" />
6967
<StatefulEventsViewer
7068
defaultModel={eventsDefaultModel}
7169
end={endDate}

‎x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import styled from 'styled-components';
99

1010
export const ConditionalFlexGroup = styled(EuiFlexGroup)`
1111
@media only screen and (min-width: 1441px) {
12-
flex-direction: row;
12+
flex-direction: row !important;
1313
}
1414
`;
1515

‎x-pack/legacy/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import React, { useEffect, useCallback } from 'react';
88
import { getOr } from 'lodash/fp';
99

10-
import { EuiSpacer } from '@elastic/eui';
1110
import { NetworkDnsTable } from '../../../components/page/network/network_dns_table';
1211
import { NetworkDnsQuery, HISTOGRAM_ID } from '../../../containers/network_dns';
1312
import { manageQuery } from '../../../components/page/manage_query';
@@ -71,7 +70,6 @@ export const DnsQueryTabBody = ({
7170
type={networkModel.NetworkType.page}
7271
updateDateRange={updateDateRange}
7372
/>
74-
<EuiSpacer />
7573
<NetworkDnsQuery
7674
endDate={endDate}
7775
filterQuery={filterQuery}

‎x-pack/legacy/plugins/siem/public/pages/network/network.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
5454
const kibana = useKibana();
5555
const { tabName } = useParams();
5656

57-
const networkFilters = useMemo(() => {
57+
const tabsFilters = useMemo(() => {
5858
if (tabName === NetworkRouteType.alerts) {
5959
return filters.length > 0 ? [...filters, ...filterAlertsNetwork] : filterAlertsNetwork;
6060
}
@@ -76,7 +76,13 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
7676
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
7777
indexPattern,
7878
queries: [query],
79-
filters: networkFilters,
79+
filters,
80+
});
81+
const tabsFilterQuery = convertToBuildEsQuery({
82+
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
83+
indexPattern,
84+
queries: [query],
85+
filters: tabsFilters,
8086
});
8187

8288
return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
@@ -133,7 +139,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
133139
<EuiSpacer />
134140

135141
<NetworkRoutes
136-
filterQuery={filterQuery}
142+
filterQuery={tabsFilterQuery}
137143
from={from}
138144
isInitializing={isInitializing}
139145
indexPattern={indexPattern}

0 commit comments

Comments
 (0)