Open 2 tabs on search if needed - #156

Author: VincentD06

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
 * Description for Group By fields ([issue #153](https://github.com/airbus-cyber/graylog-plugin-alert-wizard/issues/153)) 
 * Remove load message ([issue #146](https://github.com/airbus-cyber/graylog-plugin-alert-wizard/issues/146))
 * Open Search in new tab ([issue #147](https://github.com/airbus-cyber/graylog-plugin-alert-wizard/issues/147))
+* Open Search in two tabs for OR, THEN, AND ([issue #156](https://github.com/airbus-cyber/graylog-plugin-alert-wizard/issues/156))
 
 ## [6.1.1](https://github.com/airbus-cyber/graylog-plugin-alert-wizard/compare/6.1.0...6.1.1)
 ### Bug Fixes

e2e/tests/test-utils.js

@@ -15,13 +15,13 @@ export async function open_alert_page_and_filter(page, filter) {
     await page.waitForTimeout(500);
 }
 
-export async function fill_field_condition(page, input, option, value) {
-    await page.getByRole('button', { name: 'add_circle' }).first().click();
+export async function fill_field_condition(page, input, option, value, nth= 0) {
+    await page.getByRole('button', { name: 'add_circle' }).nth(nth).click();
     await page.waitForTimeout(200);
-    await page.locator('#field-input').fill(input);
+    await page.locator('#field-input').nth(nth).fill(input);
     await page.waitForTimeout(200);
-    await page.getByText('arrow_drop_down').nth(2).click();
+    await page.getByText('arrow_drop_down').nth(nth * 3 + 2).click();
     await page.getByRole('option', { name: option }).click();
-    await page.locator('#value').fill(value);
+    await page.locator('#value').nth(nth).fill(value);
     await page.waitForTimeout(200);
 }

e2e/tests/wizard.spec.js

@@ -53,7 +53,7 @@ test('go_on_search_page_when_click_on_search_button', async ({ page }) => {
 
   // Go on search page
   await open_alert_page_and_filter(page, title);
-  await page.getByRole('link', { name: 'play_arrow' }).click();
+  await page.getByRole('button', { name: 'play_arrow' }).click();
 
   // Wait new tab
   await page.waitForTimeout(200);
@@ -62,6 +62,59 @@ test('go_on_search_page_when_click_on_search_button', async ({ page }) => {
   await expect(pages[1].getByText(searchQuery)).toBeVisible();
 });
 
+test('open_two_tabs_when_click_on_search_button', async ({ page }) => {
+  await page.goto('/wizard/AlertRules');
+
+  await login_steps(page);
+
+  // Fill Title
+  const title = `AAA-${crypto.randomUUID()}`;
+  await page.getByRole('link', { name: 'Create' }).click();
+  await page.getByRole('button', { name: 'OR' }).click();
+  await page.locator('#title').fill(title);
+
+  // Add 1st Field Condition
+  await fill_field_condition(page, 'message', 'matches exactly', 'abc');
+
+  // Fill 1st Search Query
+  const searchQuery = 'a?c';
+  await page.locator('#search_query').first().fill(searchQuery);
+  await page.waitForTimeout(200);
+
+  // Add 2nd Field Condition
+  await fill_field_condition(page, 'message', 'matches exactly', 'abc', 1);
+
+  // Fill 2nd Search Query
+  const searchQuery2 = 'b?d';
+  await page.locator('#search_query').nth(1).fill(searchQuery2);
+  await page.waitForTimeout(200);
+
+  // Save
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  // Go on search page
+  await open_alert_page_and_filter(page, title);
+  await page.getByRole('button', { name: 'play_arrow' }).click();
+
+  // Wait new tabs
+  await page.waitForTimeout(2000);
+  let pages = page.context().pages();
+  expect(pages.length).toBe(3);
+  if (await pages[1].getByText(title + '#2').isVisible()) {
+    await expect(pages[2].getByText(title)).toBeVisible();
+    await expect(pages[2].getByText(searchQuery)).toBeVisible();
+
+    await expect(pages[1].getByText(title + '#2')).toBeVisible();
+    await expect(pages[1].getByText(searchQuery2)).toBeVisible();
+  } else {
+    await expect(pages[1].getByText(title)).toBeVisible();
+    await expect(pages[1].getByText(searchQuery)).toBeVisible();
+
+    await expect(pages[2].getByText(title + '#2')).toBeVisible();
+    await expect(pages[2].getByText(searchQuery2)).toBeVisible();
+  }
+});
+
 test('OR rule should contains GroupBy field', async ({ page }) => {
   await page.goto('/wizard/AlertRules');
 

src/web/wizard/components/buttons/ButtonToSearch.jsx

@@ -22,21 +22,35 @@ import { Icon } from 'components/common';
 import { useIntl } from 'react-intl';
 import Routes from 'routing/Routes';
 
-const ButtonToSearch = ({searchQuery, stream1, stream2, disabled}) => {
+function normalizeSearchQuery(searchQuery) {
+    if (searchQuery && searchQuery !== '*') {
+        return searchQuery;
+    }
+
+    return '';
+}
+
+function createUrl(searchQuery, stream) {
+    const normSearchQuery = normalizeSearchQuery(searchQuery);
+    return Routes.search_with_query(normSearchQuery, "relative", {"relative": 86400}, [stream]);
+}
+
+const ButtonToSearch = ({searchQuery1, searchQuery2, stream1, stream2, disabled}) => {
     const intl = useIntl();
     const tooltip = intl.formatMessage({id: "wizard.tooltipSearch", defaultMessage: "Launch search for this alert rule"});
-    const stream = [];
-    if (stream1) {
-        stream.push(stream1);
-    }
-    if (stream2) {
-        stream.push(stream2);
+
+    const openSearchTabs = () => {
+        const url1 = createUrl(searchQuery1, stream1);
+        window.open(url1, '_blank', 'noopener,noreferrer')
+
+        if(stream2) {
+            const url2 = createUrl(searchQuery2, stream2);
+            window.open(url2, '_blank', 'noopener,noreferrer');
+        }
     }
-    const searchURL = Routes.search_with_query(searchQuery, "relative", {"relative": 86400}, stream);
-    const link = Routes.SEARCH + searchURL.substring(searchURL.indexOf('?'));
 
     return (
-        <Button bsStyle="info" title={tooltip} disabled={disabled} href={link} target="_blank">
+        <Button bsStyle="info" title={tooltip} disabled={disabled} onClick={openSearchTabs}>
             <Icon name="play_arrow" />
         </Button>
     );

src/web/wizard/components/rules/AlertRulesContainer.jsx

@@ -54,6 +54,10 @@ function _convertAlertToElement(alert) {
     if (alert.condition_parameters) {
         searchQuery = alert.condition_parameters.search_query;
     }
+    let searchQuery2 = '';
+    if (alert.condition_parameters) {
+        searchQuery2 = alert.condition_parameters.additional_search_query;
+    }
     return {
         id: alert.title,
         title: alert.title,
@@ -70,7 +74,8 @@ function _convertAlertToElement(alert) {
         condition: alert.condition,
         notification: alert.notification,
         secondEventDefinition: alert.second_event_definition,
-        searchQuery: searchQuery
+        searchQuery: searchQuery,
+        searchQuery2: searchQuery2
     };
 }
 
@@ -161,7 +166,7 @@ const AlertRulesContainer = ({ fieldOrder }) => {
             </IfPermitted>);
         const cloneAlert = <AlertRuleCloneForm alertTitle={element.title} disabled={!element.valid} onSubmit={_onCloneSubmit} />;
         return (<div className="pull-left" style={{display: 'flex', columnGap: '1px'}}>
-            <ButtonToSearch searchQuery={element.searchQuery} stream1={element.streamId} stream2={element.streamId2} disabled={!element.valid}/>
+            <ButtonToSearch searchQuery1={element.searchQuery} searchQuery2={element.searchQuery2} stream1={element.streamId} stream2={element.streamId2} disabled={!element.valid}/>
             {updateAlert}
             <ButtonToEventDefinition target={element.condition} disabled={!element.valid}/>
             <ButtonToNotification target={element.notification} disabled={!element.valid}/>