TableCell: show JSON rather than [object Object] (#23683)

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

@@ -7,6 +7,8 @@ import {
   MetricFindValue,
   TableData,
   TimeSeries,
+  LoadingState,
+  ArrayDataFrame,
 } from '@grafana/data';
 import { Scenario, TestDataQuery } from './types';
 import { getBackendSrv } from '@grafana/runtime';
@@ -34,6 +36,8 @@ export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
       }
       if (target.scenarioId === 'streaming_client') {
         streams.push(runStream(target, options));
+      } else if (target.scenarioId === 'grafana_api') {
+        streams.push(runGrafanaAPI(target, options));
       } else {
         queries.push({
           ...target,
@@ -145,3 +149,18 @@ export class TestDataDataSource extends DataSourceApi<TestDataQuery> {
     });
   }
 }
+
+function runGrafanaAPI(target: TestDataQuery, req: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {
+  const url = `/api/${target.stringInput}`;
+  return from(
+    getBackendSrv()
+      .get(url)
+      .then(res => {
+        const frame = new ArrayDataFrame(res);
+        return {
+          state: LoadingState.Done,
+          data: [frame],
+        };
+      })
+  );
+}

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

@@ -188,6 +188,21 @@
 		</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>
+			<div class="gf-form-select-wrapper">
+				<select
+				  ng-model="ctrl.target.stringInput"
+				  class="gf-form-input"
+				  ng-options="type for type in ['datasources', 'search', 'annotations']"
+				  ng-change="ctrl.refresh()" />
+				</select>
+			</div>
+		</div>
+	</div>
+
 	<!-- Predictable Pulse Scenario Options Form -->
 	<div class="gf-form-inline" ng-if="ctrl.scenario.id === 'predictable_pulse'">
 		<div class="gf-form">

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

@@ -115,6 +115,12 @@ export class TestDataQueryCtrl extends QueryCtrl {
       delete this.target.csvWave;
     }
 
+    if (this.target.scenarioId === 'grafana_api') {
+      this.target.stringInput = 'datasources';
+    } else {
+      delete this.target.stringInput;
+    }
+
     this.refresh();
   }
 

public/app/plugins/panel/table/module.tsx

@@ -2,6 +2,7 @@ import { PanelPlugin } from '@grafana/data';
 import { TablePanel } from './TablePanel';
 import { CustomFieldConfig, Options } from './types';
 import { tablePanelChangedHandler, tableMigrationHandler } from './migrations';
+import { TableCellDisplayMode } from '@grafana/ui/src/components/Table/types';
 
 export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)
@@ -39,11 +40,12 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
           description: 'Color text, background, show as gauge, etc',
           settings: {
             options: [
-              { value: 'auto', label: 'Auto' },
-              { value: 'color-text', label: 'Color text' },
-              { value: 'color-background', label: 'Color background' },
-              { value: 'gradient-gauge', label: 'Gradient gauge' },
-              { value: 'lcd-gauge', label: 'LCD gauge' },
+              { value: TableCellDisplayMode.Auto, label: 'Auto' },
+              { value: TableCellDisplayMode.ColorText, label: 'Color text' },
+              { value: TableCellDisplayMode.ColorBackground, label: 'Color background' },
+              { value: TableCellDisplayMode.GradientGauge, label: 'Gradient gauge' },
+              { value: TableCellDisplayMode.LcdGauge, label: 'LCD gauge' },
+              { value: TableCellDisplayMode.JSONView, label: 'JSON View' },
             ],
           },
         });