fix: improvements for activity view (#436)

Author: Adrinlol

ui/packages/ce/src/api/instances/getInstanceRetrieval.ts

@@ -6,12 +6,13 @@
  */
 
 import { request } from 'helpers/request'
+import { formatInstanceRetrieval } from '@postgres.ai/shared/types/api/entities/instanceRetrieval'
 
 export const getInstanceRetrieval = async () => {
   const response = await request('/instance/retrieval')
 
   return {
-    response: response.ok ? response : null,
+    response: response.ok ? formatInstanceRetrieval(await response.json()) : null,
     error: response.ok ? null : response,
   }
 }

ui/packages/shared/pages/Instance/Info/Retrieval/RetrievalTable/index.tsx

@@ -20,7 +20,7 @@ export const RetrievalTable = ({
     <Table>
       <TableHead>
         <TableRow>
-          <TableCell>Activity on the {activity}</TableCell>
+          <TableCell className={styles.tableSubtitle}>Activity on the {activity}</TableCell>
         </TableRow>
       </TableHead>
       <TableBody className={styles.tableBody}>
@@ -30,16 +30,20 @@ export const RetrievalTable = ({
               {Object.entries(item).map((val, index) => (
                 <TableRow key={index} hover className={styles.tableRow}>
                   <TableCell>
-                    {val[0]} : {val[1]}
+                    {val[0]}: {val[1]}
                   </TableCell>
                 </TableRow>
               ))}
             </div>
           ))
         ) : (
-          <TableRow className={styles.tableRow}>
-            <TableCell>No activity on the {activity}</TableCell>
-          </TableRow>
+          <TableBody className={styles.tableBody}>
+            <div>
+              <TableRow className={styles.tableRow}>
+                <TableCell>No activity on the {activity}</TableCell>
+              </TableRow>
+            </div>
+          </TableBody>
         )}
       </TableBody>
     </Table>

ui/packages/shared/pages/Instance/Info/Retrieval/RetrievalTable/styles.module.scss

@@ -12,11 +12,18 @@
   }
 
   div {
-    padding-bottom: 0.75rem;
+    padding: 0.75rem 0;
   }
 
   td {
     border-bottom: 0;
-    padding: 12px 18px;
+    padding: 0px 18px;
+    font-size: 13px;
+    font-family: 'Fira Code', monospace;   
   }
 }
+
+.tableSubtitle {
+  font-size: 15px;
+  font-weight: bold;
+}

ui/packages/shared/pages/Instance/stores/Main.ts

@@ -23,7 +23,7 @@ import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 import { dbSource } from 'types/api/entities/dbSource'
 import { GetFullConfig } from 'types/api/endpoints/getFullConfig'
 import { GetInstanceRetrieval } from 'types/api/endpoints/getInstanceRetrieval'
-import { InstanceRetrieval } from 'types/api/entities/instanceRetrieval'
+import { InstanceRetrievalType } from 'types/api/entities/instanceRetrieval'
 
 const POLLING_TIME = 2000
 
@@ -51,7 +51,7 @@ type Error = {
 
 export class MainStore {
   instance: Instance | null = null
-  instanceRetrieval: InstanceRetrieval | null = null
+  instanceRetrieval: InstanceRetrievalType | null = null
   config: Config | null = null
   fullConfig?: string
   instanceError: Error | null = null
@@ -108,7 +108,7 @@ export class MainStore {
     })
 
     if (response) 
-      this.instanceRetrieval = await response?.json()
+      this.instanceRetrieval = response
 
     if (error)
       this.instanceError = { message: await getTextFromUnknownApiError(error) }

ui/packages/shared/types/api/endpoints/getInstanceRetrieval.ts

@@ -1,4 +1,6 @@
+import { InstanceRetrievalType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval'
+
 export type GetInstanceRetrieval = (args: { instanceId: string }) => Promise<{
-  response: Response | null
+  response: InstanceRetrievalType | null
   error: Response | null
 }>

ui/packages/shared/types/api/entities/instanceRetrieval.ts

@@ -1,9 +1,9 @@
 export interface ActivityType {
   user?: string
   query?: string
-  duration?: string
-  wait_event_type?: string
-  wait_event?: string
+  duration?: number | string
+  waitEventType?: string
+  waitEvent?: string
 }
 
 export type InstanceRetrieval = {
@@ -18,3 +18,29 @@ export type InstanceRetrieval = {
     target: ActivityType[]
   }
 }
+
+const replaceSinglequote = (string?: string) => string?.replace(/'/g, '')
+
+const formatActivity = (activity: ActivityType[]) =>
+  activity?.map((item) => {
+    return {
+      user: replaceSinglequote(item.user),
+      query: replaceSinglequote(item.query),
+      duration: replaceSinglequote(`${item.duration}ms`),
+      'wait type/event': replaceSinglequote(
+        `${item.waitEventType}/${item.waitEvent}`,
+      ),
+    }
+  })
+
+export const formatInstanceRetrieval = (retrieval: InstanceRetrieval) => {
+  return {
+    ...retrieval,
+    activity: {
+      source: formatActivity(retrieval.activity?.source),
+      target: formatActivity(retrieval.activity?.target),
+    },
+  }
+}
+
+export type InstanceRetrievalType = ReturnType<typeof formatInstanceRetrieval>