From 70bc0b86e2d0e575da417e34ddfeb9fb79dd9044 Mon Sep 17 00:00:00 2001
From: Sriram <yesoreyeram@gmail.com>
Date: Thu, 25 Nov 2021 09:14:34 +0000
Subject: [PATCH] TestDataDB: Raw frame input (#42209)

* test datasource raw-frame scenario added

* typo fix in doc
---
 .../variable-types/global-variables.md        |  4 ++--
 pkg/tsdb/testdatasource/scenarios.go          |  6 ++++++
 .../datasource/testdata/QueryEditor.tsx       |  2 ++
 .../testdata/components/RawFrameEditor.tsx    | 21 +++++++++++++++++++
 .../plugins/datasource/testdata/datasource.ts | 13 +++++++++++-
 .../app/plugins/datasource/testdata/types.ts  |  1 +
 6 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 public/app/plugins/datasource/testdata/components/RawFrameEditor.tsx

diff --git a/docs/sources/variables/variable-types/global-variables.md b/docs/sources/variables/variable-types/global-variables.md
index c7656ce3009..ab02f3ae6d6 100644
--- a/docs/sources/variables/variable-types/global-variables.md
+++ b/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                                                                                               |
 | ------------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------- |
diff --git a/pkg/tsdb/testdatasource/scenarios.go b/pkg/tsdb/testdatasource/scenarios.go
index ab7885d90de..c73377f9382 100644
--- a/pkg/tsdb/testdatasource/scenarios.go
+++ b/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",
diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx
index f2e082914ee..e851ce4d9af 100644
--- a/public/app/plugins/datasource/testdata/QueryEditor.tsx
+++ b/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' && (
diff --git a/public/app/plugins/datasource/testdata/components/RawFrameEditor.tsx b/public/app/plugins/datasource/testdata/components/RawFrameEditor.tsx
new file mode 100644
index 00000000000..b08b87b76d1
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/public/app/plugins/datasource/testdata/datasource.ts b/public/app/plugins/datasource/testdata/datasource.ts
index a2ab453271d..7fcda681eda 100644
--- a/public/app/plugins/datasource/testdata/datasource.ts
+++ b/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> {
diff --git a/public/app/plugins/datasource/testdata/types.ts b/public/app/plugins/datasource/testdata/types.ts
index 9d68be6ea4d..f34442fa571 100644
--- a/public/app/plugins/datasource/testdata/types.ts
+++ b/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;
 }