Feature: Adds redux action logging toggle from url params (#17368)

With live tailing introduced in Explore we now have a lot of actions dispatching and the Redux Dev Tools doesn't cope with the amount and rate of actions and crashes. This PR turns on redux action logging when you add logActions=true in the url and turns it off if you refresh the page or add logActions=false in the url.

public/app/core/actions/application.ts

+import { noPayloadActionCreatorFactory } from 'app/core/redux';
+
+export const toggleLogActions = noPayloadActionCreatorFactory('TOGGLE_LOG_ACTIONS').create();

public/app/core/middlewares/application.ts

+import { Store, Dispatch } from 'redux';
+import { StoreState } from 'app/types/store';
+import { ActionOf } from '../redux/actionCreatorFactory';
+import { toggleLogActions } from '../actions/application';
+
+export const toggleLogActionsMiddleware = (store: Store<StoreState>) => (next: Dispatch) => (action: ActionOf<any>) => {
+  const isLogActionsAction = action.type === toggleLogActions.type;
+  if (isLogActionsAction) {
+    return next(action);
+  }
+
+  const logActionsTrue =
+    window && window.location && window.location.search && window.location.search.indexOf('logActions=true') !== -1;
+  const logActionsFalse =
+    window && window.location && window.location.search && window.location.search.indexOf('logActions=false') !== -1;
+  const logActions = store.getState().application.logActions;
+
+  if (logActionsTrue && !logActions) {
+    store.dispatch(toggleLogActions());
+  }
+
+  if (logActionsFalse && logActions) {
+    store.dispatch(toggleLogActions());
+  }
+
+  return next(action);
+};

public/app/core/reducers/application.ts

+import { ApplicationState } from 'app/types/application';
+import { reducerFactory } from 'app/core/redux';
+import { toggleLogActions } from '../actions/application';
+
+export const initialState: ApplicationState = {
+  logActions: false,
+};
+
+export const applicationReducer = reducerFactory<ApplicationState>(initialState)
+  .addMapper({
+    filter: toggleLogActions,
+    mapper: (state): ApplicationState => ({
+      ...state,
+      logActions: !state.logActions,
+    }),
+  })
+  .create();

public/app/core/reducers/index.ts

 import { navIndexReducer as navIndex } from './navModel';
 import { locationReducer as location } from './location';
 import { appNotificationsReducer as appNotifications } from './appNotification';
+import { applicationReducer as application } from './application';
 
 export default {
   navIndex,
   location,
   appNotifications,
+  application,
 };

public/app/store/configureStore.ts

 import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 import thunk from 'redux-thunk';
 import { combineEpics, createEpicMiddleware } from 'redux-observable';
-// import { createLogger } from 'redux-logger';
+import { createLogger } from 'redux-logger';
 import sharedReducers from 'app/core/reducers';
 import alertingReducers from 'app/features/alerting/state/reducers';
 import teamsReducers from 'app/features/teams/state/reducers';
@@ -17,6 +17,8 @@ import organizationReducers from 'app/features/org/state/reducers';
 import { setStore } from './store';
 import { startSubscriptionsEpic, startSubscriptionEpic, limitMessageRateEpic } from 'app/features/explore/state/epics';
 import { WebSocketSubject, webSocket } from 'rxjs/webSocket';
+import { StoreState } from 'app/types/store';
+import { toggleLogActionsMiddleware } from 'app/core/middlewares/application';
 
 const rootReducers = {
   ...sharedReducers,
@@ -51,15 +53,17 @@ const epicMiddleware = createEpicMiddleware({ dependencies });
 
 export function configureStore() {
   const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
   const rootReducer = combineReducers(rootReducers);
+  const logger = createLogger({
+    predicate: (getState: () => StoreState) => {
+      return getState().application.logActions;
+    },
+  });
+  const storeEnhancers =
+    process.env.NODE_ENV !== 'production'
+      ? applyMiddleware(toggleLogActionsMiddleware, thunk, epicMiddleware, logger)
+      : applyMiddleware(thunk, epicMiddleware);
 
-  if (process.env.NODE_ENV !== 'production') {
-    // DEV builds we had the logger middleware
-    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, epicMiddleware))));
-  } else {
-    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, epicMiddleware))));
-  }
-
+  setStore(createStore(rootReducer, {}, composeEnhancers(storeEnhancers)));
   epicMiddleware.run(rootEpic);
 }

public/app/types/application.ts

+export interface ApplicationState {
+  logActions: boolean;
+}

public/app/types/store.ts

@@ -13,6 +13,7 @@ import { OrganizationState } from './organization';
 import { AppNotificationsState } from './appNotifications';
 import { PluginsState } from './plugins';
 import { NavIndex } from '@grafana/ui';
+import { ApplicationState } from './application';
 
 export interface StoreState {
   navIndex: NavIndex;
@@ -29,6 +30,7 @@ export interface StoreState {
   appNotifications: AppNotificationsState;
   user: UserState;
   plugins: PluginsState;
+  application: ApplicationState;
 }
 
 /*