TestDataDB: Raw frame input (#42209)

* test datasource raw-frame scenario added

* typo fix in doc

docs/sources/variables/variable-types/global-variables.md

@@ -15,11 +15,11 @@ Grafana has global built-in variables that can be used in expressions in the que
 
 This variable is the name of the current dashboard.
 
-## $**from and $**to
+## $\_\_from and $\_\_to
 
 Grafana has two built in time range variables: `$__from` and `$__to`. They are currently always interpolated as epoch milliseconds by default but you can control date formatting.
 
-> This special formatting syntax is only available in Grafan a 7.1.2+
+> This special formatting syntax is only available in Grafana 7.1.2+
 
 | Syntax                   | Example result           | Description                                                                                               |
 | ------------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------- |

pkg/tsdb/testdatasource/scenarios.go

@@ -40,6 +40,7 @@ const (
 	serverError500Query               queryType = "server_error_500"
 	logsQuery                         queryType = "logs"
 	nodeGraphQuery                    queryType = "node_graph"
+	rawFrameQuery                     queryType = "raw_frame"
 	csvFileQueryType                  queryType = "csv_file"
 	csvContentQueryType               queryType = "csv_content"
 )
@@ -192,6 +193,11 @@ Timestamps will line up evenly on timeStepSeconds (For example, 60 seconds means
 		Name: "Node Graph",
 	})
 
+	s.registerScenario(&Scenario{
+		ID:   string(rawFrameQuery),
+		Name: "Raw Frame",
+	})
+
 	s.registerScenario(&Scenario{
 		ID:      string(csvFileQueryType),
 		Name:    "CSV File",

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -16,6 +16,7 @@ import { CSVWavesEditor } from './components/CSVWaveEditor';
 import { defaultCSVWaveQuery, defaultPulseQuery, defaultQuery } from './constants';
 import { GrafanaLiveEditor } from './components/GrafanaLiveEditor';
 import { NodeGraphEditor } from './components/NodeGraphEditor';
+import { RawFrameEditor } from './components/RawFrameEditor';
 import { defaultStreamQuery } from './runStreams';
 import { CSVFileEditor } from './components/CSVFileEditor';
 import { CSVContentEditor } from './components/CSVContentEditor';
@@ -234,6 +235,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
       {scenarioId === 'random_walk' && <RandomWalkEditor onChange={onInputChange} query={query} />}
       {scenarioId === 'streaming_client' && <StreamingClientEditor onChange={onStreamClientChange} query={query} />}
       {scenarioId === 'live' && <GrafanaLiveEditor onChange={onUpdate} query={query} />}
+      {scenarioId === 'raw_frame' && <RawFrameEditor onChange={onUpdate} query={query} />}
       {scenarioId === 'csv_file' && <CSVFileEditor onChange={onUpdate} query={query} />}
       {scenarioId === 'csv_content' && <CSVContentEditor onChange={onUpdate} query={query} />}
       {scenarioId === 'logs' && (

public/app/plugins/datasource/testdata/components/RawFrameEditor.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { InlineField, TextArea } from '@grafana/ui';
+import { EditorProps } from '../QueryEditor';
+
+export const RawFrameEditor = ({ onChange, query }: EditorProps) => {
+  const onContent = (rawFrameContent: string) => {
+    onChange({ ...query, rawFrameContent });
+  };
+
+  return (
+    <InlineField label="Frames" labelWidth={14}>
+      <TextArea
+        width="100%"
+        rows={10}
+        onBlur={(e) => onContent(e.currentTarget.value)}
+        placeholder="frames array (JSON)"
+        defaultValue={query.rawFrameContent ?? '[]'}
+      />
+    </InlineField>
+  );
+};

public/app/plugins/datasource/testdata/datasource.ts

@@ -64,7 +64,9 @@ export class TestDataDataSource extends DataSourceWithBackend<TestDataQuery> {
         case 'node_graph':
           streams.push(this.nodesQuery(target, options));
           break;
-
+        case 'raw_frame':
+          streams.push(this.rawFrameQuery(target, options));
+          break;
         // Unusable since 7, removed in 8
         case 'manual_entry': {
           let csvContent = 'Time,Value\n';
@@ -186,6 +188,15 @@ export class TestDataDataSource extends DataSourceWithBackend<TestDataQuery> {
 
     return of({ data: frames }).pipe(delay(100));
   }
+
+  rawFrameQuery(target: TestDataQuery, options: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {
+    try {
+      let data: any[] = JSON.parse(target.rawFrameContent || '[]');
+      return of({ data }).pipe(delay(100));
+    } catch (ex) {
+      return of({ data: [], error: ex }).pipe(delay(100));
+    }
+  }
 }
 
 function runGrafanaAPI(target: TestDataQuery, req: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {

public/app/plugins/datasource/testdata/types.ts

@@ -20,6 +20,7 @@ export interface TestDataQuery extends DataQuery {
   nodes?: NodesQuery;
   csvFileName?: string;
   csvContent?: string;
+  rawFrameContent?: string;
   usa?: USAQuery;
 }