IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor of action, actionTypes and reducer

Browse Source
This commit is contained in:
Hugo Häggmark 2019-02-04 07:47:10 +01:00
parent 2d0fd96621
commit 1f5bb76718
7 changed files with 698 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/explore/Explore.tsx
View File

@ -18,15 +18,7 @@ import TableContainer from './TableContainer';
import TimePicker, { parseTime } from './TimePicker'; import TimePicker, { parseTime } from './TimePicker';
// Actions // Actions
import { import { changeSize, changeTime, initializeExplore, modifyQueries, scanStart, setQueries } from './state/actions';
changeSize,
changeTime,
initializeExplore,
modifyQueries,
scanStart,
scanStop,
setQueries,
} from './state/actions';
// Types // Types
import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui'; import { RawTimeRange, TimeRange, DataQuery } from '@grafana/ui';
@ -35,6 +27,7 @@ import { StoreState } from 'app/types';
import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore'; import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE } from 'app/core/utils/explore';
import { Emitter } from 'app/core/utils/emitter'; import { Emitter } from 'app/core/utils/emitter';
import { ExploreToolbar } from './ExploreToolbar'; import { ExploreToolbar } from './ExploreToolbar';
import { scanStopAction } from './state/actionTypes';
interface ExploreProps { interface ExploreProps {
StartPage?: any; StartPage?: any;
@ -54,7 +47,7 @@ interface ExploreProps {
scanning?: boolean; scanning?: boolean;
scanRange?: RawTimeRange; scanRange?: RawTimeRange;
scanStart: typeof scanStart; scanStart: typeof scanStart;
scanStop: typeof scanStop; scanStopAction: typeof scanStopAction;
setQueries: typeof setQueries; setQueries: typeof setQueries;
split: boolean; split: boolean;
showingStartPage?: boolean; showingStartPage?: boolean;
@ -171,7 +164,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
}; };
onStopScanning = () => { onStopScanning = () => {
this.props.scanStop(this.props.exploreId); this.props.scanStopAction({ exploreId: this.props.exploreId });
}; };
render() { render() {
@ -281,7 +274,7 @@ const mapDispatchToProps = {
initializeExplore, initializeExplore,
modifyQueries, modifyQueries,
scanStart, scanStart,
scanStop, scanStopAction,
setQueries, setQueries,
}; };

23
public/app/features/explore/QueryRow.tsx
View File

@ -9,20 +9,14 @@ import QueryEditor from './QueryEditor';
import QueryTransactionStatus from './QueryTransactionStatus'; import QueryTransactionStatus from './QueryTransactionStatus';
// Actions // Actions
import { import { changeQuery, modifyQueries, runQueries, addQueryRow } from './state/actions';
addQueryRow,
changeQuery,
highlightLogsExpression,
modifyQueries,
removeQueryRow,
runQueries,
} from './state/actions';
// Types // Types
import { StoreState } from 'app/types'; import { StoreState } from 'app/types';
import { RawTimeRange, DataQuery, ExploreDataSourceApi, QueryHint, QueryFixAction } from '@grafana/ui'; import { RawTimeRange, DataQuery, ExploreDataSourceApi, QueryHint, QueryFixAction } from '@grafana/ui';
import { QueryTransaction, HistoryItem, ExploreItemState, ExploreId } from 'app/types/explore'; import { QueryTransaction, HistoryItem, ExploreItemState, ExploreId } from 'app/types/explore';
import { Emitter } from 'app/core/utils/emitter'; import { Emitter } from 'app/core/utils/emitter';
import { highlightLogsExpressionAction, removeQueryRowAction } from './state/actionTypes';
function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint { function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint {
const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0); const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0);
@ -38,7 +32,7 @@ interface QueryRowProps {
className?: string; className?: string;
exploreId: ExploreId; exploreId: ExploreId;
datasourceInstance: ExploreDataSourceApi; datasourceInstance: ExploreDataSourceApi;
highlightLogsExpression: typeof highlightLogsExpression; highlightLogsExpressionAction: typeof highlightLogsExpressionAction;
history: HistoryItem[]; history: HistoryItem[];
index: number; index: number;
initialQuery: DataQuery; initialQuery: DataQuery;
@ -46,7 +40,7 @@ interface QueryRowProps {
queryTransactions: QueryTransaction[]; queryTransactions: QueryTransaction[];
exploreEvents: Emitter; exploreEvents: Emitter;
range: RawTimeRange; range: RawTimeRange;
removeQueryRow: typeof removeQueryRow; removeQueryRowAction: typeof removeQueryRowAction;
runQueries: typeof runQueries; runQueries: typeof runQueries;
} }
@ -88,14 +82,15 @@ export class QueryRow extends PureComponent<QueryRowProps> {
onClickRemoveButton = () => { onClickRemoveButton = () => {
const { exploreId, index } = this.props; const { exploreId, index } = this.props;
this.props.removeQueryRow(exploreId, index); this.props.removeQueryRowAction({ exploreId, index });
}; };
updateLogsHighlights = _.debounce((value: DataQuery) => { updateLogsHighlights = _.debounce((value: DataQuery) => {
const { datasourceInstance } = this.props; const { datasourceInstance } = this.props;
if (datasourceInstance.getHighlighterExpression) { if (datasourceInstance.getHighlighterExpression) {
const { exploreId } = this.props;
const expressions = [datasourceInstance.getHighlighterExpression(value)]; const expressions = [datasourceInstance.getHighlighterExpression(value)];
this.props.highlightLogsExpression(this.props.exploreId, expressions); this.props.highlightLogsExpressionAction({ exploreId, expressions });
} }
}, 500); }, 500);
@ -168,9 +163,9 @@ function mapStateToProps(state: StoreState, { exploreId, index }) {
const mapDispatchToProps = { const mapDispatchToProps = {
addQueryRow, addQueryRow,
changeQuery, changeQuery,
highlightLogsExpression, highlightLogsExpressionAction,
modifyQueries, modifyQueries,
removeQueryRow, removeQueryRowAction,
runQueries, runQueries,
}; };

14
public/app/features/explore/Wrapper.tsx
View File

@ -7,16 +7,16 @@ import { StoreState } from 'app/types';
import { ExploreId, ExploreUrlState } from 'app/types/explore'; import { ExploreId, ExploreUrlState } from 'app/types/explore';
import { parseUrlState } from 'app/core/utils/explore'; import { parseUrlState } from 'app/core/utils/explore';
import { initializeExploreSplit, resetExplore } from './state/actions';
import ErrorBoundary from './ErrorBoundary'; import ErrorBoundary from './ErrorBoundary';
import Explore from './Explore'; import Explore from './Explore';
import { CustomScrollbar } from '@grafana/ui'; import { CustomScrollbar } from '@grafana/ui';
import { initializeExploreSplitAction, resetExploreAction } from './state/actionTypes';
interface WrapperProps { interface WrapperProps {
initializeExploreSplit: typeof initializeExploreSplit; initializeExploreSplitAction: typeof initializeExploreSplitAction;
split: boolean; split: boolean;
updateLocation: typeof updateLocation; updateLocation: typeof updateLocation;
resetExplore: typeof resetExplore; resetExploreAction: typeof resetExploreAction;
urlStates: { [key: string]: string }; urlStates: { [key: string]: string };
} }
@ -39,12 +39,12 @@ export class Wrapper extends Component<WrapperProps> {
componentDidMount() { componentDidMount() {
if (this.initialSplit) { if (this.initialSplit) {
this.props.initializeExploreSplit(); this.props.initializeExploreSplitAction();
} }
} }
componentWillUnmount() { componentWillUnmount() {
this.props.resetExplore(); this.props.resetExploreAction();
} }
render() { render() {
@ -77,9 +77,9 @@ const mapStateToProps = (state: StoreState) => {
}; };
const mapDispatchToProps = { const mapDispatchToProps = {
initializeExploreSplit, initializeExploreSplitAction,
updateLocation, updateLocation,
resetExplore, resetExploreAction,
}; };
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper)); export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper));

664
public/app/features/explore/state/actionTypes.ts
View File

@ -1,6 +1,13 @@
// Types // Types
import { Emitter } from 'app/core/core'; import { Emitter } from 'app/core/core';
import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem, DataSourceApi, QueryFixAction } from '@grafana/ui/src/types'; import {
RawTimeRange,
TimeRange,
DataQuery,
DataSourceSelectItem,
DataSourceApi,
QueryFixAction,
} from '@grafana/ui/src/types';
import { import {
ExploreId, ExploreId,
ExploreItemState, ExploreItemState,
@ -9,233 +16,26 @@ import {
ResultType, ResultType,
QueryTransaction, QueryTransaction,
} from 'app/types/explore'; } from 'app/types/explore';
import { actionCreatorFactory, noPayloadActionCreatorFactory, ActionOf } from 'app/core/redux/actionCreatorFactory';
/** Higher order actions
*
*/
export enum ActionTypes { export enum ActionTypes {
AddQueryRow = 'explore/ADD_QUERY_ROW',
ChangeDatasource = 'explore/CHANGE_DATASOURCE',
ChangeQuery = 'explore/CHANGE_QUERY',
ChangeSize = 'explore/CHANGE_SIZE',
ChangeTime = 'explore/CHANGE_TIME',
ClearQueries = 'explore/CLEAR_QUERIES',
HighlightLogsExpression = 'explore/HIGHLIGHT_LOGS_EXPRESSION',
InitializeExplore = 'explore/INITIALIZE_EXPLORE',
InitializeExploreSplit = 'explore/INITIALIZE_EXPLORE_SPLIT', InitializeExploreSplit = 'explore/INITIALIZE_EXPLORE_SPLIT',
LoadDatasourceFailure = 'explore/LOAD_DATASOURCE_FAILURE',
LoadDatasourceMissing = 'explore/LOAD_DATASOURCE_MISSING',
LoadDatasourcePending = 'explore/LOAD_DATASOURCE_PENDING',
LoadDatasourceSuccess = 'explore/LOAD_DATASOURCE_SUCCESS',
ModifyQueries = 'explore/MODIFY_QUERIES',
QueryTransactionFailure = 'explore/QUERY_TRANSACTION_FAILURE',
QueryTransactionStart = 'explore/QUERY_TRANSACTION_START',
QueryTransactionSuccess = 'explore/QUERY_TRANSACTION_SUCCESS',
RemoveQueryRow = 'explore/REMOVE_QUERY_ROW',
RunQueries = 'explore/RUN_QUERIES',
RunQueriesEmpty = 'explore/RUN_QUERIES_EMPTY',
ScanRange = 'explore/SCAN_RANGE',
ScanStart = 'explore/SCAN_START',
ScanStop = 'explore/SCAN_STOP',
SetQueries = 'explore/SET_QUERIES',
SplitClose = 'explore/SPLIT_CLOSE', SplitClose = 'explore/SPLIT_CLOSE',
SplitOpen = 'explore/SPLIT_OPEN', SplitOpen = 'explore/SPLIT_OPEN',
StateSave = 'explore/STATE_SAVE',
ToggleGraph = 'explore/TOGGLE_GRAPH',
ToggleLogs = 'explore/TOGGLE_LOGS',
ToggleTable = 'explore/TOGGLE_TABLE',
UpdateDatasourceInstance = 'explore/UPDATE_DATASOURCE_INSTANCE',
ResetExplore = 'explore/RESET_EXPLORE', ResetExplore = 'explore/RESET_EXPLORE',
QueriesImported = 'explore/QueriesImported',
}
export interface AddQueryRowAction {
type: ActionTypes.AddQueryRow;
payload: {
exploreId: ExploreId;
index: number;
query: DataQuery;
};
}
export interface ChangeQueryAction {
type: ActionTypes.ChangeQuery;
payload: {
exploreId: ExploreId;
query: DataQuery;
index: number;
override: boolean;
};
}
export interface ChangeSizeAction {
type: ActionTypes.ChangeSize;
payload: {
exploreId: ExploreId;
width: number;
height: number;
};
}
export interface ChangeTimeAction {
type: ActionTypes.ChangeTime;
payload: {
exploreId: ExploreId;
range: TimeRange;
};
}
export interface ClearQueriesAction {
type: ActionTypes.ClearQueries;
payload: {
exploreId: ExploreId;
};
}
export interface HighlightLogsExpressionAction {
type: ActionTypes.HighlightLogsExpression;
payload: {
exploreId: ExploreId;
expressions: string[];
};
}
export interface InitializeExploreAction {
type: ActionTypes.InitializeExplore;
payload: {
exploreId: ExploreId;
containerWidth: number;
eventBridge: Emitter;
exploreDatasources: DataSourceSelectItem[];
queries: DataQuery[];
range: RawTimeRange;
};
} }
export interface InitializeExploreSplitAction { export interface InitializeExploreSplitAction {
type: ActionTypes.InitializeExploreSplit; type: ActionTypes.InitializeExploreSplit;
} payload: {};
export interface LoadDatasourceFailureAction {
type: ActionTypes.LoadDatasourceFailure;
payload: {
exploreId: ExploreId;
error: string;
};
}
export interface LoadDatasourcePendingAction {
type: ActionTypes.LoadDatasourcePending;
payload: {
exploreId: ExploreId;
requestedDatasourceName: string;
};
}
export interface LoadDatasourceMissingAction {
type: ActionTypes.LoadDatasourceMissing;
payload: {
exploreId: ExploreId;
};
}
export interface LoadDatasourceSuccessAction {
type: ActionTypes.LoadDatasourceSuccess;
payload: {
exploreId: ExploreId;
StartPage?: any;
datasourceInstance: any;
history: HistoryItem[];
logsHighlighterExpressions?: any[];
showingStartPage: boolean;
supportsGraph: boolean;
supportsLogs: boolean;
supportsTable: boolean;
};
}
export interface ModifyQueriesAction {
type: ActionTypes.ModifyQueries;
payload: {
exploreId: ExploreId;
modification: QueryFixAction;
index: number;
modifier: (queries: DataQuery[], modification: QueryFixAction) => DataQuery[];
};
}
export interface QueryTransactionFailureAction {
type: ActionTypes.QueryTransactionFailure;
payload: {
exploreId: ExploreId;
queryTransactions: QueryTransaction[];
};
}
export interface QueryTransactionStartAction {
type: ActionTypes.QueryTransactionStart;
payload: {
exploreId: ExploreId;
resultType: ResultType;
rowIndex: number;
transaction: QueryTransaction;
};
}
export interface QueryTransactionSuccessAction {
type: ActionTypes.QueryTransactionSuccess;
payload: {
exploreId: ExploreId;
history: HistoryItem[];
queryTransactions: QueryTransaction[];
};
}
export interface RemoveQueryRowAction {
type: ActionTypes.RemoveQueryRow;
payload: {
exploreId: ExploreId;
index: number;
};
}
export interface RunQueriesEmptyAction {
type: ActionTypes.RunQueriesEmpty;
payload: {
exploreId: ExploreId;
};
}
export interface ScanStartAction {
type: ActionTypes.ScanStart;
payload: {
exploreId: ExploreId;
scanner: RangeScanner;
};
}
export interface ScanRangeAction {
type: ActionTypes.ScanRange;
payload: {
exploreId: ExploreId;
range: RawTimeRange;
};
}
export interface ScanStopAction {
type: ActionTypes.ScanStop;
payload: {
exploreId: ExploreId;
};
}
export interface SetQueriesAction {
type: ActionTypes.SetQueries;
payload: {
exploreId: ExploreId;
queries: DataQuery[];
};
} }
export interface SplitCloseAction { export interface SplitCloseAction {
type: ActionTypes.SplitClose; type: ActionTypes.SplitClose;
payload: {};
} }
export interface SplitOpenAction { export interface SplitOpenAction {
@ -245,80 +45,384 @@ export interface SplitOpenAction {
}; };
} }
export interface StateSaveAction {
type: ActionTypes.StateSave;
}
export interface ToggleTableAction {
type: ActionTypes.ToggleTable;
payload: {
exploreId: ExploreId;
};
}
export interface ToggleGraphAction {
type: ActionTypes.ToggleGraph;
payload: {
exploreId: ExploreId;
};
}
export interface ToggleLogsAction {
type: ActionTypes.ToggleLogs;
payload: {
exploreId: ExploreId;
};
}
export interface UpdateDatasourceInstanceAction {
type: ActionTypes.UpdateDatasourceInstance;
payload: {
exploreId: ExploreId;
datasourceInstance: DataSourceApi;
};
}
export interface ResetExploreAction { export interface ResetExploreAction {
type: ActionTypes.ResetExplore; type: ActionTypes.ResetExplore;
payload: {}; payload: {};
} }
export interface QueriesImported { /** Lower order actions
type: ActionTypes.QueriesImported; *
payload: { */
exploreId: ExploreId; export interface AddQueryRowPayload {
queries: DataQuery[]; exploreId: ExploreId;
}; index: number;
query: DataQuery;
} }
export type Action = export interface ChangeQueryPayload {
| AddQueryRowAction exploreId: ExploreId;
| ChangeQueryAction query: DataQuery;
| ChangeSizeAction index: number;
| ChangeTimeAction override: boolean;
| ClearQueriesAction }
| HighlightLogsExpressionAction
| InitializeExploreAction export interface ChangeSizePayload {
exploreId: ExploreId;
width: number;
height: number;
}
export interface ChangeTimePayload {
exploreId: ExploreId;
range: TimeRange;
}
export interface ClearQueriesPayload {
exploreId: ExploreId;
}
export interface HighlightLogsExpressionPayload {
exploreId: ExploreId;
expressions: string[];
}
export interface InitializeExplorePayload {
exploreId: ExploreId;
containerWidth: number;
eventBridge: Emitter;
exploreDatasources: DataSourceSelectItem[];
queries: DataQuery[];
range: RawTimeRange;
}
export interface LoadDatasourceFailurePayload {
exploreId: ExploreId;
error: string;
}
export interface LoadDatasourceMissingPayload {
exploreId: ExploreId;
}
export interface LoadDatasourcePendingPayload {
exploreId: ExploreId;
requestedDatasourceName: string;
}
export interface LoadDatasourceSuccessPayload {
exploreId: ExploreId;
StartPage?: any;
datasourceInstance: any;
history: HistoryItem[];
logsHighlighterExpressions?: any[];
showingStartPage: boolean;
supportsGraph: boolean;
supportsLogs: boolean;
supportsTable: boolean;
}
export interface ModifyQueriesPayload {
exploreId: ExploreId;
modification: QueryFixAction;
index: number;
modifier: (query: DataQuery, modification: QueryFixAction) => DataQuery;
}
export interface QueryTransactionFailurePayload {
exploreId: ExploreId;
queryTransactions: QueryTransaction[];
}
export interface QueryTransactionStartPayload {
exploreId: ExploreId;
resultType: ResultType;
rowIndex: number;
transaction: QueryTransaction;
}
export interface QueryTransactionSuccessPayload {
exploreId: ExploreId;
history: HistoryItem[];
queryTransactions: QueryTransaction[];
}
export interface RemoveQueryRowPayload {
exploreId: ExploreId;
index: number;
}
export interface RunQueriesEmptyPayload {
exploreId: ExploreId;
}
export interface ScanStartPayload {
exploreId: ExploreId;
scanner: RangeScanner;
}
export interface ScanRangePayload {
exploreId: ExploreId;
range: RawTimeRange;
}
export interface ScanStopPayload {
exploreId: ExploreId;
}
export interface SetQueriesPayload {
exploreId: ExploreId;
queries: DataQuery[];
}
export interface SplitOpenPayload {
itemState: ExploreItemState;
}
export interface ToggleTablePayload {
exploreId: ExploreId;
}
export interface ToggleGraphPayload {
exploreId: ExploreId;
}
export interface ToggleLogsPayload {
exploreId: ExploreId;
}
export interface UpdateDatasourceInstancePayload {
exploreId: ExploreId;
datasourceInstance: DataSourceApi;
}
export interface QueriesImportedPayload {
exploreId: ExploreId;
queries: DataQuery[];
}
/**
* Adds a query row after the row with the given index.
*/
export const addQueryRowAction = actionCreatorFactory<AddQueryRowPayload>('explore/ADD_QUERY_ROW').create();
/**
* Loads a new datasource identified by the given name.
*/
export const changeDatasourceAction = noPayloadActionCreatorFactory('explore/CHANGE_DATASOURCE').create();
/**
* Query change handler for the query row with the given index.
* If `override` is reset the query modifications and run the queries. Use this to set queries via a link.
*/
export const changeQueryAction = actionCreatorFactory<ChangeQueryPayload>('explore/CHANGE_QUERY').create();
/**
* Keep track of the Explore container size, in particular the width.
* The width will be used to calculate graph intervals (number of datapoints).
*/
export const changeSizeAction = actionCreatorFactory<ChangeSizePayload>('explore/CHANGE_SIZE').create();
/**
* Change the time range of Explore. Usually called from the Timepicker or a graph interaction.
*/
export const changeTimeAction = actionCreatorFactory<ChangeTimePayload>('explore/CHANGE_TIME').create();
/**
* Clear all queries and results.
*/
export const clearQueriesAction = actionCreatorFactory<ClearQueriesPayload>('explore/CLEAR_QUERIES').create();
/**
* Highlight expressions in the log results
*/
export const highlightLogsExpressionAction = actionCreatorFactory<HighlightLogsExpressionPayload>(
'explore/HIGHLIGHT_LOGS_EXPRESSION'
).create();
/**
* Initialize Explore state with state from the URL and the React component.
* Call this only on components for with the Explore state has not been initialized.
*/
export const initializeExploreAction = actionCreatorFactory<InitializeExplorePayload>(
'explore/INITIALIZE_EXPLORE'
).create();
/**
* Initialize the wrapper split state
*/
export const initializeExploreSplitAction = noPayloadActionCreatorFactory('explore/INITIALIZE_EXPLORE_SPLIT').create();
/**
* Display an error that happened during the selection of a datasource
*/
export const loadDatasourceFailureAction = actionCreatorFactory<LoadDatasourceFailurePayload>(
'explore/LOAD_DATASOURCE_FAILURE'
).create();
/**
* Display an error when no datasources have been configured
*/
export const loadDatasourceMissingAction = actionCreatorFactory<LoadDatasourceMissingPayload>(
'explore/LOAD_DATASOURCE_MISSING'
).create();
/**
* Start the async process of loading a datasource to display a loading indicator
*/
export const loadDatasourcePendingAction = actionCreatorFactory<LoadDatasourcePendingPayload>(
'explore/LOAD_DATASOURCE_PENDING'
).create();
/**
* Datasource loading was successfully completed. The instance is stored in the state as well in case we need to
* run datasource-specific code. Existing queries are imported to the new datasource if an importer exists,
* e.g., Prometheus -> Loki queries.
*/
export const loadDatasourceSuccessAction = actionCreatorFactory<LoadDatasourceSuccessPayload>(
'explore/LOAD_DATASOURCE_SUCCESS'
).create();
/**
* Action to modify a query given a datasource-specific modifier action.
* @param exploreId Explore area
* @param modification Action object with a type, e.g., ADD_FILTER
* @param index Optional query row index. If omitted, the modification is applied to all query rows.
* @param modifier Function that executes the modification, typically `datasourceInstance.modifyQueries`.
*/
export const modifyQueriesAction = actionCreatorFactory<ModifyQueriesPayload>('explore/MODIFY_QUERIES').create();
/**
* Mark a query transaction as failed with an error extracted from the query response.
* The transaction will be marked as `done`.
*/
export const queryTransactionFailureAction = actionCreatorFactory<QueryTransactionFailurePayload>(
'explore/QUERY_TRANSACTION_FAILURE'
).create();
/**
* Start a query transaction for the given result type.
* @param exploreId Explore area
* @param transaction Query options and `done` status.
* @param resultType Associate the transaction with a result viewer, e.g., Graph
* @param rowIndex Index is used to associate latency for this transaction with a query row
*/
export const queryTransactionStartAction = actionCreatorFactory<QueryTransactionStartPayload>(
'explore/QUERY_TRANSACTION_START'
).create();
/**
* Complete a query transaction, mark the transaction as `done` and store query state in URL.
* If the transaction was started by a scanner, it keeps on scanning for more results.
* Side-effect: the query is stored in localStorage.
* @param exploreId Explore area
* @param transactionId ID
* @param result Response from `datasourceInstance.query()`
* @param latency Duration between request and response
* @param queries Queries from all query rows
* @param datasourceId Origin datasource instance, used to discard results if current datasource is different
*/
export const queryTransactionSuccessAction = actionCreatorFactory<QueryTransactionSuccessPayload>(
'explore/QUERY_TRANSACTION_SUCCESS'
).create();
/**
* Remove query row of the given index, as well as associated query results.
*/
export const removeQueryRowAction = actionCreatorFactory<RemoveQueryRowPayload>('explore/REMOVE_QUERY_ROW').create();
export const runQueriesAction = noPayloadActionCreatorFactory('explore/RUN_QUERIES').create();
export const runQueriesEmptyAction = actionCreatorFactory<RunQueriesEmptyPayload>('explore/RUN_QUERIES_EMPTY').create();
/**
* Start a scan for more results using the given scanner.
* @param exploreId Explore area
* @param scanner Function that a) returns a new time range and b) triggers a query run for the new range
*/
export const scanStartAction = actionCreatorFactory<ScanStartPayload>('explore/SCAN_START').create();
export const scanRangeAction = actionCreatorFactory<ScanRangePayload>('explore/SCAN_RANGE').create();
/**
* Stop any scanning for more results.
*/
export const scanStopAction = actionCreatorFactory<ScanStopPayload>('explore/SCAN_STOP').create();
/**
* Reset queries to the given queries. Any modifications will be discarded.
* Use this action for clicks on query examples. Triggers a query run.
*/
export const setQueriesAction = actionCreatorFactory<SetQueriesPayload>('explore/SET_QUERIES').create();
/**
* Close the split view and save URL state.
*/
export const splitCloseAction = noPayloadActionCreatorFactory('explore/SPLIT_CLOSE').create();
/**
* Open the split view and copy the left state to be the right state.
* The right state is automatically initialized.
* The copy keeps all query modifications but wipes the query results.
*/
export const splitOpenAction = actionCreatorFactory<SplitOpenPayload>('explore/SPLIT_OPEN').create();
export const stateSaveAction = noPayloadActionCreatorFactory('explore/STATE_SAVE').create();
/**
* Expand/collapse the table result viewer. When collapsed, table queries won't be run.
*/
export const toggleTableAction = actionCreatorFactory<ToggleTablePayload>('explore/TOGGLE_TABLE').create();
/**
* Expand/collapse the graph result viewer. When collapsed, graph queries won't be run.
*/
export const toggleGraphAction = actionCreatorFactory<ToggleGraphPayload>('explore/TOGGLE_GRAPH').create();
/**
* Expand/collapse the logs result viewer. When collapsed, log queries won't be run.
*/
export const toggleLogsAction = actionCreatorFactory<ToggleLogsPayload>('explore/TOGGLE_LOGS').create();
/**
* Updates datasource instance before datasouce loading has started
*/
export const updateDatasourceInstanceAction = actionCreatorFactory<UpdateDatasourceInstancePayload>(
'explore/UPDATE_DATASOURCE_INSTANCE'
).create();
/**
* Resets state for explore.
*/
export const resetExploreAction = noPayloadActionCreatorFactory('explore/RESET_EXPLORE').create();
export const queriesImportedAction = actionCreatorFactory<QueriesImportedPayload>('explore/QueriesImported').create();
export type HigherOrderAction =
| InitializeExploreSplitAction | InitializeExploreSplitAction
| LoadDatasourceFailureAction
| LoadDatasourceMissingAction
| LoadDatasourcePendingAction
| LoadDatasourceSuccessAction
| ModifyQueriesAction
| QueryTransactionFailureAction
| QueryTransactionStartAction
| QueryTransactionSuccessAction
| RemoveQueryRowAction
| RunQueriesEmptyAction
| ScanRangeAction
| ScanStartAction
| ScanStopAction
| SetQueriesAction
| SplitCloseAction | SplitCloseAction
| SplitOpenAction | SplitOpenAction
| ToggleGraphAction
| ToggleLogsAction
| ToggleTableAction
| UpdateDatasourceInstanceAction
| ResetExploreAction | ResetExploreAction
| QueriesImported; | ActionOf<any>;
export type Action =
| ActionOf<AddQueryRowPayload>
| ActionOf<ChangeQueryPayload>
| ActionOf<ChangeSizePayload>
| ActionOf<ChangeTimePayload>
| ActionOf<ClearQueriesPayload>
| ActionOf<HighlightLogsExpressionPayload>
| ActionOf<InitializeExplorePayload>
| ActionOf<LoadDatasourceFailurePayload>
| ActionOf<LoadDatasourceMissingPayload>
| ActionOf<LoadDatasourcePendingPayload>
| ActionOf<LoadDatasourceSuccessPayload>
| ActionOf<ModifyQueriesPayload>
| ActionOf<QueryTransactionFailurePayload>
| ActionOf<QueryTransactionStartPayload>
| ActionOf<QueryTransactionSuccessPayload>
| ActionOf<RemoveQueryRowPayload>
| ActionOf<RunQueriesEmptyPayload>
| ActionOf<ScanStartPayload>
| ActionOf<ScanRangePayload>
| ActionOf<SetQueriesPayload>
| ActionOf<SplitOpenPayload>
| ActionOf<ToggleTablePayload>
| ActionOf<ToggleGraphPayload>
| ActionOf<ToggleLogsPayload>
| ActionOf<UpdateDatasourceInstancePayload>
| ActionOf<QueriesImportedPayload>;

