App logs

app/components/DataTable/DataTable.tsx

@@ -2,8 +2,8 @@ import { createStyles } from "@mantine/core"
 import { Table, Box } from "@pokt-foundation/pocket-blocks"
 import { DataTableBody } from "./DataTableBody"
 import { DataTablePagination } from "./DataTablePagination"
-import { DataTableProps, IdObj } from "~/components/DataTable/dataTable.d"
 import { usePagination } from "~/hooks/usePagination"
+import { DataTableProps, IdObj } from "~/types/table"
 
 const useTableStyles = createStyles((theme) => ({
   table: {
@@ -13,6 +13,12 @@ const useTableStyles = createStyles((theme) => ({
     "& thead tr th": {
       borderColor: "rgba(55,58,64, 0.5)",
     },
+    "& tbody tr:hover": {
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? "rgba(37,38,43,0.50) !important"
+          : "rgba(250,250,250,0.50) !important",
+    },
   },
 }))
 
@@ -22,6 +28,7 @@ export const DataTable = <T extends IdObj>({
   paginate,
   rowAsLink = false,
   searchTerm,
+  onRowClick,
 }: DataTableProps<T>) => {
   const { paginatedData, totalPages, page, handlePageChange } = usePagination({
     data,
@@ -33,7 +40,11 @@ export const DataTable = <T extends IdObj>({
 
   return (
     <Box>
-      <Table className={classes.table} verticalSpacing="xl">
+      <Table
+        className={classes.table}
+        highlightOnHover={!!onRowClick}
+        verticalSpacing="xl"
+      >
         {columns && (
           <thead>
             <tr>
@@ -44,7 +55,12 @@ export const DataTable = <T extends IdObj>({
           </thead>
         )}
 
-        <DataTableBody data={data} paginatedData={paginatedData} rowAsLink={rowAsLink} />
+        <DataTableBody
+          data={data}
+          paginatedData={paginatedData}
+          rowAsLink={rowAsLink}
+          onRowClick={onRowClick}
+        />
       </Table>
 
       {paginate && (

app/components/DataTable/DataTableBody.tsx

@@ -2,13 +2,19 @@ import { Text } from "@pokt-foundation/pocket-blocks"
 import { Link } from "@remix-run/react"
 import { TableBodyProps, TableDataArray } from "~/types/table"
 
-const renderTableCell = ([key, value]: TableDataArray) => (
-  <td key={key} {...value.cellProps}>
-    {typeof value === "object" ? value.element : <Text>{value}</Text>}
-  </td>
-)
+const renderTableCell = ([key, value]: TableDataArray) =>
+  key !== "rowSelectData" ? (
+    <td key={key} {...value.cellProps}>
+      {typeof value === "object" ? value.element : <Text>{value}</Text>}
+    </td>
+  ) : null
 
-export const DataTableBody = ({ paginatedData, rowAsLink, data }: TableBodyProps) => {
+export const DataTableBody = ({
+  paginatedData,
+  rowAsLink,
+  data,
+  onRowClick,
+}: TableBodyProps) => {
   return (
     <tbody>
       {paginatedData.length > 0 ? (
@@ -17,7 +23,11 @@ export const DataTableBody = ({ paginatedData, rowAsLink, data }: TableBodyProps
           const tableData = Object.entries(itemData)
 
           return (
-            <tr key={`${id}-${index}`}>
+            <tr
+              key={`${id}-${index}`}
+              style={{ ...(!!onRowClick && { cursor: "pointer" }) }}
+              onClick={() => onRowClick(item.rowSelectData)}
+            >
               {rowAsLink ? (
                 <Link
                   style={{

app/components/DataTable/DataTablePagination.tsx

@@ -7,7 +7,7 @@ export const DataTablePagination = ({
   onPageChange,
 }: TablePaginationProps) => {
   return (
-    <Group align="center" className="pokt-table-paginate" position="apart">
+    <Group align="center" position="center">
       <Pagination
         initialPage={page}
         mt={30}

app/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,43 @@
+import { Image, Text, Stack } from "@pokt-foundation/pocket-blocks"
+import { type ReactNode } from "react"
+
+type EmptyStateProps = {
+  title: string
+  subtitle: ReactNode
+  imgSrc: string
+  imgHeight: number
+  imgWidth: number
+  alt?: string
+  callToAction?: ReactNode
+}
+
+export const EmptyState = ({
+  title,
+  subtitle,
+  imgSrc,
+  imgHeight,
+  imgWidth,
+  alt,
+  callToAction,
+}: EmptyStateProps) => {
+  return (
+    <Stack align="center" justify="center" mt={120}>
+      <Image
+        withPlaceholder
+        alt={alt ? alt : "Empty state placeholder"}
+        height={imgHeight}
+        src={imgSrc}
+        width={imgWidth}
+      />
+      <Text fw={600} fz="xl">
+        {title}
+      </Text>
+      <Text fw={400} fz="sm" ta="center">
+        {subtitle}
+      </Text>
+      {callToAction ? callToAction : null}
+    </Stack>
+  )
+}
+
+export default EmptyState

app/routes/account.$accountId.$appId.logs/components/LogsSideDrawer/LogsSideDrawer.tsx

@@ -0,0 +1,82 @@
+import { Divider } from "@mantine/core"
+import { Card, Drawer, Group, Stack, Text } from "@pokt-foundation/pocket-blocks"
+import React from "react"
+import { TitledCard } from "~/components/TitledCard"
+import { Logs } from "~/models/dwh/sdk"
+import { dayjs } from "~/utils/dayjs"
+
+type LogsSideDrawerProps = {
+  logsItem?: Logs
+  onSideDrawerClose: () => void
+}
+
+const LogsSideDrawer = ({ logsItem, onSideDrawerClose }: LogsSideDrawerProps) => {
+  console.log({ logsItem })
+  const cardItems = [
+    {
+      label: "Date",
+      value: dayjs(logsItem?.ts).format("D MMMM, YYYY"),
+    },
+    {
+      label: "Time",
+      value: dayjs(logsItem?.ts).format("h:mm A"),
+    },
+    {
+      label: "Application ID",
+      value: logsItem?.portalApplicationId,
+    },
+    {
+      label: "Chain ID",
+      value: logsItem?.chainId,
+    },
+    {
+      label: "Supported method",
+      value: logsItem?.chainMethod,
+    },
+    {
+      label: "Error type",
+      value: logsItem?.errorType,
+    },
+    {
+      label: "Error name",
+      value: logsItem?.errorName,
+    },
+  ]
+
+  return (
+    <Drawer
+      opened={!!logsItem}
+      overlayColor="#000000"
+      overlayOpacity={0.5}
+      padding="sm"
+      position="right"
+      size={800}
+      onClose={onSideDrawerClose}
+    >
+      <Stack>
+        <TitledCard header={() => <Text weight={600}>Summary</Text>}>
+          <Card.Section p="md">
+            <Stack spacing={12}>
+              {cardItems.map(({ label, value }, index) => (
+                <React.Fragment key={`${label}-${index}`}>
+                  <Group position="apart" px={12}>
+                    <Text>{label}</Text> <Text>{value}</Text>
+                  </Group>
+                  {index !== cardItems.length - 1 && <Divider />}
+                </React.Fragment>
+              ))}
+            </Stack>
+          </Card.Section>
+        </TitledCard>
+
+        <TitledCard header={() => <Text weight={600}>Message</Text>}>
+          <Card.Section p="md">
+            <Text>{logsItem?.errorMessage}</Text>
+          </Card.Section>
+        </TitledCard>
+      </Stack>
+    </Drawer>
+  )
+}
+
+export default LogsSideDrawer

app/routes/account.$accountId.$appId.logs/components/LogsSideDrawer/index.ts

@@ -0,0 +1,3 @@
+import LogsSideDrawer from "./LogsSideDrawer"
+export * from "./LogsSideDrawer"
+export default LogsSideDrawer

app/routes/account.$accountId.$appId.logs/components/LogsTable/LogsTable.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react"
+import { DataTable } from "~/components/DataTable"
+import { Logs } from "~/models/dwh/sdk"
+import LogsSideDrawer from "~/routes/account.$accountId.$appId.logs/components/LogsSideDrawer"
+import { dayjs } from "~/utils/dayjs"
+
+type LogsTableProps = {
+  logs: Logs[]
+  searchTerm: string
+}
+
+const LogsTable = ({ logs, searchTerm }: LogsTableProps) => {
+  const [selectedLogsItem, setSelectedLogsItem] = useState<Logs | undefined>()
+
+  return (
+    <>
+      <LogsSideDrawer
+        logsItem={selectedLogsItem}
+        onSideDrawerClose={() => setSelectedLogsItem(undefined)}
+      />
+      <DataTable
+        columns={["Timestamp", "Method", "Chain ID", "Error type", "Error name"]}
+        data={logs.map((log) => {
+          return {
+            timestamp: {
+              element: dayjs(log.ts).format("D MMMM, YYYY h:mm A"),
+              value: log.ts,
+            },
+            method: {
+              element: log.chainMethod,
+              value: log.chainMethod,
+            },
+            chainId: {
+              element: log.chainId,
+              value: log.chainId,
+            },
+            errorType: {
+              element: log.errorType,
+              value: log.errorType,
+            },
+            errorName: {
+              element: log.errorName,
+              value: log.errorName,
+            },
+            rowSelectData: log,
+          }
+        })}
+        paginate={logs.length > 10 ? { perPage: 20 } : false}
+        searchTerm={searchTerm}
+        onRowClick={(logsItem) => setSelectedLogsItem(logsItem as unknown as Logs)}
+      />
+    </>
+  )
+}
+
+export default LogsTable

app/routes/account.$accountId.$appId.logs/components/LogsTable/index.ts

@@ -0,0 +1,3 @@
+import LogsTable from "./LogsTable"
+export * from "./LogsTable"
+export default LogsTable