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