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

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

@@ -1,24 +1,54 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { Avatar, List, Progress, Typography } from 'antd';
+import { Avatar, List, Progress, Typography, Pagination } from 'antd';
 import cn from 'classnames';
+import { useStore } from '@/mstore';
+import { WEB_VITALS } from '@/constants/card';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
   list: any;
   selected?: any;
   onClickHandler?: (event: any, data: any) => void;
+  metric?: any;
+  total?: number;
+  paginated?: boolean;
 }
 
-function CardSessionsByList({ list, selected, onClickHandler = () => null }: Props) {
+function CardSessionsByList({ list, selected, paginated, onClickHandler = () => null, metric, total }: Props) {
+  const { dashboardStore, metricStore, sessionStore } = useStore();
+  const drillDownPeriod = dashboardStore.drillDownPeriod;
+  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;
+
+  useEffect(() => {
+    if (!metric) return;
+    const timestamps = drillDownPeriod.toTimestamps();
+    const payload = { ...metricParams, ...timestamps, ...metric?.toJson() };
+    setLoading(true);
+    dashboardStore.fetchMetricChartData({ ...metric, page }, payload, true, drillDownPeriod).then((res: any) => {
+      setData(res);
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [metric, page]);
+
   return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto">
         <List
-      dataSource={list}
+          dataSource={data}
           split={false}
+          loading={loading}
           renderItem={(row: any, index: number) => (
             <List.Item
               key={row.name}
               onClick={(e) => onClickHandler(e, row)}
               style={{
-            borderBottom: index === list.length - 1 ? 'none' : '1px dotted rgba(0, 0, 0, 0.05)',
+                borderBottom: index === data.length - 1 ? 'none' : '1px dotted rgba(0, 0, 0, 0.05)',
                 padding: '4px 10px',
                 lineHeight: '1px'
               }}
@@ -54,7 +84,23 @@ function CardSessionsByList({ list, selected, onClickHandler = () => null }: Pro
             </List.Item>
           )}
         />
+      </div>
+      {paginated && total && total > 20 && (
+        <div className="sticky bottom-0 bg-white py-2">
+          <Pagination
+            // showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
+            defaultCurrent={page}
+            total={total}
+            showQuickJumper
+            pageSize={20}
+            showSizeChanger={false}
+            onChange={(page) => dashboardStore.updateKey('metricsPage', page)}
+          />
+        </div>
+      )}
+
+    </div>
   );
 }
 
-export default CardSessionsByList;
+export default observer(CardSessionsByList);

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Button, Space } from 'antd';
 import { filtersMap } from 'Types/filter/newFilter';
-// import { Icon } from 'UI';
 import { Empty } from 'antd';
-import { Info } from 'lucide-react'
+import { Info } from 'lucide-react';
 import { ArrowRight } from 'lucide-react';
 import CardSessionsByList from 'Components/Dashboard/Widgets/CardSessionsByList';
 import { useModal } from 'Components/ModalContext';
@@ -18,7 +17,7 @@ interface Props {
 function SessionsBy(props: Props) {
   const { metric = {}, data = { values: [] }, onClick = () => null, isTemplate } = props;
   const [selected, setSelected] = React.useState<any>(null);
-  const total = data.values.length;
+  const total = data.count;
   const { openModal, closeModal } = useModal();
 
   const onClickHandler = (event: any, data: any) => {
@@ -42,7 +41,12 @@ function SessionsBy(props: Props) {
   const showMore = (e: any) => {
     e.stopPropagation();
     openModal(
-      <CardSessionsByList list={data.values} onClickHandler={(e, item) => {
+      <CardSessionsByList
+        paginated={true}
+        metric={metric}
+        total={total}
+        list={data.values}
+        onClickHandler={(e, item) => {
           closeModal();
           onClickHandler(null, item);
         }} selected={selected} />, {
@@ -58,7 +62,7 @@ function SessionsBy(props: Props) {
           image={null}
           style={{ minHeight: 220 }}
           className="flex flex-col items-center justify-center"
-          imageStyle={{ height: 0}}
+          imageStyle={{ height: 0 }}
           description={
             <div className="flex items-center gap-2 justify-center text-black">
               <Info size={14} />

frontend/app/mstore/dashboardStore.ts

@@ -68,6 +68,7 @@ export default class DashboardStore {
     const timeStamps = this.drillDownPeriod.toTimestamps();
     this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp);
     this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp);
+    this.updateKey('metricsPage', 1)
   }
 
   get filteredList() {