Prometheus: Fix query builder visualization when a query has by() clause for quantile (#88480)

Prometheus query builder: add support for by() clause for quantile aggregation

packages/grafana-prometheus/src/querybuilder/aggregations.ts

@@ -28,6 +28,10 @@ export function getAggregationOperations(): QueryBuilderOperationDef[] {
       params: [{ name: 'Identifier', type: 'string' }],
       defaultParams: ['count'],
     }),
+    ...createAggregationOperationWithParam(PromOperationId.Quantile, {
+      params: [{ name: 'Value', type: 'number' }],
+      defaultParams: [1],
+    }),
     createAggregationOverTime(PromOperationId.SumOverTime),
     createAggregationOverTime(PromOperationId.AvgOverTime),
     createAggregationOverTime(PromOperationId.MinOverTime),

packages/grafana-prometheus/src/querybuilder/components/promQail/state/templates.ts

@@ -76,6 +76,10 @@ export const generalTemplates: TemplateData[] = [
     template: 'count_values("aaaa",metric_a{})',
     description: 'Count number of label values for a label named "aaaa"',
   },
+  {
+    template: 'quantile by(l) (1,metric_a)',
+    description: 'Quantile of series in the metric "metric_a" grouped by the label "l"',
+  },
 ];
 
 export const counterTemplates: TemplateData[] = [

packages/grafana-prometheus/src/querybuilder/operations.ts

@@ -230,12 +230,6 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
       id: PromOperationId.Pi,
       renderer: (model) => `${model.id}()`,
     }),
-    createFunction({
-      id: PromOperationId.Quantile,
-      params: [{ name: 'Value', type: 'number' }],
-      defaultParams: [1],
-      renderer: functionRendererLeft,
-    }),
     createFunction({ id: PromOperationId.Rad }),
     createRangeFunction(PromOperationId.Resets),
     createFunction({