diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
index 35e0e0af4..3481236fe 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
@@ -19,6 +19,7 @@ function CardIssues() {
const [loading, setLoading] = useState(false);
const widget: any = useObserver(() => metricStore.instance);
const isMounted = useIsMounted();
+ const pageSize = 5;
const { showModal } = useModal();
const fetchIssues = async (filter: any) => {
@@ -41,6 +42,8 @@ function CardIssues() {
const newFilter = {
...filter,
+ limit: pageSize,
+ page: metricStore.sessionsPage,
series: filter.series.map(mapSeries)
};
@@ -66,21 +69,20 @@ function CardIssues() {
useEffect(() => {
const newPayload = {
...widget,
- page: metricStore.sessionsPage,
- limit: metricStore.sessionsPageSize,
+ page: filter.page,
+ limit: filter.limit,
filters: filter.filters
};
- console.log('drillDownPeriod', newPayload);
debounceRequest(newPayload);
- }, [drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage]);
+ }, [drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage, filter.page]);
return useObserver(() => (
Issues
- {/*
*/}
- {/* */}
- {/*
*/}
+
+
+
@@ -94,16 +96,22 @@ function CardIssues() {
+
- Showing {Math.min(data.issues.length, metricStore.sessionsPageSize)} out of{' '}
- {data.total} Issues
+ {data.total && (
+ <>
+ Showing < span className='font-medium'>{(filter.page - 1) * pageSize + 1} to{' '}
+ {(filter.page - 1) * pageSize + pageSize} of{' '}
+ {data.total} issues.
+ >
+ )}
+
metricStore.updateKey('sessionsPage', page)}
- limit={metricStore.sessionsPageSize}
+ page={filter.page}
+ totalPages={Math.ceil(data.total / pageSize)}
+ onPageChange={(page: any) => filter.updateKey('page', page)}
+ limit={pageSize}
debounceRequest={500}
/>
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index f62adfed3..59ff4780a 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -222,7 +222,7 @@ function WidgetChart(props: Props) {
height={props.isPreview ? 500 : 240}
data={data}
onChartClick={(filters: any) => {
- dashboardStore.drillDownFilter.merge({ filters });
+ dashboardStore.drillDownFilter.merge({ filters, page: 1 });
}} />;
}
diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts
index 1bd5d9401..1883ce70a 100644
--- a/frontend/app/mstore/types/filter.ts
+++ b/frontend/app/mstore/types/filter.ts
@@ -13,6 +13,8 @@ export default class Filter {
startTimestamp: number = 0
endTimestamp: number = 0
eventsHeader: string = "EVENTS"
+ page: number = 1
+ limit: number = 10
constructor() {
makeAutoObservable(this, {
diff --git a/frontend/app/services/MetricService.ts b/frontend/app/services/MetricService.ts
index 28da47249..db97ec27c 100644
--- a/frontend/app/services/MetricService.ts
+++ b/frontend/app/services/MetricService.ts
@@ -110,7 +110,7 @@ export default class MetricService {
if (filter.metricType === USER_PATH) {
const widget = new Widget().fromJson(filter);
const drillDownFilter = filter.filters;
- filter = widget.toJson();
+ filter = { ...widget.toJson(), page: filter.page };
filter.filters = drillDownFilter;
}