Alerting: Loki-based alert state history modal #66595

konrad147 · 2023-04-14T14:44:15Z

What is this feature?
This PR adds a new Alert State History modal which taps into the new Loki-based history API

Minor improvements:

adds a muted version of the AlertStateTag component
Cleans the user provided label matcher regex expression to prevent RegExp errors

Why do we need this feature?
To provide better insights into changes in alert instances over time

Special notes for your reviewer:
The new modal is used when the state history backend engine is set to Loki. Otherwise, the old one will be used

OLD ASH MODAL

NEW ASH MODAL

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

Co-Authored-By: Konrad Lalik <konrad.lalik@grafana.com>

…ointer changes

…-state-history-modal

…na/grafana into alerting/alert-state-history-modal

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx

public/app/features/alerting/unified/components/rules/AlertStateTag.tsx

public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx

soniaAguilarPeiron · 2023-04-17T11:31:37Z

public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx

      >
-        <StateHistory alertId={alertId} />
+        <Suspense fallback={'Loading...'}>


public/app/features/alerting/unified/utils/alertmanager.ts

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx

soniaAguilarPeiron · 2023-04-17T15:01:01Z

public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx

+            builder.setSync();
+            const interpolator = builder.getTooltipInterpolator();
+
+            // I found this in TooltipPlugin.tsx


VikaCep · 2023-04-18T20:02:24Z

Looks like the Clear button from the filter is showing even if there's no text. Perhaps it should be hidden if empty.

VikaCep

This is awesome!! 🚀 ☄️ Left a few suggestions/comments.

public/app/features/alerting/unified/hooks/useStateHistoryModal.tsx

public/app/features/alerting/unified/components/rules/state-history/common.ts

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx

VikaCep · 2023-04-18T20:09:50Z

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx

+    instancesFilter
+  );
+
+  const frameSubset = useMemo(() => take(dataFrames, MAX_TIMELINE_SERIES), [dataFrames]);


any reason why you're using lodash's take instead of just slice?

