Simple text input groupby

Author: aocenas

cmd/fire/fire.yaml

@@ -6,3 +6,8 @@ scrape_configs:
     scrape_interval: "2s"
     static_configs:
       - targets: [ '127.0.0.1:4100']
+
+  - job_name: "foo"
+    scrape_interval: "5s"
+    static_configs:
+      - targets: [ '127.0.0.1:4100']

grafana/fire-datasource/pkg/plugin/query.go

@@ -21,6 +21,7 @@ type queryModel struct {
 	WithStreaming bool
 	ProfileTypeID string `json:"profileTypeId"`
 	LabelSelector string `json:"labelSelector"`
+	GroupBy       string `json:"groupBy"`
 }
 
 type dsJsonModel struct {
@@ -68,8 +69,7 @@ func (d *FireDatasource) query(ctx context.Context, pCtx backend.PluginContext,
 			Start:         query.TimeRange.From.UnixMilli(),
 			End:           query.TimeRange.To.UnixMilli(),
 			Step:          math.Max(query.Interval.Seconds(), parsedInterval.Seconds()),
-			// todo add one or more group bys
-			GroupBy: []string{},
+			GroupBy:       strings.Split(qm.GroupBy, ","),
 		})
 
 		log.DefaultLogger.Debug("Sending SelectSeriesRequest", "request", req, "queryModel", qm)
@@ -80,7 +80,7 @@ func (d *FireDatasource) query(ctx context.Context, pCtx backend.PluginContext,
 			return response
 		}
 		// add the frames to the response.
-		response.Frames = append(response.Frames, seriesToDataFrame(seriesResp, qm.ProfileTypeID))
+		response.Frames = append(response.Frames, seriesToDataFrames(seriesResp, qm.ProfileTypeID)...)
 	}
 
 	if query.QueryType == queryTypeProfile || query.QueryType == queryTypeBoth {
@@ -285,41 +285,44 @@ func walkTree(tree *ProfileTree, fn func(tree *ProfileTree)) {
 	}
 }
 
