[SecuritySolution] Fix inspect button on host details page (#104011)

* add test

* rename test

* update snapshot

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/security_solution/cypress/integration/hosts/inspect.spec.ts

@@ -6,17 +6,20 @@
  */
 
 import { INSPECT_HOSTS_BUTTONS_IN_SECURITY, INSPECT_MODAL } from '../../screens/inspect';
+import { HOST_OVERVIEW } from '../../screens/hosts/main';
 import { cleanKibana } from '../../tasks/common';
 
-import { closesModal, openStatsAndTables } from '../../tasks/inspect';
-import { loginAndWaitForPage } from '../../tasks/login';
+import { clickInspectButton, closesModal, openStatsAndTables } from '../../tasks/inspect';
+import { loginAndWaitForHostDetailsPage, loginAndWaitForPage } from '../../tasks/login';
 
 import { HOSTS_URL } from '../../urls/navigation';
 
 describe('Inspect', () => {
+  before(() => {
+    cleanKibana();
+  });
   context('Hosts stats and tables', () => {
     before(() => {
-      cleanKibana();
       loginAndWaitForPage(HOSTS_URL);
     });
     afterEach(() => {
@@ -30,4 +33,18 @@ describe('Inspect', () => {
       })
     );
   });
+
+  context('Hosts details', () => {
+    before(() => {
+      loginAndWaitForHostDetailsPage();
+    });
+    afterEach(() => {
+      closesModal();
+    });
+
+    it(`inspects the host details`, () => {
+      clickInspectButton(HOST_OVERVIEW);
+      cy.get(INSPECT_MODAL).should('be.visible');
+    });
+  });
 });

x-pack/plugins/security_solution/cypress/integration/urls/not_found.spec.ts

@@ -71,7 +71,7 @@ describe('Display not found page', () => {
     cy.get(NOT_FOUND).should('exist');
   });
 
-  it('navigates to the trusted applications page with incorrect link', () => {
+  it('navigates to the event filters page with incorrect link', () => {
     loginAndWaitForPage(`${EVENT_FILTERS_URL}/randomUrl`);
     cy.get(NOT_FOUND).should('exist');
   });

x-pack/plugins/security_solution/cypress/screens/hosts/main.ts

@@ -16,3 +16,5 @@ export const EVENTS_TAB = '[data-test-subj="navigation-events"]';
 export const KQL_SEARCH_BAR = '[data-test-subj="queryInput"]';
 
 export const UNCOMMON_PROCESSES_TAB = '[data-test-subj="navigation-uncommonProcesses"]';
+
+export const HOST_OVERVIEW = `[data-test-subj="host-overview"]`;

x-pack/plugins/security_solution/cypress/tasks/inspect.ts

@@ -11,6 +11,10 @@ export const closesModal = () => {
   cy.get('[data-test-subj="modal-inspect-close"]').click();
 };
 
+export const clickInspectButton = (container: string) => {
+  cy.get(`${container} ${INSPECT_BUTTON_ICON}`).trigger('click', { force: true });
+};
+
 export const openStatsAndTables = (table: InspectButtonMetadata) => {
   if (table.tabId) {
     cy.get(table.tabId).click({ force: true });
@@ -21,6 +25,6 @@ export const openStatsAndTables = (table: InspectButtonMetadata) => {
       force: true,
     });
   } else {
-    cy.get(`${table.id} ${INSPECT_BUTTON_ICON}`).trigger('click', { force: true });
+    clickInspectButton(table.id);
   }
 };

x-pack/plugins/security_solution/cypress/tasks/login.ts

@@ -10,6 +10,7 @@ import Url, { UrlObject } from 'url';
 
 import { ROLES } from '../../common/test';
 import { TIMELINE_FLYOUT_BODY } from '../screens/timeline';
+import { hostDetailsUrl } from '../urls/navigation';
 
 /**
  * Credentials in the `kibana.dev.yml` config file will be used to authenticate
@@ -312,6 +313,11 @@ export const loginAndWaitForTimeline = (timelineId: string, role?: ROLES) => {
   cy.get(TIMELINE_FLYOUT_BODY).should('be.visible');
 };
 
+export const loginAndWaitForHostDetailsPage = () => {
+  loginAndWaitForPage(hostDetailsUrl('suricata-iowa'));
+  cy.get('[data-test-subj="loading-spinner"]', { timeout: 12000 }).should('not.exist');
+};
+
 export const waitForPageWithoutDateRange = (url: string, role?: ROLES) => {
   cy.visit(role ? getUrlWithRoute(role, url) : url);
   cy.get('[data-test-subj="headerGlobalNav"]', { timeout: 120000 });

x-pack/plugins/security_solution/cypress/urls/navigation.ts

@@ -23,6 +23,8 @@ export const SECURITY_DETECTIONS_RULES_CREATION_URL = '/app/security/detections/
 export const EXCEPTIONS_URL = 'app/security/exceptions';
 
 export const HOSTS_URL = '/app/security/hosts/allHosts';
+export const hostDetailsUrl = (hostName: string) =>
+  `/app/security/hosts/${hostName}/authentications`;
 export const HOSTS_PAGE_TAB_URLS = {
   allHosts: '/app/security/hosts/allHosts',
   anomalies: '/app/security/hosts/anomalies',

x-pack/plugins/security_solution/public/hosts/pages/details/index.tsx

@@ -97,7 +97,7 @@ const HostDetailsComponent: React.FC<HostDetailsProps> = ({ detailName, hostDeta
   );
 
   const { docValueFields, indicesExist, indexPattern, selectedPatterns } = useSourcererScope();
-  const [loading, { hostDetails: hostOverview, id, refetch }] = useHostDetails({
+  const [loading, { inspect, hostDetails: hostOverview, id, refetch }] = useHostDetails({
     endDate: to,
     startDate: from,
     hostName: detailName,
@@ -169,6 +169,7 @@ const HostDetailsComponent: React.FC<HostDetailsProps> = ({ detailName, hostDeta
                     }}
                     setQuery={setQuery}
                     refetch={refetch}
+                    inspect={inspect}
                   />
                 )}
               </AnomalyTableProvider>

x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx

@@ -203,7 +203,10 @@ export const HostOverview = React.memo<HostSummaryProps>(
     return (
       <>
         <InspectButtonContainer>
-          <OverviewWrapper direction={isInDetailsSidePanel ? 'column' : 'row'}>
+          <OverviewWrapper
+            direction={isInDetailsSidePanel ? 'column' : 'row'}
+            data-test-subj="host-overview"
+          >
             {!isInDetailsSidePanel && (
               <InspectButton queryId={id} title={i18n.INSPECT_TITLE} inspectIndex={0} />
             )}