diff --git a/app/@span/(.)[...span]/page.tsx b/app/@span/(.)[...span]/page.tsx new file mode 100644 index 0000000..e58d055 --- /dev/null +++ b/app/@span/(.)[...span]/page.tsx @@ -0,0 +1,17 @@ +import TxData from "@/components/tx-data"; +import { Sheet, SheetContent } from "@/components/ui/sheet"; + +export default function Tx({ params }: { params: { span: string[] } }) { + const [txId, spanId] = params.span; + + return ( + + +
+
Transaction {txId}
+ +
+ + + ); +} diff --git a/app/@span/default.tsx b/app/@span/default.tsx new file mode 100644 index 0000000..6ddf1b7 --- /dev/null +++ b/app/@span/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null; +} diff --git a/app/txs/[...span]/page.tsx b/app/[...span]/page.tsx similarity index 100% rename from app/txs/[...span]/page.tsx rename to app/[...span]/page.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 117bc1a..a58ebd1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,7 @@ import Providers from "@/providers"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import { PropsWithChildren } from "react"; +import { PropsWithChildren, ReactNode } from "react"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); @@ -11,11 +11,20 @@ export const metadata: Metadata = { description: "Generated by create next app", }; -export default function RootLayout({ children }: PropsWithChildren) { +type RootLayoutProps = PropsWithChildren & { + span: ReactNode; +}; + +export default function RootLayout({ children, span }: RootLayoutProps) { return ( - {children} + + <> + {children} + {span} + + ); diff --git a/app/page.tsx b/app/page.tsx index 46d4364..1b03188 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,503 +1,10 @@ -import { Badge } from "@/components/ui/badge"; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbPage, - BreadcrumbSeparator, -} from "@/components/ui/breadcrumb"; -import { Button } from "@/components/ui/button"; -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { - DropdownMenu, - DropdownMenuCheckboxItem, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { Input } from "@/components/ui/input"; -import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { - File, - Home, - LineChart, - ListFilter, - MoreHorizontal, - Package, - Package2, - PanelLeft, - PlusCircle, - Search, - ShoppingCart, - Users2, -} from "lucide-react"; -import Link from "next/link"; +import { TxsTable } from "@/components/txs-table"; -export default function Dashboard() { +export default async function Txs() { return ( -
-
-
- - - - - - - - - - - - - Dashboard - - - - - - Products - - - - - All Products - - - -
- - -
- - - - - - - - - My Account - - Settings - Support - - Logout - - -
-
- -
- - All - Active - Draft - - Archived - - -
- - - - - - Filter by - - - Active - - Draft - - Archived - - - - - -
-
- - - - Products - - Manage your products and view their sales performance. - - - - - - - - Image - - Name - Status - Price - - Total Sales - - - Created at - - - Actions - - - - - - - - - - Laser Lemonade Machine - - - Draft - - $499.99 - - 25 - - - 2023-07-12 10:42 AM - - - - - - - - Actions - Edit - Delete - - - - - - - - - - Hypernova Headphones - - - Active - - $129.99 - - 100 - - - 2023-10-18 03:21 PM - - - - - - - - Actions - Edit - Delete - - - - - - - - - - AeroGlow Desk Lamp - - - Active - - $39.99 - - 50 - - - 2023-11-29 08:15 AM - - - - - - - - Actions - Edit - Delete - - - - - - - - - - TechTonic Energy Drink - - - Draft - - $2.99 - - 0 - - - 2023-12-25 11:59 PM - - - - - - - - Actions - Edit - Delete - - - - - - - - - - Gamer Gear Pro Controller - - - Active - - $59.99 - - 75 - - - 2024-01-01 12:00 AM - - - - - - - - Actions - Edit - Delete - - - - - - - - - - Luminous VR Headset - - - Active - - $199.99 - - 30 - - - 2024-02-14 02:14 PM - - - - - - - - Actions - Edit - Delete - - - - - -
- - -
- Showing 1-10 of 32{" "} - products -
- - - - -
-
+
+

CosmWasm Tracing UI

+
); } diff --git a/app/txs/page.tsx b/app/txs/page.tsx deleted file mode 100644 index f705c74..0000000 --- a/app/txs/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import TxsData from "@/components/txs-data"; - -export default function Txs() { - return ( - <> - - - ); -} diff --git a/components/txs-data.tsx b/components/txs-data.tsx deleted file mode 100644 index 20b4cc5..0000000 --- a/components/txs-data.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import { useTxs } from "@/hooks/api"; -import { Tx } from "@/types/txs"; -import Link from "next/link"; - -export default function TxsData() { - const { - isPending, - error, - data: txs, - } = useTxs("execute_tx", new Map([["tx", "*Bank(Send*"]])); - - if (isPending) return "Loading..."; - if (error) return "An error has occurred: " + error.message; - - return ( -
-

Transactions

-
    - {txs.map((tx) => ( -
  • - - {tx.traceId} - {tx.operationName} -{" "} - { - txs.filter( - (txToFilter: Tx) => txToFilter.traceId === tx.traceId, - ).length - }{" "} - spans - {tx.tags.size} tags - -
    • - ))} -
-
- ); -} diff --git a/lib/mermaid.ts b/lib/mermaid.ts index 7521d58..8c9720c 100644 --- a/lib/mermaid.ts +++ b/lib/mermaid.ts @@ -56,7 +56,7 @@ export function flowchartFromSpans(spans: Readonly>) { } for (const node of sortedSpanNodes) { - chart += `\nclick ${node.id} "/txs/${node.span.traceId}/${node.id}"`; + chart += `\nclick ${node.id} "/${node.span.traceId}/${node.id}"`; } return chart; @@ -78,7 +78,7 @@ export function sequenceDiagramFromSpans(spans: Readonly>) { chart += `\n${getActorBox(sender)}`; chart += `\n${getActorBox(recipient)}`; - chart += `\n${sender}->>+${recipient}: 🏦 Send`; + chart += `\n${sender}->>+${recipient}: 🏦 Send`; break; } diff --git a/tests/e2e/happy-paths.test.ts b/tests/e2e/happy-paths.test.ts index 8889220..3ed7d9b 100644 --- a/tests/e2e/happy-paths.test.ts +++ b/tests/e2e/happy-paths.test.ts @@ -13,12 +13,9 @@ test("navigates to a correctly rendered tx detail", async ({ page }) => { //Navigate to Tx list await page.goto("http://localhost:3000"); - await page.getByRole("button", { name: "find" }).click(); //Navigate to Tx detail - await page - .getByRole("link", { name: "f3f101d12e4b41e05dfd3bcc2aa7e206" }) - .click(); + await page.getByText("f3f101d12e4b41e05dfd3bcc2aa7e206").click(); await expect( page.getByText("transaction f3f101d12e4b41e05dfd3bcc2aa7e206"),