change(ui): paginate the data in table of cards show more modal

frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import { useStore } from '@/mstore';
 import { WEB_VITALS } from '@/constants/card';
 import { observer } from 'mobx-react-lite';
+import { metricService } from '@/services';
 
 interface Props {
   list: any;
@@ -20,21 +21,18 @@ function CardSessionsByList({ list, selected, paginated, onClickHandler = () =>
   const isOverviewWidget = metric?.metricType === WEB_VITALS;
   const params = { density: isOverviewWidget ? 7 : 70 };
   const metricParams = { ...params };
-  const [data, setData] = React.useState<any>(list);
   const [loading, setLoading] = React.useState(false);
-  const page = dashboardStore.metricsPage;
+  const data = paginated ? metric?.data[0]?.values : list;
 
-  useEffect(() => {
-    if (!metric) return;
+  const loadData = async (page: number) => {
     const timestamps = drillDownPeriod.toTimestamps();
     const payload = { ...metricParams, ...timestamps, ...metric?.toJson() };
+    const params = { ...drillDownPeriod, ...payload, key: metric.predefinedKey };
     setLoading(true);
-    dashboardStore.fetchMetricChartData({ ...metric, page }, payload, true, drillDownPeriod).then((res: any) => {
-      setData(res);
-    }).finally(() => {
-      setLoading(false);
-    });
-  }, [metric, page]);
+    const data = await metricService.getMetricChartData(metric, { ...params, page, limit: 20 }, false);
+    metric.setData(data, drillDownPeriod);
+    setLoading(false);
+  };
 
   return (
     <div className="flex flex-col h-full">
@@ -89,12 +87,15 @@ function CardSessionsByList({ list, selected, paginated, onClickHandler = () =>
         <div className="sticky bottom-0 bg-white py-2">
           <Pagination
             // showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
-            defaultCurrent={page}
+            defaultCurrent={metric.page}
             total={total}
             showQuickJumper
             pageSize={20}
             showSizeChanger={false}
-            onChange={(page) => dashboardStore.updateKey('metricsPage', page)}
+            onChange={(page) => {
+              metric.setPage(page);
+              void loadData(page);
+            }}
           />
         </div>
       )}

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx

@@ -6,6 +6,7 @@ import { Info } from 'lucide-react';
 import { ArrowRight } from 'lucide-react';
 import CardSessionsByList from 'Components/Dashboard/Widgets/CardSessionsByList';
 import { useModal } from 'Components/ModalContext';
+import Widget from '@/mstore/types/widget';
 
 interface Props {
   metric?: any;
@@ -19,6 +20,7 @@ function SessionsBy(props: Props) {
   const [selected, setSelected] = React.useState<any>(null);
   const total = data.count;
   const { openModal, closeModal } = useModal();
+  const modalMetric = React.useMemo(() => Object.assign(new Widget(), metric), [metric]);
 
   const onClickHandler = (event: any, data: any) => {
     const filters = Array<any>();
@@ -43,7 +45,7 @@ function SessionsBy(props: Props) {
     openModal(
       <CardSessionsByList
         paginated={true}
-        metric={metric}
+        metric={modalMetric}
         total={total}
         list={data.values}
         onClickHandler={(e, item) => {
@@ -72,10 +74,9 @@ function SessionsBy(props: Props) {
         />
       ) : (
         <div className="flex flex-col justify-between w-full" style={{ height: 220 }}>
-          {/* TODO - remove slice once the api pagination is fixed */}
-          <CardSessionsByList list={data.values.slice(0, 3)}
-                              selected={selected}
-                              onClickHandler={onClickHandler} />
+          {metric && <CardSessionsByList list={data.values.slice(0, 3)}
+                                         selected={selected}
+                                         onClickHandler={onClickHandler} />}
           {total > 3 && (
             <div className="flex">
               <Button type="link" onClick={showMore}>

frontend/app/mstore/types/widget.ts

@@ -289,6 +289,10 @@ export default class Widget {
         }) : [];
     };
 
+    setPage(page: number) {
+        this.page = page;
+    }
+
     setData(data: any, period: any) {
         const _data: any = {...data};