Merge pull request elastic#21 from Elastic-AWP-Platform/e2e-cypress

session view e2e test with es_archives data

x-pack/plugins/session_view/cypress/README.md

@@ -218,13 +218,13 @@ We use es_archiver to manage the data that our Cypress tests need.
 3. When you are sure that you have all the data you need run the following command from: `x-pack/plugins/session_view`
 
 ```sh
-node ../../../scripts/es_archiver save <nameOfTheFolderWhereDataIsSaved> <indexPatternsToBeSaved>  --dir ../../test/session_view_cypress/es_archives --config ../../../test/functional/config.js --es-url http://<elasticsearchUsername>:<elasticsearchPassword>@<elasticsearchHost>:<elasticsearchPort>
+node ../../../scripts/es_archiver save ../../test/session_view_cypress/es_archives <indexPatternsToBeSaved> --config ../../../test/functional/config.js --es-url http://<elasticsearchUsername>:<elasticsearchPassword>@<elasticsearchHost>:<elasticsearchPort>
 ```
 
 Example:
 
 ```sh
-node ../../../scripts/es_archiver save custom_rules ".kibana",".siem-signal*"  --dir ../../test/session_view_cypress/es_archives --config ../../../test/functional/config.js --es-url http://elastic:changeme@localhost:9220
+node ../../../scripts/es_archiver save ../../test/session_view_cypress/es_archives ".siem-signal*","cmd","cmd_entry_leader" --config ../../../test/functional/config.js --es-url http://elastic:changeme@localhost:9200
 ```
 
 Note that the command will create the folder if it does not exist.

x-pack/plugins/session_view/cypress/integration/session_view.spec.ts

@@ -6,24 +6,85 @@
  */
 
 import { loginAndWaitForPage } from '../tasks/login';
-
 import { SESSION_VIEW_URL } from '../urls/navigation';
-
 import { cleanKibana } from '../tasks/common';
