[Custom threshold rule] Use lens chart with annotations in alert details page #175513

benakansara · 2024-01-25T09:57:10Z

Resolves #174075, #155691

Using same chart in alert details page as in rule flyout for preview
Group by info is applied as filter on chart data
Added annotations
- For active alerts, added point annotation with alert start time and range annotation with range from alert start time till current time
- For recovered alerts, added range annotation for alert duration

Active alert

Recovered alert

apmmachine · 2024-01-25T09:57:22Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
/oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

benakansara · 2024-01-25T14:27:52Z

/ci

…fix'

benakansara · 2024-01-25T17:53:34Z

/ci

benakansara · 2024-01-26T12:54:36Z

/ci

benakansara · 2024-01-26T13:51:07Z

/ci

elasticmachine · 2024-01-26T14:21:38Z

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

drewdaemon

Config builder changes are looking good! However, Lens really supports two distinct types of annotation layer: by-value and by-reference. You're currently using by-value.

Could we make that a bit more clear (e.g. rename xy_annotation_layer to xy_by_value_annotation_layer, have the class implement ChartLayer<XYByValueAnnotationLayer>, etc)?

maryam-saeidi

Code looks good, added some comments. Will check it locally.

maryam-saeidi · 2024-01-31T08:50:46Z

.../public/components/custom_threshold/components/rule_condition_chart/rule_condition_chart.tsx

