[SIEM] Changes ML conditional links to use tabs, fixes a small bug with null filterQuery

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.test.ts

@@ -17,6 +17,7 @@ describe('add_entities_to_kql', () => {
   afterAll(() => {
     console.log = originalError;
   });
+
   describe('#entityToKql', () => {
     test('returns empty string with no entity names defined and an empty entity string', () => {
       const entity = entityToKql([], '');
@@ -165,5 +166,10 @@ describe('add_entities_to_kql', () => {
         '(filterQuery:(expression:\'(host.name: "host-name-1" or host.name: "host-name-2") and (process.name : "")\',kind:kuery))'
       );
     });
+
+    test('returns kql expression with a null filterQuery', () => {
+      const entity = addEntitiesToKql(['host.name'], ['host-1'], '(filterQuery:!n)');
+      expect(entity).toEqual('(filterQuery:(expression:\'(host.name: "host-1")\'))');
+    });
   });
 });

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.ts

@@ -52,6 +52,10 @@ export const addEntitiesToKql = (
         }
         return encode(value);
       }
+    } else if (value.filterQuery == null) {
+      const entitiesKql = entitiesToKql(entityNames, entities);
+      value.filterQuery = { expression: `(${entitiesKql})` };
+      return encode(value);
     }
   }
   return kqlQuery;

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/ml_host_conditional_container.tsx

@@ -6,31 +6,27 @@
 
 import React from 'react';
 
-import { match as RouteMatch, Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
 import { QueryString } from 'ui/utils/query_string';
-import { pure } from 'recompose';
 import { addEntitiesToKql } from './add_entities_to_kql';
 import { replaceKQLParts } from './replace_kql_parts';
 import { emptyEntity, multipleEntities, getMultipleEntities } from './entity_helpers';
 import { replaceKqlQueryLocationForHostPage } from './replace_kql_query_location_for_host_page';
 
-interface MlHostConditionalProps {
-  match: RouteMatch<{}>;
-  location: Location;
-}
-
 interface QueryStringType {
   '?_g': string;
   kqlQuery: string | null;
   timerange: string | null;
 }
 
-export const MlHostConditionalContainer = pure<MlHostConditionalProps>(({ match }) => (
+type MlHostConditionalProps = Partial<RouteComponentProps<{}>> & { url: string };
+
+export const MlHostConditionalContainer = React.memo<MlHostConditionalProps>(({ url }) => (
   <Switch>
     <Route
       strict
       exact
-      path={match.url}
+      path={url}
       render={({ location }) => {
         const queryStringDecoded: QueryStringType = QueryString.decode(
           location.search.substring(1)
@@ -43,7 +39,7 @@ export const MlHostConditionalContainer = pure<MlHostConditionalProps>(({ match
       }}
     />
     <Route
-      path={`${match.url}/:hostName`}
+      path={`${url}/:hostName`}
       render={({
         location,
         match: {
@@ -63,7 +59,7 @@ export const MlHostConditionalContainer = pure<MlHostConditionalProps>(({ match
             );
           }
           const reEncoded = QueryString.encode(queryStringDecoded);
-          return <Redirect to={`/hosts?${reEncoded}`} />;
+          return <Redirect to={`/hosts/anomalies?${reEncoded}`} />;
         } else if (multipleEntities(hostName)) {
           const hosts: string[] = getMultipleEntities(hostName);
           if (queryStringDecoded.kqlQuery != null) {
@@ -77,10 +73,10 @@ export const MlHostConditionalContainer = pure<MlHostConditionalProps>(({ match
             );
           }
           const reEncoded = QueryString.encode(queryStringDecoded);
-          return <Redirect to={`/hosts?${reEncoded}`} />;
+          return <Redirect to={`/hosts/anomalies?${reEncoded}`} />;
         } else {
           const reEncoded = QueryString.encode(queryStringDecoded);
-          return <Redirect to={`/hosts/${hostName}?${reEncoded}`} />;
+          return <Redirect to={`/hosts/${hostName}/anomalies?${reEncoded}`} />;
         }
       }}
     />

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/ml_network_conditional_container.tsx

@@ -6,31 +6,27 @@
 
 import React from 'react';
 
-import { match as RouteMatch, Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
 import { QueryString } from 'ui/utils/query_string';
-import { pure } from 'recompose';
 import { addEntitiesToKql } from './add_entities_to_kql';
 import { replaceKQLParts } from './replace_kql_parts';
 import { emptyEntity, getMultipleEntities, multipleEntities } from './entity_helpers';
 import { replaceKqlQueryLocationForNetworkPage } from './replace_kql_query_location_for_network_page';
 
-interface MlNetworkConditionalProps {
-  match: RouteMatch<{}>;
-  location: Location;
-}
-
 interface QueryStringType {
   '?_g': string;
   kqlQuery: string | null;
   timerange: string | null;
 }
 
-export const MlNetworkConditionalContainer = pure<MlNetworkConditionalProps>(({ match }) => (
+type MlNetworkConditionalProps = Partial<RouteComponentProps<{}>> & { url: string };
+
+export const MlNetworkConditionalContainer = React.memo<MlNetworkConditionalProps>(({ url }) => (
   <Switch>
     <Route
       strict
       exact
-      path={match.url}
+      path={url}
       render={({ location }) => {
         const queryStringDecoded: QueryStringType = QueryString.decode(
           location.search.substring(1)
@@ -43,7 +39,7 @@ export const MlNetworkConditionalContainer = pure<MlNetworkConditionalProps>(({
       }}
     />
     <Route
-      path={`${match.url}/ip/:ip`}
+      path={`${url}/ip/:ip`}
       render={({
         location,
         match: {

x-pack/legacy/plugins/siem/public/pages/home/index.tsx

@@ -153,8 +153,18 @@ export const HomePage = pure(() => (
                     />
                     <Route path="/:pageName(timelines)" render={() => <Timelines />} />
                     <Route path="/link-to" component={LinkToPage} />
-                    <Route path="/ml-hosts" component={MlHostConditionalContainer} />
-                    <Route path="/ml-network" component={MlNetworkConditionalContainer} />
+                    <Route
+                      path="/ml-hosts"
+                      render={({ match, location }) => (
+                        <MlHostConditionalContainer url={match.url} location={location} />
+                      )}
+                    />
+                    <Route
+                      path="/ml-network"
+                      render={({ match, location }) => (
+                        <MlNetworkConditionalContainer url={match.url} location={location} />
+                      )}
+                    />
                     <Route component={NotFoundPage} />
                   </Switch>
                 </EuiPageBody>