From abeb08bc9893396bc362cda715867811118321a9 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 30 Mar 2022 10:58:49 -0700
Subject: [PATCH] PanelInspect: show dataframe JSON in JSON view (#47071)

---
 .../src/dataframe/DataFrameJSON.ts            |  3 +-
 .../app/features/inspector/InspectJSONTab.tsx | 35 +++++++------------
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/grafana-data/src/dataframe/DataFrameJSON.ts b/packages/grafana-data/src/dataframe/DataFrameJSON.ts
index 98fbd050903..d99e87ad22d 100644
--- a/packages/grafana-data/src/dataframe/DataFrameJSON.ts
+++ b/packages/grafana-data/src/dataframe/DataFrameJSON.ts
@@ -202,7 +202,8 @@ export function dataFrameToJSON(frame: DataFrame): DataFrameJSON {
     meta: frame.meta,
     name: frame.name,
     fields: frame.fields.map((f) => {
-      const { values, ...sfield } = f;
+      const { values, state, display, ...sfield } = f;
+      delete (sfield as any).entities;
       data.values.push(values.toArray());
       return sfield;
     }),
diff --git a/public/app/features/inspector/InspectJSONTab.tsx b/public/app/features/inspector/InspectJSONTab.tsx
index dd3631d82ca..acc6d4b3c95 100644
--- a/public/app/features/inspector/InspectJSONTab.tsx
+++ b/public/app/features/inspector/InspectJSONTab.tsx
@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import { chain } from 'lodash';
-import { AppEvents, PanelData, SelectableValue } from '@grafana/data';
+import { AppEvents, dataFrameToJSON, PanelData, SelectableValue } from '@grafana/data';
 import { Button, CodeEditor, Field, Select } from '@grafana/ui';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { selectors } from '@grafana/e2e-selectors';
@@ -10,8 +9,8 @@ import { getPanelInspectorStyles } from '../inspector/styles';
 
 enum ShowContent {
   PanelJSON = 'panel',
-  DataJSON = 'data',
-  DataStructure = 'structure',
+  PanelData = 'data',
+  DataFrames = 'frames',
 }
 
 const options: Array<SelectableValue<ShowContent>> = [
@@ -21,14 +20,14 @@ const options: Array<SelectableValue<ShowContent>> = [
     value: ShowContent.PanelJSON,
   },
   {
-    label: 'Data',
+    label: 'Panel data',
     description: 'The raw model passed to the panel visualization',
-    value: ShowContent.DataJSON,
+    value: ShowContent.PanelData,
   },
   {
-    label: 'DataFrame structure',
-    description: 'Response info without any values',
-    value: ShowContent.DataStructure,
+    label: 'DataFrame JSON',
+    description: 'JSON formatted DataFrames',
+    value: ShowContent.DataFrames,
   },
 ];
 
@@ -50,9 +49,9 @@ export class InspectJSONTab extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.hasPanelJSON = !!(props.panel && props.dashboard);
-    // If we are in panel, we want to show PanelJSON, otherwise show DataJSON
+    // If we are in panel, we want to show PanelJSON, otherwise show DataFrames
     this.state = {
-      show: this.hasPanelJSON ? ShowContent.PanelJSON : ShowContent.DataJSON,
+      show: this.hasPanelJSON ? ShowContent.PanelJSON : ShowContent.DataFrames,
       text: this.hasPanelJSON ? getPrettyJSON(props.panel!.getSaveModel()) : getPrettyJSON(props.data),
     };
   }
@@ -70,24 +69,16 @@ export class InspectJSONTab extends PureComponent<Props, State> {
 
   getJSONObject(show: ShowContent) {
     const { data, panel } = this.props;
-    if (show === ShowContent.DataJSON) {
+    if (show === ShowContent.PanelData) {
       return data;
     }
 
-    if (show === ShowContent.DataStructure) {
+    if (show === ShowContent.DataFrames) {
       const series = data?.series;
       if (!series) {
         return { note: 'Missing Response Data' };
       }
-      return data!.series.map((frame) => {
-        const { table, fields, ...rest } = frame as any; // remove 'table' from arrow response
-        return {
-          ...rest,
-          fields: frame.fields.map((field) => {
-            return chain(field).omit('values').omit('state').omit('display').value();
-          }),
-        };
-      });
+      return data.series.map((frame) => dataFrameToJSON(frame));
     }
 
     if (this.hasPanelJSON && show === ShowContent.PanelJSON) {