-import { TEST } from '../screens/common/page';
+import { esArchiverLoad } from '../tasks/es_archiver';
+import {
+  PROCESS_TREE,
+  PROCESS_TREE_NODE,
+  PROCESS_TREE_NODE_ALERT,
+  DETAILS_PANEL,
+  DETAILS_PANEL_TOGGLE,
+  DETAILS_PANEL_ALERT,
+  DETAILS_PANEL_COMMAND,
+  DETAILS_PANEL_SESSION,
+  DETAILS_PANEL_SERVER,
+  SEARCH_BAR,
+  getProcessTreeNodeAlertDetailViewRule,
+} from '../screens/common/page';
+
+const LS_TEST_COMMAND = 'ls --color=auto';
+const ALERT_TEST_COMMAND = 'vi EventConverter/package.json';
+const ALERT_NODE_TEST_ID = getProcessTreeNodeAlertDetailViewRule(
+  '1900f4bb07c6fcc64eb754ed97a83a952aa7698eaffe14749709e83f7b6bdb0d'
+);
+const ALERT_RULE_ID = '15b43080-5204-11ec-a8f5-f507bc52c10c';
 
 describe('Display session view test page', () => {
-  before(() => {
+  beforeEach(() => {
     cleanKibana();
+    esArchiverLoad('sessions');
+    loginAndWaitForPage(SESSION_VIEW_URL);
   });
 
-  it('navigates to session view home page', () => {
+  it('General Layout for Session View', () => {
     loginAndWaitForPage(SESSION_VIEW_URL);
-    cy.get(TEST).should('exist');
+    // Checking Search bar exist
+    cy.get(SEARCH_BAR).should('be.visible');
+
+    // Check detail panel and its toggle work correctly
+    cy.get(DETAILS_PANEL).should('not.exist');
+    // Checking Details panel exist
+    cy.get(DETAILS_PANEL_TOGGLE).click();
+    cy.get(DETAILS_PANEL).should('be.visible');
+
+    // Only Session, Server Detail exist when no commands selected when detail panel is open
+    cy.get(DETAILS_PANEL_ALERT).should('not.exist');
+    cy.get(DETAILS_PANEL_COMMAND).should('not.exist');
+    cy.get(DETAILS_PANEL_SESSION).should('be.visible');
+    cy.get(DETAILS_PANEL_SERVER).should('exist');
+
+    const lsCommandNode = cy.get(`${PROCESS_TREE} ${PROCESS_TREE_NODE}`).eq(1);
+    lsCommandNode.contains(LS_TEST_COMMAND).should('be.visible');
+    lsCommandNode.click();
+    // Checking Command, Session, Server Detail exist for a command without alert
+    cy.get(DETAILS_PANEL_ALERT).should('not.exist');
+    cy.get(DETAILS_PANEL_COMMAND).should('be.visible');
+    cy.get(DETAILS_PANEL_SESSION).should('exist');
+    cy.get(DETAILS_PANEL_SERVER).should('exist');
+
+    const viCommand = cy.get(`${PROCESS_TREE} ${PROCESS_TREE_NODE}`).eq(3);
+    viCommand.contains(ALERT_TEST_COMMAND).should('be.visible');
+    viCommand.click();
+    // Checking Command, Session, Server, Alert Detail exist
+    cy.get(DETAILS_PANEL_ALERT).should('exist');
+    cy.get(DETAILS_PANEL_COMMAND).should('be.visible');
+    cy.get(DETAILS_PANEL_SESSION).should('exist');
+    cy.get(DETAILS_PANEL_SERVER).should('exist');
   });
 
-  it('navigates to session view path 1 page', () => {
-    loginAndWaitForPage(`${SESSION_VIEW_URL}/path_1`);
-    cy.get(TEST).contains('current path:').should('have.text', 'current path: /path_1');
+  // it('Search Functionality', () => {
+  //   loginAndWaitForPage(SESSION_VIEW_URL);
+  //   cy.contains('Process Tree').click().wait(1000);
+  //   // STILL NEED TO FIX THIS PART
+  //   cy.get(SEARCH_BAR).last().click().type('ls{enter}');
+  //   cy.get('span[style="[object Object]]').first().should('be.visible');
+  // });
+
+  it('Alerts Check', () => {
+    loginAndWaitForPage(SESSION_VIEW_URL);
+    cy.get(PROCESS_TREE_NODE_ALERT).first().click();
+    cy.get(ALERT_NODE_TEST_ID).first().click();
+    cy.location('pathname').should('contain', `app/security/rules/id/${ALERT_RULE_ID}`);
   });
 });

x-pack/plugins/session_view/cypress/screens/common/page.ts

@@ -4,5 +4,17 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+export const PROCESS_TREE = '[data-test-subj="sessionViewProcessTree"]';
+export const PROCESS_TREE_NODE = '[data-test-subj="processTreeNode"]';
+export const PROCESS_TREE_NODE_ALERT = '[data-test-subj="processTreeNodeAlertButton"]';
+export const SEARCH_BAR = '[data-test-subj="sessionViewProcessEventsSearch"]';
 
-export const TEST = '[data-test-subj="sessionViewTestPage"]';
+export const DETAILS_PANEL = '[data-test-subj="sessionViewDetailPanel"]';
+export const DETAILS_PANEL_TOGGLE = '[data-test-subj="sessionViewDetailPanelToggle"]';
+export const DETAILS_PANEL_ALERT = '[data-test-subj="sessionViewDetailPanelAlertDetail"]';
+export const DETAILS_PANEL_COMMAND = '[data-test-subj="sessionViewDetailPanelCommandDetail"]';
+export const DETAILS_PANEL_SESSION = '[data-test-subj="sessionViewDetailPanelSessionDetail"]';
+export const DETAILS_PANEL_SERVER = '[data-test-subj="sessionViewDetailPanelServerDetail"]';
+
+export const getProcessTreeNodeAlertDetailViewRule = (alertUUID: string) =>
+  `[data-test-subj="sessionViewAlertDetailViewRule-${alertUUID}"]`;

x-pack/plugins/session_view/cypress/tasks/es_archiver.ts

@@ -7,25 +7,23 @@
 
 import Path from 'path';
 
-const ES_ARCHIVE_DIR = '../../test/security_solution_cypress/es_archives';
+const ES_ARCHIVE_DIR = '../../test/session_view_cypress/es_archives';
 const CONFIG_PATH = '../../test/functional/config.js';
 const ES_URL = Cypress.env('ELASTICSEARCH_URL');
 const KIBANA_URL = Cypress.config().baseUrl;
-const CCS_ES_URL = Cypress.env('CCS_ELASTICSEARCH_URL');
-const CCS_KIBANA_URL = Cypress.env('CCS_KIBANA_URL');
 
 // Otherwise cy.exec would inject NODE_TLS_REJECT_UNAUTHORIZED=0 and node would abort if used over https
 const NODE_TLS_REJECT_UNAUTHORIZED = '1';
 
-export const esArchiverLoad = (folder: string) => {
+export const esArchiverLoad = (folder: string = '') => {
   const path = Path.join(ES_ARCHIVE_DIR, folder);
   cy.exec(
     `node ../../../scripts/es_archiver load "${path}" --config "${CONFIG_PATH}" --es-url "${ES_URL}" --kibana-url "${KIBANA_URL}"`,
     { env: { NODE_TLS_REJECT_UNAUTHORIZED } }
   );
 };
 
-export const esArchiverUnload = (folder: string) => {
+export const esArchiverUnload = (folder: string = '') => {
   const path = Path.join(ES_ARCHIVE_DIR, folder);
   cy.exec(
     `node ../../../scripts/es_archiver unload "${path}" --config "${CONFIG_PATH}" --es-url "${ES_URL}" --kibana-url "${KIBANA_URL}"`,
@@ -39,19 +37,3 @@ export const esArchiverResetKibana = () => {
     { env: { NODE_TLS_REJECT_UNAUTHORIZED }, failOnNonZeroExit: false }
   );
 };
-
-export const esArchiverCCSLoad = (folder: string) => {
-  const path = Path.join(ES_ARCHIVE_DIR, folder);
-  cy.exec(
-    `node ../../../scripts/es_archiver load "${path}" --config "${CONFIG_PATH}" --es-url "${CCS_ES_URL}" --kibana-url "${CCS_KIBANA_URL}"`,
-    { env: { NODE_TLS_REJECT_UNAUTHORIZED } }
-  );
-};
-
-export const esArchiverCCSUnload = (folder: string) => {
-  const path = Path.join(ES_ARCHIVE_DIR, folder);
-  cy.exec(
-    `node ../../../scripts/es_archiver unload "${path}" --config "${CONFIG_PATH}" --es-url "${CCS_ES_URL}" --kibana-url "${CCS_KIBANA_URL}"`,
-    { env: { NODE_TLS_REJECT_UNAUTHORIZED } }
-  );
-};

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

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export const SESSION_VIEW_URL = 'app/sessionView';
+export const SESSION_VIEW_URL = 'app/sessionView/process_tree';

x-pack/plugins/session_view/public/components/ProcessTree/index.tsx

@@ -141,7 +141,7 @@ export const ProcessTree = ({
   };
 
   return (
-    <div ref={scrollerRef} css={styles.scroller}>
+    <div ref={scrollerRef} css={styles.scroller} data-test-subj="sessionViewProcessTree">
       {sessionLeader && (
         <ProcessTreeNode
           isSessionLeader

x-pack/plugins/session_view/public/components/ProcessTreeNode/index.tsx

@@ -136,6 +136,7 @@ export function ProcessTreeNode({
         <EuiButton
           css={styles.getButtonStyle(ButtonType.alerts)}
           onClick={() => setAlertsExpanded(!alertsExpanded)}
+          data-test-subj="processTreeNodeAlertButton"
         >
           <FormattedMessage id="xpack.sessionView.alerts" defaultMessage="Alerts" />
           <EuiIcon css={styles.buttonArrow} size="s" type={getExpandedIcon(alertsExpanded)} />

x-pack/plugins/session_view/public/components/SessionView/index.tsx

@@ -134,7 +134,12 @@ export const SessionView = ({ sessionEntityId, height }: SessionViewDeps) => {
           <EuiSearchBar query={searchQuery} onChange={onSearch} />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={toggleDetailPanel} iconType="list" fill>
+          <EuiButton
+            onClick={toggleDetailPanel}
+            iconType="list"
+            fill
+            data-test-subj="sessionViewDetailPanelToggle"
+          >
             <FormattedMessage
               id="xpack.sessionView.buttonOpenDetailPanel"
               defaultMessage="Detail panel"

x-pack/plugins/session_view/public/components/SessionViewDetailPanel/index.tsx

@@ -145,6 +145,7 @@ export const SessionViewDetailPanel = ({
       color="plain"
       css={isDetailMounted ? styles.detailPanelIn : styles.detailPanelOut}
       onAnimationEnd={handleAnimationEnd}
+      data-test-subj="sessionViewDetailPanel"
     >
       {renderSelectedProcessCommandDetail()}
       <div data-test-subj="sessionViewDetailPanelSessionDetail">