add support for alerting and toggle between request types (#130)

* add support alerting

* update query type usage

* cleanup

* cleanup

* docs: update changelog for #98 and #111

* feat: add options for legend template, max lines, and step

* fix indentation in code

---------

Co-authored-by: dmitryk-dk <[email protected]>

Author: Loori-R

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## tip
 
+* FEATURE: add alerting support. See [this issue](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/98).
+* FEATURE: implement a toggle to switch between instant and range requests. See [this issue](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/111).
+* FEATURE: add options to configure the legend template, limit for number of log lines, and step. See [this](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/114) and [this](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/124) issues.
+
 ## v0.9.0
 
 * FEATURE: Add support for the `$__range` variable in queries.  It will be transformed to the `[time_from, time_to]` in the Unix format. See [this issue](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/112).

pkg/plugin/datasource.go

@@ -242,7 +242,7 @@ func (d *Datasource) query(ctx context.Context, _ backend.PluginContext, q *Quer
 		}
 	}()
 
-	switch QueryType(q.QueryType) {
+	switch q.QueryType {
 	case QueryTypeStats:
 		return parseStatsResponse(r, q)
 	case QueryTypeStatsRange:

pkg/plugin/query.go

@@ -43,12 +43,14 @@ const (
 type Query struct {
 	backend.DataQuery `json:"inline"`
 
-	Expr         string `json:"expr"`
-	LegendFormat string `json:"legendFormat"`
-	TimeInterval string `json:"timeInterval"`
-	Interval     string `json:"interval"`
-	IntervalMs   int64  `json:"intervalMs"`
-	MaxLines     int    `json:"maxLines"`
+	Expr         string    `json:"expr"`
+	LegendFormat string    `json:"legendFormat"`
+	TimeInterval string    `json:"timeInterval"`
+	Interval     string    `json:"interval"`
+	IntervalMs   int64     `json:"intervalMs"`
+	MaxLines     int       `json:"maxLines"`
+	Step         string    `json:"step"`
+	QueryType    QueryType `json:"queryType"`
 	url          *url.URL
 }
 
@@ -69,7 +71,7 @@ func (q *Query) getQueryURL(rawURL string, queryParams string) (string, error) {
 
 	q.url = u
 
-	switch QueryType(q.QueryType) {
+	switch q.QueryType {
 	case QueryTypeStats:
 		return q.statsQueryURL(params), nil
 	case QueryTypeStatsRange:
@@ -196,12 +198,16 @@ func (q *Query) statsQueryRangeURL(queryParams url.Values, minInterval time.Dura
 	}
 
 	q.Expr = utils.ReplaceTemplateVariable(q.Expr, q.IntervalMs, q.TimeRange)
-	step := utils.CalculateStep(minInterval, q.TimeRange, q.MaxDataPoints)
+
+	step := q.Step
+	if step == "" {
+		step = utils.CalculateStep(minInterval, q.TimeRange, q.MaxDataPoints).String()
+	}
 
 	values.Set("query", q.Expr)
 	values.Set("start", strconv.FormatInt(q.TimeRange.From.Unix(), 10))
 	values.Set("end", strconv.FormatInt(q.TimeRange.To.Unix(), 10))
-	values.Set("step", step.String())
+	values.Set("step", step)
 
 	q.url.RawQuery = values.Encode()
 	return q.url.String()

pkg/plugin/query_test.go

@@ -251,14 +251,12 @@ func TestQuery_getQueryURL(t *testing.T) {
 			q := &Query{
 				DataQuery: backend.DataQuery{
 					RefID:     tt.fields.RefID,
-					QueryType: string(tt.fields.QueryType),
 					TimeRange: tt.fields.TimeRange,
 				},
-				// RefID:     tt.fields.RefID,
 				Expr:     tt.fields.Expr,
 				MaxLines: tt.fields.MaxLines,
 
-				// QueryType: tt.fields.QueryType,
+				QueryType: tt.fields.QueryType,
 			}
 			got, err := q.getQueryURL(tt.args.rawURL, tt.args.queryParams)
 			if (err != nil) != tt.wantErr {

src/components/QueryEditor/EditorField.tsx

@@ -0,0 +1,74 @@
+import { css } from '@emotion/css';
+import React, { ComponentProps, FC } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useTheme2, ReactUtils, Field, Icon, PopoverContent, Tooltip } from '@grafana/ui';
+
+interface EditorFieldProps extends ComponentProps<typeof Field> {
+  label: string;
+  children: React.ReactElement;
+  width?: number | string;
+  optional?: boolean;
+  tooltip?: PopoverContent;
+}
+
+const EditorField: FC<EditorFieldProps> = (props) => {
+  const { label, optional, tooltip, children, width, ...fieldProps } = props;
+
+  const theme = useTheme2();
+  const styles = getStyles(theme, width);
+
+  // Null check for backward compatibility
+  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);
+
+  const labelEl = (
+    <>
+      <label className={styles.label} htmlFor={childInputId}>
+        {label}
+        {optional && <span className={styles.optional}> - optional</span>}
+        {tooltip && (
+          <Tooltip placement="top" content={tooltip} theme="info">
+            <Icon name="info-circle" size="sm" className={styles.icon} />
+          </Tooltip>
+        )}
+      </label>
+    </>
+  );
+
+  return (
+    <div className={styles.root}>
+      <Field className={styles.field} label={labelEl} {...fieldProps}>
+        {children}
+      </Field>
+    </div>
+  );
+};
+
+export default EditorField;
+
+const getStyles = (theme: GrafanaTheme2, width?: number | string) => {
+  return {
+    root: css({
+      paddingLeft: theme.spacing(1),
+      minWidth: theme.spacing(width ?? 0),
+    }),
+    label: css({
+      fontSize: 12,
+      fontWeight: theme.typography.fontWeightMedium,
+    }),
+    optional: css({
+      fontStyle: 'italic',
+      color: theme.colors.text.secondary,
+    }),
+    field: css({
+      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
+    }),
+    icon: css({
+      color: theme.colors.text.secondary,
+      marginLeft: theme.spacing(1),
+      ':hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
+  };
+};

src/components/QueryEditor/EditorRow.tsx

@@ -0,0 +1,30 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+interface EditorRowProps {
+  children: React.ReactNode;
+}
+
+export const EditorRow: React.FC<EditorRowProps> = ({ children }) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.root}>
+      {children}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    root: css({
+      marginTop: theme.spacing(0.5),
+      padding: theme.spacing(1),
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.radius.default,
+    })
+  };
+};

src/components/QueryEditor/QueryEditor.tsx

@@ -12,16 +12,17 @@ import { QueryBuilderContainer } from "./QueryBuilder/QueryBuilderContainer";
 import { QueryEditorModeToggle } from "./QueryBuilder/QueryEditorModeToggle";
 import { buildVisualQueryFromString } from "./QueryBuilder/utils/parseFromString";
 import QueryCodeEditor from "./QueryCodeEditor";
+import { QueryEditorOptions } from "./QueryEditorOptions";
 import { changeEditorMode, getQueryWithDefaults } from "./state";
 
 const QueryEditor = React.memo<VictoriaLogsQueryEditorProps>((props) => {
   const styles = useStyles2(getStyles);
 
-  const { onChange, onRunQuery, data, app, queries, range: timeRange } = props;
+  const { onChange, onRunQuery, data, app, queries, datasource, range: timeRange } = props;
   const [dataIsStale, setDataIsStale] = useState(false);
   const [parseModalOpen, setParseModalOpen] = useState(false);
 
-  const query = getQueryWithDefaults(props.query);
+  const query = getQueryWithDefaults(props.query, app, data?.request?.panelPluginId);
   const editorMode = query.editorMode!;
 
   const onEditorModeChange = useCallback((newEditorMode: QueryEditorMode) => {
@@ -88,6 +89,13 @@ const QueryEditor = React.memo<VictoriaLogsQueryEditorProps>((props) => {
           ) : (
             <QueryCodeEditor {...props} query={query} onChange={onChangeInternal} showExplain={true}/>
           )}
+          <QueryEditorOptions
+            query={query}
+            onChange={onChange}
+            onRunQuery={onRunQuery}
+            app={app}
+            maxLines={datasource.maxLines}
+          />
         </div>
       </div>
     </>

src/components/QueryEditor/QueryEditorForAlerting.tsx

@@ -2,11 +2,26 @@ import React from 'react';
 
 import { VictoriaLogsQueryEditorProps } from "../../types";
 
+import QueryField from "./QueryField";
+
 const QueryEditorForAlerting = (props: VictoriaLogsQueryEditorProps) => {
+  const { query, data, datasource, onChange, onRunQuery, history } = props;
 
   return (
-    <div>QueryEditorForAlerting</div>
+    <QueryField
+      datasource={datasource}
+      query={query}
+      onChange={onChange}
+      onRunQuery={onRunQuery}
+      history={history}
+      data={data}
+      data-testid={testIds.editor}
+    />
   );
 }
 
 export default QueryEditorForAlerting
+
+export const testIds = {
+  editor: 'victorialogs-editor-cloud-alerting',
+};