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

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

@@ -1,60 +1,106 @@
-import React from 'react';
-import { Avatar, List, Progress, Typography } from 'antd';
+import React, { useEffect } from 'react';
+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) {
-  return (
-    <List
-      dataSource={list}
-      split={false}
-      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)',
-            padding: '4px 10px',
-            lineHeight: '1px'
-          }}
-          className={cn('rounded', selected === row.name ? 'bg-active-blue' : '')}
-        >
-          <List.Item.Meta
-            className="m-0"
-            avatar={<Avatar src={row.icon} />}
-            title={(
-              <div className="m-0">
-                <div className="flex justify-between m-0 p-0">
-                  <Typography.Text ellipsis={true}>{row.displayName}</Typography.Text>
-                  <Typography.Text type="secondary"> {row.sessionCount}</Typography.Text>
-                </div>
+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;
 
-                <Progress
-                  percent={row.progress}
-                  showInfo={false}
-                  strokeColor={{
-                    '0%': '#394EFF',
-                    '100%': '#394EFF'
-                  }}
-                  size={['small', 2]}
-                  style={{
-                    padding: '0 0px',
-                    margin: '0 0px',
-                    height: 4
-                  }}
-                />
-              </div>
-            )}
+  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={data}
+          split={false}
+          loading={loading}
+          renderItem={(row: any, index: number) => (
+            <List.Item
+              key={row.name}
+              onClick={(e) => onClickHandler(e, row)}
+              style={{
+                borderBottom: index === data.length - 1 ? 'none' : '1px dotted rgba(0, 0, 0, 0.05)',
+                padding: '4px 10px',
+                lineHeight: '1px'
+              }}
+              className={cn('rounded', selected === row.name ? 'bg-active-blue' : '')}
+            >
+              <List.Item.Meta
+                className="m-0"
+                avatar={<Avatar src={row.icon} />}
+                title={(
+                  <div className="m-0">
+                    <div className="flex justify-between m-0 p-0">
+                      <Typography.Text ellipsis={true}>{row.displayName}</Typography.Text>
+                      <Typography.Text type="secondary"> {row.sessionCount}</Typography.Text>
+                    </div>
+
+                    <Progress
+                      percent={row.progress}
+                      showInfo={false}
+                      strokeColor={{
+                        '0%': '#394EFF',
+                        '100%': '#394EFF'
+                      }}
+                      size={['small', 2]}
+                      style={{
+                        padding: '0 0px',
+                        margin: '0 0px',
+                        height: 4
+                      }}
+                    />
+                  </div>
+                )}
+              />
+            </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)}
           />
-        </List.Item>
+        </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,10 +41,15 @@ function SessionsBy(props: Props) {
   const showMore = (e: any) => {
     e.stopPropagation();
     openModal(
-      <CardSessionsByList list={data.values} onClickHandler={(e, item) => {
-        closeModal();
-        onClickHandler(null, item);
-      }} selected={selected} />, {
+      <CardSessionsByList
+        paginated={true}
+        metric={metric}
+        total={total}
+        list={data.values}
+        onClickHandler={(e, item) => {
+          closeModal();
+          onClickHandler(null, item);
+        }} selected={selected} />, {
         title: metric.name,
         width: 600
       });
@@ -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() {