[Backport 2.x] Backporting #581 and #594 (#606)

* cypress tests update (#581) Signed-off-by: Jovan Cvetkovic <[email protected]> * Update selection panel component for the "Create detection rule" (#594) * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <[email protected]> --------- Signed-off-by: Jovan Cvetkovic <[email protected]> --------- Signed-off-by: Jovan Cvetkovic <[email protected]> Co-authored-by: Jovan Cvetkovic <[email protected]>
opensearch-project · May 30, 2023 · b840da7 · b840da7
1 parent 264de61
commit b840da7
Show file tree

Hide file tree

Showing 7 changed files with 261 additions and 199 deletions.
diff --git a/cypress/integration/2_rules.spec.js b/cypress/integration/2_rules.spec.js
@@ -10,11 +10,9 @@ const SAMPLE_RULE = {
   name: `Cypress test rule ${uniqueId}`,
   logType: 'windows',
   description: 'This is a rule used to test the rule creation workflow.',
-  detection:
-    "condition: selection\nselection:\n Provider_Name|contains:\n- Service Control Manager\nEventID|contains:\n- '7045'\nServiceName|contains:\n- ZzNetSvc\n{backspace}{backspace}condition: selection",
   detectionLine: [
-    'condition: selection',
-    'selection:',
+    'condition: Selection_1',
+    'Selection_1:',
     'Provider_Name|contains:',
     '- Service Control Manager',
     'EventID|contains:',
@@ -48,7 +46,7 @@ const YAML_RULE_LINES = [
   `- '${SAMPLE_RULE.references}'`,
   `author: ${SAMPLE_RULE.author}`,
   `detection:`,
-  ...SAMPLE_RULE.detection.replaceAll('  ', '').replaceAll('{backspace}', '').split('\n'),
+  ...SAMPLE_RULE.detectionLine,
 ];
 
 const checkRulesFlyout = () => {
@@ -145,7 +143,7 @@ describe('Rules', () => {
     });
   });
 
-  xit('...can be created', () => {
+  it('...can be created', () => {
     // Click "create new rule" button
     cy.get('[data-test-subj="create_rule_button"]').click({
       force: true,
@@ -184,7 +182,6 @@ describe('Rules', () => {
     cy.get('[data-test-subj="rule_author_field"]').type(`${SAMPLE_RULE.author}{enter}`);
 
     cy.get('[data-test-subj="detection-visual-editor-0"]').within(() => {
-      cy.getFieldByLabel('Name').type('selection');
       cy.getFieldByLabel('Key').type('Provider_Name');
       cy.getInputByPlaceholder('Value').type('Service Control Manager');
 
@@ -200,11 +197,9 @@ describe('Rules', () => {
         cy.getInputByPlaceholder('Value').type('ZzNetSvc');
       });
     });
-    cy.get('[data-test-subj="rule_detection_field"] textarea')
-      .type('selection', {
-        force: true,
-      })
-      .blur();
+    cy.get('[data-test-subj="rule_detection_field"] textarea').type('Selection_1', {
+      force: true,
+    });
 
     // Switch to YAML editor
     cy.get('[data-test-subj="change-editor-type"] label:nth-child(2)').click({
@@ -231,7 +226,7 @@ describe('Rules', () => {
     checkRulesFlyout();
   });
 
-  xit('...can be edited', () => {
+  it('...can be edited', () => {
     cy.waitForPageLoad('rules', {
       contains: 'Rules',
     });
@@ -291,7 +286,7 @@ describe('Rules', () => {
     checkRulesFlyout();
   });
 
-  xit('...can be deleted', () => {
+  it('...can be deleted', () => {
     cy.intercept({
       url: '/rules',
     }).as('deleteRule');

diff --git a/public/app.scss b/public/app.scss
@@ -18,6 +18,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Correlations/Correlations.scss";
 @import "./pages/Correlations/components/FindingCard.scss";
 @import "./pages/Findings/components/CorrelationsTable/CorrelationsTable.scss";
+@import "./pages/Rules/components/RuleEditor/DetectionVisualEditor.scss";
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);

diff --git a/public/pages/Rules/components/RuleEditor/DetectionVisualEditor.scss b/public/pages/Rules/components/RuleEditor/DetectionVisualEditor.scss
@@ -0,0 +1,51 @@
+
+.detection-visual-editor {
+  .euiAccordionForm:nth-of-type(1) {
+    border-top: 1px solid #D3DAE6;
+  }
+
+  .euiAccordionForm {
+    border-top: 0 !important;
+  }
+
+  .detection-visual-editor-accordion-wrapper {
+    width: 100%;
+    .detection-visual-editor-form-row {
+      max-width: 100%;
+      .detection-visual-editor-textarea {
+        max-width: 100%;
+        padding: 0;
+        min-height: 100px;
+      }
+    }
+
+    .detection-visual-editor-textarea-clear-btn {
+      align-items: flex-end;
+    }
+
+    .detection-visual-editor-accordion {
+      .euiAccordion__childWrapper {
+        height: auto !important;
+      }
+    }
+  }
+
+  .detection-visual-editor-name {
+    box-shadow: none;
+    background-color: transparent;
+    padding: 0;
+  }
+
+  .detection-visual-editor-delete-selection {
+    margin-top: 0 !important;
+  }
+
+  .euiButtonIcon--danger {
+    color: $ouiTextSubduedColor !important;
+
+    &:hover {
+      color: $ouiColorDanger !important;
+      background-color: transparent !important;
+    }
+  }
+}