Skip to content

[SIEM] Fix filters on Hosts and Network page #56234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 29, 2020
Merged

[SIEM] Fix filters on Hosts and Network page #56234

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
70a2cea
[SIEM] Fix Hosts and Network Tabs filters
patrykkopycinski Jan 28, 2020
49a0b36
cleanup
patrykkopycinski Jan 28, 2020
4e8fda2
Merge branch 'master' into fix/siem-alerts-table-filters
elasticmachine Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/public/components/alerts_viewer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/
import { noop } from 'lodash/fp';
import React, { useEffect, useCallback } from 'react';
import { EuiSpacer } from '@elastic/eui';
import numeral from '@elastic/numeral';

import { AlertsComponentsQueryProps } from './types';
Expand Down Expand Up @@ -79,7 +78,6 @@ export const AlertsView = ({
type={type}
updateDateRange={updateDateRange}
/>
<EuiSpacer size="l" />
<AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
</>
);
Expand Down
87 changes: 45 additions & 42 deletions x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import React, { useState, useEffect, useCallback } from 'react';
import { ScaleType } from '@elastic/charts';

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

return (
<InspectButtonContainer show={!isInitialLoading}>
<Panel data-test-subj={`${id}Panel`}>
{loading && !isInitialLoading && (
<EuiProgress
data-test-subj="initialLoadingPanelMatrixOverTime"
size="xs"
position="absolute"
color="accent"
/>
)}
<>
<InspectButtonContainer show={!isInitialLoading}>
<Panel data-test-subj={`${id}Panel`}>
{loading && !isInitialLoading && (
<EuiProgress
data-test-subj="initialLoadingPanelMatrixOverTime"
size="xs"
position="absolute"
color="accent"
/>
)}

{isInitialLoading ? (
<>
<HeaderSection id={id} title={titleWithStackByField} />
<MatrixLoader />
</>
) : (
<>
<HeaderSection
id={id}
title={titleWithStackByField}
subtitle={!loading && (totalCount >= 0 ? subtitleWithCounts : null)}
>
<EuiFlexGroup alignItems="center" gutterSize="none">
<EuiFlexItem grow={false}>
{stackByOptions?.length > 1 && (
<EuiSelect
onChange={setSelectedChartOptionCallback}
options={stackByOptions}
prepend={i18n.STACK_BY}
value={selectedStackByOption?.value}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>{headerChildren}</EuiFlexItem>
</EuiFlexGroup>
</HeaderSection>
<BarChart barChart={barChartData} configs={barchartConfigs} />
</>
)}
</Panel>
</InspectButtonContainer>
{isInitialLoading ? (
<>
<HeaderSection id={id} title={titleWithStackByField} />
<MatrixLoader />
</>
) : (
<>
<HeaderSection
id={id}
title={titleWithStackByField}
subtitle={!loading && (totalCount >= 0 ? subtitleWithCounts : null)}
>
<EuiFlexGroup alignItems="center" gutterSize="none">
<EuiFlexItem grow={false}>
{stackByOptions?.length > 1 && (
<EuiSelect
onChange={setSelectedChartOptionCallback}
options={stackByOptions}
prepend={i18n.STACK_BY}
value={selectedStackByOption?.value}
/>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>{headerChildren}</EuiFlexItem>
</EuiFlexGroup>
</HeaderSection>
<BarChart barChart={barChartData} configs={barchartConfigs} />
</>
)}
</Panel>
</InspectButtonContainer>
<EuiSpacer size="l" />
</>
);
};

Expand Down
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import React, { useEffect } from 'react';
import { EuiSpacer } from '@elastic/eui';
import * as i18n from './translations';
import { AnomaliesQueryTabBodyProps } from './types';
import { getAnomaliesFilterQuery } from './utils';
Expand Down Expand Up @@ -80,7 +79,6 @@ export const AnomaliesQueryTabBody = ({
type={type}
updateDateRange={updateDateRange}
/>
<EuiSpacer />
<AnomaliesTableComponent
startDate={startDate}
endDate={endDate}
Expand Down
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
setQuery={setQuery}
to={to}
/>
<EuiSpacer size="l" />
<AlertsTable endDate={to} startDate={from} />
</>
)}
Expand Down
12 changes: 9 additions & 3 deletions x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const HostsComponent = React.memo<HostsComponentProps>(
const capabilities = React.useContext(MlCapabilitiesContext);
const kibana = useKibana();
const { tabName } = useParams();
const hostsFilters = React.useMemo(() => {
const tabsFilters = React.useMemo(() => {
if (tabName === HostsTableType.alerts) {
return filters.length > 0 ? [...filters, ...filterAlertsHosts] : filterAlertsHosts;
}
Expand All @@ -77,7 +77,13 @@ export const HostsComponent = React.memo<HostsComponentProps>(
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
indexPattern,
queries: [query],
filters: hostsFilters,
filters,
});
const tabsFilterQuery = convertToBuildEsQuery({
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
indexPattern,
queries: [query],
filters: tabsFilters,
});
return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
<StickyContainer>
Expand Down Expand Up @@ -123,7 +129,7 @@ export const HostsComponent = React.memo<HostsComponentProps>(
<HostsTabs
deleteQuery={deleteQuery}
to={to}
filterQuery={filterQuery}
filterQuery={tabsFilterQuery}
isInitializing={isInitializing}
setQuery={setQuery}
from={from}
Expand Down
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

import { getOr } from 'lodash/fp';
import React, { useEffect } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { AuthenticationTable } from '../../../components/page/hosts/authentications_table';
import { manageQuery } from '../../../components/page/manage_query';
import { AuthenticationsQuery } from '../../../containers/authentications';
Expand Down Expand Up @@ -86,7 +85,6 @@ export const AuthenticationsQueryTabBody = ({
type={hostsModel.HostsType.page}
updateDateRange={updateDateRange}
/>
<EuiSpacer size="l" />
<AuthenticationsQuery
endDate={endDate}
filterQuery={filterQuery}
Expand Down
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import React, { useEffect } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { StatefulEventsViewer } from '../../../components/events_viewer';
import { HostsComponentsQueryProps } from './types';
import { hostsModel } from '../../../store/hosts';
Expand Down Expand Up @@ -65,7 +64,6 @@ export const EventsQueryTabBody = ({
updateDateRange={updateDateRange}
id={EVENTS_HISTOGRAM_ID}
/>
<EuiSpacer size="l" />
<StatefulEventsViewer
defaultModel={eventsDefaultModel}
end={endDate}
Expand Down
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import styled from 'styled-components';

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

Expand Down
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import React, { useEffect, useCallback } from 'react';
import { getOr } from 'lodash/fp';

import { EuiSpacer } from '@elastic/eui';
import { NetworkDnsTable } from '../../../components/page/network/network_dns_table';
import { NetworkDnsQuery, HISTOGRAM_ID } from '../../../containers/network_dns';
import { manageQuery } from '../../../components/page/manage_query';
Expand Down Expand Up @@ -71,7 +70,6 @@ export const DnsQueryTabBody = ({
type={networkModel.NetworkType.page}
updateDateRange={updateDateRange}
/>
<EuiSpacer />
<NetworkDnsQuery
endDate={endDate}
filterQuery={filterQuery}
Expand Down
12 changes: 9 additions & 3 deletions x-pack/legacy/plugins/siem/public/pages/network/network.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
const kibana = useKibana();
const { tabName } = useParams();

const networkFilters = useMemo(() => {
const tabsFilters = useMemo(() => {
if (tabName === NetworkRouteType.alerts) {
return filters.length > 0 ? [...filters, ...filterAlertsNetwork] : filterAlertsNetwork;
}
Expand All @@ -76,7 +76,13 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
indexPattern,
queries: [query],
filters: networkFilters,
filters,
});
const tabsFilterQuery = convertToBuildEsQuery({
config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
indexPattern,
queries: [query],
filters: tabsFilters,
});

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

<NetworkRoutes
filterQuery={filterQuery}
filterQuery={tabsFilterQuery}
from={from}
isInitializing={isInitializing}
indexPattern={indexPattern}
Expand Down
4 changes: 0 additions & 4 deletions x-pack/legacy/plugins/siem/public/pages/overview/overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,6 @@ const OverviewComponent: React.FC<OverviewComponentReduxProps> = ({
to={to}
/>

<EuiSpacer size="l" />

<EventCounts
filters={filters}
from={from}
Expand All @@ -100,8 +98,6 @@ const OverviewComponent: React.FC<OverviewComponentReduxProps> = ({
to={to}
/>

<EuiSpacer size="l" />

<SignalsByCategory
deleteQuery={deleteQuery}
filters={filters}
Expand Down