I think some of my personal bias towards using Lodash / more readable code entered in to this (which is basically executing slice(0, n).

There's definitely a trade-off here since some engineers might be more familiar with the std library than lodash's functions but hopefully the function names are descriptive enough.

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx

…-state-history-modal

…story/common.ts Co-authored-by: Virginia Cepeda <virginia.cepeda@grafana.com>

…na/grafana into alerting/alert-state-history-modal

soniaAguilarPeiron

Incredible work! 🎉🎉🎉🎉🎉🎉🚀🚀🚀🚀🚀🚀

gillesdemey

My review here is a bit biased since I co-authored some parts; but have raised some (non-blocking) points that I think we could address from a maintenance perspective.

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx

public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx

…s tracking

gillesdemey

1 test still needs fixing or might be flakey but code LGTM

VikaCep

🚀 🚀 🚀

gillesdemey and others added 30 commits April 14, 2023 16:41

adds alertstatehistory backend config to grafanaBootData

e4a7037

add alertStateHistory api

08ddd27

show different ASH modal when using loki implementation

34d28a8

group log lines by instance (unique set of labels)

028fce5

Co-Authored-By: Konrad Lalik <konrad.lalik@grafana.com>

render log lines for each instance

3253236

Co-Authored-By: Konrad Lalik <konrad.lalik@grafana.com>

Add visual improvements to the log record of state changes

ad14e0c

Add values to log records

fb68190

compute common labels and show unique labels

2c704d5

Add state changes visualization

7fff5d7

fix common labels extraction

1fd0d67

Code cleanup

872fbb5

Add timespan-based log record view

ca847cd

WIP

de43a49

scroll to timestamp - poc

90fdbcf

Use SortedVector for timestamp field

4c38786

add conditional accessor for frames

a7c06ca

update some of the log formats and styles

5f6c977

Timestamp-based visualization with scrolling

e8139b8

minor improvements

9c37389

Split Loki's state history viewer into multiple files

0fc22c3

Add memoization to prevent graph rerender on filter updates

751b9a0

make chart size shrink when fewer instances

09e5a0b

style updates

7fed202

show warning when instances are hidden

d4bb822

Add basic label-based filtering

e3df4d9

Improve label-based filtering

50f03ad

Add regex validation

eb87d01

Improve no instances message when everything was filtered out

1d6c4a3

Update warning message

e34bb33

Move timeline viewer to a separate file, refactor handling timeline p…

d536c0e

…ointer changes

konrad147 added the add to what's new label Apr 14, 2023

konrad147 and others added 5 commits April 17, 2023 09:02

Fix test snapshot, fix type error

60a2379

Merge branch 'main' of github.com:grafana/grafana into alerting/alert…

785fb98

…-state-history-modal

adds tests for common.ts

94d0fc8

Add tests for converting log records into data frames

5fb391e

Merge branch 'alerting/alert-state-history-modal' of github.com:grafa…

5642745

…na/grafana into alerting/alert-state-history-modal

gillesdemey reviewed Apr 17, 2023

View reviewed changes

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx Outdated Show resolved Hide resolved

soniaAguilarPeiron reviewed Apr 17, 2023

View reviewed changes

konrad147 added 3 commits April 18, 2023 12:04

Add basic component test, fix type guards

2feaa2d

Use a constant for timeseries limit

dff30d0

Improve a11y, update component test

a4ff07e

VikaCep reviewed Apr 18, 2023

View reviewed changes

konrad147 and others added 6 commits April 19, 2023 10:30

Merge branch 'main' of github.com:grafana/grafana into alerting/alert…

b4d2335

…-state-history-modal

Memoize AlertStateTag, migrate from deprecated ArrayVector

455ee23

Update public/app/features/alerting/unified/components/rules/state-hi…

8e5d0b5

…story/common.ts Co-authored-by: Virginia Cepeda <virginia.cepeda@grafana.com>

Move helper hook into a separate file. Add Search input component

1ec79cc

Merge branch 'alerting/alert-state-history-modal' of github.com:grafa…

1dca3c2

…na/grafana into alerting/alert-state-history-modal

Change the limit of visible time series on the timeline

7333387

soniaAguilarPeiron approved these changes Apr 19, 2023

View reviewed changes

gillesdemey reviewed Apr 20, 2023

View reviewed changes

public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx Outdated Show resolved Hide resolved

public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx Outdated Show resolved Hide resolved

Add LogRecordViewer perf improvements, refactor timeline cursor event…

fe11296

…s tracking

gillesdemey approved these changes Apr 21, 2023

View reviewed changes

VikaCep approved these changes Apr 21, 2023

View reviewed changes

konrad147 added 2 commits April 21, 2023 15:26

Use callback to pass timeline refs

4465c92

Add grouping tests for the log record viewer

30bd0d7

konrad147 merged commit 91704cf into main Apr 24, 2023

konrad147 deleted the alerting/alert-state-history-modal branch April 24, 2023 07:28

zerok modified the milestones: 10.0.0, 10.0.0-preview May 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alerting: Loki-based alert state history modal #66595

Alerting: Loki-based alert state history modal #66595

konrad147 commented Apr 14, 2023 •

edited by gillesdemey

Loading

soniaAguilarPeiron Apr 17, 2023

soniaAguilarPeiron Apr 17, 2023

VikaCep commented Apr 18, 2023

VikaCep left a comment

VikaCep Apr 18, 2023

gillesdemey Apr 20, 2023

soniaAguilarPeiron left a comment

gillesdemey left a comment •

edited

Loading

gillesdemey left a comment

VikaCep left a comment

Alerting: Loki-based alert state history modal #66595

Alerting: Loki-based alert state history modal #66595

Conversation

konrad147 commented Apr 14, 2023 • edited by gillesdemey Loading

soniaAguilarPeiron Apr 17, 2023

Choose a reason for hiding this comment

soniaAguilarPeiron Apr 17, 2023

Choose a reason for hiding this comment

VikaCep commented Apr 18, 2023

VikaCep left a comment

Choose a reason for hiding this comment

VikaCep Apr 18, 2023

Choose a reason for hiding this comment

gillesdemey Apr 20, 2023

Choose a reason for hiding this comment

soniaAguilarPeiron left a comment

Choose a reason for hiding this comment

gillesdemey left a comment • edited Loading

Choose a reason for hiding this comment

gillesdemey left a comment

Choose a reason for hiding this comment

VikaCep left a comment

Choose a reason for hiding this comment

konrad147 commented Apr 14, 2023 •

edited by gillesdemey

Loading

gillesdemey left a comment •

edited

Loading