IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Show all dataFrames in data tab in Inspector (#32161)

Browse Source 
* Add option to show/download all data

* Add test

* Address feedback
This commit is contained in:
Ivana Huckova 2021-03-24 19:01:23 +01:00 committed by GitHub
parent c9c5e55c15
commit bd7285a9e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/app/features/inspector/InspectDataTab.test.tsx Normal file
View File

@ -0,0 +1,65 @@
import React, { ComponentProps } from 'react';
import { FieldType } from '@grafana/data';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { InspectDataTab } from './InspectDataTab';
const createProps = (propsOverride?: Partial<ComponentProps<typeof InspectDataTab>>) => {
const defaultProps = {
isLoading: false,
options: {
withTransforms: false,
withFieldConfig: false,
},
data: [
{
name: 'First data frame',
fields: [
{ name: 'time', type: FieldType.time, values: [100, 200, 300] },
{ name: 'name', type: FieldType.string, values: ['uniqueA', 'b', 'c'] },
{ name: 'value', type: FieldType.number, values: [1, 2, 3] },
],
length: 3,
},
{
name: 'Second data frame',
fields: [
{ name: 'time', type: FieldType.time, values: [400, 500, 600] },
{ name: 'name', type: FieldType.string, values: ['d', 'e', 'g'] },
{ name: 'value', type: FieldType.number, values: [4, 5, 6] },
],
length: 3,
},
],
};
return Object.assign(defaultProps, propsOverride) as ComponentProps<typeof InspectDataTab>;
};
describe('InspectDataTab', () => {
describe('when panel is not passed as prop (Explore)', () => {
it('should render InspectDataTab', () => {
render(<InspectDataTab {...createProps()} />);
expect(screen.getByLabelText(/Panel inspector Data content/i)).toBeInTheDocument();
});
it('should render Data Option row', () => {
render(<InspectDataTab {...createProps()} />);
expect(screen.getByText(/Data options/i)).toBeInTheDocument();
});
it('should show available options', () => {
render(<InspectDataTab {...createProps()} />);
const dataOptions = screen.getByText(/Data options/i);
userEvent.click(dataOptions);
expect(screen.getByText(/Show data frame/i)).toBeInTheDocument();
expect(screen.getByText(/Download for Excel/i)).toBeInTheDocument();
});
it('should show available dataFrame options', () => {
render(<InspectDataTab {...createProps()} />);
const dataOptions = screen.getByText(/Data options/i);
userEvent.click(dataOptions);
const dataFrameInput = screen.getByRole('textbox', { name: /Select dataframe/i });
userEvent.click(dataFrameInput);
expect(screen.getByText(/Second data frame/i)).toBeInTheDocument();
});
});
});

21
public/app/features/inspector/InspectDataTab.tsx
View File

@ -167,18 +167,14 @@ export class InspectDataTab extends PureComponent<Props, State> {
renderDataOptions(dataFrames: DataFrame[]) {
const { options, onOptionsChange, panel, data } = this.props;
if (!panel || !onOptionsChange) {
return null;
}
const { transformId, transformationOptions, selectedDataFrame } = this.state;
const styles = getPanelInspectorStyles();
const panelTransformations = panel.getTransformations();
const panelTransformations = panel?.getTransformations();
const showPanelTransformationsOption =
panelTransformations && panelTransformations.length > 0 && (transformId as any) !== 'join by time';
const showFieldConfigsOption = !panel.plugin?.fieldConfigRegistry.isEmpty();
const showDataOptions = showPanelTransformationsOption || showFieldConfigsOption;
Boolean(panelTransformations?.length) && (transformId as any) !== 'join by time';
const showFieldConfigsOption = panel && !panel.plugin?.fieldConfigRegistry.isEmpty();
let dataSelect = dataFrames;
if (selectedDataFrame === DataTransformerID.seriesToColumns) {
@ -194,10 +190,6 @@ export class InspectDataTab extends PureComponent<Props, State> {
const selectableOptions = [...transformationOptions, ...choices];
if (!showDataOptions) {
return null;
}
return (
<QueryOperationRow
id="Data options"
@ -206,7 +198,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
headerElement={<DetailText>{this.getActiveString()}</DetailText>}
isOpen={false}
>
<div className={styles.options}>
<div className={styles.options} data-testid="dataOptions">
<VerticalGroup spacing="none">
{data!.length > 1 && (
<Field label="Show data frame">
@ -215,12 +207,13 @@ export class InspectDataTab extends PureComponent<Props, State> {
value={selectedDataFrame}
onChange={this.onDataFrameChange}
width={30}
aria-label="Select dataframe"
/>
</Field>
)}
<HorizontalGroup>
{showPanelTransformationsOption && (
{showPanelTransformationsOption && onOptionsChange && (
<Field
label="Apply panel transformations"
description="Table data is displayed with transformations defined in the panel Transform tab."
@ -231,7 +224,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
/>
</Field>
)}
{showFieldConfigsOption && (
{showFieldConfigsOption && onOptionsChange && (
<Field
label="Formatted data"
description="Table data is formatted with options defined in the Field and Override tabs."