Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add Activated Alert Rules to alert rule index #69124

Merged
merged 10 commits into from
Apr 18, 2024
Merged

feat: Add Activated Alert Rules to alert rule index #69124

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
292129f
add activated alert rule row and fetch activated alerts
nhsiehgit Apr 17, 2024
5edcf36
updated row status badge
nhsiehgit Apr 17, 2024
5a8db4f
move alert badge next to status
nhsiehgit Apr 17, 2024
e72d775
remove link to alert details
nhsiehgit Apr 17, 2024
3d54f15
updated icons
nhsiehgit Apr 17, 2024
aa40fdb
nits
nhsiehgit Apr 17, 2024
902efd6
update stub fixture
nhsiehgit Apr 17, 2024
4c830cd
update test
nhsiehgit Apr 17, 2024
b0449f3
expect renders activated rules
nhsiehgit Apr 17, 2024
09c8c78
added test for activated status
nhsiehgit Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
added test for activated status
  • Loading branch information
@nhsiehgit
nhsiehgit committed Apr 18, 2024
commit 09c8c78674822ff59a66a9c9bb355032375a76ec
2 changes: 1 addition & 1 deletion static/app/views/alerts/list/rules/activatedRuleRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function ActivatedRuleListRow({

function renderLatestActivation(): React.ReactNode {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: recommend decomposing each of the render calls. If you're accessing things like the rule it'd be extra cool to use react-query to avoid prop drilling too.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm how does react-query addres prop drilling?
Or did you mean context?

for now i think i'll keep these patterns to match rules.tsx 😅
I'll create a follow up ticket to clean both of these up though

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ticket here: https://github.com/orgs/getsentry/projects/199/views/3?pane=issue&itemId=60130307

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-query uses context to store api data for you. (it also handles automatic updates and syncing data across all uses of the "store").

for example, if you wanted to fetch a specific rule you could do useRule(ruleId) -- then that hook uses the api react-query hook to fetch the data (which updates the value in the store for rule etc).

If you haven't used it before.. it's kinda a mind meld and we should def wait until later to update. i'm planning on using it for the API requests with project settings pages, so we could also take a look at it when that comes up.

if (!rule.activations?.length) {
return t('Alert not been activated yet');
return t('Alert has not been activated yet');
}

return (
Expand Down
51 changes: 49 additions & 2 deletions static/app/views/alerts/list/rules/alertRulesList.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,8 +333,55 @@ describe('AlertRulesList', () => {
expect(rules[0]).toBeInTheDocument();

expect(screen.getByText('Triggered')).toBeInTheDocument();
expect(screen.getByText('Above 70')).toBeInTheDocument();
expect(screen.getByText('Below 36')).toBeInTheDocument();
expect(screen.getByText('Above 70')).toBeInTheDocument(); // the fixture trigger threshold
expect(screen.getByText('Below 36')).toBeInTheDocument(); // the fixture resolved threshold
expect(screen.getAllByTestId('alert-badge')[0]).toBeInTheDocument();
});

it('displays activated metric alert status', async () => {
rulesMock = MockApiClient.addMockResponse({
url: '/organizations/org-slug/combined-rules/',
headers: {Link: pageLinks},
body: [
MetricRuleFixture({
id: '1',
projects: ['earth'],
name: 'Active Activated Alert',
monitorType: 1,
activationCondition: 0,
activations: [
{
alertRuleId: '1',
dateCreated: '2021-08-01T00:00:00Z',
finishedAt: '',
id: '1',
isComplete: false,
querySubscriptionId: '1',
},
],
latestIncident: IncidentFixture({
status: IncidentStatus.CRITICAL,
}),
}),
MetricRuleFixture({
id: '2',
projects: ['earth'],
name: 'Ready Activated Alert',
monitorType: 1,
activationCondition: 0,
}),
],
});
const {routerContext, organization} = initializeOrg({organization: defaultOrg});
render(<AlertRulesList />, {context: routerContext, organization});

expect(await screen.findByText('Active Activated Alert')).toBeInTheDocument();
expect(await screen.findByText('Ready Activated Alert')).toBeInTheDocument();

expect(screen.getByText('Last activated')).toBeInTheDocument();
expect(screen.getByText('Alert has not been activated yet')).toBeInTheDocument();
expect(screen.getByText('Above 70')).toBeInTheDocument(); // the fixture trigger threshold
expect(screen.getByText('Below 70')).toBeInTheDocument(); // Alert has never fired, so no resolved threshold
expect(screen.getAllByTestId('alert-badge')[0]).toBeInTheDocument();
});

Expand Down
Loading