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 <jovanca.cvetkovic@gmail.com> * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * [FEATURE] Update selection panel component for the "Create detection rule" page #587 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> --------- Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
opensearch-project · May 30, 2023 · 1373523 · 1373523
1 parent 6d93206
commit 1373523
Show file tree

Hide file tree

Showing 7 changed files with 256 additions and 192 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:\nProvider_Name|contains:\n- Service Control Manager\nEventID|contains:\n- '7045'\nServiceName|contains:\n- ZzNetSvc",
   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 = () => {
@@ -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,7 +197,7 @@ describe('Rules', () => {
         cy.getInputByPlaceholder('Value').type('ZzNetSvc');
       });
     });
-    cy.get('[data-test-subj="rule_detection_field"] textarea').type('selection', {
+    cy.get('[data-test-subj="rule_detection_field"] textarea').type('Selection_1', {
       force: true,
     });
 

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;
+    }
+  }
+}