TestData: support raw results in the raw frames editor (#44609)

packages/grafana-data/src/dataframe/DataFrameJSON.ts

@@ -153,7 +153,6 @@ export function dataFrameFromJSON(dto: DataFrameJSON): DataFrame {
 
   // Find the longest field length
   const length = data ? data.values.reduce((max, vals) => Math.max(max, vals.length), 0) : 0;
-
   const fields = schema.fields.map((f, index) => {
     let buffer = data ? data.values[index] : [];
     let origLen = buffer.length;

packages/grafana-data/src/dataframe/processDataFrame.ts

@@ -308,7 +308,7 @@ export const isDataFrame = (data: any): data is DataFrame => data && data.hasOwn
 export function toDataFrame(data: any): DataFrame {
   if ('fields' in data) {
     // DataFrameDTO does not have length
-    if ('length' in data) {
+    if ('length' in data && data.fields[0]?.values?.get) {
       return data as DataFrame;
     }
 

pkg/tsdb/testdatasource/scenarios.go

@@ -195,7 +195,7 @@ Timestamps will line up evenly on timeStepSeconds (For example, 60 seconds means
 
 	s.registerScenario(&Scenario{
 		ID:   string(rawFrameQuery),
-		Name: "Raw Frame",
+		Name: "Raw Frames",
 	})
 
 	s.registerScenario(&Scenario{

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

@@ -1,21 +1,67 @@
-import React from 'react';
-import { InlineField, TextArea } from '@grafana/ui';
+import React, { useState } from 'react';
+import { Alert, CodeEditor } from '@grafana/ui';
 import { EditorProps } from '../QueryEditor';
+import { isArray } from 'lodash';
+import { toDataQueryResponse } from '@grafana/runtime';
+import { dataFrameToJSON, toDataFrame, toDataFrameDTO } from '@grafana/data';
 
 export const RawFrameEditor = ({ onChange, query }: EditorProps) => {
-  const onContent = (rawFrameContent: string) => {
-    onChange({ ...query, rawFrameContent });
+  const [error, setError] = useState<string>();
+  const [warning, setWarning] = useState<string>();
+
+  const onSaveFrames = (rawFrameContent: string) => {
+    try {
+      const json = JSON.parse(rawFrameContent);
+      if (isArray(json)) {
+        setError(undefined);
+        setWarning(undefined);
+        onChange({ ...query, rawFrameContent });
+        return;
+      }
+
+      let data: any = undefined;
+
+      // Copy paste from panel json
+      if (isArray(json.series) && json.state) {
+        data = json.series.map((v: any) => toDataFrameDTO(toDataFrame(v)));
+      } else {
+        // Chek if it is a copy of the raw resuls
+        const v = toDataQueryResponse({ data: json });
+        if (v.data?.length && !v.error) {
+          data = v.data.map((f) => dataFrameToJSON(f));
+        }
+      }
+
+      if (data) {
+        console.log('Original', json);
+        console.log('Save', data);
+        setError(undefined);
+        setWarning('Converted to direct frame result');
+        onChange({ ...query, rawFrameContent: JSON.stringify(data, null, 2) });
+        return;
+      }
+
+      setError('Unable to read dataframes in text');
+    } catch (e) {
+      console.log('Error parsing json', e);
+      setError('Enter JSON array of data frames (or raw query results body)');
+      setWarning(undefined);
+    }
   };
 
   return (
-    <InlineField label="Frames" labelWidth={14}>
-      <TextArea
-        width="100%"
-        rows={10}
-        onBlur={(e) => onContent(e.currentTarget.value)}
-        placeholder="frames array (JSON)"
-        defaultValue={query.rawFrameContent ?? '[]'}
+    <>
+      {error && <Alert title={error} severity="error" />}
+      {warning && <Alert title={warning} severity="warning" />}
+      <CodeEditor
+        height={300}
+        language="json"
+        value={query.rawFrameContent ?? '[]'}
+        onBlur={onSaveFrames}
+        onSave={onSaveFrames}
+        showMiniMap={true}
+        showLineNumbers={true}
       />
-    </InlineField>
+    </>
   );
 };

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

@@ -13,6 +13,7 @@ import {
   LoadingState,
   TimeRange,
   ScopedVars,
+  toDataFrame,
 } from '@grafana/data';
 import { Scenario, TestDataQuery } from './types';
 import { DataSourceWithBackend, getBackendSrv, getGrafanaLiveSrv, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
@@ -191,8 +192,12 @@ export class TestDataDataSource extends DataSourceWithBackend<TestDataQuery> {
 
   rawFrameQuery(target: TestDataQuery, options: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {
     try {
-      let data: any[] = JSON.parse(target.rawFrameContent || '[]');
-      return of({ data }).pipe(delay(100));
+      const data = JSON.parse(target.rawFrameContent ?? '[]').map((v: any) => {
+        const f = toDataFrame(v);
+        f.refId = target.refId;
+        return f;
+      });
+      return of({ data, state: LoadingState.Done }).pipe(delay(100));
     } catch (ex) {
       return of({ data: [], error: ex }).pipe(delay(100));
     }