Anomaly Charts #76889

nhsiehgit · 2024-09-03T20:58:36Z

highlights the alert rule details chart if an anomaly is detected

Added a dashed line to highlight when the anomaly started
and removed the label at the top of the chart

codecov · 2024-09-03T21:07:20Z

Codecov Report

Attention: Patch coverage is 10.00000% with 27 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../alerts/rules/metric/details/metricChartOption.tsx	0.00%	25 Missing ⚠️
static/app/views/alerts/utils/apiCalls.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #76889      +/-   ##
==========================================
- Coverage   78.22%   78.22%   -0.01%     
==========================================
  Files        6898     6899       +1     
  Lines      306690   306718      +28     
  Branches    50276    50282       +6     
==========================================
- Hits       239919   239918       -1     
- Misses      60416    60445      +29     
  Partials     6355     6355

nhsiehgit · 2024-09-04T17:21:27Z

depends on #76934

scttcper · 2024-09-04T20:27:06Z

static/app/views/alerts/rules/metric/details/metricChartOption.tsx

+    let start;
+    let end;


start and end could use some types

Suggested change

let start;

let end;

let start: string | undefined = undefined;

let end: string | undefined = undefined;

scttcper · 2024-09-04T20:27:39Z

static/app/views/alerts/rules/metric/details/metricChartOption.tsx

+        const {anomaly, timestamp} = anomalyts;
+
+        if (
+          [AnomalyType.high, AnomalyType.low].indexOf(anomaly.anomaly_type as string) > -1


nit using includes instead of -1 indexof

Suggested change

[AnomalyType.high, AnomalyType.low].indexOf(anomaly.anomaly_type as string) > -1

[AnomalyType.high, AnomalyType.low].includes(anomaly.anomaly_type as string)

scttcper · 2024-09-04T20:28:34Z

static/app/views/alerts/rules/metric/details/metricChartOption.tsx

+          if (!start) {
+            start = new Date(timestamp).toISOString();
+          }


a comment here might help the next person, like what does it mean to not have the start here or when does that happen

scttcper · 2024-09-04T20:29:28Z

static/app/views/alerts/rules/metric/details/metricChartOption.tsx

@@ -355,6 +403,72 @@ export function getMetricAlertChartOption({
      });
  }

+  if (anomalies) {
+    const anomalyBlocks: any[] = [];


anomalyBlocks could use a better type

Suggested change

const anomalyBlocks: any[] = [];

const anomalyBlocks: any[] = [];

Oof ok.
this was way too hairy.

not gonna bother typing this 😬

it should be MarkAreaComponentOption['data']

scttcper · 2024-09-04T20:38:30Z

static/app/views/alerts/rules/metric/details/index.tsx

        fetchIncidentsForRule(organization.slug, ruleId, start, end),
        rulePromise,
-      ]);
+      ];


inserting it into the array can avoid using Promise and it should infer the types

Suggested change

];

organization.features.includes('anomaly-detection-alerts') ? fetchAnomaliesForRule(organization.slug, ruleId, start, end) : undefined

];

scttcper · 2024-09-04T23:09:15Z

static/app/views/alerts/rules/metric/details/metricChartOption.tsx

