Handle errors on count logs api

src/components/scroll-paginated-list/ScrollPaginatedList.js

@@ -4,6 +4,7 @@ import InfiniteScroll from "react-infinite-scroller";
 import { throttle } from "lodash";
 
 import { ScrollContext } from "src/contexts/ScrollContext";
+import { Component as ErrorComponent } from "src/components/error";
 
 export class ScrollPaginatedList extends Component {
   constructor(props) {
@@ -28,6 +29,9 @@ export class ScrollPaginatedList extends Component {
     const List = this.props.List;
     const ListWrapper = this.props.ListWrapper;
     const pages = [];
+    if (this.props.itemsCountError) {
+      return <ErrorComponent>{this.props.itemsCountError.message}</ErrorComponent>;
+    }
     for (let i = 1; i < this.state.currentPage + 1; i++) {
       const listId = `paginated-list-${i}`;
       pages.push(
@@ -70,6 +74,7 @@ ScrollPaginatedList.propTypes = {
   ListWrapper: PropTypes.func,
   extraFilter: PropTypes.any,
   itemsCount: PropTypes.any,
+  itemsCountError: PropTypes.instanceOf(Error),
   itemsCountLoading: PropTypes.bool,
   pageSize: PropTypes.number
 };

src/modules/abilities/components/ability/Ability.js

@@ -24,7 +24,8 @@ export const Ability = ({
   baseUrl,
   logsPageSize,
   logsCount,
-  logsCountLoading
+  logsCountLoading,
+  logsCountError
 }) => {
   const subsection =
     display === ACTIVITY ? (
@@ -34,6 +35,7 @@ export const Ability = ({
         pageSize={logsPageSize}
         itemsCount={logsCount}
         itemsCountLoading={logsCountLoading}
+        itemsCountError={logsCountError}
         extraFilter={{ abilityId }}
       />
     ) : (
@@ -84,6 +86,7 @@ Ability.propTypes = {
   display: PropTypes.oneOf([ACTIVITY, INFO]),
   infoUrl: PropTypes.string,
   logsCount: PropTypes.any,
+  logsCountError: PropTypes.instanceOf(Error),
   logsCountLoading: PropTypes.bool,
   logsPageSize: PropTypes.number
 };

src/modules/abilities/views/Ability.js

@@ -15,6 +15,7 @@ export const mapDataSourceToProps = ({ id }) => {
     logsPageSize: 10,
     logsCount: getLogsCount.value,
     logsCountLoading: getLogsCount.loading,
+    logsCountError: getLogsCount.error,
     abilityId: id,
     ability: ability.getters.value,
     abilityError: ability.getters.error,

src/modules/activity/components/activity/Activity.js

@@ -6,7 +6,7 @@ import { Component as Container } from "src/components/container-content";
 import { Component as Breadcrumbs } from "src/components/breadcrumbs";
 import { Component as LogsListTable } from "src/components/logs-list-table";
 
-export const Activity = ({ LogsList, pageSize, logsCount, logsCountLoading }) => {
+export const Activity = ({ LogsList, pageSize, logsCount, logsCountError, logsCountLoading }) => {
   return (
     <Container background={true}>
       <Container.Header>
@@ -19,6 +19,7 @@ export const Activity = ({ LogsList, pageSize, logsCount, logsCountLoading }) =>
           pageSize={pageSize}
           itemsCount={logsCount}
           itemsCountLoading={logsCountLoading}
+          itemsCountError={logsCountError}
         />
       </Container.Content>
     </Container>
@@ -28,6 +29,7 @@ export const Activity = ({ LogsList, pageSize, logsCount, logsCountLoading }) =>
 Activity.propTypes = {
   LogsList: PropTypes.func,
   logsCount: PropTypes.any,
+  logsCountError: PropTypes.instanceOf(Error),
   logsCountLoading: PropTypes.bool,
   pageSize: PropTypes.number
 };

src/modules/activity/views/Activity.js

@@ -11,7 +11,8 @@ export const mapDataSourceToProps = () => {
     LogsList: Logs,
     pageSize: 10,
     logsCount: getLogsCount.value,
-    logsCountLoading: getLogsCount.loading
+    logsCountLoading: getLogsCount.loading,
+    logsCountError: getLogsCount.error
   };
 };