import React from 'react'; import { DataFrame, DataTransformerID, getFrameDisplayName, SelectableValue } from '@grafana/data'; import { Field, HorizontalGroup, Select, Switch, VerticalGroup, useStyles2 } from '@grafana/ui'; import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow'; import { t } from 'app/core/internationalization'; import { DetailText } from 'app/features/inspector/DetailText'; import { GetDataOptions } from 'app/features/query/state/PanelQueryRunner'; import { getPanelInspectorStyles2 } from './styles'; interface Props { options: GetDataOptions; dataFrames: DataFrame[]; transformationOptions: Array>; selectedDataFrame: number | DataTransformerID; downloadForExcel: boolean; onDataFrameChange: (item: SelectableValue) => void; toggleDownloadForExcel: () => void; data?: DataFrame[]; hasTransformations?: boolean; formattedDataDescription?: string; onOptionsChange?: (options: GetDataOptions) => void; actions?: React.ReactNode; } export const InspectDataOptions = ({ options, actions, formattedDataDescription, onOptionsChange, hasTransformations, data, dataFrames, transformationOptions, selectedDataFrame, onDataFrameChange, downloadForExcel, toggleDownloadForExcel, }: Props) => { const styles = useStyles2(getPanelInspectorStyles2); let dataSelect = dataFrames; if (selectedDataFrame === DataTransformerID.joinByField) { dataSelect = data!; } const choices = dataSelect.map>((frame, index) => { return { value: index, label: `${getFrameDisplayName(frame)} (${index})`, }; }); const selectableOptions = [...transformationOptions, ...choices]; function getActiveString() { let activeString = ''; if (!data) { return activeString; } const parts: string[] = []; if (selectedDataFrame === DataTransformerID.joinByField) { parts.push(t('dashboard.inspect-data.series-to-columns', 'Series joined by time')); } else if (data.length > 1) { parts.push(getFrameDisplayName(data[selectedDataFrame as number])); } if (options.withTransforms || options.withFieldConfig) { if (options.withTransforms) { parts.push(t('dashboard.inspect-data.panel-transforms', 'Panel transforms')); } if (options.withTransforms && options.withFieldConfig) { } if (options.withFieldConfig) { parts.push(t('dashboard.inspect-data.formatted', 'Formatted data')); } } if (downloadForExcel) { parts.push(t('dashboard.inspect-data.excel-header', 'Excel header')); } return parts.join(', '); } return (
{getActiveString()}} isOpen={false} actions={actions} >
{data!.length > 1 && (