ui: fetcher, better type mapping

frontend/app/components/DataManagement/Activity/EventDetailsModal.tsx

@@ -1,39 +1,61 @@
 import React from 'react'
 import { EventData } from './data/Event'
 import { Segmented, Input } from 'antd';
-import { X } from 'lucide-react';
+import { X, List, Braces, Files } from 'lucide-react';
+import copy from 'copy-to-clipboard'
 
 function EventDetailsModal({ ev, onClose }: { ev: EventData, onClose: () => void }) {
   const tabs = [
     {
       label: 'All Properties',
+      value: 'all',
     },
     {
       label: 'Custom Properties',
+      value: 'custom',
     },
     {
       label: 'Default Properties',
+      value: 'default',
     }
   ]
 
   const views = [
     {
-      label: 'icn1',
+      label: <List size={14} />,
       value: 'pretty',
     },
     {
-      label: 'icn2',
+      label: <Braces size={14} />,
       value: 'json',
     }
   ]
   const [query, setQuery] = React.useState('')
+  const [tab, setTab] = React.useState(tabs[0].value)
   const [view, setView] = React.useState(views[0].value)
-  const dataFields = { ...ev.$_defaultFields, ...ev.$_customFields }
+  const tabProps = {
+    all: { ...ev.$_defaultFields, ...ev.$_customFields },
+    custom: ev.$_customFields,
+    default: ev.$_defaultFields,
+  }
+  const dataFields = tabProps[tab]
   const fieldArr = Object.entries(dataFields)
-  const filteredArr = fieldArr.filter(([key, value]) => {
+  const filteredArr = view === 'json' ? [] : fieldArr.filter(([key, value]) => {
     const qReg = new RegExp(query, 'ig')
     return qReg.test(key) || qReg.test(value)
   })
+  const strProps = JSON.stringify({
+    event: ev.name,
+    properties: dataFields
+  }, null, 4)
+  const highlightedJson = view === 'pretty' ? '' : query ? strProps.replace(
+    new RegExp(query, 'ig'),
+    (match) => `<mark>${match}</mark>`
+  ) : strProps
+
+  const onCopy = () => {
+    copy(strProps)
+  }
 
   return (
     <div className={'h-screen w-full flex flex-col gap-4 p-4'}>
@@ -45,10 +67,13 @@ function EventDetailsModal({ ev, onClose }: { ev: EventData, onClose: () => void
       </div>
       <div className={'p-2 rounded-lg bg-active-blue flex items-center gap-2'}>
         <div>icn</div>
-        <div>{ev.name}</div>
-        <div className={'link ml-auto'}>Play Session</div>
+        <div className={'font-semibold'}>{ev.name}</div>
+        <div className={'link ml-auto flex gap-1 items-center'}>
+          <span>Play Session</span>
+          <Triangle size={10} color={'blue'} />
+        </div>
       </div>
-      <Segmented options={tabs} />
+      <Segmented options={tabs} value={tab} onChange={(v) => setTab(v)} />
       <div className={'flex items-center gap-2'}>
         <Segmented
           value={view}
@@ -63,16 +88,44 @@ function EventDetailsModal({ ev, onClose }: { ev: EventData, onClose: () => void
           placeholder={'Find Property'}
         />
       </div>
-      <div className={'overflow-y-auto flex flex-col gap-2'} style={{ height: 'calc(100% - 200px)' }}>
-      {filteredArr.map(([key, value]) => (
-        <div key={key} className={'flex items-center border-b'}>
-          <div className={'flex-1'}>{key}</div>
-          <div className={'flex-1 text-disabled-text'}>{value}</div>
+      {view === 'pretty' ?
+        <div
+          className={'overflow-y-auto flex flex-col gap-2'}
+          style={{ height: 'calc(100% - 200px)' }}
+        >
+          {filteredArr.map(([key, value]) => (
+            <div key={key} className={'flex items-center border-b'}>
+              <div className={'flex-1'}>{key}</div>
+              <div className={'flex-1 text-disabled-text'}>{value}</div>
+            </div>
+          ))}
         </div>
-      ))}
-      </div>
+      : (
+        <div className={'relative'}>
+          <div onClick={onCopy} className={'absolute right-0 top-0 cursor-pointer hover:text-blue'}>
+            <Files size={16} />
+          </div>
+        <pre dangerouslySetInnerHTML={{ __html: highlightedJson }} />
+        </div>
+       )}
     </div>
-  )
+  );
+}
+
+function Triangle({ size = 16, color = 'currentColor' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill={color}
+      className={'rotate-90'}
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 2L1 21h22L12 2z" />
+    </svg>
+  );
 }
 
 export default EventDetailsModal;

frontend/app/components/DataManagement/Activity/Page.tsx

@@ -7,9 +7,44 @@ import { Pagination } from 'UI';
 import Event from './data/Event';
 import { useModal } from 'App/components/Modal';
 import EventDetailsModal from "./EventDetailsModal";
+import { useQuery } from '@tanstack/react-query';
+
+const limit = 100;
+
+const fetcher = async (page: number): Promise<{ list: any[], total: number }> => {
+  const total = 3000;
+  return new Promise((resolve) => {
+    const testEv = new Event({
+      name: 'test ev',
+      time: Date.now(),
+      defaultFields: { userId: '123', userCity: 'NY', userEnvironment: 'Mac OS' },
+      customFields: {},
+      isAutoCapture: false,
+      sessionId: '123123'
+    });
+    const testAutoEv = new Event({
+      name: 'auto test ev',
+      time: Date.now(),
+      defaultFields: { userId: '123', userCity: 'NY', userEnvironment: 'Mac OS' },
+      customFields: {},
+      isAutoCapture: true,
+      sessionId: '123123'
+    });
+    const list = [testEv.toData(), testAutoEv.toData()];
+
+    resolve({ list, total });
+  })
+}
 
 function ActivityPage() {
+  const [page, setPage] = React.useState(1);
   const [hiddenCols, setHiddenCols] = React.useState([]);
+  const { data, isPending } = useQuery({
+    queryKey: ['data', 'events', page],
+    queryFn: () => fetcher(page),
+    initialData: { list: [], total: 0 },
+  });
+  const { list, total } = data;
   const appliedFilter = { filters: [] };
   const onAddFilter = () => {};
   const onUpdateFilter = () => {};
@@ -92,28 +127,12 @@ function ActivityPage() {
     hidden: hiddenCols.includes(col.key),
   }));
 
-  const page = 1;
-  const limit = 100;
-  const total = 3000;
-  const testEv = new Event(
-    'test ev',
-    Date.now(),
-    { userId: '123', userCity: 'NY', userEnvironment: 'Mac OS' },
-    {},
-    false
-  );
-  const testAutoEv = new Event(
-    'test auto ev',
-    Date.now(),
-    { userId: '123', userCity: 'NY', userEnvironment: 'Mac OS' },
-    {},
-    true
-  );
-  const list = [testEv.toData(), testAutoEv.toData()];
-  const onPageChange = () => {};
+  const onPageChange = (page: number) => {
+    setPage(page);
+  };
 
   const onItemClick = (ev: Event) => {
-    showModal(<EventDetailsModal ev={ev} onClose={hideModal} />, { width: 400, right: true });
+    showModal(<EventDetailsModal ev={ev} onClose={hideModal} />, { width: 420, right: true });
   }
   return (
     <div
@@ -161,6 +180,7 @@ function ActivityPage() {
           All users activity
         </div>
         <Table
+          loading={isPending}
           onRow={(record, index) => ({
             onClick: (event) => onItemClick(record)
           })}

frontend/app/components/DataManagement/Activity/data/Event.ts

@@ -22,14 +22,31 @@ export default class Event {
   }
   customFields?: Record<string,any> = undefined;
 
-  readonly $_isAutoCapture;
+  readonly $_isAutoCapture: boolean;
+  readonly $_sessionId: string;
 
-  constructor(name: string, time: string, defaultFields: DefaultFields, customFields?: Record<string, any>, isAutoCapture = false) {
+  constructor(
+    {
+      name,
+      time,
+      defaultFields,
+      customFields,
+      sessionId,
+      isAutoCapture,
+}: {
+      name: string;
+      time: string;
+      defaultFields: DefaultFields;
+      customFields?: Record<string, any>;
+      sessionId: string;
+      isAutoCapture: boolean;
+    }) {
     this.name = name;
     this.time = time;
     this.defaultFields = defaultFields;
     this.customFields = customFields;
     this.$_isAutoCapture = isAutoCapture;
+    this.$_sessionId = sessionId;
   }
 
   toJSON() {