Dashboard: Auto-generate panel title and description using AI #74284

nmarrs · 2023-09-01T17:47:04Z

What is this feature?

Implements basic panel title and description generation.

Roughly based on the DashGPT hackathon PR but with some cleaned up patterns / refactors to make this functionality more maintainable moving forward :)

TODO

Clean up description implementation (remove preview (maybe dependent on feature flag 🤷), make default text input box larger
Clean up list of todos in PR :)
Biggest technical cleanup IMO is avoiding the special character return ~ system and doing something more robust from the actual API call for getting done status

Generate and description	Plugin not configured

Which issue(s) does this PR fix?:

Fixes #74241
Fixes #74242

Special notes for your reviewer:

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.

…d placeholder generate buttons to panel title + description

…generation button

…that is passed to wrapping components

nmarrs · 2023-09-01T17:48:20Z

public/app/features/dashboard/components/GenAI/GenAIButton.tsx

@@ -0,0 +1,30 @@
+import { css } from '@emotion/css';


Naming is hard... wasnt sure to keep with DashGPT or just try to make it more general to generative AI - i dont feel strongly either way so please feel free to modify any and all naming 😅

nmarrs · 2023-09-01T17:50:07Z

public/app/features/dashboard/components/GenAI/GenAIService.ts

+import { getDashboardSrv } from '../../services/DashboardSrv';
+
+// TODO: Replace this approach with more stable approach
+export const SPECIAL_DONE_TOKEN = '~';


This file definitely needs some work - we should move away from hacky special done token in favor of receiving done result from llm plugin API directly

