TestData/Graph: load arrow and zoom to data range (#23764)

packages/grafana-ui/src/components/Table/styles.ts

@@ -54,6 +54,8 @@ export const getTableStyles = stylesFactory(
       headerCell: css`
         padding: ${padding}px 10px;
         cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
         color: ${colors.textBlue};
         border-right: 1px solid ${theme.colors.panelBg};
 

pkg/tsdb/testdatasource/scenarios.go

@@ -275,6 +275,15 @@ func init() {
 		},
 	})
 
+	registerScenario(&Scenario{
+		Id:   "arrow",
+		Name: "Load Apache Arrow Data",
+		Handler: func(query *tsdb.Query, context *tsdb.TsdbQuery) *tsdb.QueryResult {
+			// Real work is in javascript client
+			return tsdb.NewQueryResult()
+		},
+	})
+
 	registerScenario(&Scenario{
 		Id:   "table_static",
 		Name: "Table Static",

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

@@ -9,14 +9,18 @@ import {
   TimeSeries,
   LoadingState,
   ArrayDataFrame,
+  base64StringToArrowTable,
+  arrowTableToDataFrame,
+  DataFrame,
 } from '@grafana/data';
 import { Scenario, TestDataQuery } from './types';
 import { getBackendSrv } from '@grafana/runtime';
 import { queryMetricTree } from './metricTree';
-import { from, merge, Observable } from 'rxjs';
+import { from, merge, Observable, of } from 'rxjs';
 import { runStream } from './runStreams';
 import templateSrv from 'app/features/templating/template_srv';
-import { getSearchFilterScopedVar } from '../../../features/templating/utils';
+import { getSearchFilterScopedVar } from 'app/features/templating/utils';
+import { processQueryError } from 'app/features/dashboard/state/runRequest';
 
 type TestData = TimeSeries | TableData;
 
@@ -38,6 +42,8 @@ export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
         streams.push(runStream(target, options));
       } else if (target.scenarioId === 'grafana_api') {
         streams.push(runGrafanaAPI(target, options));
+      } else if (target.scenarioId === 'arrow') {
+        streams.push(runArrowFile(target, options));
       } else {
         queries.push({
           ...target,
@@ -150,6 +156,22 @@ export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
   }
 }
 
+function runArrowFile(target: TestDataQuery, req: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {
+  let data: DataFrame[] = [];
+  if (target.stringInput && target.stringInput.length > 10) {
+    try {
+      const table = base64StringToArrowTable(target.stringInput);
+      data = [arrowTableToDataFrame(table)];
+    } catch (e) {
+      console.warn('Error reading saved arrow', e);
+      const error = processQueryError(e);
+      error.refId = target.refId;
+      return of({ state: LoadingState.Error, error, data });
+    }
+  }
+  return of({ state: LoadingState.Done, data });
+}
+
 function runGrafanaAPI(target: TestDataQuery, req: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {
   const url = `/api/${target.stringInput}`;
   return from(

public/app/plugins/datasource/testdata/partials/query.editor.html

@@ -201,7 +201,6 @@
 		</div>
 	</div>
 
-
 	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'grafana_api'">
 		<div class="gf-form gf-form">
 			<label class="gf-form-label query-keyword width-7">Endpoint</label>
@@ -216,6 +215,19 @@
 		</div>
 	</div>
 
+	
+	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'arrow'">
+		<div class="gf-form" style="width: 100%;">
+			<textarea type="string"
+				class="gf-form-input"
+				rows="10"
+				placeholder="copy base64 text data from query result"
+				ng-model="ctrl.target.stringInput"
+				ng-change="ctrl.refresh()"
+				ng-model-onblur />
+		</div>
+	</div>
+
 	<!-- Predictable Pulse Scenario Options Form -->
 	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_pulse'">
 		<div class="gf-form">