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);