-
Notifications
You must be signed in to change notification settings - Fork 367
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upcoming: [DI-22558] - Added Trigger condition and Dimension Filter c…
…omponents (#11445) * upcoming: [DI-22558] - Added Trigger condition and Dimension Filter changes * removed unnecessary console log statement * upcoming: [DI-22558] - Importing right interface for Trigger condition for error validation and minor changes * upcoming: [DI-22588] - Added the Unit Tests for the components * upcoming: [DI-22588] - Added changesets and few changes to the messages in validation schema * upcoming: [DI-22588] - Review comments and made some minor UX changes to the component * Updated stylings * upcoming: [DI-22588] - UX changes * upcoming: [DI-22588] - Fixed the validation error resolution for Metric Data Field and Dimension Filter Data Field * upcoming: [DI-22588] - Review changes * upcoming: [DI-22588] - Moved mockData to individual test files instead of exporting to fix the failing tests * upcoming: [DI-22558] - Typescript issue fixes * Update constants.ts --------- Co-authored-by: nikhagra-akamai <nagrawal@akamai.com> Co-authored-by: vmangalr <vmangalr@akamai.com> Co-authored-by: venkatmano-akamai <chk-Venkatesh@outlook.com>
- Loading branch information
4 people
authored
Jan 7, 2025
1 parent
6dc152f
commit b47661f
Showing
22 changed files
with
1,261 additions
and
163 deletions.
There are no files selected for viewing
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/api-v4": Changed | ||
| --- | ||
|
|
||
| Changed MetricCritera, DimensionFilter and Alert Interfaces ([#11445](https://github.com/linode/manager/pull/11445)) |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Added | ||
| --- | ||
|
|
||
| DimensionFilter, DimensionFilterField, TriggerCondition component along with Unit Tests ([#11445](https://github.com/linode/manager/pull/11445)) |
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
142 changes: 142 additions & 0 deletions
142
...ages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.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,142 @@ | ||
| import { screen, waitFor, within } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import React from 'react'; | ||
|
|
||
| import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; | ||
|
|
||
| import { DimensionFilters } from './DimensionFilter'; | ||
|
|
||
| import type { CreateAlertDefinitionForm } from '../types'; | ||
| import type { MetricDefinition } from '@linode/api-v4'; | ||
|
|
||
| const mockData: MetricDefinition[] = [ | ||
| { | ||
| available_aggregate_functions: ['min', 'max', 'avg'], | ||
| dimensions: [ | ||
| { | ||
| dimension_label: 'cpu', | ||
| label: 'CPU name', | ||
| values: [], | ||
| }, | ||
| { | ||
| dimension_label: 'state', | ||
| label: 'State of CPU', | ||
| values: [ | ||
| 'user', | ||
| 'system', | ||
| 'idle', | ||
| 'interrupt', | ||
| 'nice', | ||
| 'softirq', | ||
| 'steal', | ||
| 'wait', | ||
| ], | ||
| }, | ||
| { | ||
| dimension_label: 'LINODE_ID', | ||
| label: 'Linode ID', | ||
| values: [], | ||
| }, | ||
| ], | ||
| label: 'CPU utilization', | ||
| metric: 'system_cpu_utilization_percent', | ||
| metric_type: 'gauge', | ||
| scrape_interval: '2m', | ||
| unit: 'percent', | ||
| }, | ||
| ]; | ||
| const dimensionFilterButton = 'Add dimension filter'; | ||
| describe('DimensionFilterField', () => { | ||
| const user = userEvent.setup(); | ||
|
|
||
| it('render the fields properly', async () => { | ||
| const container = renderWithThemeAndHookFormContext<CreateAlertDefinitionForm>( | ||
| { | ||
| component: ( | ||
| <DimensionFilters | ||
| dataFieldDisabled={true} | ||
| dimensionOptions={mockData[0].dimensions} | ||
| name={`rule_criteria.rules.${0}.dimension_filters`} | ||
| /> | ||
| ), | ||
| useFormOptions: { | ||
| defaultValues: { | ||
| rule_criteria: { | ||
| rules: [mockData[0]], | ||
| }, | ||
| serviceType: 'linode', | ||
| }, | ||
| }, | ||
| } | ||
| ); | ||
| expect(screen.getByText('Dimension Filter')).toBeVisible(); | ||
| expect(screen.getByText('(optional)')).toBeVisible(); | ||
| await user.click( | ||
| container.getByRole('button', { name: 'Add dimension filter' }) | ||
| ); | ||
| expect(screen.getByLabelText('Data Field')).toBeVisible(); | ||
| expect(screen.getByLabelText('Operator')).toBeVisible(); | ||
| expect(screen.getByLabelText('Value')).toBeVisible(); | ||
| }); | ||
|
|
||
| it('does not render the dimension filed directly with Metric component', async () => { | ||
| const container = renderWithThemeAndHookFormContext<CreateAlertDefinitionForm>( | ||
| { | ||
| component: ( | ||
| <DimensionFilters | ||
| dataFieldDisabled={true} | ||
| dimensionOptions={mockData[0].dimensions} | ||
| name={`rule_criteria.rules.${0}.dimension_filters`} | ||
| /> | ||
| ), | ||
| useFormOptions: { | ||
| defaultValues: { | ||
| rule_criteria: { | ||
| rules: [mockData[0]], | ||
| }, | ||
| serviceType: 'linode', | ||
| }, | ||
| }, | ||
| } | ||
| ); | ||
| const dimensionFilterID = 'rule_criteria.rules.0.dimension_filters.0-id'; | ||
| expect(container.queryByTestId(dimensionFilterID)).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('adds and removes dimension filter fields dynamically', async () => { | ||
| const container = renderWithThemeAndHookFormContext<CreateAlertDefinitionForm>( | ||
| { | ||
| component: ( | ||
| <DimensionFilters | ||
| dataFieldDisabled={true} | ||
| dimensionOptions={mockData[0].dimensions} | ||
| name={`rule_criteria.rules.${0}.dimension_filters`} | ||
| /> | ||
| ), | ||
| useFormOptions: { | ||
| defaultValues: { | ||
| rule_criteria: { | ||
| rules: [mockData[0]], | ||
| }, | ||
| serviceType: 'linode', | ||
| }, | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| const dimensionFilterID = 'rule_criteria.rules.0.dimension_filters.1-id'; | ||
| await user.click( | ||
| container.getByRole('button', { name: dimensionFilterButton }) | ||
| ); | ||
| await user.click( | ||
| container.getByRole('button', { name: dimensionFilterButton }) | ||
| ); | ||
| expect(container.getByTestId(dimensionFilterID)).toBeInTheDocument(); | ||
| await user.click( | ||
| within(container.getByTestId(dimensionFilterID)).getByTestId('clear-icon') | ||
| ); | ||
| await waitFor(() => | ||
| expect(container.queryByTestId(dimensionFilterID)).not.toBeInTheDocument() | ||
| ); | ||
| }); | ||
| }); |
70 changes: 70 additions & 0 deletions
70
packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.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,70 @@ | ||
| import { Box } from '@linode/ui'; | ||
| import { Button, Stack, Typography } from '@linode/ui'; | ||
| import React from 'react'; | ||
| import { useFieldArray, useFormContext } from 'react-hook-form'; | ||
|
|
||
| import { DimensionFilterField } from './DimensionFilterField'; | ||
|
|
||
| import type { CreateAlertDefinitionForm, DimensionFilterForm } from '../types'; | ||
| import type { Dimension } from '@linode/api-v4'; | ||
| import type { FieldPathByValue } from 'react-hook-form'; | ||
|
|
||
| interface DimensionFilterProps { | ||
| /** | ||
| * boolean value to disable the Data Field in dimension filter | ||
| */ | ||
| dataFieldDisabled: boolean; | ||
| /** | ||
| * dimension filter data for the selected metric | ||
| */ | ||
| dimensionOptions: Dimension[]; | ||
| /** | ||
| * name used for the component to set in the form | ||
| */ | ||
| name: FieldPathByValue<CreateAlertDefinitionForm, DimensionFilterForm[]>; | ||
| } | ||
| export const DimensionFilters = (props: DimensionFilterProps) => { | ||
| const { dataFieldDisabled, dimensionOptions, name } = props; | ||
| const { control } = useFormContext<CreateAlertDefinitionForm>(); | ||
|
|
||
| const { append, fields, remove } = useFieldArray({ | ||
| control, | ||
| name, | ||
| }); | ||
| return ( | ||
| <Box display="flex" flexDirection="column" gap={1}> | ||
| <Typography variant="h3"> | ||
| Dimension Filter | ||
| <Typography component="span"> (optional)</Typography> | ||
| </Typography> | ||
|
|
||
| <Stack gap={1}> | ||
| {fields?.length > 0 && | ||
| fields.map((field, index) => ( | ||
| <DimensionFilterField | ||
| dataFieldDisabled={dataFieldDisabled} | ||
| dimensionOptions={dimensionOptions} | ||
| key={field.id} | ||
| name={`${name}.${index}`} | ||
| onFilterDelete={() => remove(index)} | ||
| /> | ||
| ))} | ||
| </Stack> | ||
| <Button | ||
| onClick={() => | ||
| append({ | ||
| dimension_label: null, | ||
| operator: null, | ||
| value: null, | ||
| }) | ||
| } | ||
| buttonType="secondary" | ||
| compactX | ||
| size="small" | ||
| sx={{ justifyContent: 'start' }} | ||
| > | ||
| Add dimension filter | ||
| </Button> | ||
| </Box> | ||
| ); | ||
| }; |
Oops, something went wrong.