diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx index 916d957a0d9..c0bfa7e7039 100644 --- a/public/app/features/explore/Explore.test.tsx +++ b/public/app/features/explore/Explore.test.tsx @@ -2,12 +2,13 @@ import React from 'react'; import { DataSourceApi, LoadingState, toUtc, DataQueryError, DataQueryRequest, CoreApp } from '@grafana/data'; import { ExploreId } from 'app/types/explore'; import { shallow } from 'enzyme'; -import { Explore, ExploreProps } from './Explore'; +import { Explore, Props } from './Explore'; import { scanStopAction } from './state/query'; import { SecondaryActions } from './SecondaryActions'; import { getTheme } from '@grafana/ui'; -const dummyProps: ExploreProps = { +const dummyProps: Props = { + logsResult: undefined, changeSize: jest.fn(), datasourceInstance: { meta: { @@ -22,11 +23,6 @@ const dummyProps: ExploreProps = { exploreId: ExploreId.left, loading: false, modifyQueries: jest.fn(), - scanning: false, - scanRange: { - from: '0', - to: '0', - }, scanStart: jest.fn(), scanStopAction: scanStopAction, setQueries: jest.fn(), @@ -40,7 +36,6 @@ const dummyProps: ExploreProps = { to: 0, }, timeZone: 'UTC', - onHiddenSeriesChanged: jest.fn(), queryResponse: { state: LoadingState.NotStarted, series: [], @@ -73,7 +68,6 @@ const dummyProps: ExploreProps = { }, }, }, - originPanelId: 1, addQueryRow: jest.fn(), theme: getTheme(), showMetrics: true, diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index c735432d51e..47101e53746 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { hot } from 'react-hot-loader'; import { css, cx } from '@emotion/css'; import { compose } from 'redux'; -import { connect } from 'react-redux'; +import { connect, ConnectedProps } from 'react-redux'; import AutoSizer from 'react-virtualized-auto-sizer'; import memoizeOne from 'memoize-one'; import { selectors } from '@grafana/e2e-selectors'; @@ -14,18 +14,7 @@ import { Collapse, TooltipDisplayMode, } from '@grafana/ui'; -import { - AbsoluteTimeRange, - DataQuery, - DataSourceApi, - GrafanaTheme, - LoadingState, - PanelData, - RawTimeRange, - TimeZone, - LogsModel, - DataFrame, -} from '@grafana/data'; +import { AbsoluteTimeRange, DataQuery, GrafanaTheme, LoadingState, RawTimeRange, DataFrame } from '@grafana/data'; import LogsContainer from './LogsContainer'; import QueryRows from './QueryRows'; @@ -71,36 +60,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { }); export interface ExploreProps { - changeSize: typeof changeSize; - datasourceInstance: DataSourceApi | null; - datasourceMissing: boolean; exploreId: ExploreId; - modifyQueries: typeof modifyQueries; - scanning?: boolean; - scanRange?: RawTimeRange; - scanStart: typeof scanStart; - scanStopAction: typeof scanStopAction; - setQueries: typeof setQueries; - queryKeys: string[]; - isLive: boolean; - syncedTimes: boolean; - updateTimeRange: typeof updateTimeRange; - graphResult: DataFrame[] | null; - logsResult?: LogsModel; - absoluteRange: AbsoluteTimeRange; - timeZone: TimeZone; - onHiddenSeriesChanged?: (hiddenSeries: string[]) => void; - queryResponse: PanelData; - originPanelId: number; - addQueryRow: typeof addQueryRow; theme: GrafanaTheme; - loading: boolean; - showMetrics: boolean; - showTable: boolean; - showLogs: boolean; - showTrace: boolean; - showNodeGraph: boolean; - splitOpen: typeof splitOpen; } enum ExploreDrawer { @@ -112,6 +73,8 @@ interface ExploreState { openDrawer?: ExploreDrawer; } +export type Props = ExploreProps & ConnectedProps; + /** * Explore provides an area for quick query iteration for a given datasource. * Once a datasource is selected it populates the query section at the top. @@ -136,8 +99,8 @@ interface ExploreState { * The result viewers determine some of the query options sent to the datasource, e.g., * `format`, to indicate eventual transformations by the datasources' result transformers. */ -export class Explore extends React.PureComponent { - constructor(props: ExploreProps) { +export class Explore extends React.PureComponent { + constructor(props: Props) { super(props); this.state = { openDrawer: undefined, @@ -394,7 +357,7 @@ export class Explore extends React.PureComponent { } } -function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partial { +function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { const explore = state.explore; const { syncedTimes } = explore; const item: ExploreItemState = explore[exploreId]!; @@ -436,7 +399,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia }; } -const mapDispatchToProps: Partial = { +const mapDispatchToProps = { changeSize, modifyQueries, scanStart, @@ -447,8 +410,6 @@ const mapDispatchToProps: Partial = { splitOpen, }; -export default compose( - hot(module), - connect(mapStateToProps, mapDispatchToProps), - withTheme -)(Explore) as React.ComponentType<{ exploreId: ExploreId }>; +const connector = connect(mapStateToProps, mapDispatchToProps); + +export default compose(hot(module), connector, withTheme)(Explore) as React.ComponentType<{ exploreId: ExploreId }>; diff --git a/public/app/features/explore/ExploreGraphNGPanel.tsx b/public/app/features/explore/ExploreGraphNGPanel.tsx index b5397e7923c..23a5c95590b 100644 --- a/public/app/features/explore/ExploreGraphNGPanel.tsx +++ b/public/app/features/explore/ExploreGraphNGPanel.tsx @@ -32,12 +32,12 @@ import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextM import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin'; import { css, cx } from '@emotion/css'; import React, { useEffect, useMemo, useRef, useState } from 'react'; -import { splitOpen } from './state/main'; import { getFieldLinksForExplore } from './utils/links'; import { usePrevious } from 'react-use'; import appEvents from 'app/core/app_events'; import { seriesVisibilityConfigFactory } from '../dashboard/dashgrid/SeriesVisibilityConfigFactory'; import { identity } from 'lodash'; +import { SplitOpen } from 'app/types/explore'; const MAX_NUMBER_OF_TIME_SERIES = 20; @@ -51,7 +51,7 @@ interface Props { onUpdateTimeRange: (absoluteRange: AbsoluteTimeRange) => void; onHiddenSeriesChanged?: (hiddenSeries: string[]) => void; tooltipDisplayMode: TooltipDisplayMode; - splitOpenFn?: typeof splitOpen; + splitOpenFn?: SplitOpen; } export function ExploreGraphNGPanel({