Adjust styling for Finding details flyout (#369) (#382)

* [FEATURE] Detector must have at least one alert set #288 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Adjust styling for Finding details flyout #121 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Expand the chart's vertical domain so that top positioning elements are not clipped. #334 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Expand the chart's vertical domain so that top positioning elements are not clipped. #334 Signed-off-by: Jovan Cvetkovic <[email protected]> * Adjust styling for Finding details flyout #369 Signed-off-by: Jovan Cvetkovic <[email protected]> * Adjust styling for Finding details flyout #369 Signed-off-by: Jovan Cvetkovic <[email protected]> Signed-off-by: Jovan Cvetkovic <[email protected]> (cherry picked from commit ad62548) Co-authored-by: Jovan Cvetkovic <[email protected]>
opensearch-project · Jan 24, 2023 · f0209ac · f0209ac
1 parent 1897bdf
commit f0209ac
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 48 deletions.
diff --git a/cypress/integration/3_alerts.spec.js b/cypress/integration/3_alerts.spec.js
@@ -213,10 +213,12 @@ describe('Alerts', () => {
 
       // Check the rule details accordion for the expected values
       cy.get('[data-test-subj="finding-details-flyout-rule-accordion-0"]').within(() => {
-        // Confirm the accordion button contains the expected text
+        // Confirm the accordion button contains the expected name
         cy.get('[data-test-subj="finding-details-flyout-rule-accordion-button"]').contains(
           'USB Device Plugged'
         );
+
+        // Confirm the accordion button contains the expected severity
         cy.get('[data-test-subj="finding-details-flyout-rule-accordion-button"]').contains(
           'Severity: Low'
         );

diff --git a/public/pages/Findings/components/FindingDetailsFlyout.tsx b/public/pages/Findings/components/FindingDetailsFlyout.tsx
@@ -19,6 +19,7 @@ import {
   EuiFormRow,
   EuiHorizontalRule,
   EuiLink,
+  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -111,6 +112,7 @@ export default class FindingDetailsFlyout extends Component<
         <div key={key}>
           <EuiAccordion
             id={`${key}`}
+            buttonClassName="euiAccordionForm__button"
             buttonContent={
               <div data-test-subj={'finding-details-flyout-rule-accordion-button'}>
                 <EuiText size={'s'}>{fullRule.title}</EuiText>
@@ -122,59 +124,57 @@ export default class FindingDetailsFlyout extends Component<
             initialIsOpen={rules.length === 1}
             data-test-subj={`finding-details-flyout-rule-accordion-${key}`}
           >
-            <EuiSpacer size={'m'} />
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                {/*//TODO: Refactor EuiLink to filter rules table to the specific rule.*/}
-                <EuiFormRow label={'Rule name'}>
-                  <EuiLink
-                    onClick={() => this.showRuleDetails(fullRule, rule.id)}
-                    data-test-subj={`finding-details-flyout-${fullRule.title}-details`}
-                  >
-                    {fullRule.title || DEFAULT_EMPTY_DATA}
-                  </EuiLink>
-                </EuiFormRow>
-              </EuiFlexItem>
-
-              <EuiFlexItem>
-                <EuiFormRow
-                  label={'Rule severity'}
-                  data-test-subj={'finding-details-flyout-rule-severity'}
-                >
-                  <EuiText>{severity || DEFAULT_EMPTY_DATA}</EuiText>
-                </EuiFormRow>
-              </EuiFlexItem>
+            <EuiPanel color="subdued">
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFormRow label={'Rule name'}>
+                    <EuiLink
+                      onClick={() => this.showRuleDetails(fullRule, rule.id)}
+                      data-test-subj={`finding-details-flyout-${fullRule.title}-details`}
+                    >
+                      {fullRule.title || DEFAULT_EMPTY_DATA}
+                    </EuiLink>
+                  </EuiFormRow>
+                </EuiFlexItem>
 
-              <EuiFlexItem>
-                <EuiFormRow
-                  label={'Log type'}
-                  data-test-subj={'finding-details-flyout-rule-category'}
-                >
-                  <EuiText>
-                    {capitalizeFirstLetter(fullRule.category) || DEFAULT_EMPTY_DATA}
-                  </EuiText>
-                </EuiFormRow>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={'Rule severity'}
+                    data-test-subj={'finding-details-flyout-rule-severity'}
+                  >
+                    <EuiText>{severity || DEFAULT_EMPTY_DATA}</EuiText>
+                  </EuiFormRow>
+                </EuiFlexItem>
 
-            <EuiSpacer size={'m'} />
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={'Log type'}
+                    data-test-subj={'finding-details-flyout-rule-category'}
+                  >
+                    <EuiText>
+                      {capitalizeFirstLetter(fullRule.category) || DEFAULT_EMPTY_DATA}
+                    </EuiText>
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
 
-            <EuiFormRow
-              label={'Description'}
-              data-test-subj={'finding-details-flyout-rule-description'}
-            >
-              <EuiText>{fullRule.description || DEFAULT_EMPTY_DATA}</EuiText>
-            </EuiFormRow>
+              <EuiSpacer size={'m'} />
 
-            <EuiSpacer size={'m'} />
+              <EuiFormRow
+                label={'Description'}
+                data-test-subj={'finding-details-flyout-rule-description'}
+              >
+                <EuiText>{fullRule.description || DEFAULT_EMPTY_DATA}</EuiText>
+              </EuiFormRow>
 
-            <EuiFormRow label={'Tags'} data-test-subj={'finding-details-flyout-rule-tags'}>
-              <EuiText>{this.renderTags() || DEFAULT_EMPTY_DATA}</EuiText>
-            </EuiFormRow>
+              <EuiSpacer size={'m'} />
 
-            <EuiSpacer size={'l'} />
+              <EuiFormRow label={'Tags'} data-test-subj={'finding-details-flyout-rule-tags'}>
+                <EuiText>{this.renderTags() || DEFAULT_EMPTY_DATA}</EuiText>
+              </EuiFormRow>
+            </EuiPanel>
           </EuiAccordion>
-          {rules.length > 1 && <EuiHorizontalRule />}
+          {rules.length > 1 && <EuiHorizontalRule margin={'xs'} />}
         </div>
       );
     });
@@ -352,7 +352,6 @@ export default class FindingDetailsFlyout extends Component<
           </EuiFlexGroup>
 
           <EuiSpacer size={'m'} />
-
           <EuiTitle size={'s'}>
             <h3>Rule details</h3>
           </EuiTitle>