datatrails: style: improve panel display (#82017)

* style: improve panel display

- Show summary text in hover legends (no queries)
- Show additional description in main panel title

public/app/features/trails/AutomaticMetricQueries/query-generators/common/queries.test.ts

@@ -28,14 +28,36 @@ describe('generateQueries', () => {
     });
   }
 
-  function testRateSpecificAssertions(queryDef: AutoQueryDef, rate: boolean) {
+  function testRateSpecificAssertions(queryDef: AutoQueryDef, rate: boolean, key: QueryInfoKey) {
     const query = queryDef.queries[0];
     const firstParen = query.expr.indexOf('(');
     const expectedBaseQuery = getGeneralBaseQuery(rate);
     const detectedBaseQuery = query.expr.substring(firstParen + 1, firstParen + 1 + expectedBaseQuery.length);
 
+    const description = rate ? 'mockagg of rates per second' : 'mockagg';
+
     describe(`since rate is ${rate}`, () => {
       test(`base query must be "${expectedBaseQuery}"`, () => expect(detectedBaseQuery).toBe(expectedBaseQuery));
+      if (key === 'main') {
+        test(`main panel title contains expected description "${description}"`, () =>
+          expect(queryDef.title).toContain(description));
+      } else {
+        test(`${key} panel title is just "\${metric}"`, () => expect(queryDef.title).toBe('${metric}'));
+        test(`${key} panel title does not contain description "${description}"`, () =>
+          expect(queryDef.title).not.toContain(description));
+      }
+
+      if (key === 'preview') {
+        test(`preview query uses "${description}" as legend`, () => expect(query.legendFormat).toBe(description));
+      } else if (key === 'breakdown') {
+        test(`breakdown query uses "{{\${groupby}}}" as legend`, () =>
+          expect(query.legendFormat).toBe('{{${groupby}}}'));
+      } else {
+        test(`${key} query doesn't only use "${description}" in legend`, () =>
+          expect(query.legendFormat).not.toBe(description));
+        test(`${key} query does contain "${description}" in legend`, () =>
+          expect(query.legendFormat).toContain(description));
+      }
     });
   }
 
@@ -48,13 +70,13 @@ describe('generateQueries', () => {
         if (key !== 'variants') {
           const queryDef = queryInfo[key];
           describe(`queryInfo.${key}`, () => testRateIndependentAssertions(queryDef, key));
-          describe(`queryInfo.${key}`, () => testRateSpecificAssertions(queryDef, rate));
+          describe(`queryInfo.${key}`, () => testRateSpecificAssertions(queryDef, rate, key));
           continue;
         }
 
         queryInfo[key].forEach((queryDef, index) => {
           describe(`queryInfo.${key}[${index}]`, () => testRateIndependentAssertions(queryDef, key));
-          describe(`queryInfo.${key}[${index}]`, () => testRateSpecificAssertions(queryDef, rate));
+          describe(`queryInfo.${key}[${index}]`, () => testRateSpecificAssertions(queryDef, rate, key));
         });
       }
     });

public/app/features/trails/AutomaticMetricQueries/query-generators/common/queries.ts

@@ -11,19 +11,44 @@ export function getGeneralBaseQuery(rate: boolean) {
   return rate ? GENERAL_RATE_BASE_QUERY : GENERAL_BASE_QUERY;
 }
 
+const aggLabels: Record<string, string> = {
+  avg: 'average',
+  sum: 'sum',
+};
+
+function getAggLabel(agg: string) {
+  return aggLabels[agg] || agg;
+}
+
 export function generateQueries({ agg, rate, unit }: AutoQueryParameters): AutoQueryInfo {
   const baseQuery = getGeneralBaseQuery(rate);
 
+  const description = rate ? `${getAggLabel(agg)} of rates per second` : `${getAggLabel(agg)}`;
+
   const common = {
     title: `${VAR_METRIC_EXPR}`,
     unit,
-    variant: 'graph',
+    variant: description,
+  };
+
+  const mainQuery = {
+    refId: 'A',
+    expr: `${agg}(${baseQuery})`,
+    legendFormat: `${VAR_METRIC_EXPR} (${description})`,
   };
 
   const main = {
     ...common,
-    queries: [{ refId: 'A', expr: `${agg}(${baseQuery})` }],
-    vizBuilder: () => simpleGraphBuilder(main),
+    title: `${VAR_METRIC_EXPR} (${description})`,
+    queries: [mainQuery],
+    vizBuilder: () => simpleGraphBuilder({ ...main }),
+  };
+
+  const preview = {
+    ...main,
+    title: `${VAR_METRIC_EXPR}`,
+    queries: [{ ...mainQuery, legendFormat: description }],
+    vizBuilder: () => simpleGraphBuilder(preview),
   };
 
   const breakdown = {
@@ -38,5 +63,5 @@ export function generateQueries({ agg, rate, unit }: AutoQueryParameters): AutoQ
     vizBuilder: () => simpleGraphBuilder(breakdown),
   };
 
-  return { preview: main, main: main, breakdown: breakdown, variants: [] };
+  return { preview, main, breakdown, variants: [] };
 }