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

patrykkopycinski · elasticmachine · web-flow · commit 0d2ac94c6b08 · 2020-01-28T22:32:07.000-05:00
* [SIEM] Fix Hosts and Network Tabs filters

* cleanup

Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
diff --git a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/index.tsx b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/index.tsx
@@ -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} />
     </>
   );
diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx
@@ -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" />
+    </>
   );
 };
 
diff --git a/x-pack/legacy/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx b/x-pack/legacy/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx
@@ -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}
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx
@@ -203,7 +203,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
                             setQuery={setQuery}
                             to={to}
                           />
-                          <EuiSpacer size="l" />
                           <AlertsTable endDate={to} startDate={from} />
                         </>
                       )}
diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts.tsx
@@ -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}
diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx
@@ -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}
diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx
@@ -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}
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx b/x-pack/legacy/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx
@@ -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;
   }
 `;
 
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx b/x-pack/legacy/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx
@@ -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}
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx
@@ -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}
diff --git a/x-pack/legacy/plugins/siem/public/pages/overview/overview.tsx b/x-pack/legacy/plugins/siem/public/pages/overview/overview.tsx
@@ -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}

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import styled from 'styled-components';`
`9`	`9`
`10`	`10`	export const ConditionalFlexGroup = styled(EuiFlexGroup)`
`11`	`11`	`@media only screen and (min-width: 1441px) {`
`12`		`- flex-direction: row;`
	`12`	`+ flex-direction: row !important;`
`13`	`13`	`}`
`14`	`14`	`;
`15`	`15`