-func seriesToDataFrame(seriesResp *connect.Response[querierv1.SelectSeriesResponse], profileTypeID string) *data.Frame {
-	frame := data.NewFrame("series")
-	frame.Meta = &data.FrameMeta{PreferredVisualization: "graph"}
+func seriesToDataFrames(seriesResp *connect.Response[querierv1.SelectSeriesResponse], profileTypeID string) []*data.Frame {
+	var frames []*data.Frame
 
-	fields := data.Fields{}
-	timeField := data.NewField("time", nil, []time.Time{})
-	fields = append(fields, timeField)
+	for _, series := range seriesResp.Msg.Series {
+		// We create separate data frames as the series may not have the same length
+		frame := data.NewFrame("series")
+		frame.Meta = &data.FrameMeta{PreferredVisualization: "graph"}
+
+		fields := data.Fields{}
+		timeField := data.NewField("time", nil, []time.Time{})
+		fields = append(fields, timeField)
 
-	for index, series := range seriesResp.Msg.Series {
 		label := ""
 		unit := ""
-		if len(series.Labels) > 0 {
-			label = series.Labels[0].Name
-		} else {
-			parts := strings.Split(profileTypeID, ":")
-			if len(parts) == 5 {
-				label = parts[1] // sample type e.g. cpu, goroutine, alloc_objects
-				unit = normalizeUnit(parts[2])
-			}
+		parts := strings.Split(profileTypeID, ":")
+		if len(parts) == 5 {
+			label = parts[1] // sample type e.g. cpu, goroutine, alloc_objects
+			unit = normalizeUnit(parts[2])
+		}
+
+		labels := make(map[string]string)
+		for _, label := range series.Labels {
+			labels[label.Name] = label.Value
 		}
-		valueField := data.NewField(label, nil, []float64{})
+
+		valueField := data.NewField(label, labels, []float64{})
 		valueField.Config = &data.FieldConfig{Unit: unit}
 
 		for _, point := range series.Points {
-			if index == 0 {
-				timeField.Append(time.UnixMilli(point.Timestamp))
-			}
+			timeField.Append(time.UnixMilli(point.Timestamp))
 			valueField.Append(point.Value)
 		}
 
 		fields = append(fields, valueField)
+		frame.Fields = fields
+		frames = append(frames, frame)
 	}
-
-	frame.Fields = fields
-	return frame
+	return frames
 }
 
 func normalizeUnit(unit string) string {

grafana/fire-datasource/src/QueryEditor/QueryEditor.tsx

@@ -84,7 +84,7 @@ export function QueryEditor(props: Props) {
       <EditorRow>
         <QueryOptions
           query={query}
-          onQueryTypeChange={(val) => props.onChange({ ...query, queryType: val as Query['queryType'] })}
+          onQueryChange={props.onChange}
           app={props.app}
         />
       </EditorRow>

grafana/fire-datasource/src/QueryEditor/QueryOptions.tsx

@@ -2,14 +2,14 @@ import { css } from '@emotion/css';
 import React from 'react';
 import { useToggle } from 'react-use';
 
-import {CoreApp, GrafanaTheme2} from '@grafana/data';
-import { Icon, useStyles2, RadioButtonGroup, Field } from '@grafana/ui';
+import { CoreApp, GrafanaTheme2 } from '@grafana/data';
+import { Icon, useStyles2, RadioButtonGroup, Field, Input } from '@grafana/ui';
 import { Query } from '../types';
 import { Stack } from './Stack';
 
 export interface Props {
   query: Query;
-  onQueryTypeChange: (val: string) => void;
+  onQueryChange: (query: Query) => void;
   app?: CoreApp;
 }
 
@@ -20,7 +20,7 @@ const rangeOptions: Array<{ value: Query['queryType']; label: string; descriptio
 ];
 
 function getOptions(app?: CoreApp) {
-if (app === CoreApp.Explore) {
+  if (app === CoreApp.Explore) {
     return rangeOptions;
   }
   return rangeOptions.filter((option) => option.value !== 'both');
@@ -29,10 +29,10 @@ if (app === CoreApp.Explore) {
 /**
  * Base on QueryOptionGroup component from grafana/ui but that is not available yet.
  */
-export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
+export function QueryOptions({ query, onQueryChange, app }: Props) {
   const [isOpen, toggleOpen] = useToggle(false);
   const styles = useStyles2(getStyles);
-  const options = getOptions(app)
+  const options = getOptions(app);
 
   return (
     <Stack gap={0} direction="column">
@@ -50,7 +50,17 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
       {isOpen && (
         <div className={styles.body}>
           <Field label={'Query Type'}>
-            <RadioButtonGroup options={options} value={query.queryType} onChange={onQueryTypeChange} />
+            <RadioButtonGroup
+              options={options}
+              value={query.queryType}
+              onChange={(value) => onQueryChange({ ...query, queryType: value })}
+            />
+          </Field>
+          <Field label={'Group by'}>
+            <Input
+              value={query.groupBy}
+              onChange={(ev) => onQueryChange({ ...query, groupBy: ev.currentTarget.value })}
+            />
           </Field>
         </div>
       )}

grafana/fire-datasource/src/types.ts

@@ -4,6 +4,7 @@ export interface Query extends DataQuery {
   labelSelector: string;
   profileTypeId: string;
   queryType: 'metrics' | 'profile' | 'both';
+  groupBy: string;
 }
 
 export interface ProfileTypeMessage {
@@ -20,6 +21,7 @@ export type SeriesMessage = Array<{ labels: Array<{ name: string; value: string
 export const defaultQuery: Partial<Query> = {
   labelSelector: '{}',
   queryType: 'both',
+  groupBy: '',
 };
 
 /**