diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts index 3c74f05a814..16d9b6b07dc 100644 --- a/packages/grafana-data/src/types/datasource.ts +++ b/packages/grafana-data/src/types/datasource.ts @@ -453,6 +453,9 @@ export interface DataQueryRequest { // Explore state used by various datasources liveStreaming?: boolean; + /** + * @deprecated showingGraph and showingTable are always set to true and set to true + */ showingGraph?: boolean; showingTable?: boolean; } diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index f5d3eed981b..8d058c5f34e 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -160,8 +160,11 @@ export function buildQueryTransaction( maxDataPoints: queryOptions.maxDataPoints, exploreMode: queryOptions.mode, liveStreaming: queryOptions.liveStreaming, - showingGraph: queryOptions.showingGraph, - showingTable: queryOptions.showingTable, + /** + * @deprecated (external API) showingGraph and showingTable are always set to true and set to true + */ + showingGraph: true, + showingTable: true, }; return { diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx index 76b6adb37d4..5829dc220b4 100644 --- a/public/app/features/explore/Explore.test.tsx +++ b/public/app/features/explore/Explore.test.tsx @@ -5,7 +5,6 @@ import { ExploreId } from 'app/types/explore'; import { shallow } from 'enzyme'; import { Explore, ExploreProps } from './Explore'; import { scanStopAction } from './state/actionTypes'; -import { toggleGraph } from './state/actions'; import { SecondaryActions } from './SecondaryActions'; import { getTheme } from '@grafana/ui'; @@ -67,11 +66,8 @@ const dummyProps: ExploreProps = { from: 0, to: 0, }, - showingGraph: false, - showingTable: false, timeZone: 'UTC', onHiddenSeriesChanged: jest.fn(), - toggleGraph: toggleGraph, queryResponse: { state: LoadingState.NotStarted, series: [], diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 6f4cc1b8f42..d1b996d6d31 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -37,7 +37,6 @@ import { refreshExplore, scanStart, setQueries, - toggleGraph, updateTimeRange, } from './state/actions'; @@ -114,11 +113,8 @@ export interface ExploreProps { logsResult?: LogsModel; loading?: boolean; absoluteRange: AbsoluteTimeRange; - showingGraph?: boolean; - showingTable?: boolean; timeZone?: TimeZone; onHiddenSeriesChanged?: (hiddenSeries: string[]) => void; - toggleGraph: typeof toggleGraph; queryResponse: PanelData; originPanelId: number; addQueryRow: typeof addQueryRow; @@ -269,11 +265,6 @@ export class Explore extends React.PureComponent { this.props.scanStopAction({ exploreId: this.props.exploreId }); }; - onToggleGraph = (showingGraph: boolean) => { - const { toggleGraph, exploreId } = this.props; - toggleGraph(exploreId, showingGraph); - }; - onUpdateTimeRange = (absoluteRange: AbsoluteTimeRange) => { const { exploreId, updateTimeRange } = this.props; updateTimeRange({ exploreId, absoluteRange }); @@ -321,8 +312,6 @@ export class Explore extends React.PureComponent { graphResult, loading, absoluteRange, - showingGraph, - showingTable, timeZone, queryResponse, syncedTimes, @@ -396,10 +385,7 @@ export class Explore extends React.PureComponent { absoluteRange={absoluteRange} isStacked={false} showPanel={true} - showingGraph={showingGraph} - showingTable={showingTable} timeZone={timeZone} - onToggleGraph={this.onToggleGraph} onUpdateTimeRange={this.onUpdateTimeRange} showBars={false} showLines={true} @@ -484,8 +470,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia showTable, showTrace, loading, - showingGraph, - showingTable, absoluteRange, queryResponse, } = item; @@ -514,8 +498,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia graphResult: graphResult ?? undefined, logsResult: logsResult ?? undefined, loading, - showingGraph, - showingTable, absoluteRange, queryResponse, originPanelId, @@ -537,7 +519,6 @@ const mapDispatchToProps: Partial = { scanStopAction, setQueries, updateTimeRange, - toggleGraph, addQueryRow, }; diff --git a/public/app/features/explore/ExploreGraphPanel.tsx b/public/app/features/explore/ExploreGraphPanel.tsx index bc411d0472c..ba330560f56 100644 --- a/public/app/features/explore/ExploreGraphPanel.tsx +++ b/public/app/features/explore/ExploreGraphPanel.tsx @@ -49,11 +49,8 @@ interface Props extends Themeable { showBars: boolean; showLines: boolean; isStacked: boolean; - showingGraph?: boolean; - showingTable?: boolean; timeZone?: TimeZone; onUpdateTimeRange: (absoluteRange: AbsoluteTimeRange) => void; - onToggleGraph?: (showingGraph: boolean) => void; onHiddenSeriesChanged?: (hiddenSeries: string[]) => void; } @@ -74,13 +71,6 @@ class UnThemedExploreGraphPanel extends PureComponent { }); }; - onClickGraphButton = () => { - const { onToggleGraph, showingGraph } = this.props; - if (onToggleGraph) { - onToggleGraph(showingGraph ?? false); - } - }; - onChangeTime = (from: number, to: number) => { const { onUpdateTimeRange } = this.props; onUpdateTimeRange({ from, to }); @@ -95,8 +85,6 @@ class UnThemedExploreGraphPanel extends PureComponent { timeZone, absoluteRange, showPanel, - showingGraph, - showingTable, showBars, showLines, isStacked, @@ -116,10 +104,9 @@ class UnThemedExploreGraphPanel extends PureComponent { }, }; - const height = showPanel === false ? 100 : showingGraph && showingTable ? 200 : 400; + const height = showPanel ? 200 : 100; const lineWidth = showLines ? 1 : 5; const seriesToShow = showAllTimeSeries ? series : series.slice(0, MAX_NUMBER_OF_TIME_SERIES); - return ( {({ onSeriesToggle, toggledSeries }: GraphSeriesTogglerAPI) => { @@ -153,7 +140,7 @@ class UnThemedExploreGraphPanel extends PureComponent { }; render() { - const { series, showPanel, showingGraph, loading, theme } = this.props; + const { series, showPanel, loading, theme } = this.props; const { showAllTimeSeries } = this.state; const style = getStyles(theme); @@ -171,13 +158,7 @@ class UnThemedExploreGraphPanel extends PureComponent { )} {showPanel && ( - + {this.renderGraph()} )} diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index 6125f713dab..9394e56783f 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -266,8 +266,6 @@ export class Logs extends PureComponent { absoluteRange={visibleRange || absoluteRange} isStacked={true} showPanel={false} - showingGraph={true} - showingTable={true} timeZone={timeZone} showBars={true} showLines={false} diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx index c93ad6524df..abcb42d631f 100644 --- a/public/app/features/explore/LogsContainer.tsx +++ b/public/app/features/explore/LogsContainer.tsx @@ -62,15 +62,7 @@ interface LogsContainerProps { splitOpen: typeof splitOpen; } -interface LogsContainerState { - logsContainerOpen: boolean; -} - -export class LogsContainer extends PureComponent { - state: LogsContainerState = { - logsContainerOpen: true, - }; - +export class LogsContainer extends PureComponent { onChangeTime = (absoluteRange: AbsoluteTimeRange) => { const { exploreId, updateTimeRange } = this.props; updateTimeRange({ exploreId, absoluteRange }); @@ -102,12 +94,6 @@ export class LogsContainer extends PureComponent { - this.setState(state => ({ - logsContainerOpen: !state.logsContainerOpen, - })); - }; - render() { const { loading, @@ -130,8 +116,6 @@ export class LogsContainer extends PureComponent @@ -151,13 +135,7 @@ export class LogsContainer extends PureComponent - + { @@ -12,9 +11,7 @@ describe('TableContainer', () => { loading: false, width: 800, onCellFilterAdded: jest.fn(), - showingTable: true, tableResult: {} as DataFrame, - toggleTable: {} as typeof toggleTable, splitOpen: (() => {}) as any, range: {} as any, }; @@ -29,13 +26,11 @@ describe('TableContainer', () => { loading: false, width: 800, onCellFilterAdded: jest.fn(), - showingTable: true, tableResult: { name: 'TableResultName', fields: [], length: 0, } as DataFrame, - toggleTable: {} as typeof toggleTable, splitOpen: (() => {}) as any, range: {} as any, }; diff --git a/public/app/features/explore/TableContainer.tsx b/public/app/features/explore/TableContainer.tsx index 12e2cba9ade..f81da0a70ad 100644 --- a/public/app/features/explore/TableContainer.tsx +++ b/public/app/features/explore/TableContainer.tsx @@ -5,7 +5,7 @@ import { DataFrame, TimeRange, ValueLinkConfig } from '@grafana/data'; import { Collapse, Table } from '@grafana/ui'; import { ExploreId, ExploreItemState } from 'app/types/explore'; import { StoreState } from 'app/types'; -import { splitOpen, toggleTable } from './state/actions'; +import { splitOpen } from './state/actions'; import { config } from 'app/core/config'; import { PANEL_BORDER } from 'app/core/constants'; import { MetaInfoText } from './MetaInfoText'; @@ -18,18 +18,12 @@ interface TableContainerProps { loading: boolean; width: number; onCellFilterAdded?: (filter: FilterItem) => void; - showingTable: boolean; tableResult?: DataFrame; - toggleTable: typeof toggleTable; splitOpen: typeof splitOpen; range: TimeRange; } export class TableContainer extends PureComponent { - onClickTableButton = () => { - this.props.toggleTable(this.props.exploreId, this.props.showingTable); - }; - getTableHeight() { const { tableResult } = this.props; @@ -42,7 +36,7 @@ export class TableContainer extends PureComponent { } render() { - const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range, ariaLabel } = this.props; + const { loading, onCellFilterAdded, tableResult, width, splitOpen, range, ariaLabel } = this.props; const height = this.getTableHeight(); const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER; @@ -60,7 +54,7 @@ export class TableContainer extends PureComponent { } return ( - + {hasTableResult ? ( 0 ? false : loadingInState; - return { loading, showingTable, tableResult, range }; + return { loading, tableResult, range }; } const mapDispatchToProps = { - toggleTable, splitOpen, }; diff --git a/public/app/features/explore/__snapshots__/TableContainer.test.tsx.snap b/public/app/features/explore/__snapshots__/TableContainer.test.tsx.snap index aec96b2e817..f36eb14ed15 100644 --- a/public/app/features/explore/__snapshots__/TableContainer.test.tsx.snap +++ b/public/app/features/explore/__snapshots__/TableContainer.test.tsx.snap @@ -2,11 +2,9 @@ exports[`TableContainer should render component 1`] = ` { exploreId: ExploreId; } @@ -296,16 +288,6 @@ export const richHistoryUpdatedAction = createAction('explore/richHistoryUp */ export const updateUIStateAction = createAction('explore/updateUIState'); -/** - * Expand/collapse the table result viewer. When collapsed, table queries won't be run. - */ -export const toggleTableAction = createAction('explore/toggleTable'); - -/** - * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run. - */ -export const toggleGraphAction = createAction('explore/toggleGraph'); - /** * Updates datasource instance before datasouce loading has started */ diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index b454f71c960..4cafe04b63f 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -1,7 +1,7 @@ // Libraries import { map, throttleTime } from 'rxjs/operators'; import { identity } from 'rxjs'; -import { ActionCreatorWithPayload, PayloadAction } from '@reduxjs/toolkit'; +import { PayloadAction } from '@reduxjs/toolkit'; import { DataSourceSrv } from '@grafana/runtime'; import { RefreshPicker } from '@grafana/ui'; import { @@ -77,10 +77,6 @@ import { splitCloseAction, splitOpenAction, syncTimesAction, - toggleGraphAction, - ToggleGraphPayload, - toggleTableAction, - ToggleTablePayload, updateDatasourceInstanceAction, updateUIStateAction, changeLoadingStateAction, @@ -429,8 +425,6 @@ export const runQueries = (exploreId: ExploreId): ThunkResult => { queryResponse, querySubscription, history, - showingGraph, - showingTable, } = exploreItemState; if (!hasNonEmptyQuery(queries)) { @@ -461,8 +455,6 @@ export const runQueries = (exploreId: ExploreId): ThunkResult => { // maxDataPoints: mode === ExploreMode.Logs && datasourceId === 'loki' ? undefined : containerWidth, maxDataPoints: containerWidth, liveStreaming: live, - showingGraph, - showingTable, }; const datasourceName = exploreItemState.requestedDatasourceName; @@ -577,9 +569,9 @@ export const stateSave = (): ThunkResult => { queries: left.queries.map(clearQueryKeys), range: toRawTimeRange(left.range), ui: { - showingGraph: left.showingGraph, + showingGraph: true, showingLogs: true, - showingTable: left.showingTable, + showingTable: true, dedupStrategy: left.dedupStrategy, }, }; @@ -590,9 +582,9 @@ export const stateSave = (): ThunkResult => { queries: right.queries.map(clearQueryKeys), range: toRawTimeRange(right.range), ui: { - showingGraph: right.showingGraph, + showingGraph: true, showingLogs: true, - showingTable: right.showingTable, + showingTable: true, dedupStrategy: right.dedupStrategy, }, }; @@ -753,46 +745,6 @@ export function syncTimes(exploreId: ExploreId): ThunkResult { }; } -/** - * Creates action to collapse graph/logs/table panel. When panel is collapsed, - * queries won't be run - */ -const togglePanelActionCreator = ( - actionCreator: ActionCreatorWithPayload | ActionCreatorWithPayload -) => (exploreId: ExploreId, isPanelVisible: boolean): ThunkResult => { - return dispatch => { - let uiFragmentStateUpdate: Partial; - const shouldRunQueries = !isPanelVisible; - - switch (actionCreator.type) { - case toggleGraphAction.type: - uiFragmentStateUpdate = { showingGraph: !isPanelVisible }; - break; - case toggleTableAction.type: - uiFragmentStateUpdate = { showingTable: !isPanelVisible }; - break; - } - - dispatch(actionCreator({ exploreId })); - // The switch further up is exhaustive so uiFragmentStateUpdate should definitely be initialized - dispatch(updateExploreUIState(exploreId, uiFragmentStateUpdate!)); - - if (shouldRunQueries) { - dispatch(runQueries(exploreId)); - } - }; -}; - -/** - * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run. - */ -export const toggleGraph = togglePanelActionCreator(toggleGraphAction); - -/** - * Expand/collapse the table result viewer. When collapsed, table queries won't be run. - */ -export const toggleTable = togglePanelActionCreator(toggleTableAction); - /** * Change logs deduplication strategy and update URL. */ diff --git a/public/app/features/explore/state/reducers.test.ts b/public/app/features/explore/state/reducers.test.ts index 115c8ab6082..90a318166b2 100644 --- a/public/app/features/explore/state/reducers.test.ts +++ b/public/app/features/explore/state/reducers.test.ts @@ -6,7 +6,6 @@ import { LoadingState, LogsDedupStrategy, RawTimeRange, - toDataFrame, UrlQueryMap, ExploreUrlState, } from '@grafana/data'; @@ -28,8 +27,6 @@ import { scanStopAction, splitCloseAction, splitOpenAction, - toggleGraphAction, - toggleTableAction, updateDatasourceInstanceAction, addQueryRowAction, removeQueryRowAction, @@ -160,41 +157,6 @@ describe('Explore item reducer', () => { }); }); - describe('toggling panels', () => { - describe('when toggleGraphAction is dispatched', () => { - it('then it should set correct state', () => { - reducerTester() - .givenReducer(itemReducer, ({ graphResult: [] } as unknown) as ExploreItemState) - .whenActionIsDispatched(toggleGraphAction({ exploreId: ExploreId.left })) - .thenStateShouldEqual(({ showingGraph: true, graphResult: [] } as unknown) as ExploreItemState) - .whenActionIsDispatched(toggleGraphAction({ exploreId: ExploreId.left })) - .thenStateShouldEqual(({ showingGraph: false, graphResult: [] } as unknown) as ExploreItemState); - }); - }); - - describe('when toggleTableAction is dispatched', () => { - it('then it should set correct state', () => { - const table = toDataFrame({ - name: 'logs', - fields: [ - { - name: 'time', - type: 'number', - values: [1, 2], - }, - ], - }); - - reducerTester() - .givenReducer(itemReducer, ({ tableResult: table } as unknown) as ExploreItemState) - .whenActionIsDispatched(toggleTableAction({ exploreId: ExploreId.left })) - .thenStateShouldEqual(({ showingTable: true, tableResult: table } as unknown) as ExploreItemState) - .whenActionIsDispatched(toggleTableAction({ exploreId: ExploreId.left })) - .thenStateShouldEqual(({ showingTable: false, tableResult: table } as unknown) as ExploreItemState); - }); - }); - }); - describe('changing range', () => { describe('when changeRangeAction is dispatched', () => { it('then it should set correct state', () => { diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index 53644dec5a0..ca5e84c1ac5 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -60,9 +60,7 @@ import { SplitCloseActionPayload, splitOpenAction, syncTimesAction, - toggleGraphAction, toggleLogLevelAction, - toggleTableAction, updateDatasourceInstanceAction, updateUIStateAction, cancelQueriesAction, @@ -106,8 +104,6 @@ export const makeExploreItemState = (): ExploreItemState => ({ to: null, } as any, scanning: false, - showingGraph: true, - showingTable: true, loading: false, queryKeys: [], urlState: null, @@ -409,24 +405,6 @@ export const itemReducer = (state: ExploreItemState = makeExploreItemState(), ac return { ...state, ...action.payload }; } - if (toggleGraphAction.match(action)) { - const showingGraph = !state.showingGraph; - if (showingGraph) { - return { ...state, showingGraph }; - } - - return { ...state, showingGraph }; - } - - if (toggleTableAction.match(action)) { - const showingTable = !state.showingTable; - if (showingTable) { - return { ...state, showingTable }; - } - - return { ...state, showingTable }; - } - if (queriesImportedAction.match(action)) { const { queries } = action.payload; return { diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx index 1c92e7d9667..676adee1491 100644 --- a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx @@ -1,7 +1,9 @@ import React, { memo, FC } from 'react'; +import { css } from 'emotion'; // Types import { ExploreQueryFieldProps } from '@grafana/data'; +import { RadioButtonGroup } from '@grafana/ui'; import { PrometheusDatasource } from '../datasource'; import { PromQuery, PromOptions } from '../types'; @@ -26,6 +28,19 @@ export const PromExploreQueryEditor: FC = (props: Props) => { } } + function onQueryTypeChange(value: string) { + const { query, onChange } = props; + let nextQuery; + if (value === 'instant') { + nextQuery = { ...query, instant: true, range: false }; + } else if (value === 'range') { + nextQuery = { ...query, instant: false, range: true }; + } else { + nextQuery = { ...query, instant: true, range: true }; + } + onChange(nextQuery); + } + function onReturnKeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter') { onRunQuery(); @@ -33,27 +48,62 @@ export const PromExploreQueryEditor: FC = (props: Props) => { } return ( - {}} - history={history} - data={data} - ExtraFieldElement={ - - } - /> + <> + {}} + history={history} + data={data} + ExtraFieldElement={ + + } + /> + + + ); +}; + +type PromExploreRadioButtonProps = { + selected: string; + onQueryTypeChange: (value: string) => void; +}; + +const PromExploreRadioButton: React.FunctionComponent = ({ + selected, + onQueryTypeChange, +}) => { + const rangeOptions = [ + { value: 'range', label: 'Range' }, + { value: 'instant', label: 'Instant' }, + { value: 'both', label: 'Both' }, + ]; + + return ( +
+ + +
); }; diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx index 975ef1cd306..b03f6c2ed69 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx @@ -326,7 +326,7 @@ class PromQueryField extends React.PureComponent
-
+
{chooserText} diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap index 1e446d1505b..59ec675cbf2 100644 --- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap +++ b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap @@ -1,26 +1,43 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PromExploreQueryEditor should render component 1`] = ` - - } - data={ - Object { - "request": Object { - "app": "Grafana", - "dashboardId": 1, - "interval": "1s", - "intervalMs": 1000, - "panelId": 1, - "range": Object { + + + } + data={ + Object { + "request": Object { + "app": "Grafana", + "dashboardId": 1, + "interval": "1s", + "intervalMs": 1000, + "panelId": 1, + "range": Object { + "from": "2020-01-01T00:00:00.000Z", + "raw": Object { + "from": "2020-01-01T00:00:00.000Z", + "to": "2020-01-02T00:00:00.000Z", + }, + "to": "2020-01-02T00:00:00.000Z", + }, + "requestId": "1", + "scopedVars": Object {}, + "startTime": 0, + "targets": Array [], + "timezone": "GMT", + }, + "series": Array [], + "state": "NotStarted", + "timeRange": Object { "from": "2020-01-01T00:00:00.000Z", "raw": Object { "from": "2020-01-01T00:00:00.000Z", @@ -28,35 +45,24 @@ exports[`PromExploreQueryEditor should render component 1`] = ` }, "to": "2020-01-02T00:00:00.000Z", }, - "requestId": "1", - "scopedVars": Object {}, - "startTime": 0, - "targets": Array [], - "timezone": "GMT", - }, - "series": Array [], - "state": "NotStarted", - "timeRange": Object { - "from": "2020-01-01T00:00:00.000Z", - "raw": Object { - "from": "2020-01-01T00:00:00.000Z", - "to": "2020-01-02T00:00:00.000Z", - }, - "to": "2020-01-02T00:00:00.000Z", - }, + } } - } - datasource={Object {}} - history={Array []} - onBlur={[Function]} - onChange={[MockFunction]} - onRunQuery={[MockFunction]} - query={ - Object { - "expr": "", - "interval": "1s", - "refId": "A", + datasource={Object {}} + history={Array []} + onBlur={[Function]} + onChange={[MockFunction]} + onRunQuery={[MockFunction]} + query={ + Object { + "expr": "", + "interval": "1s", + "refId": "A", + } } - } -/> + /> + + `; diff --git a/public/app/plugins/datasource/prometheus/datasource.test.ts b/public/app/plugins/datasource/prometheus/datasource.test.ts index 5c5d5592717..78cee404d3c 100644 --- a/public/app/plugins/datasource/prometheus/datasource.test.ts +++ b/public/app/plugins/datasource/prometheus/datasource.test.ts @@ -1810,17 +1810,16 @@ describe('prepareTargets', () => { }); describe('when run from Explore', () => { - describe('and both Graph and Table are shown', () => { + describe('when query type Both is selected', () => { it('then it should return both instant and time series related objects', () => { const target: PromQuery = { refId: 'A', expr: 'up', + range: true, + instant: true, }; - const { queries, activeTargets, panelId, end, start } = getPrepareTargetsContext(target, CoreApp.Explore, { - showingGraph: true, - showingTable: true, - }); + const { queries, activeTargets, panelId, end, start } = getPrepareTargetsContext(target, CoreApp.Explore); expect(queries.length).toBe(2); expect(activeTargets.length).toBe(2); @@ -1868,33 +1867,16 @@ describe('prepareTargets', () => { }); }); - describe('and both Graph and Table are hidden', () => { - it('then it should return empty arrays', () => { + describe('when query type Instant is selected', () => { + it('then it should just add targets', () => { const target: PromQuery = { refId: 'A', expr: 'up', - showingGraph: false, - showingTable: false, + instant: true, + range: false, }; - const { queries, activeTargets } = getPrepareTargetsContext(target, CoreApp.Explore); - - expect(queries.length).toBe(0); - expect(activeTargets.length).toBe(0); - }); - }); - - describe('and Graph is hidden', () => { - it('then it should return only intant related objects', () => { - const target: PromQuery = { - refId: 'A', - expr: 'up', - }; - - const { queries, activeTargets, panelId, end, start } = getPrepareTargetsContext(target, CoreApp.Explore, { - showingGraph: false, - showingTable: true, - }); + const { queries, activeTargets, panelId, end, start } = getPrepareTargetsContext(target, CoreApp.Explore); expect(queries.length).toBe(1); expect(activeTargets.length).toBe(1); @@ -1908,55 +1890,43 @@ describe('prepareTargets', () => { hinting: undefined, instant: true, refId: target.refId, - requestId: panelId + target.refId + '_instant', + requestId: panelId + target.refId, start, step: 1, }); - expect(activeTargets[0]).toEqual({ - ...target, - format: 'table', - instant: true, - requestId: panelId + target.refId + '_instant', - valueWithRefId: true, - }); + expect(activeTargets[0]).toEqual(target); }); }); + }); - describe('and Table is hidden', () => { - it('then it should return only time series related objects', () => { - const target: PromQuery = { - refId: 'A', - expr: 'up', - }; + describe('when query type Range is selected', () => { + it('then it should just add targets', () => { + const target: PromQuery = { + refId: 'A', + expr: 'up', + range: true, + instant: false, + }; - const { queries, activeTargets, panelId, end, start } = getPrepareTargetsContext(target, CoreApp.Explore, { - showingGraph: true, - showingTable: false, - }); + const { queries, activeTargets, panelId, end, start } = getPrepareTargetsContext(target, CoreApp.Explore); - expect(queries.length).toBe(1); - expect(activeTargets.length).toBe(1); - expect(queries[0]).toEqual({ - end, - expr: 'up', - headers: { - 'X-Dashboard-Id': undefined, - 'X-Panel-Id': panelId, - }, - hinting: undefined, - instant: false, - refId: target.refId, - requestId: panelId + target.refId, - start, - step: 1, - }); - expect(activeTargets[0]).toEqual({ - ...target, - format: 'time_series', - instant: false, - requestId: panelId + target.refId, - }); + expect(queries.length).toBe(1); + expect(activeTargets.length).toBe(1); + expect(queries[0]).toEqual({ + end, + expr: 'up', + headers: { + 'X-Dashboard-Id': undefined, + 'X-Panel-Id': panelId, + }, + hinting: undefined, + instant: false, + refId: target.refId, + requestId: panelId + target.refId, + start, + step: 1, }); + expect(activeTargets[0]).toEqual(target); }); }); }); diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 202eb5f5cdf..4b2874de1cb 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -176,7 +176,8 @@ export class PrometheusDatasource extends DataSourceApi query: PromQueryRequest, target: PromQuery, responseListLength: number, - scopedVars?: ScopedVars + scopedVars?: ScopedVars, + mixedQueries?: boolean ) => { // Keeping original start/end for transformers const transformerOptions = { @@ -191,8 +192,10 @@ export class PrometheusDatasource extends DataSourceApi refId: target.refId, valueWithRefId: target.valueWithRefId, meta: { - /** Fix for showing of Prometheus results in Explore table. We want to show result of instant query in table and the rest of time series in graph */ - preferredVisualisationType: query.instant ? 'table' : 'graph', + /** Fix for showing of Prometheus results in Explore table. + * We want to show result of instant query always in table and result of range query based on target.runAll; + */ + preferredVisualisationType: target.instant ? 'table' : mixedQueries ? 'graph' : undefined, }, }; const series = this.resultTransformer.transform(response, transformerOptions); @@ -211,32 +214,32 @@ export class PrometheusDatasource extends DataSourceApi target.requestId = options.panelId + target.refId; - if (options.app !== CoreApp.Explore) { - activeTargets.push(target); - queries.push(this.createQuery(target, options, start, end)); - continue; - } - - if (options.showingTable) { - // create instant target only if Table is showed in Explore + if (target.range && target.instant) { + // If running both (only available in Explore) - instant and range query, prepare both targets + // Create instant target const instantTarget: any = cloneDeep(target); instantTarget.format = 'table'; instantTarget.instant = true; + instantTarget.range = false; instantTarget.valueWithRefId = true; delete instantTarget.maxDataPoints; instantTarget.requestId += '_instant'; - activeTargets.push(instantTarget); - queries.push(this.createQuery(instantTarget, options, start, end)); - } + // Create range target + const rangeTarget: any = cloneDeep(target); + rangeTarget.format = 'time_series'; + rangeTarget.instant = false; + instantTarget.range = true; - if (options.showingGraph) { - // create time series target only if Graph is showed in Explore - target.format = 'time_series'; - target.instant = false; - - activeTargets.push(target); + // Add both targets to activeTargets and queries arrays + activeTargets.push(instantTarget, rangeTarget); + queries.push( + this.createQuery(instantTarget, options, start, end), + this.createQuery(rangeTarget, options, start, end) + ); + } else { queries.push(this.createQuery(target, options, start, end)); + activeTargets.push(target); } } @@ -268,6 +271,8 @@ export class PrometheusDatasource extends DataSourceApi private exploreQuery(queries: PromQueryRequest[], activeTargets: PromQuery[], end: number) { let runningQueriesCount = queries.length; + const mixedQueries = activeTargets.some(t => t.range) && activeTargets.some(t => t.instant); + const subQueries = queries.map((query, index) => { const target = activeTargets[index]; @@ -281,7 +286,7 @@ export class PrometheusDatasource extends DataSourceApi tap(() => runningQueriesCount--), filter((response: any) => (response.cancelled ? false : true)), map((response: any) => { - const data = this.processResult(response, query, target, queries.length); + const data = this.processResult(response, query, target, queries.length, undefined, mixedQueries); return { data, key: query.requestId, diff --git a/public/app/plugins/datasource/prometheus/types.ts b/public/app/plugins/datasource/prometheus/types.ts index d1d103c6a03..81122b615bf 100644 --- a/public/app/plugins/datasource/prometheus/types.ts +++ b/public/app/plugins/datasource/prometheus/types.ts @@ -4,6 +4,7 @@ export interface PromQuery extends DataQuery { expr: string; format?: string; instant?: boolean; + range?: boolean; hinting?: boolean; interval?: string; intervalFactor?: number; diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index ec87d4c6687..1ecb8c6870a 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -118,14 +118,6 @@ export interface ExploreItemState { * Current scanning range to be shown to the user while scanning is active. */ scanRange?: RawTimeRange; - /** - * True if graph result viewer is expanded. Query runs will contain graph queries. - */ - showingGraph: boolean; - /** - * True if table result viewer is expanded. Query runs will contain table queries. - */ - showingTable: boolean; loading: boolean; /** @@ -206,8 +198,6 @@ export interface QueryOptions { minInterval?: string; maxDataPoints?: number; liveStreaming?: boolean; - showingGraph?: boolean; - showingTable?: boolean; mode?: ExploreMode; }