New: Stats filters

frontend/src/Indexer/Stats/Stats.js

@@ -7,8 +7,10 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import { kinds } from 'Helpers/Props';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import { align, kinds } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import StatsFilterMenu from './StatsFilterMenu';
 import styles from './Stats.css';
 
 function getAverageResponseTimeData(indexerStats) {
@@ -144,14 +146,29 @@ function Stats(props) {
     item,
     isFetching,
     isPopulated,
-    error
+    error,
+    filters,
+    selectedFilterKey,
+    onFilterSelect
   } = props;
 
   const isLoaded = !!(!error && isPopulated);
 
   return (
     <PageContent>
-      <PageToolbar />
+      <PageToolbar>
+        <PageToolbarSection
+          alignContent={align.RIGHT}
+          collapseButtons={false}
+        >
+          <StatsFilterMenu
+            selectedFilterKey={selectedFilterKey}
+            filters={filters}
+            onFilterSelect={onFilterSelect}
+            isDisabled={false}
+          />
+        </PageToolbarSection>
+      </PageToolbar>
       <PageContentBody>
         {
           isFetching && !isPopulated &&
@@ -232,6 +249,10 @@ Stats.propTypes = {
   item: PropTypes.object.isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
   error: PropTypes.object,
   data: PropTypes.object
 };

frontend/src/Indexer/Stats/StatsConnector.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchIndexerStats } from 'Store/Actions/indexerStatsActions';
+import { fetchIndexerStats, setIndexerStatsFilter } from 'Store/Actions/indexerStatsActions';
 import Stats from './Stats';
 
 function createMapStateToProps() {
@@ -12,9 +12,16 @@ function createMapStateToProps() {
   );
 }
 
-const mapDispatchToProps = {
-  dispatchFetchIndexers: fetchIndexerStats
-};
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setIndexerStatsFilter({ selectedFilterKey }));
+    },
+    dispatchFetchIndexerStats() {
+      dispatch(fetchIndexerStats());
+    }
+  };
+}
 
 class StatsConnector extends Component {
 
@@ -22,7 +29,7 @@ class StatsConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.dispatchFetchIndexers();
+    this.props.dispatchFetchIndexerStats();
   }
 
   //
@@ -38,7 +45,7 @@ class StatsConnector extends Component {
 }
 
 StatsConnector.propTypes = {
-  dispatchFetchIndexers: PropTypes.func.isRequired
+  dispatchFetchIndexerStats: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(StatsConnector);
+export default connect(createMapStateToProps, createMapDispatchToProps)(StatsConnector);

frontend/src/Indexer/Stats/StatsFilterMenu.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import { align } from 'Helpers/Props';
+
+function StatsFilterMenu(props) {
+  const {
+    selectedFilterKey,
+    filters,
+    isDisabled,
+    onFilterSelect
+  } = props;
+
+  return (
+    <FilterMenu
+      alignMenu={align.RIGHT}
+      isDisabled={isDisabled}
+      selectedFilterKey={selectedFilterKey}
+      filters={filters}
+      customFilters={[]}
+      onFilterSelect={onFilterSelect}
+    />
+  );
+}
+
+StatsFilterMenu.propTypes = {
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+StatsFilterMenu.defaultProps = {
+  showCustomFilters: false
+};
+
+export default StatsFilterMenu;

frontend/src/Indexer/Stats/StatsFilterModalConnector.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setIndexerStatsFilter } from 'Store/Actions/indexerStatsActions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.indexerStats.items,
+    (state) => state.indexerStats.filterBuilderProps,
+    (sectionItems, filterBuilderProps) => {
+      return {
+        sectionItems,
+        filterBuilderProps,
+        customFilterType: 'indexerStats'
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetFilter: setIndexerStatsFilter
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);

frontend/src/Store/Actions/indexerStatsActions.js

@@ -1,5 +1,10 @@
+import moment from 'moment';
+import { batchActions } from 'redux-batched-actions';
+import { filterBuilderTypes, filterBuilderValueTypes } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
-import createFetchHandler from './Creators/createFetchHandler';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
+import translate from 'Utilities/String/translate';
+import { set, update } from './baseActions';
 import createHandleActions from './Creators/createHandleActions';
 
 //
@@ -15,30 +20,140 @@ export const defaultState = {
   isPopulated: false,
   error: null,
   item: {},
+  start: null,
+  end: null,
 
   details: {
     isFetching: false,
     isPopulated: false,
     error: null,
     item: []
-  }
+  },
+
+  filters: [
+    {
+      key: 'all',
+      label: translate('All'),
+      filters: []
+    },
+    {
+      key: 'lastSeven',
+      label: 'Last 7 Days',
+      filters: []
+    },
+    {
+      key: 'lastThirty',
+      label: 'Last 30 Days',
+      filters: []
+    },
+    {
+      key: 'lastNinety',
+      label: 'Last 90 Days',
+      filters: []
+    }
+  ],
+
+  filterBuilderProps: [
+    {
+      name: 'startDate',
+      label: 'Start Date',
+      type: filterBuilderTypes.EXACT,
+      valueType: filterBuilderValueTypes.DATE
+    },
+    {
+      name: 'endDate',
+      label: 'End Date',
+      type: filterBuilderTypes.EXACT,
+      valueType: filterBuilderValueTypes.DATE
+    }
+  ],
+  selectedFilterKey: 'all'
 };
 
+export const persistState = [
+  'indexerStats.customFilters',
+  'indexerStats.selectedFilterKey'
+];
+
 //
 // Actions Types
 
 export const FETCH_INDEXER_STATS = 'indexerStats/fetchIndexerStats';
+export const SET_INDEXER_STATS_FILTER = 'indexerStats/setIndexerStatsFilter';
 
 //
 // Action Creators
 
 export const fetchIndexerStats = createThunk(FETCH_INDEXER_STATS);
+export const setIndexerStatsFilter = createThunk(SET_INDEXER_STATS_FILTER);
 
 //
 // Action Handlers
 
 export const actionHandlers = handleThunks({
-  [FETCH_INDEXER_STATS]: createFetchHandler(section, '/indexerStats')
+  [FETCH_INDEXER_STATS]: function(getState, payload, dispatch) {
+    const state = getState();
+    const indexerStats = state.indexerStats;
+
+    const requestParams = {
+      endDate: moment().toISOString()
+    };
+
+    if (indexerStats.selectedFilterKey !== 'all') {
+      let dayCount = 7;
+
+      if (indexerStats.selectedFilterKey === 'lastThirty') {
+        dayCount = 30;
+      }
+
+      if (indexerStats.selectedFilterKey === 'lastNinety') {
+        dayCount = 90;
+      }
+
+      requestParams.startDate = moment().add(-dayCount, 'days').endOf('day').toISOString();
+    }
+
+    const basesAttrs = {
+      section,
+      isFetching: true
+    };
+
+    const attrs = basesAttrs;
+
+    dispatch(set(attrs));
+
+    const promise = createAjaxRequest({
+      url: '/indexerStats',
+      data: requestParams
+    }).request;
+
+    promise.done((data) => {
+      dispatch(batchActions([
+        update({ section, data }),
+
+        set({
+          section,
+          isFetching: false,
+          isPopulated: true,
+          error: null
+        })
+      ]));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(set({
+        section,
+        isFetching: false,
+        isPopulated: false,
+        error: xhr
+      }));
+    });
+  },
+
+  [SET_INDEXER_STATS_FILTER]: function(getState, payload, dispatch) {
+    dispatch(set({ section, ...payload }));
+    dispatch(fetchIndexerStats());
+  }
 });
 
 //