Trace inspector (#468)

* trace inspector * make it a table * fix
vilterp · Jun 4, 2024 · e9a2582 · e9a2582
1 parent ba4662f
commit e9a2582
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 24 deletions.
diff --git a/apps/actors/systems/kvSync/client.ts b/apps/actors/systems/kvSync/client.ts
@@ -70,6 +70,7 @@ export type TransactionState =
 
 export type TransactionRecord = {
   invocation: MutationInvocation;
+  clientTrace: Trace;
   state: TransactionState;
 };
 
@@ -168,6 +169,7 @@ function runMutationOnClient(
     console.warn("CLIENT: txn aborted client side:", resVal, trace);
     const state2 = addTransaction(state1, txnID, {
       invocation,
+      clientTrace: trace,
       state: {
         type: "Aborted",
         // TODO: pretty print values
@@ -182,6 +184,7 @@ function runMutationOnClient(
 
   const state2 = addTransaction(state1, txnID, {
     invocation,
+    clientTrace: trace,
     state: { type: "Pending", sentTime: state.time },
   });
 
@@ -227,6 +230,7 @@ function getNewTransactions(metadata: TransactionMetadata): {
   return mapObj(
     metadata,
     (txnid, metadata): TransactionRecord => ({
+      clientTrace: [],
       state: {
         type: "Committed",
         serverTimestamp: metadata.serverTimestamp,

diff --git a/apps/actors/systems/kvSync/examples/common/table.tsx b/apps/actors/systems/kvSync/examples/common/table.tsx
@@ -9,7 +9,7 @@ type ColumnSpec<T> = {
 export function Table<T>(props: {
   data: T[];
   columns: ColumnSpec<T>[];
-  getKey: (row: T) => string;
+  getKey: (row: T, idx: number) => string;
 }) {
   return (
     <table style={{ borderCollapse: "collapse", width: "100%" }}>
@@ -41,8 +41,8 @@ export function Table<T>(props: {
             </td>
           </tr>
         ) : null}
-        {props.data.map((row) => (
-          <tr key={props.getKey(row)}>
+        {props.data.map((row, rowIdx) => (
+          <tr key={props.getKey(row, rowIdx)}>
             {props.columns.map((colSpec, colIdx) => (
               <td
                 key={colSpec.name}

diff --git a/apps/actors/systems/kvSync/examples/common/txnList.tsx b/apps/actors/systems/kvSync/examples/common/txnList.tsx
@@ -1,31 +1,69 @@
-import React from "react";
+import React, { useState } from "react";
 import { Client } from "../../hooks";
 import { TxnState } from "./txnState";
 import { prettyPrintInvocation } from "./pretty";
 import { TransactionRecord, TransactionState } from "../../client";
 import { Table } from "./table";
+import { TraceOp } from "../../types";
 
 export function TransactionList(props: { client: Client }) {
+  const [selectedTxnID, setSelectedTxnID] = useState<string | null>(null);
+
   return (
-    <Table<[string, TransactionRecord]>
-      columns={[
-        { name: "ID", render: ([id, txn]) => id },
-        {
-          name: "Invocation",
-          render: ([id, txn]) => (
-            <code>{prettyPrintInvocation(txn.invocation)}</code>
-          ),
-        },
-        {
-          name: "Status",
-          render: ([id, txn]) => <TxnState client={props.client} txnID={id} />,
-        },
-      ]}
-      data={Object.entries(props.client.state.transactions)
-        .sort(comparator)
-        .reverse()}
-      getKey={([id, txn]) => id}
-    />
+    <>
+      <Table<[string, TransactionRecord]>
+        columns={[
+          {
+            name: "ID",
+            render: ([id, txn]) => (
+              // TODO: row click
+              <span onClick={() => setSelectedTxnID(id)}>{id}</span>
+            ),
+          },
+          {
+            name: "Invocation",
+            render: ([id, txn]) => (
+              <code>{prettyPrintInvocation(txn.invocation)}</code>
+            ),
+          },
+          {
+            name: "Status",
+            render: ([id, txn]) => (
+              <TxnState client={props.client} txnID={id} />
+            ),
+          },
+        ]}
+        data={Object.entries(props.client.state.transactions)
+          .sort(comparator)
+          .reverse()}
+        getKey={([id, txn]) => id}
+      />
+      {selectedTxnID !== null ? (
+        <>
+          <h5>Trace</h5>
+          <Table<TraceOp>
+            data={props.client.state.transactions[selectedTxnID].clientTrace}
+            getKey={(_, idx) => idx.toString()}
+            columns={[
+              { name: "Op", render: (op) => op.type },
+              { name: "Key", render: (op) => op.key },
+              {
+                name: "Value",
+                render: (op) =>
+                  op.type === "Write" ? (
+                    <code>{JSON.stringify(op.value)}</code>
+                  ) : null,
+              },
+              {
+                name: "TxnID",
+                render: (op) =>
+                  op.type === "Read" ? <code>{op.transactionID}</code> : null,
+              },
+            ]}
+          />
+        </>
+      ) : null}
+    </>
   );
 }
 

diff --git a/apps/actors/systems/kvSync/types.ts b/apps/actors/systems/kvSync/types.ts
@@ -32,7 +32,7 @@ export type LiveQueryRequest = {
 
 export type Trace = TraceOp[];
 
-type TraceOp = ReadOp | WriteOp;
+export type TraceOp = ReadOp | WriteOp;
 
 export type ReadOp = { type: "Read"; key: string; transactionID: string };