Also we should consider a better way to share this code betwen title / description generation + potentially more use cases (at the very least use an enum instead of passing around "title" and "description" everywhere

I would not concentrate all possible "Generative AI calls" in a single place. Instead, every component will contain the prompt to be sent. Then this service will become just a simplification of the llm librarly API, which it creates a signal of: Are we duplicating with no reason? Can we just modify the llm library if we find it hard to use?

IMO, we just should use llm directly with no services in between.

I should be able to move the odd logic around detecting if streams are done into the grafana/experimental package so that we don't have to do this oddball logic with it.

…tle-and-description-generation

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx

ivanortegaalba · 2023-09-05T15:39:52Z

Taking a look to the implementation, do you think we can create a component to group all the functionalities for the generation?

Something like:

<AutoGenerateWithAI messages={} onGenerateOutput={(result) => setState(result)} onClick={trackUsage} />

…el-title-and-description-generation

…o GenAI button to ensure consistency

ivanortegaalba · 2023-09-12T15:06:50Z

I did a big refactor to simplify the implementation

I decentralized the prompt generation for title and description. I don't like the service grows when adding more generative AI features. Instead, I created component wrappers that manage the message generation
I moved the llm library usage to the GenAIButton This ensures every place where we use the LLM button, the experience is the same. You can see the components for descriptions and title are only focused on the prompt configuration
I added an status when the plugin is not properly configured

…n-generation

…n' of https://github.com/grafana/grafana into dashgpt-implement-panel-title-and-description-generation

ivanortegaalba · 2023-09-14T19:51:37Z

I pushed a bunch of changes, the PR should be ready to be reviewed 😄

Update to the latest @grafana/experimental
I decentralized the prompt generation for title and description. I don't like the service grows when adding more generative AI features. Instead, I created component wrappers that manage the message generation
I moved the llm library usage to the GenAIButton This ensures every place where we use the LLM button, the experience is the same. You can see the components for descriptions and title are only focused on the prompt configuration
I added a status when the plugin is not properly configured

About the usage of the character to detect the end of the stream, it should be fixed in llms library

ivanortegaalba · 2023-09-18T13:45:53Z

@nmarrs since I changed quite a lot of code, I'd like to get your review, before merging, because you opened the PR 😄

nmarrs

Code wise this is looking great IMO for initial POC 👍 I'm not able to approve this as I created PR but consider this APPROVED 💯✅

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx

nmarrs · 2023-09-19T03:40:26Z

public/app/features/dashboard/components/GenAI/utils.ts

+ */
+export function cleanupResponse(response: string) {
+  return response.replace(SPECIAL_DONE_TOKEN, '').replace(/"/g, '');
+}


Love all of the included doc strings here

ivanortegaalba

Approved by @nmarrs

torkelo · 2023-09-22T05:49:57Z

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx

+    const input = document.getElementById('PanelFrameTitle');
+    if (input instanceof HTMLInputElement) {
+      input.value = title;
+      onPanelConfigChange('title', title);
+    }
+  };


@nmarrs
why the getElementById here?

sorry, pinged wrong person, was supposed to ping @ivanortegaalba

* Add "addon" prop to options panel item descriptor; add placeholder generate buttons to panel title + description * Add basic `ai` icon; add separate wrapping component for panel title generation button * Add basic panel title generation * Add basic panel description generation * Add configuration error state for GenAI button * Add GenAI button generic component --------- Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com> Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

nmarrs added 6 commits September 1, 2023 05:56

initial commit: add "addon" prop to options panel item descriptor; ad…

887ae4b

…d placeholder generate buttons to panel title + description

Add basic ai icon; add separate wrapping component for panel title …

e99a0c5

…generation button

Add wrapper component for panel description generation

721a3c2

Add function to set panel title / description in panel frame options …

8183ae2

…that is passed to wrapping components

Add basic panel title generation

5fbfbf2

Add basic panel description generation 🔥

c095c33

nmarrs added no-backport Skip backport of PR no-changelog Skip including change in changelog/release notes area/dashgpt Issues related to the dashgpt project area/generativeAI for issues that involve generative AI labels Sep 1, 2023

nmarrs added this to the 10.2.x milestone Sep 1, 2023

nmarrs assigned ivanortegaalba, nmarrs and adela-almasan Sep 1, 2023

grafana-pr-automation bot added the area/frontend label Sep 1, 2023

nmarrs commented Sep 1, 2023

View reviewed changes

nmarrs added 3 commits September 2, 2023 06:46

Merge remote-tracking branch 'origin' into dashgpt-implement-panel-ti…

550181b

…tle-and-description-generation

update betterer

c65b62a

Fix panelmodel import

d64a29a

ivanortegaalba reviewed Sep 5, 2023

View reviewed changes

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx Show resolved Hide resolved

ivanortegaalba reviewed Sep 5, 2023

View reviewed changes

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx Show resolved Hide resolved

ivanortegaalba added 2 commits September 12, 2023 11:25

Merge remote-tracking branch 'origin/main' into dashgpt-implement-pan…

ea581bd

…el-title-and-description-generation

Decentralize the prompt generation, simplify components, move logic t…

316a909

…o GenAI button to ensure consistency

adela-almasan and others added 4 commits September 13, 2023 10:16

Merge branch 'main' into dashgpt-implement-panel-title-and-descriptio…

94091c5

…n-generation

Add component tests

20a8296

Merge branch 'dashgpt-implement-panel-title-and-description-generatio…

ecf4f23

…n' of https://github.com/grafana/grafana into dashgpt-implement-panel-title-and-description-generation

Add tests for utils

48e9a06

ivanortegaalba changed the title ~~[WIP] Dashgpt: Implement panel title and description generation~~ Dashgpt: Implement panel title and description generation Sep 14, 2023

ivanortegaalba requested review from a team and grafanabot as code owners September 14, 2023 19:50

ivanortegaalba requested review from kaydelaney, L-M-K-B, JoaoSilvaGrafana and mckn and removed request for a team September 14, 2023 19:50

ivanortegaalba mentioned this pull request Sep 18, 2023

Dashboards: Auto-generate dashboard changes description #75003

Merged

3 tasks

Fix types

ccdfe1e

Do not use inline styles

7c8f2d3

nmarrs commented Sep 19, 2023

View reviewed changes

ivanortegaalba approved these changes Sep 19, 2023

View reviewed changes

ivanortegaalba merged commit 8a127c4 into main Sep 19, 2023
18 checks passed

ivanortegaalba deleted the dashgpt-implement-panel-title-and-description-generation branch September 19, 2023 13:40

ivanortegaalba changed the title ~~Dashgpt: Implement panel title and description generation~~ Dashboard: Auto-generate panel title and description using AI Sep 19, 2023

ivanortegaalba added add to changelog and removed no-changelog Skip including change in changelog/release notes labels Sep 19, 2023

torkelo reviewed Sep 22, 2023

View reviewed changes

zerok modified the milestones: 10.2.x, 10.2.0 Oct 23, 2023

dnhn mentioned this pull request Oct 24, 2023

grafana 10.2.0 Homebrew/homebrew-core#152264

Closed

BrewTestBot mentioned this pull request Oct 25, 2023

grafana 10.2.0 Homebrew/homebrew-core#152321

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard: Auto-generate panel title and description using AI #74284

Dashboard: Auto-generate panel title and description using AI #74284

nmarrs commented Sep 1, 2023 •

edited by ivanortegaalba

nmarrs Sep 1, 2023

nmarrs Sep 1, 2023

ivanortegaalba Sep 5, 2023

SandersAaronD Sep 7, 2023

ivanortegaalba commented Sep 5, 2023

ivanortegaalba commented Sep 12, 2023

ivanortegaalba commented Sep 14, 2023

ivanortegaalba commented Sep 18, 2023

nmarrs left a comment

nmarrs Sep 19, 2023

ivanortegaalba left a comment

torkelo Sep 22, 2023

torkelo Sep 22, 2023

Dashboard: Auto-generate panel title and description using AI #74284

Dashboard: Auto-generate panel title and description using AI #74284

Conversation

nmarrs commented Sep 1, 2023 • edited by ivanortegaalba

nmarrs Sep 1, 2023

Choose a reason for hiding this comment

nmarrs Sep 1, 2023

Choose a reason for hiding this comment

ivanortegaalba Sep 5, 2023

Choose a reason for hiding this comment

SandersAaronD Sep 7, 2023

Choose a reason for hiding this comment

ivanortegaalba commented Sep 5, 2023

ivanortegaalba commented Sep 12, 2023

ivanortegaalba commented Sep 14, 2023

ivanortegaalba commented Sep 18, 2023

nmarrs left a comment

Choose a reason for hiding this comment

nmarrs Sep 19, 2023

Choose a reason for hiding this comment

ivanortegaalba left a comment

Choose a reason for hiding this comment

torkelo Sep 22, 2023

Choose a reason for hiding this comment

torkelo Sep 22, 2023

Choose a reason for hiding this comment

nmarrs commented Sep 1, 2023 •

edited by ivanortegaalba