Skip to content

Commit

Permalink
Adjust styling for Finding details flyout (opensearch-project#369) (o…
Browse files Browse the repository at this point in the history
…pensearch-project#382)

* [FEATURE] Detector must have at least one alert set opensearch-project#288

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Adjust styling for Finding details flyout opensearch-project#121

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Expand the chart's vertical domain so that top positioning elements are not clipped. opensearch-project#334

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Expand the chart's vertical domain so that top positioning elements are not clipped. opensearch-project#334

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Adjust styling for Finding details flyout opensearch-project#369

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Adjust styling for Finding details flyout opensearch-project#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]>
Signed-off-by: AWSHurneyt <[email protected]>
  • Loading branch information
2 people authored and AWSHurneyt committed Feb 22, 2023
1 parent fe47ed0 commit ca9dcf0
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 48 deletions.
4 changes: 3 additions & 1 deletion cypress/integration/3_alerts.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);
Expand Down
93 changes: 46 additions & 47 deletions public/pages/Findings/components/FindingDetailsFlyout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
EuiFormRow,
EuiHorizontalRule,
EuiLink,
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
});
Expand Down Expand Up @@ -352,7 +352,6 @@ export default class FindingDetailsFlyout extends Component<
</EuiFlexGroup>

<EuiSpacer size={'m'} />

<EuiTitle size={'s'}>
<h3>Rule details</h3>
</EuiTitle>
Expand Down

0 comments on commit ca9dcf0

Please sign in to comment.