296
public/app/features/explore/state/actions.ts
View File

@ -32,40 +32,49 @@ import {
QueryHint, QueryHint,
QueryFixAction, QueryFixAction,
} from '@grafana/ui/src/types'; } from '@grafana/ui/src/types';
import { ExploreId, ExploreUrlState, RangeScanner, ResultType, QueryOptions } from 'app/types/explore';
import { import {
ExploreId, Action,
ExploreUrlState, updateDatasourceInstanceAction,
RangeScanner, changeQueryAction,
ResultType, changeSizeAction,
QueryOptions, ChangeSizePayload,
QueryTransaction, changeTimeAction,
} from 'app/types/explore'; scanStopAction,
clearQueriesAction,
import { initializeExploreAction,
Action as ThunkableAction, loadDatasourceMissingAction,
ActionTypes, loadDatasourceFailureAction,
AddQueryRowAction, loadDatasourcePendingAction,
ChangeSizeAction, queriesImportedAction,
HighlightLogsExpressionAction, LoadDatasourceSuccessPayload,
LoadDatasourceFailureAction, loadDatasourceSuccessAction,
LoadDatasourceMissingAction, modifyQueriesAction,
LoadDatasourcePendingAction, queryTransactionFailureAction,
LoadDatasourceSuccessAction, queryTransactionStartAction,
QueryTransactionStartAction, queryTransactionSuccessAction,
ScanStopAction, scanRangeAction,
UpdateDatasourceInstanceAction, runQueriesEmptyAction,
QueriesImported, scanStartAction,
ModifyQueriesAction, setQueriesAction,
splitCloseAction,
splitOpenAction,
toggleGraphAction,
toggleLogsAction,
toggleTableAction,
addQueryRowAction,
AddQueryRowPayload,
} from './actionTypes'; } from './actionTypes';
import { ActionOf } from 'app/core/redux/actionCreatorFactory';
type ThunkResult<R> = ThunkAction<R, StoreState, undefined, ThunkableAction>; type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
/** // /**
* Adds a query row after the row with the given index. // * Adds a query row after the row with the given index.
*/ // */
export function addQueryRow(exploreId: ExploreId, index: number): AddQueryRowAction { export function addQueryRow(exploreId: ExploreId, index: number): ActionOf<AddQueryRowPayload> {
const query = generateEmptyQuery(index + 1); const query = generateEmptyQuery(index + 1);
return { type: ActionTypes.AddQueryRow, payload: { exploreId, index, query } }; return addQueryRowAction({ exploreId, index, query });
} }
/** /**
@ -79,7 +88,7 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun
await dispatch(importQueries(exploreId, modifiedQueries, currentDataSourceInstance, newDataSourceInstance)); await dispatch(importQueries(exploreId, modifiedQueries, currentDataSourceInstance, newDataSourceInstance));
dispatch(updateDatasourceInstance(exploreId, newDataSourceInstance)); dispatch(updateDatasourceInstanceAction({ exploreId, datasourceInstance: newDataSourceInstance }));
dispatch(loadDatasource(exploreId, newDataSourceInstance)); dispatch(loadDatasource(exploreId, newDataSourceInstance));
}; };
} }
@ -100,7 +109,7 @@ export function changeQuery(
query = { ...generateEmptyQuery(index) }; query = { ...generateEmptyQuery(index) };
} }
dispatch({ type: ActionTypes.ChangeQuery, payload: { exploreId, query, index, override } }); dispatch(changeQueryAction({ exploreId, query, index, override }));
if (override) { if (override) {
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
} }
@ -114,8 +123,8 @@ export function changeQuery(
export function changeSize( export function changeSize(
exploreId: ExploreId, exploreId: ExploreId,
{ height, width }: { height: number; width: number } { height, width }: { height: number; width: number }
): ChangeSizeAction { ): ActionOf<ChangeSizePayload> {
return { type: ActionTypes.ChangeSize, payload: { exploreId, height, width } }; return changeSizeAction({ exploreId, height, width });
} }
/** /**
@ -123,7 +132,7 @@ export function changeSize(
*/ */
export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<void> { export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<void> {
return dispatch => { return dispatch => {
dispatch({ type: ActionTypes.ChangeTime, payload: { exploreId, range } }); dispatch(changeTimeAction({ exploreId, range }));
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
}; };
} }
@ -133,19 +142,12 @@ export function changeTime(exploreId: ExploreId, range: TimeRange): ThunkResult<
*/ */
export function clearQueries(exploreId: ExploreId): ThunkResult<void> { export function clearQueries(exploreId: ExploreId): ThunkResult<void> {
return dispatch => { return dispatch => {
dispatch(scanStop(exploreId)); dispatch(scanStopAction({ exploreId }));
dispatch({ type: ActionTypes.ClearQueries, payload: { exploreId } }); dispatch(clearQueriesAction({ exploreId }));
dispatch(stateSave()); dispatch(stateSave());
}; };
} }
/**
* Highlight expressions in the log results
*/
export function highlightLogsExpression(exploreId: ExploreId, expressions: string[]): HighlightLogsExpressionAction {
return { type: ActionTypes.HighlightLogsExpression, payload: { exploreId, expressions } };
}
/** /**
* Initialize Explore state with state from the URL and the React component. * Initialize Explore state with state from the URL and the React component.
* Call this only on components for with the Explore state has not been initialized. * Call this only on components for with the Explore state has not been initialized.
@ -167,18 +169,16 @@ export function initializeExplore(
meta: ds.meta, meta: ds.meta,
})); }));
dispatch({ dispatch(
type: ActionTypes.InitializeExplore, initializeExploreAction({
payload: {
exploreId, exploreId,
containerWidth, containerWidth,
datasourceName,
eventBridge, eventBridge,
exploreDatasources, exploreDatasources,
queries, queries,
range, range,
}, })
}); );
if (exploreDatasources.length >= 1) { if (exploreDatasources.length >= 1) {
let instance; let instance;
@ -195,75 +195,20 @@ export function initializeExplore(
instance = await getDatasourceSrv().get(); instance = await getDatasourceSrv().get();
} }
dispatch(updateDatasourceInstance(exploreId, instance)); dispatch(updateDatasourceInstanceAction({ exploreId, datasourceInstance: instance }));
dispatch(loadDatasource(exploreId, instance)); dispatch(loadDatasource(exploreId, instance));
} else { } else {
dispatch(loadDatasourceMissing(exploreId)); dispatch(loadDatasourceMissingAction({ exploreId }));
} }
}; };
} }
/**
* Initialize the wrapper split state
*/
export function initializeExploreSplit() {
return async dispatch => {
dispatch({ type: ActionTypes.InitializeExploreSplit });
};
}
/**
* Display an error that happened during the selection of a datasource
*/
export const loadDatasourceFailure = (exploreId: ExploreId, error: string): LoadDatasourceFailureAction => ({
type: ActionTypes.LoadDatasourceFailure,
payload: {
exploreId,
error,
},
});
/**
* Display an error when no datasources have been configured
*/
export const loadDatasourceMissing = (exploreId: ExploreId): LoadDatasourceMissingAction => ({
type: ActionTypes.LoadDatasourceMissing,
payload: { exploreId },
});
/**
* Start the async process of loading a datasource to display a loading indicator
*/
export const loadDatasourcePending = (
exploreId: ExploreId,
requestedDatasourceName: string
): LoadDatasourcePendingAction => ({
type: ActionTypes.LoadDatasourcePending,
payload: {
exploreId,
requestedDatasourceName,
},
});
export const queriesImported = (exploreId: ExploreId, queries: DataQuery[]): QueriesImported => {
return {
type: ActionTypes.QueriesImported,
payload: {
exploreId,
queries,
},
};
};
/** /**
* Datasource loading was successfully completed. The instance is stored in the state as well in case we need to * Datasource loading was successfully completed. The instance is stored in the state as well in case we need to
* run datasource-specific code. Existing queries are imported to the new datasource if an importer exists, * run datasource-specific code. Existing queries are imported to the new datasource if an importer exists,
* e.g., Prometheus -> Loki queries. * e.g., Prometheus -> Loki queries.
*/ */
export const loadDatasourceSuccess = ( export const loadDatasourceSuccess = (exploreId: ExploreId, instance: any): ActionOf<LoadDatasourceSuccessPayload> => {
exploreId: ExploreId,
instance: any,
): LoadDatasourceSuccessAction => {
// Capabilities // Capabilities
const supportsGraph = instance.meta.metrics; const supportsGraph = instance.meta.metrics;
const supportsLogs = instance.meta.logs; const supportsLogs = instance.meta.logs;
@ -276,37 +221,18 @@ export const loadDatasourceSuccess = (
// Save last-used datasource // Save last-used datasource
store.set(LAST_USED_DATASOURCE_KEY, instance.name); store.set(LAST_USED_DATASOURCE_KEY, instance.name);
return { return loadDatasourceSuccessAction({
type: ActionTypes.LoadDatasourceSuccess, exploreId,
payload: { StartPage,
exploreId, datasourceInstance: instance,
StartPage, history,
datasourceInstance: instance, showingStartPage: Boolean(StartPage),
history, supportsGraph,
showingStartPage: Boolean(StartPage), supportsLogs,
supportsGraph, supportsTable,
supportsLogs, });
supportsTable,
},
};
}; };
/**
* Updates datasource instance before datasouce loading has started
*/
export function updateDatasourceInstance(
exploreId: ExploreId,
instance: DataSourceApi
): UpdateDatasourceInstanceAction {
return {
type: ActionTypes.UpdateDatasourceInstance,
payload: {
exploreId,
datasourceInstance: instance,
},
};
}
export function importQueries( export function importQueries(
exploreId: ExploreId, exploreId: ExploreId,
queries: DataQuery[], queries: DataQuery[],
@ -332,7 +258,7 @@ export function importQueries(
...generateEmptyQuery(i), ...generateEmptyQuery(i),
})); }));
dispatch(queriesImported(exploreId, nextQueries)); dispatch(queriesImportedAction({ exploreId, queries: nextQueries }));
}; };
} }
@ -344,7 +270,7 @@ export function loadDatasource(exploreId: ExploreId, instance: DataSourceApi): T
const datasourceName = instance.name; const datasourceName = instance.name;
// Keep ID to track selection // Keep ID to track selection
dispatch(loadDatasourcePending(exploreId, datasourceName)); dispatch(loadDatasourcePendingAction({ exploreId, requestedDatasourceName: datasourceName }));
let datasourceError = null; let datasourceError = null;
try { try {
@ -355,7 +281,7 @@ export function loadDatasource(exploreId: ExploreId, instance: DataSourceApi): T
} }
if (datasourceError) { if (datasourceError) {
dispatch(loadDatasourceFailure(exploreId, datasourceError)); dispatch(loadDatasourceFailureAction({ exploreId, error: datasourceError }));
return; return;
} }
@ -392,11 +318,7 @@ export function modifyQueries(
modifier: any modifier: any
): ThunkResult<void> { ): ThunkResult<void> {
return dispatch => { return dispatch => {
const modifyQueryAction: ModifyQueriesAction = { dispatch(modifyQueriesAction({ exploreId, modification, index, modifier }));
type: ActionTypes.ModifyQueries,
payload: { exploreId, modification, index, modifier },
};
dispatch(modifyQueryAction);
if (!modification.preventSubmit) { if (!modification.preventSubmit) {
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
} }
@ -461,29 +383,10 @@ export function queryTransactionFailure(
return qt; return qt;
}); });
dispatch({ dispatch(queryTransactionFailureAction({ exploreId, queryTransactions: nextQueryTransactions }));
type: ActionTypes.QueryTransactionFailure,
payload: { exploreId, queryTransactions: nextQueryTransactions },
});
}; };
} }
/**
* Start a query transaction for the given result type.
* @param exploreId Explore area
* @param transaction Query options and `done` status.
* @param resultType Associate the transaction with a result viewer, e.g., Graph
* @param rowIndex Index is used to associate latency for this transaction with a query row
*/
export function queryTransactionStart(
exploreId: ExploreId,
transaction: QueryTransaction,
resultType: ResultType,
rowIndex: number
): QueryTransactionStartAction {
return { type: ActionTypes.QueryTransactionStart, payload: { exploreId, resultType, rowIndex, transaction } };
}
/** /**
* Complete a query transaction, mark the transaction as `done` and store query state in URL. * Complete a query transaction, mark the transaction as `done` and store query state in URL.
* If the transaction was started by a scanner, it keeps on scanning for more results. * If the transaction was started by a scanner, it keeps on scanning for more results.
@ -540,14 +443,13 @@ export function queryTransactionSuccess(
// Side-effect: Saving history in localstorage // Side-effect: Saving history in localstorage
const nextHistory = updateHistory(history, datasourceId, queries); const nextHistory = updateHistory(history, datasourceId, queries);
dispatch({ dispatch(
type: ActionTypes.QueryTransactionSuccess, queryTransactionSuccessAction({
payload: {
exploreId, exploreId,
history: nextHistory, history: nextHistory,
queryTransactions: nextQueryTransactions, queryTransactions: nextQueryTransactions,
}, })
}); );
// Keep scanning for results if this was the last scanning transaction // Keep scanning for results if this was the last scanning transaction
if (scanning) { if (scanning) {
@ -555,26 +457,16 @@ export function queryTransactionSuccess(
const other = nextQueryTransactions.find(qt => qt.scanning && !qt.done); const other = nextQueryTransactions.find(qt => qt.scanning && !qt.done);
if (!other) { if (!other) {
const range = scanner(); const range = scanner();
dispatch({ type: ActionTypes.ScanRange, payload: { exploreId, range } }); dispatch(scanRangeAction({ exploreId, range }));
} }
} else { } else {
// We can stop scanning if we have a result // We can stop scanning if we have a result
dispatch(scanStop(exploreId)); dispatch(scanStopAction({ exploreId }));
} }
} }
}; };
} }
/**
* Remove query row of the given index, as well as associated query results.
*/
export function removeQueryRow(exploreId: ExploreId, index: number): ThunkResult<void> {
return dispatch => {
dispatch({ type: ActionTypes.RemoveQueryRow, payload: { exploreId, index } });
dispatch(runQueries(exploreId));
};
}
/** /**
* Main action to run queries and dispatches sub-actions based on which result viewers are active * Main action to run queries and dispatches sub-actions based on which result viewers are active
*/ */
@ -592,7 +484,7 @@ export function runQueries(exploreId: ExploreId) {
} = getState().explore[exploreId]; } = getState().explore[exploreId];
if (!hasNonEmptyQuery(modifiedQueries)) { if (!hasNonEmptyQuery(modifiedQueries)) {
dispatch({ type: ActionTypes.RunQueriesEmpty, payload: { exploreId } }); dispatch(runQueriesEmptyAction({ exploreId }));
dispatch(stateSave()); // Remember to saves to state and update location dispatch(stateSave()); // Remember to saves to state and update location
return; return;
} }
@ -673,7 +565,7 @@ function runQueriesForType(
queryIntervals, queryIntervals,
scanning scanning
); );
dispatch(queryTransactionStart(exploreId, transaction, resultType, rowIndex)); dispatch(queryTransactionStartAction({ exploreId, resultType, rowIndex, transaction }));
try { try {
const now = Date.now(); const now = Date.now();
const res = await datasourceInstance.query(transaction.options); const res = await datasourceInstance.query(transaction.options);
@ -697,21 +589,14 @@ function runQueriesForType(
export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkResult<void> { export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkResult<void> {
return dispatch => { return dispatch => {
// Register the scanner // Register the scanner
dispatch({ type: ActionTypes.ScanStart, payload: { exploreId, scanner } }); dispatch(scanStartAction({ exploreId, scanner }));
// Scanning must trigger query run, and return the new range // Scanning must trigger query run, and return the new range
const range = scanner(); const range = scanner();
// Set the new range to be displayed // Set the new range to be displayed
dispatch({ type: ActionTypes.ScanRange, payload: { exploreId, range } }); dispatch(scanRangeAction({ exploreId, range }));
}; };
} }
/**
* Stop any scanning for more results.
*/
export function scanStop(exploreId: ExploreId): ScanStopAction {
return { type: ActionTypes.ScanStop, payload: { exploreId } };
}
/** /**
* Reset queries to the given queries. Any modifications will be discarded. * Reset queries to the given queries. Any modifications will be discarded.
* Use this action for clicks on query examples. Triggers a query run. * Use this action for clicks on query examples. Triggers a query run.
@ -720,13 +605,7 @@ export function setQueries(exploreId: ExploreId, rawQueries: DataQuery[]): Thunk
return dispatch => { return dispatch => {
// Inject react keys into query objects // Inject react keys into query objects
const queries = rawQueries.map(q => ({ ...q, ...generateEmptyQuery() })); const queries = rawQueries.map(q => ({ ...q, ...generateEmptyQuery() }));
dispatch({ dispatch(setQueriesAction({ exploreId, queries }));
type: ActionTypes.SetQueries,
payload: {
exploreId,
queries,
},
});
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
}; };
} }
@ -736,7 +615,7 @@ export function setQueries(exploreId: ExploreId, rawQueries: DataQuery[]): Thunk
*/ */
export function splitClose(): ThunkResult<void> { export function splitClose(): ThunkResult<void> {
return dispatch => { return dispatch => {
dispatch({ type: ActionTypes.SplitClose }); dispatch(splitCloseAction());
dispatch(stateSave()); dispatch(stateSave());
}; };
} }
@ -755,7 +634,7 @@ export function splitOpen(): ThunkResult<void> {
queryTransactions: [], queryTransactions: [],
initialQueries: leftState.modifiedQueries.slice(), initialQueries: leftState.modifiedQueries.slice(),
}; };
dispatch({ type: ActionTypes.SplitOpen, payload: { itemState } }); dispatch(splitOpenAction({ itemState }));
dispatch(stateSave()); dispatch(stateSave());
}; };
} }
@ -791,7 +670,7 @@ export function stateSave() {
*/ */
export function toggleGraph(exploreId: ExploreId): ThunkResult<void> { export function toggleGraph(exploreId: ExploreId): ThunkResult<void> {
return (dispatch, getState) => { return (dispatch, getState) => {
dispatch({ type: ActionTypes.ToggleGraph, payload: { exploreId } }); dispatch(toggleGraphAction({ exploreId }));
if (getState().explore[exploreId].showingGraph) { if (getState().explore[exploreId].showingGraph) {
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
} }
@ -803,7 +682,7 @@ export function toggleGraph(exploreId: ExploreId): ThunkResult<void> {
*/ */
export function toggleLogs(exploreId: ExploreId): ThunkResult<void> { export function toggleLogs(exploreId: ExploreId): ThunkResult<void> {
return (dispatch, getState) => { return (dispatch, getState) => {
dispatch({ type: ActionTypes.ToggleLogs, payload: { exploreId } }); dispatch(toggleLogsAction({ exploreId }));
if (getState().explore[exploreId].showingLogs) { if (getState().explore[exploreId].showingLogs) {
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
} }
@ -815,18 +694,9 @@ export function toggleLogs(exploreId: ExploreId): ThunkResult<void> {
*/ */
export function toggleTable(exploreId: ExploreId): ThunkResult<void> { export function toggleTable(exploreId: ExploreId): ThunkResult<void> {
return (dispatch, getState) => { return (dispatch, getState) => {
dispatch({ type: ActionTypes.ToggleTable, payload: { exploreId } }); dispatch(toggleTableAction({ exploreId }));
if (getState().explore[exploreId].showingTable) { if (getState().explore[exploreId].showingTable) {
dispatch(runQueries(exploreId)); dispatch(runQueries(exploreId));
} }
}; };
} }
/**
* Resets state for explore.
*/
export function resetExplore(): ThunkResult<void> {
return dispatch => {
dispatch({ type: ActionTypes.ResetExplore, payload: {} });
};
}

65
public/app/features/explore/state/reducers.test.ts
View File

@ -1,42 +1,47 @@
import { Action, ActionTypes } from './actionTypes';
import { itemReducer, makeExploreItemState } from './reducers'; import { itemReducer, makeExploreItemState } from './reducers';
import { ExploreId } from 'app/types/explore'; import { ExploreId, ExploreItemState } from 'app/types/explore';
import { reducerTester } from 'test/core/redux/reducerTester';
import { scanStartAction, scanStopAction } from './actionTypes';
import { Reducer } from 'redux';
import { ActionOf } from 'app/core/redux/actionCreatorFactory';
describe('Explore item reducer', () => { describe('Explore item reducer', () => {
describe('scanning', () => { describe('scanning', () => {
test('should start scanning', () => { test('should start scanning', () => {
let state = makeExploreItemState(); const scanner = jest.fn();
const action: Action = { const initalState = {
type: ActionTypes.ScanStart, ...makeExploreItemState(),
payload: { scanning: false,
exploreId: ExploreId.left, scanner: undefined,
scanner: jest.fn(),
},
}; };
state = itemReducer(state, action);
expect(state.scanning).toBeTruthy(); reducerTester()
expect(state.scanner).toBe(action.payload.scanner); .givenReducer(itemReducer as Reducer<ExploreItemState, ActionOf<any>>, initalState)
.whenActionIsDispatched(scanStartAction({ exploreId: ExploreId.left, scanner }))
.thenStateShouldEqual({
...makeExploreItemState(),
scanning: true,
scanner,
});
}); });
test('should stop scanning', () => { test('should stop scanning', () => {
let state = makeExploreItemState(); const scanner = jest.fn();
const start: Action = { const initalState = {
type: ActionTypes.ScanStart, ...makeExploreItemState(),
payload: { scanning: true,
exploreId: ExploreId.left, scanner,
scanner: jest.fn(), scanRange: {},
},
}; };
state = itemReducer(state, start);
expect(state.scanning).toBeTruthy(); reducerTester()
const action: Action = { .givenReducer(itemReducer as Reducer<ExploreItemState, ActionOf<any>>, initalState)
type: ActionTypes.ScanStop, .whenActionIsDispatched(scanStopAction({ exploreId: ExploreId.left }))
payload: { .thenStateShouldEqual({
exploreId: ExploreId.left, ...makeExploreItemState(),
}, scanning: false,
}; scanner: undefined,
state = itemReducer(state, action); scanRange: undefined,
expect(state.scanning).toBeFalsy(); });
expect(state.scanner).toBeUndefined();
}); });
}); });
}); });

313
public/app/features/explore/state/reducers.ts
View File

@ -7,7 +7,36 @@ import {
import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/explore'; import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/explore';
import { DataQuery } from '@grafana/ui/src/types'; import { DataQuery } from '@grafana/ui/src/types';
import { Action, ActionTypes } from './actionTypes'; import { HigherOrderAction, ActionTypes } from './actionTypes';
import { reducerFactory } from 'app/core/redux';
import {
addQueryRowAction,
changeQueryAction,
changeSizeAction,
changeTimeAction,
clearQueriesAction,
highlightLogsExpressionAction,
initializeExploreAction,
updateDatasourceInstanceAction,
loadDatasourceFailureAction,
loadDatasourceMissingAction,
loadDatasourcePendingAction,
loadDatasourceSuccessAction,
modifyQueriesAction,
queryTransactionFailureAction,
queryTransactionStartAction,
queryTransactionSuccessAction,
removeQueryRowAction,
runQueriesEmptyAction,
scanRangeAction,
scanStartAction,
scanStopAction,
setQueriesAction,
toggleGraphAction,
toggleLogsAction,
toggleTableAction,
queriesImportedAction,
} from './actionTypes';
export const DEFAULT_RANGE = { export const DEFAULT_RANGE = {
from: 'now-6h', from: 'now-6h',
@ -58,9 +87,10 @@ export const initialExploreState: ExploreState = {
/** /**
* Reducer for an Explore area, to be used by the global Explore reducer. * Reducer for an Explore area, to be used by the global Explore reducer.
*/ */
export const itemReducer = (state, action: Action): ExploreItemState => { export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemState)
switch (action.type) { .addMapper({
case ActionTypes.AddQueryRow: { filter: addQueryRowAction,
mapper: (state, action): ExploreItemState => {
const { initialQueries, modifiedQueries, queryTransactions } = state; const { initialQueries, modifiedQueries, queryTransactions } = state;
const { index, query } = action.payload; const { index, query } = action.payload;
@ -77,10 +107,7 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
// Ongoing transactions need to update their row indices // Ongoing transactions need to update their row indices
const nextQueryTransactions = queryTransactions.map(qt => { const nextQueryTransactions = queryTransactions.map(qt => {
if (qt.rowIndex > index) { if (qt.rowIndex > index) {
return { return { ...qt, rowIndex: qt.rowIndex + 1 };
...qt,
rowIndex: qt.rowIndex + 1,
};
} }
return qt; return qt;
}); });
@ -92,9 +119,11 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
modifiedQueries: nextModifiedQueries, modifiedQueries: nextModifiedQueries,
queryTransactions: nextQueryTransactions, queryTransactions: nextQueryTransactions,
}; };
} },
})
case ActionTypes.ChangeQuery: { .addMapper({
filter: changeQueryAction,
mapper: (state, action): ExploreItemState => {
const { initialQueries, queryTransactions } = state; const { initialQueries, queryTransactions } = state;
let { modifiedQueries } = state; let { modifiedQueries } = state;
const { query, index, override } = action.payload; const { query, index, override } = action.payload;
@ -102,17 +131,11 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
// Fast path: only change modifiedQueries to not trigger an update // Fast path: only change modifiedQueries to not trigger an update
modifiedQueries[index] = query; modifiedQueries[index] = query;
if (!override) { if (!override) {
return { return { ...state, modifiedQueries };
...state,
modifiedQueries,
};
} }
// Override path: queries are completely reset // Override path: queries are completely reset
const nextQuery: DataQuery = { const nextQuery: DataQuery = { ...query, ...generateEmptyQuery(index) };
...query,
...generateEmptyQuery(index),
};
const nextQueries = [...initialQueries]; const nextQueries = [...initialQueries];
nextQueries[index] = nextQuery; nextQueries[index] = nextQuery;
modifiedQueries = [...nextQueries]; modifiedQueries = [...nextQueries];
@ -126,9 +149,11 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
modifiedQueries: nextQueries.slice(), modifiedQueries: nextQueries.slice(),
queryTransactions: nextQueryTransactions, queryTransactions: nextQueryTransactions,
}; };
} },
})
case ActionTypes.ChangeSize: { .addMapper({
filter: changeSizeAction,
mapper: (state, action): ExploreItemState => {
const { range, datasourceInstance } = state; const { range, datasourceInstance } = state;
let interval = '1s'; let interval = '1s';
if (datasourceInstance && datasourceInstance.interval) { if (datasourceInstance && datasourceInstance.interval) {
@ -137,16 +162,17 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
const containerWidth = action.payload.width; const containerWidth = action.payload.width;
const queryIntervals = getIntervals(range, interval, containerWidth); const queryIntervals = getIntervals(range, interval, containerWidth);
return { ...state, containerWidth, queryIntervals }; return { ...state, containerWidth, queryIntervals };
} },
})
case ActionTypes.ChangeTime: { .addMapper({
return { filter: changeTimeAction,
...state, mapper: (state, action): ExploreItemState => {
range: action.payload.range, return { ...state, range: action.payload.range };
}; },
} })
.addMapper({
case ActionTypes.ClearQueries: { filter: clearQueriesAction,
mapper: (state): ExploreItemState => {
const queries = ensureQueries(); const queries = ensureQueries();
return { return {
...state, ...state,
@ -155,14 +181,18 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
queryTransactions: [], queryTransactions: [],
showingStartPage: Boolean(state.StartPage), showingStartPage: Boolean(state.StartPage),
}; };
} },
})
case ActionTypes.HighlightLogsExpression: { .addMapper({
filter: highlightLogsExpressionAction,
mapper: (state, action): ExploreItemState => {
const { expressions } = action.payload; const { expressions } = action.payload;
return { ...state, logsHighlighterExpressions: expressions }; return { ...state, logsHighlighterExpressions: expressions };
} },
})
case ActionTypes.InitializeExplore: { .addMapper({
filter: initializeExploreAction,
mapper: (state, action): ExploreItemState => {
const { containerWidth, eventBridge, exploreDatasources, queries, range } = action.payload; const { containerWidth, eventBridge, exploreDatasources, queries, range } = action.payload;
return { return {
...state, ...state,
@ -174,30 +204,37 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
initialized: true, initialized: true,
modifiedQueries: queries.slice(), modifiedQueries: queries.slice(),
}; };
} },
})
case ActionTypes.UpdateDatasourceInstance: { .addMapper({
filter: updateDatasourceInstanceAction,
mapper: (state, action): ExploreItemState => {
const { datasourceInstance } = action.payload; const { datasourceInstance } = action.payload;
return { return { ...state, datasourceInstance };
...state, /*datasourceName: datasourceInstance.name removed after refactor, datasourceName does not exists on ExploreItemState */
datasourceInstance, },
datasourceName: datasourceInstance.name, })
}; .addMapper({
} filter: loadDatasourceFailureAction,
mapper: (state, action): ExploreItemState => {
case ActionTypes.LoadDatasourceFailure: {
return { ...state, datasourceError: action.payload.error, datasourceLoading: false }; return { ...state, datasourceError: action.payload.error, datasourceLoading: false };
} },
})
case ActionTypes.LoadDatasourceMissing: { .addMapper({
filter: loadDatasourceMissingAction,
mapper: (state): ExploreItemState => {
return { ...state, datasourceMissing: true, datasourceLoading: false }; return { ...state, datasourceMissing: true, datasourceLoading: false };
} },
})
case ActionTypes.LoadDatasourcePending: { .addMapper({
filter: loadDatasourcePendingAction,
mapper: (state, action): ExploreItemState => {
return { ...state, datasourceLoading: true, requestedDatasourceName: action.payload.requestedDatasourceName }; return { ...state, datasourceLoading: true, requestedDatasourceName: action.payload.requestedDatasourceName };
} },
})
case ActionTypes.LoadDatasourceSuccess: { .addMapper({
filter: loadDatasourceSuccessAction,
mapper: (state, action): ExploreItemState => {
const { containerWidth, range } = state; const { containerWidth, range } = state;
const { const {
StartPage, StartPage,
@ -226,9 +263,11 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
logsHighlighterExpressions: undefined, logsHighlighterExpressions: undefined,
queryTransactions: [], queryTransactions: [],
}; };
} },
})
case ActionTypes.ModifyQueries: { .addMapper({
filter: modifyQueriesAction,
mapper: (state, action): ExploreItemState => {
const { initialQueries, modifiedQueries, queryTransactions } = state; const { initialQueries, modifiedQueries, queryTransactions } = state;
const { modification, index, modifier } = action.payload; const { modification, index, modifier } = action.payload;
let nextQueries: DataQuery[]; let nextQueries: DataQuery[];
@ -246,12 +285,7 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
nextQueries = initialQueries.map((query, i) => { nextQueries = initialQueries.map((query, i) => {
// Synchronize all queries with local query cache to ensure consistency // Synchronize all queries with local query cache to ensure consistency
// TODO still needed? // TODO still needed?
return i === index return i === index ? { ...modifier(modifiedQueries[i], modification), ...generateEmptyQuery(i) } : query;
? {
...modifier(modifiedQueries[i], modification),
...generateEmptyQuery(i),
}
: query;
}); });
nextQueryTransactions = queryTransactions nextQueryTransactions = queryTransactions
// Consume the hint corresponding to the action // Consume the hint corresponding to the action
@ -270,18 +304,18 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
modifiedQueries: nextQueries.slice(), modifiedQueries: nextQueries.slice(),
queryTransactions: nextQueryTransactions, queryTransactions: nextQueryTransactions,
}; };
} },
})
case ActionTypes.QueryTransactionFailure: { .addMapper({
filter: queryTransactionFailureAction,
mapper: (state, action): ExploreItemState => {
const { queryTransactions } = action.payload; const { queryTransactions } = action.payload;
return { return { ...state, queryTransactions, showingStartPage: false };
...state, },
queryTransactions, })
showingStartPage: false, .addMapper({
}; filter: queryTransactionStartAction,
} mapper: (state, action): ExploreItemState => {
case ActionTypes.QueryTransactionStart: {
const { queryTransactions } = state; const { queryTransactions } = state;
const { resultType, rowIndex, transaction } = action.payload; const { resultType, rowIndex, transaction } = action.payload;
// Discarding existing transactions of same type // Discarding existing transactions of same type
@ -292,14 +326,12 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
// Append new transaction // Append new transaction
const nextQueryTransactions: QueryTransaction[] = [...remainingTransactions, transaction]; const nextQueryTransactions: QueryTransaction[] = [...remainingTransactions, transaction];
return { return { ...state, queryTransactions: nextQueryTransactions, showingStartPage: false };
...state, },
queryTransactions: nextQueryTransactions, })
showingStartPage: false, .addMapper({
}; filter: queryTransactionSuccessAction,
} mapper: (state, action): ExploreItemState => {
case ActionTypes.QueryTransactionSuccess: {
const { datasourceInstance, queryIntervals } = state; const { datasourceInstance, queryIntervals } = state;
const { history, queryTransactions } = action.payload; const { history, queryTransactions } = action.payload;
const results = calculateResultsFromQueryTransactions( const results = calculateResultsFromQueryTransactions(
@ -308,16 +340,12 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
queryIntervals.intervalMs queryIntervals.intervalMs
); );
return { return { ...state, ...results, history, queryTransactions, showingStartPage: false };
...state, },
...results, })
history, .addMapper({
queryTransactions, filter: removeQueryRowAction,
showingStartPage: false, mapper: (state, action): ExploreItemState => {
};
}
case ActionTypes.RemoveQueryRow: {
const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state; const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state;
let { modifiedQueries } = state; let { modifiedQueries } = state;
const { index } = action.payload; const { index } = action.payload;
@ -346,21 +374,29 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
modifiedQueries: nextQueries.slice(), modifiedQueries: nextQueries.slice(),
queryTransactions: nextQueryTransactions, queryTransactions: nextQueryTransactions,
}; };
} },
})
case ActionTypes.RunQueriesEmpty: { .addMapper({
filter: runQueriesEmptyAction,
mapper: (state): ExploreItemState => {
return { ...state, queryTransactions: [] }; return { ...state, queryTransactions: [] };
} },
})
case ActionTypes.ScanRange: { .addMapper({
filter: scanRangeAction,
mapper: (state, action): ExploreItemState => {
return { ...state, scanRange: action.payload.range }; return { ...state, scanRange: action.payload.range };
} },
})
case ActionTypes.ScanStart: { .addMapper({
filter: scanStartAction,
mapper: (state, action): ExploreItemState => {
return { ...state, scanning: true, scanner: action.payload.scanner }; return { ...state, scanning: true, scanner: action.payload.scanner };
} },
})
case ActionTypes.ScanStop: { .addMapper({
filter: scanStopAction,
mapper: (state): ExploreItemState => {
const { queryTransactions } = state; const { queryTransactions } = state;
const nextQueryTransactions = queryTransactions.filter(qt => qt.scanning && !qt.done); const nextQueryTransactions = queryTransactions.filter(qt => qt.scanning && !qt.done);
return { return {
@ -370,14 +406,18 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
scanRange: undefined, scanRange: undefined,
scanner: undefined, scanner: undefined,
}; };
} },
})
case ActionTypes.SetQueries: { .addMapper({
filter: setQueriesAction,
mapper: (state, action): ExploreItemState => {
const { queries } = action.payload; const { queries } = action.payload;
return { ...state, initialQueries: queries.slice(), modifiedQueries: queries.slice() }; return { ...state, initialQueries: queries.slice(), modifiedQueries: queries.slice() };
} },
})
case ActionTypes.ToggleGraph: { .addMapper({
filter: toggleGraphAction,
mapper: (state): ExploreItemState => {
const showingGraph = !state.showingGraph; const showingGraph = !state.showingGraph;
let nextQueryTransactions = state.queryTransactions; let nextQueryTransactions = state.queryTransactions;
if (!showingGraph) { if (!showingGraph) {
@ -385,9 +425,11 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph'); nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Graph');
} }
return { ...state, queryTransactions: nextQueryTransactions, showingGraph }; return { ...state, queryTransactions: nextQueryTransactions, showingGraph };
} },
})
case ActionTypes.ToggleLogs: { .addMapper({
filter: toggleLogsAction,
mapper: (state): ExploreItemState => {
const showingLogs = !state.showingLogs; const showingLogs = !state.showingLogs;
let nextQueryTransactions = state.queryTransactions; let nextQueryTransactions = state.queryTransactions;
if (!showingLogs) { if (!showingLogs) {
@ -395,9 +437,11 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs'); nextQueryTransactions = state.queryTransactions.filter(qt => qt.resultType !== 'Logs');
} }
return { ...state, queryTransactions: nextQueryTransactions, showingLogs }; return { ...state, queryTransactions: nextQueryTransactions, showingLogs };
} },
})
case ActionTypes.ToggleTable: { .addMapper({
filter: toggleTableAction,
mapper: (state): ExploreItemState => {
const showingTable = !state.showingTable; const showingTable = !state.showingTable;
if (showingTable) { if (showingTable) {
return { ...state, showingTable, queryTransactions: state.queryTransactions }; return { ...state, showingTable, queryTransactions: state.queryTransactions };
@ -412,25 +456,21 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
); );
return { ...state, ...results, queryTransactions: nextQueryTransactions, showingTable }; return { ...state, ...results, queryTransactions: nextQueryTransactions, showingTable };
} },
})
case ActionTypes.QueriesImported: { .addMapper({
return { filter: queriesImportedAction,
...state, mapper: (state, action): ExploreItemState => {
initialQueries: action.payload.queries, return { ...state, initialQueries: action.payload.queries, modifiedQueries: action.payload.queries.slice() };
modifiedQueries: action.payload.queries.slice(), },
}; })
} .create();
}
return state;
};
/** /**
* Global Explore reducer that handles multiple Explore areas (left and right). * Global Explore reducer that handles multiple Explore areas (left and right).
* Actions that have an `exploreId` get routed to the ExploreItemReducer. * Actions that have an `exploreId` get routed to the ExploreItemReducer.
*/ */
export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => { export const exploreReducer = (state = initialExploreState, action: HigherOrderAction): ExploreState => {
switch (action.type) { switch (action.type) {
case ActionTypes.SplitClose: { case ActionTypes.SplitClose: {
return { ...state, split: false }; return { ...state, split: false };
@ -453,10 +493,7 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
const { exploreId } = action.payload as any; const { exploreId } = action.payload as any;
if (exploreId !== undefined) { if (exploreId !== undefined) {
const exploreItemState = state[exploreId]; const exploreItemState = state[exploreId];
return { return { ...state, [exploreId]: itemReducer(exploreItemState, action) };
...state,
[exploreId]: itemReducer(exploreItemState, action),
};
} }
} }