SONAR-7530 Add pagination on the Project Measures page (#977)

6 files changed, 72 insertions, 22 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListView.js b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListView.js
index 87dd4c9e085..3fd24c2c265 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListView.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListView.js
@@ -24,6 +24,7 @@ import ComponentsList from './ComponentsList';
 import ListHeader from './ListHeader';
 import Spinner from '../../components/Spinner';
 import SourceViewer from '../../../code/components/SourceViewer';
+import ListFooter from '../../../../components/shared/list-footer';
 
 export default class ListView extends React.Component {
   static contextTypes = {
@@ -76,6 +77,11 @@ export default class ListView extends React.Component {
     onFetchList(baseComponent, metric, Number(periodIndex));
   }
 
+  handleFetchMore () {
+    const periodIndex = this.props.location.query.period || 1;
+    this.props.onFetchMore(Number(periodIndex));
+  }
+
   changeSelected (selected) {
     this.props.onSelect(selected);
   }
@@ -90,7 +96,7 @@ export default class ListView extends React.Component {
   }
 
   render () {
-    const { component, components, metrics, metric, leakPeriod, selected, fetching } = this.props;
+    const { component, components, metrics, metric, leakPeriod, selected, total, fetching } = this.props;
     const { onSelectNext, onSelectPrevious } = this.props;
 
     const breadcrumbs = [component];
@@ -114,12 +120,18 @@ export default class ListView extends React.Component {
           {!selected && (
               <div className={classNames({ 'new-loading': fetching })}>
                 {(!fetching || components.length !== 0) ? (
-                    <ComponentsList
-                        components={components}
-                        metrics={metrics}
-                        selected={selected}
-                        metric={metric}
-                        onClick={this.handleClick.bind(this)}/>
+                    <div>
+                      <ComponentsList
+                          components={components}
+                          metrics={metrics}
+                          selected={selected}
+                          metric={metric}
+                          onClick={this.handleClick.bind(this)}/>
+                      <ListFooter
+                          count={components.length}
+                          total={total}
+                          loadMore={this.handleFetchMore.bind(this)}/>
+                    </div>
                 ) : (
                     <Spinner/>
                 )}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListViewContainer.js b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListViewContainer.js
index b3333a13d7a..c96c5586383 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListViewContainer.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/ListViewContainer.js
@@ -21,7 +21,7 @@ import { connect } from 'react-redux';
 import pick from '../../../../../../../node_modules/lodash/pick';
 
 import ListView from './ListView';
-import { fetchList, selectComponent, selectNext, selectPrevious } from '../../store/listViewActions';
+import { fetchList, fetchMore, selectComponent, selectNext, selectPrevious } from '../../store/listViewActions';
 
 const mapStateToProps = state => {
   const drilldown = pick(state.list, [
@@ -42,6 +42,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
   return {
     onFetchList: (baseComponent, metric, periodIndex) => dispatch(fetchList(baseComponent, metric, periodIndex)),
+    onFetchMore: periodIndex => dispatch(fetchMore(periodIndex)),
     onSelect: component => dispatch(selectComponent(component)),
     onSelectNext: component => dispatch(selectNext(component)),
     onSelectPrevious: component => dispatch(selectPrevious(component))
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeView.js b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeView.js
index 91381904947..d42bbf7167b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeView.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeView.js
@@ -23,6 +23,7 @@ import ComponentsList from './ComponentsList';
 import ListHeader from './ListHeader';
 import Spinner from '../../components/Spinner';
 import SourceViewer from '../../../code/components/SourceViewer';
+import ListFooter from '../../../../components/shared/list-footer';
 
 export default class TreeView extends React.Component {
   componentDidMount () {
@@ -66,6 +67,10 @@ export default class TreeView extends React.Component {
     onStart(baseComponent, metric, Number(periodIndex));
   }
 
+  handleFetchMore () {
+    this.props.onFetchMore();
+  }
+
   changeSelected (selected) {
     this.props.onSelect(selected);
   }
@@ -88,7 +93,7 @@ export default class TreeView extends React.Component {
   }
 
   render () {
-    const { components, metrics, breadcrumbs, metric, leakPeriod, selected, fetching } = this.props;
+    const { components, metrics, breadcrumbs, metric, leakPeriod, selected, total, fetching } = this.props;
     const { onSelectNext, onSelectPrevious } = this.props;
 
     const selectedIndex = components.indexOf(selected);
@@ -108,12 +113,18 @@ export default class TreeView extends React.Component {
           {!selected && (
               <div>
                 {(!fetching || components.length !== 0) ? (
-                    <ComponentsList
-                        components={components}
-                        metrics={metrics}
-                        selected={selected}
-                        metric={metric}
-                        onClick={this.handleClick.bind(this)}/>
+                    <div>
+                      <ComponentsList
+                          components={components}
+                          metrics={metrics}
+                          selected={selected}
+                          metric={metric}
+                          onClick={this.handleClick.bind(this)}/>
+                      <ListFooter
+                          count={components.length}
+                          total={total}
+                          loadMore={this.handleFetchMore.bind(this)}/>
+                    </div>
                 ) : (
                     <Spinner/>
                 )}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeViewContainer.js b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeViewContainer.js
index f21cc86f0c4..4900542ad24 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeViewContainer.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/TreeViewContainer.js
@@ -25,6 +25,7 @@ import {
     start,
     drilldown,
     useBreadcrumbs,
+    fetchMore,
     selectComponent,
     selectNext,
     selectPrevious
@@ -52,6 +53,7 @@ const mapDispatchToProps = dispatch => {
     onStart: (rootComponent, metric, periodIndex) => dispatch(start(rootComponent, metric, periodIndex)),
     onDrilldown: component => dispatch(drilldown(component)),
     onUseBreadcrumbs: component => dispatch(useBreadcrumbs(component)),
+    onFetchMore: () => dispatch(fetchMore()),
     onSelect: component => dispatch(selectComponent(component)),
     onSelectNext: component => dispatch(selectNext(component)),
     onSelectPrevious: component => dispatch(selectPrevious(component))
diff --git a/server/sonar-web/src/main/js/apps/component-measures/store/listViewActions.js b/server/sonar-web/src/main/js/apps/component-measures/store/listViewActions.js
index 18037ac3c68..8e61e53dd0a 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/store/listViewActions.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/store/listViewActions.js
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { getComponentTree } from '../../../api/components';
-import { enhanceWithMeasure, filterOutEmptyMeasures } from '../utils';
+import { enhanceWithMeasure } from '../utils';
 import { startFetching, stopFetching } from './statusActions';
 import complementary from '../config/complementary';
 
@@ -35,8 +35,8 @@ function getComplementary (metric) {
 
 function makeRequest (baseComponent, metric, options, periodIndex = 1) {
   const asc = metric.direction === 1;
-  const ps = 200;
-  const finalOptions = { asc, ps };
+  const ps = 100;
+  const finalOptions = { asc, ps, metricSortFilter: 'withMeasuresOnly' };
 
   if (metric.key.indexOf('new_') === 0) {
     Object.assign(options, {
@@ -59,7 +59,7 @@ function fetchLeaves (baseComponent, metric, pageIndex = 1, periodIndex = 1) {
   const options = { p: pageIndex };
 
   return makeRequest(baseComponent, metric, options, periodIndex).then(r => {
-    const nextComponents = filterOutEmptyMeasures(enhanceWithMeasure(r.components, metric.key, periodIndex));
+    const nextComponents = enhanceWithMeasure(r.components, metric.key, periodIndex);
 
     return {
       components: nextComponents,
@@ -94,6 +94,18 @@ export function fetchList (baseComponent, metric, periodIndex = 1) {
   };
 }
 
+export function fetchMore (periodIndex) {
+  return (dispatch, getState) => {
+    const { baseComponent, metric, pageIndex, components } = getState().list;
+    dispatch(startFetching());
+    return fetchLeaves(baseComponent, metric, pageIndex + 1, periodIndex).then(r => {
+      const nextComponents = [...components, ...r.components];
+      dispatch(updateStore({ ...r, components: nextComponents }));
+      dispatch(stopFetching());
+    });
+  };
+}
+
 /**
  * Select specified component from the list
  * @param component A component to select
diff --git a/server/sonar-web/src/main/js/apps/component-measures/store/treeViewActions.js b/server/sonar-web/src/main/js/apps/component-measures/store/treeViewActions.js
index 782ddfd7ebc..49cc3ff504d 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/store/treeViewActions.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/store/treeViewActions.js
@@ -20,7 +20,7 @@
 import initial from 'lodash/initial';
 
 import { getComponentTree } from '../../../api/components';
-import { filterOutEmptyMeasures, enhanceWithMeasure } from '../utils';
+import { enhanceWithMeasure } from '../utils';
 import { startFetching, stopFetching } from './statusActions';
 import complementary from '../config/complementary';
 
@@ -68,7 +68,7 @@ function getComplementary (metric) {
 function makeRequest (rootComponent, baseComponent, metric, options, periodIndex = 1) {
   const asc = metric.direction === 1;
   const ps = 100;
-  const finalOptions = { asc, ps };
+  const finalOptions = { asc, ps, metricSortFilter: 'withMeasuresOnly' };
 
   if (metric.key.indexOf('new_') === 0) {
     Object.assign(options, {
@@ -98,7 +98,7 @@ function fetchComponents (rootComponent, baseComponent, metric, pageIndex = 1, p
   const options = { p: pageIndex };
 
   return makeRequest(rootComponent, baseComponent, metric, options, periodIndex).then(r => {
-    const nextComponents = filterOutEmptyMeasures(enhanceWithMeasure(r.components, metric.key, periodIndex));
+    const nextComponents = enhanceWithMeasure(r.components, metric.key, periodIndex);
 
     return {
       baseComponent,
@@ -188,6 +188,18 @@ export function useBreadcrumbs (component) {
   };
 }
 
+export function fetchMore () {
+  return (dispatch, getState) => {
+    const { rootComponent, baseComponent, metric, pageIndex, components, periodIndex } = getState().tree;
+    dispatch(startFetching());
+    return fetchComponents(rootComponent, baseComponent, metric, pageIndex + 1, periodIndex).then(r => {
+      const nextComponents = [...components, ...r.components];
+      dispatch(updateStore({ ...r, components: nextComponents }));
+      dispatch(stopFetching());
+    });
+  };
+}
+
 /**
  * Select given component from the list
  * @param component