Alerting: Add templates autocomplete #53655

konrad147 · 2022-08-12T12:39:05Z

What this PR does / why we need it:
This PR adds a basic autocomplete feature to the template's editor.
It also includes inline documentation for available template data

Which issue(s) this PR fixes:
Fixes #35726

Special notes for your reviewer:

grafanabot · 2022-08-12T12:53:45Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/29814

…-template-editor-autocomplete

grafanabot · 2022-08-29T10:35:10Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/31436

…-template-editor-autocomplete

konrad147 · 2022-09-05T11:30:59Z

@jessover9000 Please take a look at the Templates guideline section and the table to the right (it contains a list of all available template data)

@brendamuir Please take a look at the user-facing messages. Can we improve them?

grafanabot · 2022-09-05T11:34:38Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/32239

grafanabot · 2022-09-05T13:30:54Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/32269

grafanabot · 2022-09-05T15:00:30Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/32303

…-template-editor-autocomplete

…rting/35726-template-editor-autocomplete' of github.com:grafana/grafana into alerting/35726-template-editor-autocomplete

grafanabot · 2022-09-08T07:27:15Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/32623

brendamuir

Looks fine to me now.

…-template-editor-autocomplete

maskin25 · 2022-09-08T08:26:01Z

LGTM!

jessover9000 · 2022-09-12T06:49:40Z

Hello, sorry for the late comment, I somehow missed the Github notification. So from a UX perspective, I personally found it a bit difficult to make sense of everything that’s going on here. I have only seen the screenshot and not the whole thing, so I still have a lot of questions and don't fully understand everything. Maybe I need to see a demo and have a call about this 😅

The templating guideline
What exactly are the blue words in the top? Are they those "snippets" or is the content of the template code box what we refer to as "snippets"? Are the blue words links? Why are they blue, since the other links are grey and underlined? What happens if I interact with them / can I interact with them?
The table
I was struggling to match stuff from the table on the right to the code/understand how the table relates to the code. What is the purpose of the table? If you're a user with little or no Go templating experience, how would you use this view and the table to accomplish writing/modifying your first template? As a user I might prefer getting contextual help about each string/value/etc right in the code by hovering or clicking or something, because right now it's kind of a lot of work to find either the data from the table in the code or the stuff from the code in the table. I feel like as a user I might actually profit more from seeing both the code and a notification preview side by side to understand what e.g. "Receiver" would be spelled out to in my actual notification. Might also be faster than searching for properties in that table. If we stick to the table, the least we could do is sort the values alphabetically.
Also it looks like there is overlap between general template data and alert template data, e.g. with "status" being there in both cases and basically behaving the same? I haven't seen the whole table but maybe it can be optimized.

gillesdemey · 2022-09-12T11:20:44Z

I think we'll need to work on the table view a bit as it looks a bit funky on smaller resolutions

public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx

public/app/features/alerting/unified/components/receivers/TemplateForm.tsx

gillesdemey · 2022-09-12T12:36:39Z

public/app/features/alerting/unified/components/receivers/editor/autocomplete.ts

+  const insertFallback = typeof label === 'string' ? label : label.label;
+  const labelObject = typeof label === 'string' ? { label: label, description: detail } : { ...label };
+
+  labelObject.description ??= detail;


I've never really seen a good use-case for logical nullish assignments, why do we want to assign description only if it's null here?

I want to use detail only as a fallback value if description doesn't exist. For some suggestions I wanted the description to be different from the detail. Simply skipping the description for some entries causes a worse user experience.
Suggestions look better in the editor if configured this way

public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx

grafanabot · 2022-09-15T09:59:50Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/33554

konrad147 · 2022-09-15T11:15:35Z

Thanks for your feedback @jessover9000!

I improved the guideline. They are snippets, users are able to use them inside the editor. I changed their look so they don't resemble links (they are not interactive)

If you're a user with little or no Go templating experience, how would you use this view and the table to accomplish writing/modifying your first template?

If the user has experience with any templating language, they will be looking for this table. It references what data is available for use inside the template.
If the user doesn't have any experience in templating at all they should go and read the documentation first (the templating guideline directs there. The docs contain links to more detailed resources about templating)

As a user I might prefer getting contextual help about each string/value/etc right in the code by hovering or clicking or something,

The autocomplete feature does it to some extent.

I feel like as a user I might actually profit more from seeing both the code and a notification preview side by side to understand what e.g. "Receiver" would be spelled out to in my actual notification.

Definitely! We've done already research in this regard yet it's a pretty complex task, beyond the scope of this one

If we stick to the table, the least we could do is sort the values alphabetically.

We sort them in the same way in our docs and I feel the order is from the most important (most frequently used) to the least important ones

…-template-editor-autocomplete

grafanabot · 2022-09-15T11:32:55Z

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/33566

gillesdemey

This looks amazing, LGTM! 🚀

…-template-editor-autocomplete

konrad147 added 5 commits August 10, 2022 15:53

