feat: build routes explorer UI and route inspection workspace

Author: Yasir761

web/src/app/(dashboard)/routes/page.tsx

@@ -0,0 +1,5 @@
+import { RoutesWorkspace } from "@/components/routes/routes-workspace"
+
+export default function RoutesPage() {
+  return <RoutesWorkspace />
+}

web/src/app/routes/page.tsx web/src/app/fallback_routes/page.tsxweb/src/app/routes/page.tsx renamed to web/src/app/fallback_routes/page.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import { Route } from "@/types/route"
+import { Route as RouteIcon } from "lucide-react"
+type Props = {
+  route: Route | null
+}
+
+export function RouteInspector({
+  route,
+}: Props) {
+  if (!route) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        Select a route
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+
+      <div className="border-b border-border p-5">
+
+        <div className="flex items-center gap-3">
+
+          <RouteIcon className="h-5 w-5 text-orange-400" />
+
+          <div>
+            <h2 className="font-semibold">
+              Route Inspector
+            </h2>
+
+            <p className="text-sm text-muted-foreground">
+              route details
+            </p>
+          </div>
+
+        </div>
+
+      </div>
+
+      <div className="space-y-4 p-5 text-sm">
+
+        <Info
+          label="Provider"
+          value={route.provider}
+        />
+
+        <Info
+          label="Status"
+          value={route.status}
+        />
+
+        <Info
+          label="Throughput"
+          value={`${route.throughput}/m`}
+        />
+
+        <Info
+          label="Failures"
+          value={route.failures}
+        />
+
+        <Info
+          label="Destinations"
+          value={route.destinations}
+        />
+
+      </div>
+
+      <div className="border-t border-border p-5">
+
+        <h3 className="mb-3 font-medium">
+          Destinations
+        </h3>
+
+        <div className="space-y-2 text-sm">
+          <div>production-api</div>
+          <div>analytics-worker</div>
+          <div>audit-logger</div>
+        </div>
+
+      </div>
+
+    </div>
+  )
+}
+
+function Info({
+  label,
+  value,
+}: {
+  label: string
+  value: React.ReactNode
+}) {
+  return (
+    <div className="flex justify-between">
+      <span>{label}</span>
+      <span>{value}</span>
+    </div>
+  )
+}

web/src/components/routes/route-inspector.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Route } from "@/types/route"
+
+type Props = {
+  route: Route
+  selected?: boolean
+  onClick?: () => void
+}
+
+export function RouteRow({
+  route,
+  selected,
+  onClick,
+}: Props) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        `
+          grid
+          grid-cols-[120px_1fr_120px_120px_120px_120px_140px]
+          items-center
+          border-b border-border
+          px-5 py-4
+          text-left
+          hover:bg-white/[0.03]
+        `,
+        selected &&
+          "bg-white/[0.04]"
+      )}
+    >
+      <div>{route.provider}</div>
+
+      <div>{route.path}</div>
+
+      <div>
+        <span
+          className={cn(
+            "rounded-full px-2 py-1 text-xs",
+
+            route.status ===
+              "active" &&
+              "bg-emerald-500/10 text-emerald-400",
+
+            route.status ===
+              "paused" &&
+              "bg-amber-500/10 text-amber-400",
+
+            route.status ===
+              "error" &&
+              "bg-rose-500/10 text-rose-400"
+          )}
+        >
+          {route.status}
+        </span>
+      </div>
+
+      <div>{route.throughput}/m</div>
+
+      <div>{route.failures}</div>
+
+      <div>{route.destinations}</div>
+
+      <div>{route.lastSeen}</div>
+    </button>
+  )
+}

web/src/components/routes/route-row.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { Route } from "@/types/route"
+
+type Props = {
+  routes: Route[]
+}
+
+export function RoutesStats({
+  routes,
+}: Props) {
+  const active =
+    routes.filter(
+      (r) => r.status === "active"
+    ).length
+
+  const paused =
+    routes.filter(
+      (r) => r.status === "paused"
+    ).length
+
+  const errors =
+    routes.filter(
+      (r) => r.status === "error"
+    ).length
+
+  return (
+    <div className="grid grid-cols-4 border-b border-border">
+
+      <Stat
+        label="Total Routes"
+        value={routes.length}
+      />
+
+      <Stat
+        label="Active"
+        value={active}
+      />
+
+      <Stat
+        label="Paused"
+        value={paused}
+      />
+
+      <Stat
+        label="Errors"
+        value={errors}
+      />
+
+    </div>
+  )
+}
+
+function Stat({
+  label,
+  value,
+}: {
+  label: string
+  value: number
+}) {
+  return (
+    <div className="border-r border-border p-5 last:border-r-0">
+      <p className="text-sm text-muted-foreground">
+        {label}
+      </p>
+
+      <h3 className="mt-2 text-4xl font-bold">
+        {value}
+      </h3>
+    </div>
+  )
+}

web/src/components/routes/routes-stats.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Route } from "@/types/route"
+import { RouteRow } from "./route-row"
+
+type Props = {
+  routes: Route[]
+  selected: Route | null
+  onSelect: (route: Route) => void
+}
+
+export function RoutesStream({
+  routes,
+  selected,
+  onSelect,
+}: Props) {
+  return (
+    <div className="h-full overflow-auto">
+
+      <div
+        className="
+          grid
+          grid-cols-[120px_1fr_120px_120px_120px_120px_140px]
+          border-b border-border
+          px-5 py-4
+          text-xs uppercase
+          text-muted-foreground
+        "
+      >
+        <div>Provider</div>
+        <div>Route</div>
+        <div>Status</div>
+        <div>Throughput</div>
+        <div>Failures</div>
+        <div>Destinations</div>
+        <div>Last Seen</div>
+      </div>
+
+      {routes.map((route) => (
+        <RouteRow
+          key={route.id}
+          route={route}
+          selected={
+            selected?.id ===
+            route.id
+          }
+          onClick={() =>
+            onSelect(route)
+          }
+        />
+      ))}
+    </div>
+  )
+}

web/src/components/routes/routes-stream.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Search, Route } from "lucide-react"
+
+type Props = {
+  query: string
+  setQuery: React.Dispatch<React.SetStateAction<string>>
+}
+
+export function RoutesToolbar({
+  query,
+  setQuery,
+}: Props) {
+  return (
+    <div className="flex items-center justify-between border-b border-border px-5 py-4">
+
+      <div className="flex items-center gap-3">
+        <Route className="h-5 w-5 text-orange-400" />
+
+        <div>
+          <h2 className="text-xl font-semibold">
+            Routes Explorer
+          </h2>
+
+          <p className="text-sm text-muted-foreground">
+            monitor ingress routes
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 rounded-xl border border-border px-3 py-2">
+        <Search className="h-4 w-4 text-muted-foreground" />
+
+        <input
+          value={query}
+          onChange={(e) =>
+            setQuery(e.target.value)
+          }
+          placeholder="Search routes..."
+          className="bg-transparent outline-none"
+        />
+      </div>
+
+    </div>
+  )
+}