+        const {anomaly, timestamp} = anomalyts;
+
+        if (
+          [AnomalyType.high, AnomalyType.low].includes(anomaly.anomaly_type as string)


if its not merged yet anomalyType would be preferred but we miss this quite a bit in various endpoints

Suggested change

[AnomalyType.high, AnomalyType.low].includes(anomaly.anomaly_type as string)

[AnomalyType.high, AnomalyType.low].includes(anomaly.anomalyType as string)

Oh.
actually, would be dependent on the API response i guess.
I won't merge this until i've verified the api response

codecov · 2024-09-05T22:10:39Z

Bundle Report

Changes will increase total bundle size by 26.71kB ⬆️

Bundle name	Size	Change
app-webpack-bundle-array-push	30.15MB	26.71kB ⬆️

<img width="92" alt="Screenshot 2024-09-05 at 3 52 14 PM" src="https://github.com/user-attachments/assets/8ecf4050-9c00-4fe5-9828-0605a6ea6b4a"> we now have anomaly lines rendering in chartcuterie charts! follow up to #76889

highlights the alert rule details chart if an anomaly is detected Added a dashed line to highlight when the anomaly started and removed the label at the top of the chart <img width="512" alt="Screenshot 2024-09-03 at 3 18 23 PM" src="https://github.com/user-attachments/assets/3a1a04a1-f8a0-4325-8989-f9b9f61d974a"> <img width="284" alt="Screenshot 2024-09-03 at 3 21 35 PM" src="https://github.com/user-attachments/assets/0013642a-cbf1-488e-b88f-739cc2f92256">

<img width="92" alt="Screenshot 2024-09-05 at 3 52 14 PM" src="https://github.com/user-attachments/assets/8ecf4050-9c00-4fe5-9828-0605a6ea6b4a"> we now have anomaly lines rendering in chartcuterie charts! follow up to #76889

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Sep 3, 2024

vercel bot deployed to Preview September 3, 2024 22:24 View deployment

nhsiehgit requested review from scttcper and mifu67 September 3, 2024 22:24

nhsiehgit force-pushed the nhsieh/anomaly_charts branch from 5b9fede to eaee356 Compare September 4, 2024 20:04

vercel bot deployed to Preview September 4, 2024 20:08 View deployment

vercel bot deployed to Preview September 4, 2024 20:12 View deployment

nhsiehgit marked this pull request as ready for review September 4, 2024 20:13

nhsiehgit requested a review from a team as a code owner September 4, 2024 20:13

scttcper reviewed Sep 4, 2024

View reviewed changes

nhsiehgit force-pushed the nhsieh/anomaly_charts branch from e6429c0 to b719fdf Compare September 4, 2024 22:17

nhsiehgit requested a review from scttcper September 4, 2024 22:18

vercel bot deployed to Preview September 4, 2024 22:20 View deployment

vercel bot deployed to Preview September 4, 2024 22:41 View deployment

vercel bot deployed to Preview September 4, 2024 22:50 View deployment

scttcper reviewed Sep 4, 2024

View reviewed changes

nhsiehgit added 8 commits September 5, 2024 10:18

add fetch anomalies to details index

540bd28

pass anomalies to the metric options

d84f581

update the chart options to construct anomaly blocks

debde2f

update api call and typing

0e55d8a

add dashed line to mark the start of anomalies

b6f5161

put anomaly fetch behind feature flag

691a455

pr comments

2f2d9d4

update chart option typing?

71c5eb3

nhsiehgit added 2 commits September 5, 2024 10:18

remove comments

f40c04b

nope. not gonna bother typing this

1508d20

nhsiehgit force-pushed the nhsieh/anomaly_charts branch from edbf76b to 1508d20 Compare September 5, 2024 17:18

vercel bot deployed to Preview September 5, 2024 17:22 View deployment

scttcper approved these changes Sep 5, 2024

View reviewed changes

typing

7f123ff

vercel bot deployed to Preview September 5, 2024 22:09 View deployment

nhsiehgit enabled auto-merge (squash) September 5, 2024 22:19

nhsiehgit merged commit c0f55a5 into master Sep 5, 2024
42 of 43 checks passed

nhsiehgit deleted the nhsieh/anomaly_charts branch September 5, 2024 22:19

nhsiehgit mentioned this pull request Sep 6, 2024

add anomaly charts to chartcuterie #76971

Merged

github-actions bot locked and limited conversation to collaborators Sep 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Anomaly Charts #76889

Anomaly Charts #76889

nhsiehgit commented Sep 3, 2024 •

edited

Loading

codecov bot commented Sep 3, 2024 •

edited

Loading

nhsiehgit commented Sep 4, 2024

scttcper Sep 4, 2024 •

edited

Loading

scttcper Sep 4, 2024

scttcper Sep 4, 2024 •

edited

Loading

scttcper Sep 4, 2024

nhsiehgit Sep 4, 2024

scttcper Sep 4, 2024

scttcper Sep 4, 2024

scttcper Sep 4, 2024

nhsiehgit Sep 4, 2024

codecov bot commented Sep 5, 2024

	[AnomalyType.high, AnomalyType.low].indexOf(anomaly.anomaly_type as string) > -1
	[AnomalyType.high, AnomalyType.low].includes(anomaly.anomaly_type as string)

	const anomalyBlocks: any[] = [];
	const anomalyBlocks: any[] = [];

	];
	organization.features.includes('anomaly-detection-alerts') ? fetchAnomaliesForRule(organization.slug, ruleId, start, end) : undefined
	];

Anomaly Charts #76889

Anomaly Charts #76889

Conversation

nhsiehgit commented Sep 3, 2024 • edited Loading

codecov bot commented Sep 3, 2024 • edited Loading

Codecov Report

nhsiehgit commented Sep 4, 2024

scttcper Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

scttcper Sep 4, 2024

Choose a reason for hiding this comment

scttcper Sep 4, 2024 • edited Loading

Choose a reason for hiding this comment

scttcper Sep 4, 2024

Choose a reason for hiding this comment

nhsiehgit Sep 4, 2024

Choose a reason for hiding this comment

scttcper Sep 4, 2024

Choose a reason for hiding this comment

scttcper Sep 4, 2024

Choose a reason for hiding this comment

scttcper Sep 4, 2024

Choose a reason for hiding this comment

nhsiehgit Sep 4, 2024

Choose a reason for hiding this comment

codecov bot commented Sep 5, 2024

Bundle Report

nhsiehgit commented Sep 3, 2024 •

edited

Loading

codecov bot commented Sep 3, 2024 •

edited

Loading

scttcper Sep 4, 2024 •

edited

Loading

scttcper Sep 4, 2024 •

edited

Loading