Add basic autocomplete provider

fcd0942

Enable autocomplete only inside an expression

66d42d6

Refactor autocompletion provider

d802f57

Improve docs for alert variables

4f69015

Add Snippets

29d5d72

grafanabot added area/frontend enterprise-failed labels Aug 12, 2022

konrad147 added 2 commits August 29, 2022 09:44

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

18fb602

…-template-editor-autocomplete

Cleanup

583d13f

konrad147 added 3 commits September 2, 2022 09:28

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

8344b64

…-template-editor-autocomplete

Add templating info

2fd24a3

Add template data docs to the template edit form

d2b54a8

konrad147 requested review from jessover9000 and brendamuir September 5, 2022 11:25

konrad147 self-assigned this Sep 5, 2022

konrad147 added add to changelog no-backport Skip backport of PR labels Sep 5, 2022

konrad147 added this to the 9.2.0 milestone Sep 5, 2022

konrad147 marked this pull request as ready for review September 5, 2022 11:26

konrad147 requested a review from a team as a code owner September 5, 2022 11:26

Fix access to the monaco instance

54eb636

konrad147 requested a review from VikaCep September 5, 2022 13:41

Fix snippets list

f6b1bea

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

8e44b88

…-template-editor-autocomplete

konrad147 added 2 commits September 8, 2022 09:10

Improve docs

5ced3c2

Merge branches 'alerting/35726-template-editor-autocomplete' and 'ale…

ead7876

…rting/35726-template-editor-autocomplete' of github.com:grafana/grafana into alerting/35726-template-editor-autocomplete

brendamuir reviewed Sep 8, 2022

View reviewed changes

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

13928ec

…-template-editor-autocomplete

grafanabot added enterprise-ok and removed enterprise-failed labels Sep 8, 2022

konrad147 requested a review from gillesdemey September 9, 2022 10:21

gillesdemey reviewed Sep 12, 2022

View reviewed changes

gillesdemey reviewed Sep 14, 2022

View reviewed changes

public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx Outdated Show resolved Hide resolved

Improve template data layout

4ed21bc

grafanabot added enterprise-failed and removed enterprise-ok labels Sep 15, 2022

konrad147 requested a review from brendamuir September 15, 2022 11:03

konrad147 requested a review from gillesdemey September 15, 2022 11:16

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

3efaa92

…-template-editor-autocomplete

gillesdemey approved these changes Sep 19, 2022

View reviewed changes

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

4685ef5

…-template-editor-autocomplete

grafanabot added enterprise-ok and removed enterprise-failed labels Sep 20, 2022

konrad147 merged commit 4c4b758 into main Sep 20, 2022

konrad147 deleted the alerting/35726-template-editor-autocomplete branch September 20, 2022 11:07

dsotirakis modified the milestones: 9.2.0, 9.2.0-beta1 Sep 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alerting: Add templates autocomplete #53655

Alerting: Add templates autocomplete #53655

konrad147 commented Aug 12, 2022 •

edited

grafanabot commented Aug 12, 2022

grafanabot commented Aug 29, 2022

konrad147 commented Sep 5, 2022

grafanabot commented Sep 5, 2022

grafanabot commented Sep 5, 2022

grafanabot commented Sep 5, 2022

grafanabot commented Sep 8, 2022

brendamuir left a comment

maskin25 commented Sep 8, 2022

jessover9000 commented Sep 12, 2022 •

edited

gillesdemey commented Sep 12, 2022

gillesdemey Sep 12, 2022

konrad147 Sep 13, 2022 •

edited

grafanabot commented Sep 15, 2022

konrad147 commented Sep 15, 2022

grafanabot commented Sep 15, 2022

gillesdemey left a comment •

edited

Alerting: Add templates autocomplete #53655

Alerting: Add templates autocomplete #53655

Conversation

konrad147 commented Aug 12, 2022 • edited

grafanabot commented Aug 12, 2022

grafanabot commented Aug 29, 2022

konrad147 commented Sep 5, 2022

grafanabot commented Sep 5, 2022

grafanabot commented Sep 5, 2022

grafanabot commented Sep 5, 2022

grafanabot commented Sep 8, 2022

brendamuir left a comment

Choose a reason for hiding this comment

maskin25 commented Sep 8, 2022

jessover9000 commented Sep 12, 2022 • edited

gillesdemey commented Sep 12, 2022

gillesdemey Sep 12, 2022

Choose a reason for hiding this comment

konrad147 Sep 13, 2022 • edited

Choose a reason for hiding this comment

grafanabot commented Sep 15, 2022

konrad147 commented Sep 15, 2022

grafanabot commented Sep 15, 2022

gillesdemey left a comment • edited

Choose a reason for hiding this comment

konrad147 commented Aug 12, 2022 •

edited

jessover9000 commented Sep 12, 2022 •

edited

konrad147 Sep 13, 2022 •

edited

gillesdemey left a comment •

edited