From 90185bea007086ada4bddb70bc934d10579241c2 Mon Sep 17 00:00:00 2001
From: Gareth Dawson <gareth.dawson@grafana.com>
Date: Mon, 19 Dec 2022 16:28:46 +0000
Subject: [PATCH] Loki: Change format of query builder hints (#60228)

* change format of query builder hints

* fix tests

* add hint property on query actions

* revert changes to prometheus hints

* respond to feedback

* fix failing tests

* trigger drone

Co-authored-by: Matias Chomicki <matyax@gmail.com>
---
 packages/grafana-data/src/types/datasource.ts               | 1 +
 public/app/plugins/datasource/loki/queryHints.ts            | 4 ++++
 .../querybuilder/components/PromQueryBuilder.test.tsx       | 6 +++---
 .../prometheus/querybuilder/shared/QueryBuilderHints.tsx    | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts
index dabb4dfea2b..be4d32b520a 100644
--- a/packages/grafana-data/src/types/datasource.ts
+++ b/packages/grafana-data/src/types/datasource.ts
@@ -511,6 +511,7 @@ export interface DataQueryTimings {
 }
 
 export interface QueryFix {
+  title?: string;
   label: string;
   action?: QueryFixAction;
 }
diff --git a/public/app/plugins/datasource/loki/queryHints.ts b/public/app/plugins/datasource/loki/queryHints.ts
index 96c16ec73d0..e48c8b2cb75 100644
--- a/public/app/plugins/datasource/loki/queryHints.ts
+++ b/public/app/plugins/datasource/loki/queryHints.ts
@@ -23,6 +23,7 @@ export function getQueryHints(query: string, series: DataFrame[]): QueryHint[] {
         type: 'ADD_JSON_PARSER',
         label: 'Selected log stream selector has JSON formatted logs.',
         fix: {
+          title: 'add json parser',
           label: 'Consider using JSON parser.',
           action: {
             type: 'ADD_JSON_PARSER',
@@ -37,6 +38,7 @@ export function getQueryHints(query: string, series: DataFrame[]): QueryHint[] {
         type: 'ADD_LOGFMT_PARSER',
         label: 'Selected log stream selector has logfmt formatted logs.',
         fix: {
+          title: 'add logfmt parser',
           label: 'Consider using logfmt parser to turn key-value pairs in your log lines to labels.',
           action: {
             type: 'ADD_LOGFMT_PARSER',
@@ -57,6 +59,7 @@ export function getQueryHints(query: string, series: DataFrame[]): QueryHint[] {
           type: 'ADD_NO_PIPELINE_ERROR',
           label: 'Some logs in your selected log streams have parsing error.',
           fix: {
+            title: 'remove pipeline errors',
             label: 'Consider filtering out logs with parsing errors.',
             action: {
               type: 'ADD_NO_PIPELINE_ERROR',
@@ -79,6 +82,7 @@ export function getQueryHints(query: string, series: DataFrame[]): QueryHint[] {
         type: 'ADD_LEVEL_LABEL_FORMAT',
         label: `Some logs in your selected log stream have "${levelLikeLabel}" label.`,
         fix: {
+          title: 'add label level format',
           label: `If ${levelLikeLabel} label has level values, consider using label_format to rename it to "level". Level label can be then visualized in log volumes.`,
           action: {
             type: 'ADD_LEVEL_LABEL_FORMAT',
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx
index 2d006875657..493495c3f72 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx
@@ -149,7 +149,7 @@ describe('PromQueryBuilder', () => {
     });
     await openMetricSelect(container);
     await userEvent.click(screen.getByText('histogram_metric_bucket'));
-    await waitFor(() => expect(screen.getByText('hint: add histogram_quantile()')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('hint: add histogram_quantile')).toBeInTheDocument());
   });
 
   it('shows hints for counter metrics', async () => {
@@ -160,7 +160,7 @@ describe('PromQueryBuilder', () => {
     });
     await openMetricSelect(container);
     await userEvent.click(screen.getByText('histogram_metric_sum'));
-    await waitFor(() => expect(screen.getByText('hint: add rate()')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('hint: add rate')).toBeInTheDocument());
   });
 
   it('shows hints for counter metrics', async () => {
@@ -171,7 +171,7 @@ describe('PromQueryBuilder', () => {
     });
     await openMetricSelect(container);
     await userEvent.click(screen.getByText('histogram_metric_sum'));
-    await waitFor(() => expect(screen.getByText('hint: add rate()')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('hint: add rate')).toBeInTheDocument());
   });
 
   it('shows multiple hints', async () => {
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryBuilderHints.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryBuilderHints.tsx
index 3deb9c3e13a..7f7f30a01c6 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryBuilderHints.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryBuilderHints.tsx
@@ -56,7 +56,7 @@ export const QueryBuilderHints = <T extends PromLokiVisualQuery>({
                   size="sm"
                   className={styles.hint}
                 >
-                  {'hint: ' + hint.fix?.action?.type.toLowerCase().replace('_', ' ') + '()'}
+                  hint: {hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ')}
                 </Button>
               </Tooltip>
             );