github.com/grafana/pyroscope@v1.18.0/public/app/redux/useReduxQuerySync.ts (about)

     1  import { useEffect } from 'react';
     2  import { history } from '@pyroscope/util/history';
     3  import ReduxQuerySync from 'redux-query-sync';
     4  import { actions as continuousActions } from './reducers/continuous';
     5  import store, { RootState } from './store';
     6  
     7  export function setupReduxQuerySync() {
     8    // This is a bi-directional sync between the query parameters and the redux store
     9    // It works as follows:
    10    // * When URL query changes, It will dispatch the action
    11    // * When the store changes (the field set in selector), the query param is updated
    12    // For more info see the implementation at
    13    // https://github.com/Treora/redux-query-sync/blob/master/src/redux-query-sync.js
    14    return ReduxQuerySync({
    15      store,
    16      params: {
    17        from: {
    18          defaultValue: 'now-1h',
    19          selector: (state: RootState) => state.continuous.from,
    20          action: continuousActions.setFrom,
    21        },
    22        until: {
    23          defaultValue: 'now',
    24          selector: (state: RootState) => state.continuous.until,
    25          action: continuousActions.setUntil,
    26        },
    27        leftFrom: {
    28          defaultValue: 'now-1h',
    29          selector: (state: RootState) => state.continuous.leftFrom,
    30          action: continuousActions.setLeftFrom,
    31        },
    32        leftUntil: {
    33          defaultValue: 'now-30m',
    34          selector: (state: RootState) => state.continuous.leftUntil,
    35          action: continuousActions.setLeftUntil,
    36        },
    37        rightFrom: {
    38          defaultValue: 'now-30m',
    39          selector: (state: RootState) => state.continuous.rightFrom,
    40          action: continuousActions.setRightFrom,
    41        },
    42        rightUntil: {
    43          defaultValue: 'now',
    44          selector: (state: RootState) => state.continuous.rightUntil,
    45          action: continuousActions.setRightUntil,
    46        },
    47        query: {
    48          defaultvalue: '',
    49          selector: (state: RootState) => {
    50            const {
    51              continuous: { query },
    52            } = state;
    53            // Only sync the query URL parameter if it is actually set to something
    54            // Otherwise `?query=` will always be appended to the URL
    55            if (query !== '') {
    56              return query;
    57            }
    58            return undefined;
    59          },
    60          action: continuousActions.setQuery,
    61        },
    62        rightQuery: {
    63          defaultvalue: '',
    64          selector: (state: RootState) => state.continuous.rightQuery,
    65          action: continuousActions.setRightQuery,
    66        },
    67        leftQuery: {
    68          defaultvalue: '',
    69          selector: (state: RootState) => state.continuous.leftQuery,
    70          action: continuousActions.setLeftQuery,
    71        },
    72        maxNodes: {
    73          defaultValue: '0',
    74          selector: (state: RootState) => state.continuous.maxNodes,
    75          action: continuousActions.setMaxNodes,
    76        },
    77        aggregation: {
    78          defaultValue: 'sum',
    79          selector: (state: RootState) => state.continuous.aggregation,
    80          action: continuousActions.setAggregation,
    81        },
    82      },
    83      initialTruth: 'location',
    84      replaceState: false,
    85      history,
    86    });
    87  }
    88  
    89  // setup & unsubscribe on unmount
    90  export function useReduxQuerySync() {
    91    useEffect(setupReduxQuerySync, []);
    92  }