list UI is backwards compatible

Author: kevinlog

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts

@@ -58,6 +58,7 @@ describe('EndpointList store concerns', () => {
         patternsError: undefined,
         isAutoRefreshEnabled: true,
         autoRefreshInterval: DEFAULT_POLL_INTERVAL,
+        queryStrategyVersion: undefined,
       });
     });
 

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts

@@ -17,6 +17,7 @@ import {
   nonExistingPolicies,
   patterns,
   searchBarQuery,
+  isTransformEnabled,
 } from './selectors';
 import { EndpointState, PolicyIds } from '../types';
 import {
@@ -70,24 +71,6 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
       const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(getState());
       let endpointResponse;
 
-      // get index pattern and fields for search bar
-      if (patterns(getState()).length === 0) {
-        try {
-          const indexPatterns = await fetchIndexPatterns();
-          if (indexPatterns !== undefined) {
-            dispatch({
-              type: 'serverReturnedMetadataPatterns',
-              payload: indexPatterns,
-            });
-          }
-        } catch (error) {
-          dispatch({
-            type: 'serverFailedToReturnMetadataPatterns',
-            payload: error,
-          });
-        }
-      }
-
       try {
         const decodedQuery: Query = searchBarQuery(getState());
 
@@ -134,6 +117,24 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
         });
       }
 
+      // get index pattern and fields for search bar
+      if (patterns(getState()).length === 0 && isTransformEnabled(getState())) {
+        try {
+          const indexPatterns = await fetchIndexPatterns();
+          if (indexPatterns !== undefined) {
+            dispatch({
+              type: 'serverReturnedMetadataPatterns',
+              payload: indexPatterns,
+            });
+          }
+        } catch (error) {
+          dispatch({
+            type: 'serverFailedToReturnMetadataPatterns',
+            payload: error,
+          });
+        }
+      }
+
       // No endpoints, so we should check to see if there are policies for onboarding
       if (endpointResponse && endpointResponse.hosts.length === 0) {
         const http = coreStart.http;

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts

@@ -36,6 +36,7 @@ export const initialEndpointListState: Immutable<EndpointState> = {
   patternsError: undefined,
   isAutoRefreshEnabled: true,
   autoRefreshInterval: DEFAULT_POLL_INTERVAL,
+  queryStrategyVersion: undefined,
 };
 
 /* eslint-disable-next-line complexity */
@@ -49,13 +50,15 @@ export const endpointListReducer: ImmutableReducer<EndpointState, AppAction> = (
       total,
       request_page_size: pageSize,
       request_page_index: pageIndex,
+      query_strategy_version: queryStrategyVersion,
     } = action.payload;
     return {
       ...state,
       hosts,
       total,
       pageSize,
       pageIndex,
+      queryStrategyVersion,
       loading: false,
       error: undefined,
     };

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

@@ -14,6 +14,7 @@ import {
   HostPolicyResponseAppliedAction,
   HostPolicyResponseConfiguration,
   HostPolicyResponseActionStatus,
+  MetadataQueryStrategyVersions,
 } from '../../../../../common/endpoint/types';
 import { EndpointState, EndpointIndexUIQueryParams } from '../types';
 import { extractListPaginationParams } from '../../../common/routing';
@@ -54,11 +55,18 @@ export const isAutoRefreshEnabled = (state: Immutable<EndpointState>) => state.i
 
 export const autoRefreshInterval = (state: Immutable<EndpointState>) => state.autoRefreshInterval;
 
+const queryStrategyVersion = (state: Immutable<EndpointState>) => state.queryStrategyVersion;
+
 export const endpointPackageVersion = createSelector(
   endpointPackageInfo,
   (info) => info?.version ?? undefined
 );
 
+export const isTransformEnabled = createSelector(
+  queryStrategyVersion,
+  (version) => version !== MetadataQueryStrategyVersions.VERSION_1
+);
+
 /**
  * Returns the index patterns for the SearchBar to use for autosuggest
  */

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts

@@ -11,6 +11,7 @@ import {
   HostPolicyResponse,
   AppLocation,
   PolicyData,
+  MetadataQueryStrategyVersions,
 } from '../../../../common/endpoint/types';
 import { ServerApiError } from '../../../common/types';
 import { GetPackagesResponse } from '../../../../../ingest_manager/common';
@@ -65,6 +66,8 @@ export interface EndpointState {
   isAutoRefreshEnabled: boolean;
   /** The current auto refresh interval for data in ms */
   autoRefreshInterval: number;
+  /** The query strategy version that informs whether the transform for KQL is enabled or not */
+  queryStrategyVersion: MetadataQueryStrategyVersions;
 }
 
 /**

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx

@@ -135,6 +135,7 @@ export const EndpointList = () => {
     autoRefreshInterval,
     isAutoRefreshEnabled,
     patternsError,
+    isTransformEnabled,
   } = useEndpointSelector(selector);
   const { formatUrl, search } = useFormatUrl(SecurityPageName.administration);
 
@@ -532,8 +533,8 @@ export const EndpointList = () => {
   const hasListData = listData && listData.length > 0;
 
   const refreshStyle = useMemo(() => {
-    return { display: endpointsExist ? 'flex' : 'none', maxWidth: 200 };
-  }, [endpointsExist]);
+    return { display: endpointsExist && isTransformEnabled ? 'flex' : 'none', maxWidth: 200 };
+  }, [endpointsExist, isTransformEnabled]);
 
   const refreshIsPaused = useMemo(() => {
     return !endpointsExist ? false : hasSelectedEndpoint ? true : !isAutoRefreshEnabled;
@@ -543,6 +544,10 @@ export const EndpointList = () => {
     return !endpointsExist ? DEFAULT_POLL_INTERVAL : autoRefreshInterval;
   }, [endpointsExist, autoRefreshInterval]);
 
+  const shouldShowKQLBar = useMemo(() => {
+    return endpointsExist && !patternsError && isTransformEnabled;
+  }, [endpointsExist, patternsError, isTransformEnabled]);
+
   return (
     <AdministrationListPage
       data-test-subj="endpointPage"
@@ -563,7 +568,7 @@ export const EndpointList = () => {
       {hasSelectedEndpoint && <EndpointDetailsFlyout />}
       <>
         <EuiFlexGroup>
-          {endpointsExist && !patternsError && (
+          {shouldShowKQLBar && (
             <EuiFlexItem>
               <AdminSearchBar />
             </EuiFlexItem>