[Security Solution][Endpoint] Hide agent types on Types filter when on a flyout and other UI changes

x-pack/plugins/security_solution/public/management/components/endpoint_responder/components/action_log_button.tsx

@@ -46,7 +46,7 @@ export const ActionLogButton = memo<EndpointResponderExtensionComponentProps>((p
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
-            <ResponseActionsLog agentIds={props.meta.agentId} />
+            <ResponseActionsLog agentIds={props.meta.agentId} agentType={props.meta.agentType} />
           </EuiFlyoutBody>
         </EuiFlyout>
       )}

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filter.tsx

@@ -13,6 +13,7 @@ import {
   isAgentType,
 } from '../../../../../common/endpoint/service/response_actions/type_guards';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import type { ResponseActionAgentType } from '../../../../../common/endpoint/service/response_actions/constants';
 import {
   RESPONSE_ACTION_API_COMMAND_TO_CONSOLE_COMMAND_MAP,
   type ResponseActionsApiCommandNames,
@@ -30,12 +31,14 @@ import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
 
 export const ActionsLogFilter = memo(
   ({
+    agentType,
     filterName,
     typesFilters,
     isFlyout,
     onChangeFilterOptions,
     'data-test-subj': dataTestSubj,
   }: {
+    agentType?: ResponseActionAgentType;
     filterName: ActionsLogPopupFilters;
     typesFilters?: TypesFilters;
     isFlyout: boolean;
@@ -74,6 +77,7 @@ export const ActionsLogFilter = memo(
       setUrlTypesFilters,
       setUrlTypeFilters,
     } = useActionsLogFilter({
+      agentType,
       filterName,
       isFlyout,
       searchString,
@@ -211,7 +215,13 @@ export const ActionsLogFilter = memo(
       // update filter UI options state
       setItems(
         items.map((option) => {
-          option.checked = undefined;
+          // for flyout filter don't uncheck selected agent type
+          if (agentType && agentType === option.key) {
+            option.checked = 'on';
+          } else {
+            option.checked = undefined;
+          }
+
           return option;
         })
       );
@@ -231,14 +241,15 @@ export const ActionsLogFilter = memo(
 
       // update query state for flyout filters
       if (typesFilters && typeof onChangeFilterOptions === 'undefined') {
-        typesFilters.agentTypes.onChangeFilterOptions([]);
+        typesFilters.agentTypes.onChangeFilterOptions(agentType ? [agentType] : []);
         typesFilters.actionTypes.onChangeFilterOptions([]);
       } else {
         if (typeof onChangeFilterOptions !== 'undefined') {
           onChangeFilterOptions([]);
         }
       }
     }, [
+      agentType,
       setItems,
       items,
       isFlyout,

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx

@@ -10,6 +10,7 @@ import type {
   DurationRange,
   OnRefreshChangeProps,
 } from '@elastic/eui/src/components/date_picker/types';
+import type { ResponseActionAgentType } from '../../../../../common/endpoint/service/response_actions/constants';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import type { useGetEndpointActionList } from '../../../hooks';
 import {
@@ -22,6 +23,7 @@ import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
 
 export const ActionsLogFilters = memo(
   ({
+    agentType,
     dateRangePickerState,
     isDataLoading,
     isFlyout,
@@ -38,6 +40,7 @@ export const ActionsLogFilters = memo(
     showHostsFilter,
     'data-test-subj': dataTestSubj,
   }: {
+    agentType: ResponseActionAgentType | undefined;
     dateRangePickerState: DateRangePickerValues;
     isDataLoading: boolean;
     isFlyout: boolean;
@@ -89,6 +92,7 @@ export const ActionsLogFilters = memo(
           {isSentinelOneV1Enabled
             ? responseActionsEnabled && (
                 <ActionsLogFilter
+                  agentType={agentType}
                   filterName={'types'}
                   typesFilters={{
                     agentTypes: { onChangeFilterOptions: onChangeAgentTypesFilter },
@@ -109,6 +113,7 @@ export const ActionsLogFilters = memo(
         </>
       );
     }, [
+      agentType,
       showHostsFilter,
       isFlyout,
       isSentinelOneV1Enabled,

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/hooks.tsx

@@ -13,6 +13,7 @@ import type {
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { getAgentTypeName } from '../../../../common/translations';
 import { ExperimentalFeaturesService } from '../../../../common/experimental_features_service';
+import type { ResponseActionAgentType } from '../../../../../common/endpoint/service/response_actions/constants';
 import {
   RESPONSE_ACTION_AGENT_TYPE,
   RESPONSE_ACTION_API_COMMAND_TO_CONSOLE_COMMAND_MAP,
@@ -126,6 +127,7 @@ export type FilterItems = Array<{
   label: string;
   isGroupLabel?: boolean;
   checked?: 'on' | undefined;
+  disabled?: boolean;
   'data-test-subj'?: string;
 }>;
 
@@ -166,14 +168,21 @@ export type ActionsLogPopupFilters = Extract<
 const getTypesFilterInitialState = (
   isSentinelOneV1Enabled: boolean,
   isFlyout: boolean,
+  agentType?: ResponseActionAgentType,
   agentTypes?: string[],
   types?: string[]
 ): FilterItems => {
-  const getFilterOptions = ({ key, label, checked }: FilterItems[number]): FilterItems[number] => ({
+  const getFilterOptions = ({
+    key,
+    label,
+    checked,
+    disabled = false,
+  }: FilterItems[number]): FilterItems[number] => ({
     key,
     label,
     isGroupLabel: false,
     checked,
+    disabled,
     'data-test-subj': `types-filter-option`,
   });
 
@@ -189,6 +198,22 @@ const getTypesFilterInitialState = (
   // v8.13 onwards
   // for showing agent types and action types in the same filter
   if (isSentinelOneV1Enabled) {
+    // compute if agent type option is checked
+    const getIsChecked = (type: ResponseActionAgentType) => {
+      // for page filters
+      if (!isFlyout) {
+        if (agentTypes?.includes(type)) {
+          return 'on';
+        }
+      }
+
+      // for flyout filters
+      // pre select the current agent type
+      if (type === agentType) {
+        return 'on';
+      }
+    };
+
     return [
       {
         label: FILTER_NAMES.agentTypes,
@@ -198,7 +223,10 @@ const getTypesFilterInitialState = (
         getFilterOptions({
           key: type,
           label: getAgentTypeName(type),
-          checked: !isFlyout && agentTypes?.includes(type) ? 'on' : undefined,
+          checked: getIsChecked(type),
+          // for flyout filters disable agent types,
+          // that are not the current agent type
+          disabled: isFlyout,
         })
       ),
       {
@@ -213,10 +241,12 @@ const getTypesFilterInitialState = (
 };
 
 export const useActionsLogFilter = ({
+  agentType,
   filterName,
   isFlyout,
   searchString,
 }: {
+  agentType?: ResponseActionAgentType;
   filterName: ActionsLogPopupFilters;
   isFlyout: boolean;
   searchString: string;
@@ -274,7 +304,7 @@ export const useActionsLogFilter = ({
   // filter options
   const [items, setItems] = useState<FilterItems>(
     isTypesFilter
-      ? getTypesFilterInitialState(isSentinelOneV1Enabled, isFlyout, agentTypes, types)
+      ? getTypesFilterInitialState(isSentinelOneV1Enabled, isFlyout, agentType, agentTypes, types)
       : isStatusesFilter
       ? RESPONSE_ACTION_STATUS.map((statusName) => ({
           key: statusName,

x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/response_actions_log.tsx

@@ -34,13 +34,15 @@ import { ActionsLogTable } from './components/actions_log_table';
 
 export const ResponseActionsLog = memo<
   Pick<EndpointActionListRequestQuery, 'agentIds'> & {
+    agentType?: ResponseActionAgentType;
     showHostNames?: boolean;
     isFlyout?: boolean;
     setIsDataInResponse?: (isData: boolean) => void;
     'data-test-subj'?: string;
   }
 >(
   ({
+    agentType,
     agentIds,
     showHostNames = false,
     isFlyout = true,
@@ -73,7 +75,7 @@ export const ResponseActionsLog = memo<
       page: isFlyout ? 1 : paginationFromUrlParams.page,
       pageSize: isFlyout ? 10 : paginationFromUrlParams.pageSize,
       agentIds: isFlyout ? agentIds : agentIdsFromUrl?.length ? agentIdsFromUrl : agentIds,
-      agentTypes: [],
+      agentTypes: isFlyout && agentType ? [agentType] : [],
       commands: [],
       statuses: [],
       userIds: [],
@@ -275,6 +277,7 @@ export const ResponseActionsLog = memo<
     return (
       <>
         <ActionsLogFilters
+          agentType={agentType}
           isFlyout={isFlyout}
           dateRangePickerState={dateRangePickerState}
           isDataLoading={isFetching}

x-pack/plugins/security_solution/public/management/hooks/use_with_show_responder.tsx

@@ -32,6 +32,7 @@ type ShowResponseActionsConsole = (props: ResponderInfoProps) => void;
 export interface BasicConsoleProps {
   agentId: string;
   hostName: string;
+  agentType: ResponseActionAgentType;
 }
 
 type ResponderInfoProps =
@@ -124,6 +125,7 @@ export const useWithShowResponder = (): ShowResponseActionsConsole => {
             meta: {
               agentId,
               hostName,
+              agentType,
             },
             consoleProps,
             PageTitleComponent: () => <>{RESPONDER_PAGE_TITLE}</>,

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

@@ -82,7 +82,7 @@ export const EndpointDetails = memo(() => {
             name: 'endpointActivityLog',
             selected_endpoint: id,
           }),
-          content: <ResponseActionsLog agentIds={id} />,
+          content: <ResponseActionsLog agentIds={id} agentType={'endpoint'} />,
         });
       }
       return tabs;