forked from linode/manager
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upcoming: [DI-22132] - Added criteria section in alert details page f…
…or ACLP Alerting (linode#11477) * upcoming: [DI-22596] - Criteria changes * upcoming: [DI-22596] - Criteria changes * upcoming: [DI-22596] - Criteria changes * upcoming: [DI-22596] - Alert detail chips * upcoming: [DI-22596] - CSS changes * upcoming: [DI-22596] - Code refactoring * upcoming: [DI-22596] - Add types * upcoming: [DI-22132] - Code refactoring * upcoming: [DI-22132] - Add changeset * upcoming: [DI-22132] - Add factories and constants * upcoming: [DI-22132] - Use factories in mock * upcoming: [DI-22132] - Refactor alert criteria component * upcoming: [DI-22132] - Code refactoring, util update and constants update * upcoming: [DI-22132] - Code refactoring * upcoming: [DI-22132] - UT updates and code clean up * upcoming: [DI-22132] - Code updates * upcoming: [DI-22132] - Comment update and label update * upcoming: [DI-22132] - Code refactoring and updates * upcoming: [DI-22132] - Reusable typography * upcoming: [DI-22132] - Use common typography * upcoming: [DI-22132] - Rename common typography * upcoming: [DI-22132] - Add logical comments * upcoming: [DI-22132] - Add spacing constant * upcoming: [DI-22132] - Code refactoring * upcoming: [DI-22132] - Code refactoring * upcoming: [DI-22132] - CSS fixes * upcoming: [DI-22132] - Remove pick random * upcoming: [DI-22132] - Code merge error fixes * upcoming: [DI-22132] - Merge imports into one * upcoming: [DI-22132] - Color changes for PR * upcoming: [DI-22132] - ES lint issue fix * upcoming: [DI-22132] - Height changes to px value * upcoming: [DI-22132] - Constants and text update --------- Co-authored-by: vmangalr <vmangalr@akamai.com>
- Loading branch information
1 parent
bd63112
commit aefd870
Showing
13 changed files
with
504 additions
and
23 deletions.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
packages/manager/.changeset/pr-11477-upcoming-features-1736156265225.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Upcoming Features | ||
| --- | ||
|
|
||
| Add Alert Details Criteria section in Cloud Pulse Alert Details page ([#11477](https://github.com/linode/manager/pull/11477)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { | ||
| alertDimensionsFactory, | ||
| alertFactory, | ||
| alertRulesFactory, | ||
| } from 'src/factories'; | ||
| import { renderWithTheme } from 'src/utilities/testHelpers'; | ||
|
|
||
| import { metricOperatorTypeMap } from '../constants'; | ||
| import { convertSecondsToMinutes } from '../Utils/utils'; | ||
| import { AlertDetailCriteria } from './AlertDetailCriteria'; | ||
|
|
||
| describe('AlertDetailCriteria component tests', () => { | ||
| it('should render the alert detail criteria successfully on correct inputs', () => { | ||
| const alertDetails = alertFactory.build({ | ||
| rule_criteria: { | ||
| rules: alertRulesFactory.buildList(2, { | ||
| aggregation_type: 'avg', | ||
| dimension_filters: alertDimensionsFactory.buildList(2), | ||
| label: 'CPU Usage', | ||
| metric: 'cpu_usage', | ||
| operator: 'gt', | ||
| unit: 'bytes', | ||
| }), | ||
| }, | ||
| }); | ||
| const { getAllByText, getByText } = renderWithTheme( | ||
| <AlertDetailCriteria alertDetails={alertDetails} /> | ||
| ); | ||
| const { rules } = alertDetails.rule_criteria; | ||
| expect(getAllByText('Metric Threshold:').length).toBe(rules.length); | ||
| expect(getAllByText('Dimension Filter:').length).toBe(rules.length); | ||
| expect(getByText('Criteria')).toBeInTheDocument(); | ||
| expect(getAllByText('Average').length).toBe(2); | ||
| expect(getAllByText('CPU Usage').length).toBe(2); | ||
| expect(getAllByText('bytes').length).toBe(2); | ||
| expect(getAllByText(metricOperatorTypeMap['gt']).length).toBe(2); | ||
| const { | ||
| evaluation_period_seconds, | ||
| polling_interval_seconds, | ||
| } = alertDetails.trigger_conditions; | ||
| expect( | ||
| getByText(convertSecondsToMinutes(polling_interval_seconds)) | ||
| ).toBeInTheDocument(); | ||
| expect( | ||
| getByText(convertSecondsToMinutes(evaluation_period_seconds)) | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render the alert detail criteria even if rules are empty', () => { | ||
| const alert = alertFactory.build({ | ||
| rule_criteria: { | ||
| rules: [], | ||
| }, | ||
| }); | ||
| const { getByText, queryByText } = renderWithTheme( | ||
| <AlertDetailCriteria alertDetails={alert} /> | ||
| ); | ||
| expect(getByText('Criteria')).toBeInTheDocument(); // empty criteria should be there | ||
| expect(queryByText('Metric Threshold:')).not.toBeInTheDocument(); | ||
| expect(queryByText('Dimension Filter:')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
81 changes: 81 additions & 0 deletions
81
packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { Typography } from '@linode/ui'; | ||
| import { Grid, useTheme } from '@mui/material'; | ||
| import React from 'react'; | ||
|
|
||
| import { convertSecondsToMinutes } from '../Utils/utils'; | ||
| import { StyledAlertChip, StyledAlertTypography } from './AlertDetail'; | ||
| import { DisplayAlertDetailChips } from './DisplayAlertDetailChips'; | ||
| import { RenderAlertMetricsAndDimensions } from './RenderAlertsMetricsAndDimensions'; | ||
|
|
||
| import type { Alert } from '@linode/api-v4'; | ||
|
|
||
| interface CriteriaProps { | ||
| /** | ||
| * The alert detail object for which the criteria needs to be displayed | ||
| */ | ||
| alertDetails: Alert; | ||
| } | ||
|
|
||
| export const AlertDetailCriteria = React.memo((props: CriteriaProps) => { | ||
| const { alertDetails } = props; | ||
| const { | ||
| evaluation_period_seconds: evaluationPeriod, | ||
| polling_interval_seconds: pollingIntervalSeconds, | ||
| trigger_occurrences: triggerOccurrences, | ||
| } = alertDetails.trigger_conditions; | ||
| const { rule_criteria: ruleCriteria = { rules: [] } } = alertDetails; | ||
| const theme = useTheme(); | ||
|
|
||
| // Memoized trigger criteria rendering | ||
| const renderTriggerCriteria = React.useMemo( | ||
| () => ( | ||
| <> | ||
| <Grid item sm={4} xs={12}> | ||
| <StyledAlertTypography fontFamily={theme.font.bold}> | ||
| Trigger Alert When: | ||
| </StyledAlertTypography> | ||
| </Grid> | ||
| <Grid alignItems="center" container item md={8} xs={12}> | ||
| <StyledAlertChip | ||
| borderRadius={theme.spacing(0.3)} | ||
| label="All" | ||
| variant="outlined" | ||
| /> | ||
| <StyledAlertTypography marginRight={0.5}> | ||
| criteria are met for | ||
| </StyledAlertTypography> | ||
| <StyledAlertChip | ||
| borderRadius={theme.spacing(0.3)} | ||
| label={triggerOccurrences} | ||
| variant="outlined" | ||
| /> | ||
| <StyledAlertTypography> | ||
| consecutive occurrences. | ||
| </StyledAlertTypography> | ||
| </Grid> | ||
| </> | ||
| ), | ||
| [theme, triggerOccurrences] | ||
| ); | ||
| return ( | ||
| <> | ||
| <Typography marginBottom={2} variant="h2"> | ||
| Criteria | ||
| </Typography> | ||
| <Grid alignItems="center" container spacing={1}> | ||
| <RenderAlertMetricsAndDimensions ruleCriteria={ruleCriteria} /> | ||
| <DisplayAlertDetailChips // label chip for polling interval | ||
| label="Polling Interval" | ||
| mergeChips | ||
| values={[convertSecondsToMinutes(pollingIntervalSeconds)]} | ||
| /> | ||
| <DisplayAlertDetailChips // label chip for evaluation period | ||
| label="Evaluation Period" | ||
| mergeChips | ||
| values={[convertSecondsToMinutes(evaluationPeriod)]} | ||
| /> | ||
| {renderTriggerCriteria} {/** Render the trigger criteria */} | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.