diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js
index 10db59c5b..e44610e1b 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionList.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionList.js
@@ -1,13 +1,14 @@
import { connect } from 'react-redux';
-import { Loader, NoContent, Button, LoadMoreButton } from 'UI';
+import { Loader, NoContent, Button, LoadMoreButton, Pagination } from 'UI';
import { applyFilter, addAttribute, addEvent } from 'Duck/filters';
-import { fetchSessions, addFilterByKeyAndValue } from 'Duck/search';
+import { fetchSessions, addFilterByKeyAndValue, updateCurrentPage } from 'Duck/search';
import SessionItem from 'Shared/SessionItem';
import SessionListHeader from './SessionListHeader';
import { FilterKey } from 'Types/filter/filterType';
+import { sliceListPerPage } from 'App/utils';
const ALL = 'all';
-const PER_PAGE = 10;
+const PER_PAGE = 5;
const AUTOREFRESH_INTERVAL = 3 * 60 * 1000;
var timeoutId;
@@ -20,12 +21,14 @@ var timeoutId;
total: state.getIn([ 'sessions', 'total' ]),
filters: state.getIn([ 'search', 'instance', 'filters' ]),
metaList: state.getIn(['customFields', 'list']).map(i => i.key),
+ currentPage: state.getIn([ 'search', 'currentPage' ]),
}), {
applyFilter,
addAttribute,
addEvent,
fetchSessions,
addFilterByKeyAndValue,
+ updateCurrentPage,
})
export default class SessionList extends React.PureComponent {
state = {
@@ -76,6 +79,8 @@ export default class SessionList extends React.PureComponent {
clearTimeout(timeoutId)
}
+
+
renderActiveTabContent(list) {
const {
loading,
@@ -84,6 +89,7 @@ export default class SessionList extends React.PureComponent {
allList,
activeTab,
metaList,
+ currentPage,
} = this.props;
const _filterKeys = filters.map(i => i.key);
const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
@@ -93,28 +99,28 @@ export default class SessionList extends React.PureComponent {
return (
- Please try changing your search parameters.
- {allList.size > 0 && (
-
- However, we found other sessions based on your search parameters.
-
-
+
+
Please try changing your search parameters.
+ {allList.size > 0 && (
+
+ However, we found other sessions based on your search parameters.
+
+
+
-
- )}
-
+ )}
+
}
>
- { list.take(displayedCount).map(session => (
+ { sliceListPerPage(list, currentPage, PER_PAGE).map(session => (
))}
- this.props.updateCurrentPage(page)}
+ />
+ {/* Try being a bit more specific by setting a specific time frame or simply use different filters
}
- />
+ /> */}
);
}
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index c2f3c1b3b..16aa8772c 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -12,7 +12,7 @@ import { addFilterByKeyAndValue, updateCurrentPage, updateSort } from 'Duck/live
import DropdownPlain from 'Shared/DropdownPlain';
import SortOrderButton from 'Shared/SortOrderButton';
import { TimezoneDropdown } from 'UI';
-import { capitalize } from 'App/utils';
+import { capitalize, sliceListPerPage } from 'App/utils';
import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
const AUTOREFRESH_INTERVAL = .5 * 60 * 1000
@@ -107,12 +107,6 @@ function LiveSessionList(props: Props) {
}, AUTOREFRESH_INTERVAL);
}
- const sliceListPerPage = (list, page) => {
- const start = page * PER_PAGE;
- const end = start + PER_PAGE;
- return list.slice(start, end);
- }
-
return (
@@ -140,13 +134,7 @@ function LiveSessionList(props: Props) {
props.updateSort({ order: state })} sortOrder={sort.order} />
-
-
props.updateCurrentPage(page)}
- />
-
+
))}
- {/* */}
- {/* null}
- /> */}
+
+
props.updateCurrentPage(page)}
+ />
+
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
index 3d15ae950..15011dafb 100644
--- a/frontend/app/duck/search.js
+++ b/frontend/app/duck/search.js
@@ -28,6 +28,7 @@ const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
const UPDATE = `${name}/UPDATE`;
const APPLY = `${name}/APPLY`;
const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
+const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`;
const REFRESH_FILTER_OPTIONS = 'filters/REFRESH_FILTER_OPTIONS';
@@ -49,6 +50,7 @@ const initialState = Map({
instance: new Filter({ filters: [] }),
savedSearch: new SavedFilter({}),
filterSearchList: {},
+ currentPage: 1,
});
// Metric - Series - [] - filters
@@ -83,6 +85,8 @@ function reducer(state = initialState, action = {}) {
return state.set('savedSearch', action.filter);
case EDIT_SAVED_SEARCH:
return state.mergeIn([ 'savedSearch' ], action.instance);
+ case UPDATE_CURRENT_PAGE:
+ return state.set('currentPage', action.page);
}
return state;
}
@@ -122,6 +126,8 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat
dispatch(actionCreator(...args));
const filter = getState().getIn([ 'search', 'instance']).toData();
filter.filters = filter.filters.map(filterMap);
+ filter.limit = 5;
+ filter.page = getState().getIn([ 'search', 'currentPage']);
return isRoute(ERRORS_ROUTE, window.location.pathname)
? dispatch(fetchErrorsList(filter))
@@ -268,4 +274,11 @@ export const refreshFilterOptions = () => {
return {
type: REFRESH_FILTER_OPTIONS
}
+}
+
+export function updateCurrentPage(page) {
+ return {
+ type: UPDATE_CURRENT_PAGE,
+ page,
+ };
}
\ No newline at end of file
diff --git a/frontend/app/duck/sessions.js b/frontend/app/duck/sessions.js
index f3df333c7..7eedce57a 100644
--- a/frontend/app/duck/sessions.js
+++ b/frontend/app/duck/sessions.js
@@ -60,6 +60,7 @@ const initialState = Map({
funnelPage: Map(),
timelinePointer: null,
sessionPath: '',
+ total: 0,
});
const reducer = (state = initialState, action = {}) => {
@@ -129,6 +130,7 @@ const reducer = (state = initialState, action = {}) => {
.set('favoriteList', list.filter(({ favorite }) => favorite))
.set('total', total)
.set('keyMap', keyMap)
+ .set('total', total)
.set('wdTypeCount', wdTypeCount);
case SET_AUTOPLAY_VALUES: {
const sessionIds = state.get('sessionIds')
diff --git a/frontend/app/utils.js b/frontend/app/utils.js
index ca7c19b4f..5ea05633c 100644
--- a/frontend/app/utils.js
+++ b/frontend/app/utils.js
@@ -232,4 +232,10 @@ export const isGreaterOrEqualVersion = (version, compareTo) => {
const [major, minor, patch] = version.split("-")[0].split('.');
const [majorC, minorC, patchC] = compareTo.split("-")[0].split('.');
return (major > majorC) || (major === majorC && minor > minorC) || (major === majorC && minor === minorC && patch >= patchC);
+}
+
+export const sliceListPerPage = (list, page, perPage = 10) => {
+ const start = page * perPage;
+ const end = start + perPage;
+ return list.slice(start, end);
}
\ No newline at end of file