Add theme and tx view (#22)

* Add fonts * Add logo. Move header to common layout * Add shadcn theme * Change mermaid theme * Add json tree viewer * Tweak txs table columns styles * Move tx heading to txdata * Add span parser for Send * Add SpanDetails * Fix overflow in intercepted route * Make header title h1 * Add operationName and startTime to parser * Make title heading a link * Fix heading link spanning all screen * Tweak toolbar height and alignment
confio · Oct 23, 2024 · cc3254d · cc3254d
1 parent 9319a24
commit cc3254d
Show file tree

Hide file tree

Showing 24 changed files with 334 additions and 107 deletions.
diff --git a/app/@span/(.)[...span]/page.tsx b/app/@span/(.)[...span]/page.tsx
@@ -15,10 +15,7 @@ export default function Tx({ params }: { params: { span: [string] } }) {
 
   return (
     <TxSheet>
-      <div>
-        <div>Transaction {txId}</div>
-        <TxData txId={txId} spanId={spanId} />
-      </div>
+      <TxData txId={txId} spanId={spanId} />
     </TxSheet>
   );
 }
diff --git a/app/[...span]/page.tsx b/app/[...span]/page.tsx
@@ -7,10 +7,5 @@ export default function Tx({
 }) {
   const [txId, spanId] = params.span;
 
-  return (
-    <div>
-      <div>Transaction {txId}</div>
-      <TxData txId={txId} spanId={spanId} />
-    </div>
-  );
+  return <TxData txId={txId} spanId={spanId} />;
 }
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -24,25 +24,25 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --background: 0 0% 9.02%;
+    --foreground: 187 0% 100%;
+    --card: 0 0% 12.94%;
+    --card-foreground: 187 0% 100%;
+    --popover: 0 0% 12.94%;
+    --popover-foreground: 187 24% 100%;
+    --primary: 244.09 0% 100%;
+    --primary-foreground: 187 0% 0%;
+    --secondary: 0 0% 20.39%;
+    --secondary-foreground: 7 0% 100%;
+    --muted: 0 0% 9.02%;
+    --muted-foreground: 0 0% 52.55%;
+    --accent: 244.09 100% 56.86%;
+    --accent-foreground: 7 0% 100%;
+    --destructive: 14.61 100% 45.1%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 20.39%;
+    --input: 0 0% 20.39%;
+    --ring: 244.09 100% 56.86%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
@@ -51,25 +51,25 @@
     --radius: 0.5rem;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --background: 0 0% 9.02%;
+    --foreground: 187 0% 100%;
+    --card: 0 0% 12.94%;
+    --card-foreground: 187 0% 100%;
+    --popover: 0 0% 12.94%;
+    --popover-foreground: 187 24% 100%;
+    --primary: 244.09 0% 100%;
+    --primary-foreground: 187 0% 0%;
+    --secondary: 0 0% 20.39%;
+    --secondary-foreground: 7 0% 100%;
+    --muted: 0 0% 9.02%;
+    --muted-foreground: 0 0% 52.55%;
+    --accent: 244.09 100% 56.86%;
+    --accent-foreground: 7 0% 100%;
+    --destructive: 14.61 100% 45.1%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 20.39%;
+    --input: 0 0% 20.39%;
+    --ring: 244.09 100% 56.86%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,14 +1,14 @@
+import { fontIceland, fontInter } from "@/lib/fonts";
+import { cn } from "@/lib/utils";
 import Providers from "@/providers";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import Image from "next/image";
 import { PropsWithChildren, ReactNode } from "react";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
   title: "CosmWasm Tracing UI",
-  description: "Generated by create next app",
+  icons: "/logo.svg",
 };
 
 type RootLayoutProps = PropsWithChildren & {
@@ -18,10 +18,28 @@ type RootLayoutProps = PropsWithChildren & {
 export default function RootLayout({ children, span }: RootLayoutProps) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={fontInter.className}>
         <Providers>
           <>
-            {children}
+            <div className="h-full flex-1 flex-col space-y-8 p-6 flex">
+              <a href="/" className="flex gap-4 items-center self-start">
+                <Image
+                  alt="Tracing logo"
+                  src="/logo.svg"
+                  width={40}
+                  height={40}
+                />
+                <h1
+                  className={cn(
+                    "text-3xl font-bold tracking-tight",
+                    fontIceland.className,
+                  )}
+                >
+                  CosmWasm Tracing UI
+                </h1>
+              </a>
+              {children}
+            </div>
             {span}
           </>
         </Providers>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,10 +1,5 @@
 import { TxsTable } from "@/components/txs-table";
 
 export default async function Txs() {
-  return (
-    <div className="h-full flex-1 flex-col space-y-8 p-8 flex">
-      <h2 className="text-2xl font-bold tracking-tight">CosmWasm Tracing UI</h2>
-      <TxsTable />
-    </div>
-  );
+  return <TxsTable />;
 }
diff --git a/components/data-table/data-table-row.tsx b/components/data-table/data-table-row.tsx
@@ -22,7 +22,11 @@ export function DataTableRow<TData>({
   return (
     <TableRow
       data-state={row.getIsSelected() && "selected"}
-      className={cn(rowLink && "hover:cursor-pointer")}
+      className={cn(
+        "bg-background hover:bg-secondary",
+        row.index % 2 !== 0 && "bg-card",
+        rowLink && "hover:cursor-pointer",
+      )}
       onClick={
         rowLink
           ? () => router.push(`${rowLink.url}${row.getValue(rowLink.field)}`)

diff --git a/components/data-table/data-table-view-options.tsx b/components/data-table/data-table-view-options.tsx
@@ -47,7 +47,6 @@ export function DataTableViewOptions<TData>({
           return (
             <DropdownMenuCheckboxItem
               key={column.id}
-              className="capitalize"
               checked={column.getIsVisible()}
               onCheckedChange={(value) => column.toggleVisibility(!!value)}
             >

diff --git a/components/data-table/index.tsx b/components/data-table/index.tsx
@@ -24,7 +24,7 @@ export function DataTable<TData>({
     <Table>
       <TableHeader>
         {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow key={headerGroup.id}>
+          <TableRow key={headerGroup.id} className="bg-black hover:bg-black">
             {headerGroup.headers.map((header) => {
               return (
                 <TableHead key={header.id} colSpan={header.colSpan}>

diff --git a/components/mermaid.tsx b/components/mermaid.tsx
@@ -11,12 +11,13 @@ mermaid.initialize({
   sequence: { mirrorActors: false },
   theme: "base",
   themeVariables: {
-    background: "#fff",
-    mainBkg: "#fff",
-    primaryColor: "#fff",
-    textColor: "#171717",
-    lineColor: "#171717",
-    actorBorder: "#171717",
+    background: "#171717",
+    mainBkg: "#171717",
+    primaryColor: "#171717",
+    textColor: "#fff",
+    lineColor: "#fff",
+    actorTextColor: "#fff",
+    actorBorder: "#fff",
   },
   themeCSS: `
     .actor {
@@ -103,7 +104,12 @@ export default function Mermaid({ chart, setSpanId }: MermaidProps) {
   }, [pathname, renderStage, setSpanId]);
 
   return renderStage !== "server" ? (
-    <div className={cn("mermaid", renderStage !== "mermaid" && "hidden")}>
+    <div
+      className={cn(
+        "mermaid flex justify-center",
+        renderStage !== "mermaid" && "hidden",
+      )}
+    >
       {chart}
     </div>
   ) : null;

diff --git a/components/tx-data/index.tsx b/components/tx-data/index.tsx
@@ -4,6 +4,8 @@ import { useTx } from "@/hooks/api";
 import { sequenceDiagramFromSpans } from "@/lib/mermaid";
 import { useState } from "react";
 import Mermaid from "../mermaid";
+import { Badge } from "../ui/badge";
+import SpanDetails from "./span-details";
 
 type TxDataProps = {
   txId: string;
@@ -22,19 +24,16 @@ export default function TxData({ txId, spanId }: TxDataProps) {
   const span = tx.spans.find((span) => span.spanId === spanIdToFind);
 
   return (
-    <div>
+    <div className="flex flex-col gap-10">
+      <a href={`/${txId}`}>
+        <Badge className="text-lg hover:underline hover:bg-primary">
+          Transaction {txId}
+        </Badge>
+      </a>
       {!isFetching ? (
         <Mermaid chart={mermaidChart} setSpanId={setSpanIdToFind} />
       ) : null}
-      {span ? (
-        <pre>
-          {JSON.stringify(
-            Object.fromEntries(Array.from(span.tags).sort()),
-            null,
-            2,
-          )}
-        </pre>
-      ) : null}
+      {span ? <SpanDetails span={span} /> : null}
     </div>
   );
 }
diff --git a/components/tx-data/span-details.tsx b/components/tx-data/span-details.tsx
@@ -0,0 +1,38 @@
+import JsonTreeViewer from "@/lib/json-tree";
+import { getParsedSpanMap } from "@/lib/parse-span";
+import { cn } from "@/lib/utils";
+import { Span } from "@/types/txs";
+import { Table, TableBody, TableCell, TableRow } from "../ui/table";
+
+type SpanDetailsProps = {
+  span: Span;
+};
+
+export default function SpanDetails({ span }: SpanDetailsProps) {
+  const parsedSpan = getParsedSpanMap(span);
+
+  return (
+    <div className="flex flex-col gap-10 w-full max-w-[900px] mx-auto">
+      <div className="flex flex-col gap-4">
+        <h2>Relevant operation info:</h2>
+        <Table>
+          <TableBody>
+            {Array.from(parsedSpan.entries()).map(([key, value], i) => (
+              <TableRow
+                key={i}
+                className={cn(i % 2 === 0 && "bg-card hover:bg-card")}
+              >
+                <TableCell>{key}</TableCell>
+                <TableCell>{value}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex flex-col gap-4">
+        <h2>Full operation info:</h2>
+        <JsonTreeViewer data={span} />
+      </div>
+    </div>
+  );
+}
diff --git a/components/tx-data/tx-sheet.tsx b/components/tx-data/tx-sheet.tsx
@@ -16,7 +16,9 @@ export default function TxSheet({ children }: PropsWithChildren) {
         }
       }}
     >
-      <SheetContent className="min-w-[80%]">{children}</SheetContent>
+      <SheetContent className="min-w-[80%] overflow-auto">
+        {children}
+      </SheetContent>
     </Sheet>
   );
 }
diff --git a/components/txs-table/index.tsx b/components/txs-table/index.tsx
@@ -52,11 +52,14 @@ export function TxsTable() {
         <DataTableColumnHeader column={column} title={tagKey} />
       ),
       cell: ({ row }) => (
-        <div className="max-w-[500px] truncate font-medium">
-          {(row.getValue("spans") as readonly Span[])
-            .map((span) => span.tags.get(tagKey))
-            .filter((span) => !!span)
-            .join(" | ")}
+        <div className="max-w-[400px] truncate font-medium">
+          {Array.from(
+            new Set(
+              (row.getValue("spans") as readonly Span[])
+                .map((span) => span.tags.get(tagKey))
+                .filter((span) => !!span),
+            ),
+          ).join(" | ")}
         </div>
       ),
       //NOTE - Don't UI filter, query API