@@ -47,13 +58,15 @@ const getOperationTypeFromRuleAggType = (aggType: AggType): OperationType => {
 export const getBufferThreshold = (threshold?: number): string =>
  (Math.ceil((threshold || 0) * 1.1 * 100) / 100).toFixed(2).toString();

-export function PreviewChart({


PreviewChart was a more clear name as we refer to this component in our discussion as the preview chart instead of RuleConditionChart. Was the previous name confusing?

The PreviewChart works well in context of rule configuration, when the purpose is to show user preview of data flow so that can define appropriate threshold. In context of alert details page, we are showing data at the time alert triggered and some data before and after alert to analyse. I think RuleConditionChart is a common name that would work for both purposes. We can rename it to something else to cover both use cases, so if you have any other suggestions, let me know.

I see your point, no I don't have a better suggestion.

Would you mind renaming this component to PreviewChart in here to make it easier to find in the code?

import { RuleConditionChart as PreviewChart } from './components/rule_condition_chart/rule_condition_chart';

.../public/components/custom_threshold/components/rule_condition_chart/rule_condition_chart.tsx

...mponents/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx

maryam-saeidi

In recovered scenario, I am missing the alert start annotation:
There is a gap between the alert annotation and the start of alert duration annotation:
Any idea why some bars are not fully included in the annotation? Is the highlighted one in the alert duration or not?

benakansara · 2024-01-31T10:26:37Z

@maryam-saeidi For recovered alerts, I have only added range annotation, do you think we should add alert start annotation as well? Let me check regarding active alert annotation, why there is a gap.

maryam-saeidi · 2024-01-31T10:34:45Z

@maryam-saeidi For recovered alerts, I have only added range annotation, do you think we should add alert start annotation as well?

I remember we had it and I think it is a useful indication of when the alert started even if it is already recovered.

crespocarlos · 2024-02-01T13:18:56Z

...mbeddable-utils/attribute_builder/visualization_types/layers/xy_by_value_annotation_layer.ts

@@ -0,0 +1,66 @@
+/*


The attribute_builder will be deprecated in the future in favor of the config_builder created recently by the visualizations team.

@crespocarlos thanks for the heads up. I will create a separate issue to replace attribute_builder usage with config_builder in observability plugin.

created #176146

thanks @benakansara !

benakansara · 2024-02-02T11:53:39Z

@maryam-saeidi I have added alert start annotation for recovered alerts as well. For the issue with gap between two annotations, I have applied workaround to change series type to bar_stacked for alert details page. When this is fixed, we can revert this change and keep bar as series type. Though in alert details page, we are showing only one bar, so visually there will be no difference.

maryam-saeidi

LGTM! 💯

Item number 1: Is there a config in lens to add the annotation before the bar not in the middle? Seems to me less confusing if the annotation covers the whole bar instead of half.
Item number 2: Any idea why the last section is not highlighted?

Recovered 😍

maryam-saeidi · 2024-02-02T15:36:55Z

...mponents/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx

+    key: {
+      type: 'range',
+      timestamp: alertStart!,
+      endTimestamp: alertEnd ?? '',


Thinking out loud: If we pass endTimestamp as undefined, would it be the same as the activeAlertRangeAnnotation annotation? So we don't need to define two range annotations and one would be enough.

yes, good idea. I updated the code in fa3df0d.

benakansara · 2024-02-02T21:53:05Z

@maryam-saeidi

Item number 1: Is there a config in lens to add the annotation before the bar not in the middle? Seems to me less confusing if the annotation covers the whole bar instead of half.

What was the alert start time in this case? The annotation is placed at the exact timestamp, so it should not be always in middle. If the alert start time is 09:10:00, annotation will be placed at start of the bar. I think this is more accurate than placing annotation always at the start.

Alert at 22:16:02 - annotation almost at start of bar - bucket interval mintue

Alert at 11:28:13 - annotation almost at middle of bar - bucket interval hour

Item number 2: Any idea why the last section is not highlighted?

In the below screenshot, the bucket is of 5 minutes, and bucket for 22:35 is displayed which would cover 22:35-22:39 but current time is 22:37. We are showing range annotation till current time so there appears a gap for the time between 22:37-22:39. There may be a configuration in Lens to hide partial buckets. But I don't think we should apply that either because for rule interval like 1 hour, there will be no bucket shown for last hour until full bucket is computed.

kibana-ci · 2024-02-02T23:02:27Z

💚 Build Succeeded

Buildkite Build
Commit: 71753ca

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`observability`	597	587	-10
`observabilityAIAssistant`	224	225	+1
total			-9

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/lens-embeddable-utils`	178	190	+12

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`observability`	627.9KB	612.9KB	-15.0KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/lens-embeddable-utils`	3	4	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`observability`	102.0KB	101.7KB	-306.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/lens-embeddable-utils`	181	193	+12

async chunk count

id	before	after	diff
`observability`	22	23	+1

History

💔 Build #191015 failed 2de9e0e
💛 Build #190885 was flaky c31fc97
💛 Build #190120 was flaky 1bf452a
💛 Build #189595 was flaky f24c421
💔 Build #189420 failed ac70b09

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @benakansara

maryam-saeidi · 2024-02-05T07:34:07Z

Item number 2: Any idea why the last section is not highlighted?

In the below screenshot, the bucket is of 5 minutes, and bucket for 22:35 is displayed which would cover 22:35-22:39 but current time is 22:37. We are showing range annotation till current time so there appears a gap for the time between 22:37-22:39. There may be a configuration in Lens to hide partial buckets. But I don't think we should apply that either because for rule interval like 1 hour, there will be no bucket shown for last hour until full bucket is computed.

Thanks for the clarification.
For the second item, my concern is that the user might think that the alert is recovered because of the alert range annotation but the alert is actually active. So, I was thinking more about having the annotation till the end of the chart if possible.

…ils page (elastic#175513) Resolves elastic#174075, elastic#155691 - Using same chart in alert details page as in rule flyout for preview - Group by info is applied as filter on chart data - Added annotations - For active alerts, added point annotation with alert start time and range annotation with range from alert start time till current time - For recovered alerts, added range annotation for alert duration ### Active alert <img width="1257" alt="Screenshot 2024-01-26 at 15 05 26" src="https://github.com/elastic/kibana/assets/69037875/d548b529-7811-4e3e-996d-aa4d259327b9"> <img width="1265" alt="Screenshot 2024-01-26 at 15 09 44" src="https://github.com/elastic/kibana/assets/69037875/a01d0cdf-5254-484d-91b3-c45a846790a9"> ### Recovered alert <img width="1250" alt="Screenshot 2024-01-26 at 14 53 08" src="https://github.com/elastic/kibana/assets/69037875/521a69a2-6a4a-4b9e-a886-3477c92d63ac"> --------- Co-authored-by: kibanamachine <[email protected]>

reuse lens chart, add annotations

2913a41

benakansara self-assigned this Jan 25, 2024

benakansara added release_note:skip Skip the PR/issue when compiling release notes Team:obs-ux-management Observability Management User Experience Team v8.13.0 labels Jan 25, 2024

benakansara and others added 3 commits January 25, 2024 10:59

Merge branch 'main' into feat/use-lens-chart-for-alert-details

c50a95c

resize actions menu

5dbc95c

fix filter query issue, error loading alert details page

54385bc

kibanamachine and others added 2 commits January 25, 2024 14:35

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

7a596ad

…fix'

Merge branch 'main' into feat/use-lens-chart-for-alert-details

ac70b09

benakansara and others added 2 commits January 26, 2024 13:53

fix tests, fix bug

a8dd3f9

Merge branch 'main' into feat/use-lens-chart-for-alert-details

edc8a8f

benakansara and others added 2 commits January 26, 2024 14:49

refactoring

2ef2081

Merge branch 'main' into feat/use-lens-chart-for-alert-details

f24c421

make timerange non-optional

f99f5fb

benakansara marked this pull request as ready for review January 26, 2024 14:21

benakansara requested review from a team as code owners January 26, 2024 14:21

benakansara changed the title ~~[Custom threshold rule] Reuse lens chart with annotations in alert details page~~ [Custom threshold rule] Use lens chart with annotations in alert details page Jan 26, 2024

benakansara linked an issue Jan 26, 2024 that may be closed by this pull request

[Alert details page] show alert group related data on condition charts #155691

Closed

1 task

drewdaemon reviewed Jan 26, 2024

View reviewed changes

smith added the apm:review label Jan 29, 2024

change xy_annotation_layer to xy_by_value_annotation_layer

fd364fa

maryam-saeidi reviewed Jan 31, 2024

View reviewed changes

crespocarlos reviewed Feb 1, 2024

View reviewed changes

benakansara and others added 2 commits February 1, 2024 20:52

Merge branch 'main' into feat/use-lens-chart-for-alert-details

c31fc97

PR feedback

a6fb1a7

mbondyra mentioned this pull request Feb 2, 2024

[Annotations] Line Annotation and RectAnnotation are misaligned for non-stacked chart elastic/elastic-charts#2323

Open

benakansara added 2 commits February 2, 2024 11:38

fix annotation issue, refactoring

68b92cb

refactoring

51eadcc

typo

2de9e0e

benakansara requested a review from maryam-saeidi February 2, 2024 13:01

maryam-saeidi approved these changes Feb 2, 2024

View reviewed changes

benakansara added 2 commits February 2, 2024 21:58

fix tests

b1d8c91

pr feedback

fa3df0d

Merge branch 'main' into feat/use-lens-chart-for-alert-details

71753ca

benakansara enabled auto-merge (squash) February 2, 2024 21:54

benakansara merged commit fa20457 into elastic:main Feb 2, 2024
17 checks passed

kibanamachine added the backport:skip This commit does not require backporting label Feb 2, 2024

shahzad31 mentioned this pull request Feb 5, 2024

[Security solution] Update default Bedrock api url (#176090) #176206

Closed

10 tasks

benakansara mentioned this pull request Feb 7, 2024

[Alert details page] Fix not showing alert annotation in metric threshold alert details page #154451

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Custom threshold rule] Use lens chart with annotations in alert details page #175513

[Custom threshold rule] Use lens chart with annotations in alert details page #175513

benakansara commented Jan 25, 2024 •

edited

Loading

apmmachine commented Jan 25, 2024

benakansara commented Jan 25, 2024

benakansara commented Jan 25, 2024

benakansara commented Jan 26, 2024

benakansara commented Jan 26, 2024

elasticmachine commented Jan 26, 2024

drewdaemon left a comment

maryam-saeidi left a comment

maryam-saeidi Jan 31, 2024

benakansara Feb 2, 2024

maryam-saeidi Feb 2, 2024

maryam-saeidi left a comment

benakansara commented Jan 31, 2024

maryam-saeidi commented Jan 31, 2024

crespocarlos Feb 1, 2024

benakansara Feb 2, 2024

benakansara Feb 2, 2024

crespocarlos Feb 2, 2024

benakansara commented Feb 2, 2024 •

edited

Loading

maryam-saeidi left a comment

maryam-saeidi Feb 2, 2024

benakansara Feb 2, 2024

benakansara commented Feb 2, 2024

kibana-ci commented Feb 2, 2024

API count

async chunk count

maryam-saeidi commented Feb 5, 2024

[Custom threshold rule] Use lens chart with annotations in alert details page #175513

[Custom threshold rule] Use lens chart with annotations in alert details page #175513

Conversation

benakansara commented Jan 25, 2024 • edited Loading

Active alert

Recovered alert

apmmachine commented Jan 25, 2024

🤖 GitHub comments

benakansara commented Jan 25, 2024

benakansara commented Jan 25, 2024

benakansara commented Jan 26, 2024

benakansara commented Jan 26, 2024

elasticmachine commented Jan 26, 2024

drewdaemon left a comment

Choose a reason for hiding this comment

maryam-saeidi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maryam-saeidi left a comment

Choose a reason for hiding this comment

benakansara commented Jan 31, 2024

maryam-saeidi commented Jan 31, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benakansara commented Feb 2, 2024 • edited Loading

maryam-saeidi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benakansara commented Feb 2, 2024

kibana-ci commented Feb 2, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

History

maryam-saeidi commented Feb 5, 2024

benakansara commented Jan 25, 2024 •

edited

Loading

benakansara commented Feb 2, 2024 •

edited

Loading