diff --git a/app/@span/(.)[...span]/page.tsx b/app/@span/(.)[...span]/page.tsx index a6af618..7a8f681 100644 --- 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 ( -
-
Transaction {txId}
- -
+ ); } diff --git a/app/[...span]/page.tsx b/app/[...span]/page.tsx index f02b679..547a12c 100644 --- a/app/[...span]/page.tsx +++ b/app/[...span]/page.tsx @@ -7,10 +7,5 @@ export default function Tx({ }) { const [txId, spanId] = params.span; - return ( -
-
Transaction {txId}
- -
- ); + return ; } diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/globals.css b/app/globals.css index f4447b4..b5ad62b 100644 --- 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 index a58ebd1..943be3c 100644 --- 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 ( - + <> - {children} +
+ + Tracing logo +

+ CosmWasm Tracing UI +

+ + {children} +
{span} diff --git a/app/page.tsx b/app/page.tsx index 1b03188..24ada0c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,10 +1,5 @@ import { TxsTable } from "@/components/txs-table"; export default async function Txs() { - return ( -
-

CosmWasm Tracing UI

- -
- ); + return ; } diff --git a/components/data-table/data-table-row.tsx b/components/data-table/data-table-row.tsx index 697e2e3..6468469 100644 --- a/components/data-table/data-table-row.tsx +++ b/components/data-table/data-table-row.tsx @@ -22,7 +22,11 @@ export function DataTableRow({ return ( 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 index 77c23ba..cf5cfcf 100644 --- 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({ return ( column.toggleVisibility(!!value)} > diff --git a/components/data-table/index.tsx b/components/data-table/index.tsx index 0410890..faefa26 100644 --- a/components/data-table/index.tsx +++ b/components/data-table/index.tsx @@ -24,7 +24,7 @@ export function DataTable({ {table.getHeaderGroups().map((headerGroup) => ( - + {headerGroup.headers.map((header) => { return ( diff --git a/components/mermaid.tsx b/components/mermaid.tsx index a9c7c56..01f00ad 100644 --- 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" ? ( -
+
{chart}
) : null; diff --git a/components/tx-data/index.tsx b/components/tx-data/index.tsx index 6aa33b8..f4a48ee 100644 --- 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 ( -
+
+ + + Transaction {txId} + + {!isFetching ? ( ) : null} - {span ? ( - 
-          {JSON.stringify(
-            Object.fromEntries(Array.from(span.tags).sort()),
-            null,
-            2,
-          )}
-
- ) : null} + {span ? : null}
); } diff --git a/components/tx-data/span-details.tsx b/components/tx-data/span-details.tsx new file mode 100644 index 0000000..d2d4d3d --- /dev/null +++ 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 ( +
+
+

Relevant operation info:

+
+ + {Array.from(parsedSpan.entries()).map(([key, value], i) => ( + + {key} + {value} + + ))} + +
+ +
+

Full operation info:

+ +
+ + ); +} diff --git a/components/tx-data/tx-sheet.tsx b/components/tx-data/tx-sheet.tsx index a4e5e42..f2e42f9 100644 --- a/components/tx-data/tx-sheet.tsx +++ b/components/tx-data/tx-sheet.tsx @@ -16,7 +16,9 @@ export default function TxSheet({ children }: PropsWithChildren) { } }} > - {children} + + {children} + ); } diff --git a/components/txs-table/index.tsx b/components/txs-table/index.tsx index bb8d68f..4aa5013 100644 --- a/components/txs-table/index.tsx +++ b/components/txs-table/index.tsx @@ -52,11 +52,14 @@ export function TxsTable() { ), cell: ({ row }) => ( -
- {(row.getValue("spans") as readonly Span[]) - .map((span) => span.tags.get(tagKey)) - .filter((span) => !!span) - .join(" | ")} +
+ {Array.from( + new Set( + (row.getValue("spans") as readonly Span[]) + .map((span) => span.tags.get(tagKey)) + .filter((span) => !!span), + ), + ).join(" | ")}
), //NOTE - Don't UI filter, query API diff --git a/components/txs-table/txs-columns.tsx b/components/txs-table/txs-columns.tsx index ba65141..d3a8f51 100644 --- a/components/txs-table/txs-columns.tsx +++ b/components/txs-table/txs-columns.tsx @@ -11,10 +11,10 @@ export const txsColumns: ColumnDef[] = [ cell: ({ row }) => { const startDate = new Date(Number(row.getValue("startTime")) / 1000); return ( -
- {startDate.toLocaleTimeString() + - " - " + - startDate.toLocaleDateString()} +
+ {startDate.toLocaleTimeString()} +
+ {startDate.toLocaleDateString()}
); }, @@ -26,16 +26,21 @@ export const txsColumns: ColumnDef[] = [ header: ({ column }) => ( ), - cell: ({ row }) => ( -
- {row.getValue("traceId")} -
- ), + cell: ({ row }) => { + const traceId: string = row.getValue("traceId"); + return ( +
+ {traceId.slice(0, 4)} + {traceId.slice(4, 28)} + {traceId.slice(28)} +
+ ); + }, enableSorting: false, enableHiding: false, }, { - accessorKey: "spans", + accessorKey: "operationName", header: () => null, cell: () => null, //NOTE - Don't UI filter, query API @@ -43,7 +48,7 @@ export const txsColumns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "operationName", + accessorKey: "tags", header: () => null, cell: () => null, //NOTE - Don't UI filter, query API @@ -51,10 +56,9 @@ export const txsColumns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "tags", + accessorKey: "spans", header: () => null, cell: () => null, - //NOTE - Don't UI filter, query API filterFn: () => true, enableHiding: false, }, diff --git a/components/txs-table/txs-table-toolbar.tsx b/components/txs-table/txs-table-toolbar.tsx index d713b29..cad8fa0 100644 --- a/components/txs-table/txs-table-toolbar.tsx +++ b/components/txs-table/txs-table-toolbar.tsx @@ -49,8 +49,8 @@ export function DataTableToolbar({ table, }: DataTableToolbarProps) { return ( -
-
+
+