PanelInspect: show dataframe JSON in JSON view (#47071)

This commit is contained in:
Ryan McKinley
2022-03-30 10:58:49 -07:00
committed by GitHub
parent ebc2f9e4fc
commit abeb08bc98
2 changed files with 15 additions and 23 deletions

View File

@ -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;
}),

View File

@ -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) {