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

* [SIEM] Fix Hosts and Network Tabs filters

* cleanup

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: patrykkopycinski <contact@patrykkopycinski.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Xavier Mouligneau 2020-01-28 23:54:36 -05:00 committed by GitHub
parent 5ec64d5e3f
commit cd41d4ec72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 64 additions and 64 deletions

View file

@ -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';
@ -79,7 +78,6 @@ export const AlertsView = ({
type={type}
updateDateRange={updateDateRange}
/>
<EuiSpacer size="l" />
<AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
</>
);

View file

@ -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';
@ -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" />
</>
);
};

View file

@ -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';
@ -80,7 +79,6 @@ export const AnomaliesQueryTabBody = ({
type={type}
updateDateRange={updateDateRange}
/>
<EuiSpacer />
<AnomaliesTableComponent
startDate={startDate}
endDate={endDate}

View file

@ -203,7 +203,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
setQuery={setQuery}
to={to}
/>
<EuiSpacer size="l" />
<AlertsTable endDate={to} startDate={from} />
</>
)}

View file

@ -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;
}
@ -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>
@ -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}

View file

@ -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';
@ -86,7 +85,6 @@ export const AuthenticationsQueryTabBody = ({
type={hostsModel.HostsType.page}
updateDateRange={updateDateRange}
/>
<EuiSpacer size="l" />
<AuthenticationsQuery
endDate={endDate}
filterQuery={filterQuery}

View file

@ -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';
@ -65,7 +64,6 @@ export const EventsQueryTabBody = ({
updateDateRange={updateDateRange}
id={EVENTS_HISTOGRAM_ID}
/>
<EuiSpacer size="l" />
<StatefulEventsViewer
defaultModel={eventsDefaultModel}
end={endDate}

View file

@ -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;
}
`;

View file

@ -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';
@ -71,7 +70,6 @@ export const DnsQueryTabBody = ({
type={networkModel.NetworkType.page}
updateDateRange={updateDateRange}
/>
<EuiSpacer />
<NetworkDnsQuery
endDate={endDate}
filterQuery={filterQuery}

View file

@ -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;
}
@ -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) ? (
@ -133,7 +139,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
<EuiSpacer />
<NetworkRoutes
filterQuery={filterQuery}
filterQuery={tabsFilterQuery}
from={from}
isInitializing={isInitializing}
indexPattern={indexPattern}

View file

@ -76,8 +76,6 @@ const OverviewComponent: React.FC<OverviewComponentReduxProps> = ({
to={to}
/>
<EuiSpacer size="l" />
<EventCounts
filters={filters}
from={from}
@ -100,8 +98,6 @@ const OverviewComponent: React.FC<OverviewComponentReduxProps> = ({
to={to}
/>
<EuiSpacer size="l" />
<SignalsByCategory
deleteQuery={deleteQuery}
filters={filters}