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

Update comments

Browse Source
This commit is contained in:
David Kaltschmidt 2019-01-12 23:44:24 +01:00
parent f02f41c9b0
commit 607f7c25de
2 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,26 +110,14 @@ interface ExploreProps {
* Once a datasource is selected it populates the query section at the top.
* When queries are run, their results are being displayed in the main section.
* The datasource determines what kind of query editor it brings, and what kind
* of results viewers it supports.
* of results viewers it supports. The state is managed entirely in Redux.
*
* QUERY HANDLING
* SPLIT VIEW
*
* TLDR: to not re-render Explore during edits, query editing is not "controlled"
* in a React sense: values need to be pushed down via `initialQueries`, while
* edits travel up via `this.modifiedQueries`.
*
* By default the query rows start without prior state: `initialQueries` will
* contain one empty DataQuery. While the user modifies the DataQuery, the
* modifications are being tracked in `this.modifiedQueries`, which need to be
* used whenever a query is sent to the datasource to reflect what the user sees
* on the screen. Query"react-popper": "^0.7.5", rows can be initialized or reset using `initialQueries`,
* by giving the respec"react-popper": "^0.7.5",tive row a new key. This wipes the old row and its state.
* This property is als"react-popper": "^0.7.5",o used to govern how many query rows there are (minimum 1).
*
* This flow makes sure that a query row can be arbitrarily complex without the
* fear of being wiped or re-initialized via props. The query row is free to keep
* its own state while the user edits or builds a query. Valid queries can be sent
* up to Explore via the `onChangeQuery` prop.
* Explore can have two Explore areas side-by-side. This is handled in `Wrapper.tsx`.
* Since there can be multiple Explores (e.g., left and right) each action needs
* the `exploreId` as first parameter so that the reducer knows which Explore state
* is affected.
*
* DATASOURCE REQUESTS
*

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

@ -17,6 +17,9 @@ export const DEFAULT_RANGE = {
// Millies step for helper bar charts
const DEFAULT_GRAPH_INTERVAL = 15 * 1000;
/**
* Returns a fresh Explore area state
*/
const makeExploreItemState = (): ExploreItemState => ({
StartPage: undefined,
containerWidth: 0,
@ -42,12 +45,18 @@ const makeExploreItemState = (): ExploreItemState => ({
supportsTable: null,
});
/**
* Global Explore state that handles multiple Explore areas and the split state
*/
const initialExploreState: ExploreState = {
split: null,
left: makeExploreItemState(),
right: makeExploreItemState(),
};
/**
* Reducer for an Explore area, to be used by the global Explore reducer.
*/
const itemReducer = (state, action: Action): ExploreItemState => {
switch (action.type) {
case ActionTypes.AddQueryRow: {
@ -375,6 +384,10 @@ const itemReducer = (state, action: Action): ExploreItemState => {
return state;
};
/**
* Global Explore reducer that handles multiple Explore areas (left and right).
* Actions that have an `exploreId` get routed to the ExploreItemReducer.
*/
export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
switch (action.type) {
case ActionTypes.ClickCloseSplit: {
@ -409,8 +422,6 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp
};
}
console.error('Unhandled action', action.type);
return state;
};