1import React from 'react'; 2import { TabbedContainer, TabConfig } from '@grafana/ui'; 3import { TimeZone } from '@grafana/data'; 4import { runQueries } from './state/query'; 5import { StoreState, ExploreItemState, ExploreId } from 'app/types'; 6import { connect, ConnectedProps } from 'react-redux'; 7import { ExploreDrawer } from 'app/features/explore/ExploreDrawer'; 8import { InspectJSONTab } from 'app/features/inspector/InspectJSONTab'; 9import { QueryInspector } from 'app/features/inspector/QueryInspector'; 10import { InspectStatsTab } from 'app/features/inspector/InspectStatsTab'; 11import { InspectDataTab } from 'app/features/inspector/InspectDataTab'; 12import { InspectErrorTab } from 'app/features/inspector/InspectErrorTab'; 13 14interface DispatchProps { 15 width: number; 16 exploreId: ExploreId; 17 timeZone: TimeZone; 18 onClose: () => void; 19} 20 21type Props = DispatchProps & ConnectedProps<typeof connector>; 22 23export function ExploreQueryInspector(props: Props) { 24 const { loading, width, onClose, queryResponse, timeZone } = props; 25 const dataFrames = queryResponse?.series || []; 26 const error = queryResponse?.error; 27 28 const statsTab: TabConfig = { 29 label: 'Stats', 30 value: 'stats', 31 icon: 'chart-line', 32 content: <InspectStatsTab data={queryResponse!} timeZone={queryResponse?.request?.timezone as TimeZone} />, 33 }; 34 35 const jsonTab: TabConfig = { 36 label: 'JSON', 37 value: 'json', 38 icon: 'brackets-curly', 39 content: <InspectJSONTab data={queryResponse} onClose={onClose} />, 40 }; 41 42 const dataTab: TabConfig = { 43 label: 'Data', 44 value: 'data', 45 icon: 'database', 46 content: ( 47 <InspectDataTab 48 data={dataFrames} 49 isLoading={loading} 50 options={{ withTransforms: false, withFieldConfig: false }} 51 timeZone={timeZone} 52 /> 53 ), 54 }; 55 56 const queryTab: TabConfig = { 57 label: 'Query', 58 value: 'query', 59 icon: 'info-circle', 60 content: <QueryInspector data={dataFrames} onRefreshQuery={() => props.runQueries(props.exploreId)} />, 61 }; 62 63 const tabs = [statsTab, queryTab, jsonTab, dataTab]; 64 if (error) { 65 const errorTab: TabConfig = { 66 label: 'Error', 67 value: 'error', 68 icon: 'exclamation-triangle', 69 content: <InspectErrorTab error={error} />, 70 }; 71 tabs.push(errorTab); 72 } 73 return ( 74 <ExploreDrawer width={width} onResize={() => {}}> 75 <TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" /> 76 </ExploreDrawer> 77 ); 78} 79 80function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreId }) { 81 const explore = state.explore; 82 const item: ExploreItemState = explore[exploreId]!; 83 const { loading, queryResponse } = item; 84 85 return { 86 loading, 87 queryResponse, 88 }; 89} 90 91const mapDispatchToProps = { 92 runQueries, 93}; 94 95const connector = connect(mapStateToProps, mapDispatchToProps); 96 97export default connector(ExploreQueryInspector); 98