feat(app): index-status explorer page

unionlabs · May 31, 2024 · 039cc93 · 039cc93
1 parent 6fa13eb
commit 039cc93
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 25 deletions.
diff --git a/app/src/routes/explorer/(components)/cell-plain-text.svelte b/app/src/routes/explorer/(components)/cell-plain-text.svelte
@@ -3,5 +3,3 @@ export let value: string
 </script>
 
 <p {...$$restProps}>{value}</p>
-
-<style lang="postcss"></style>
diff --git a/app/src/routes/explorer/(components)/cell-status.svelte b/app/src/routes/explorer/(components)/cell-status.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { cn } from "$lib/utilities/shadcn.ts"
+
+export let value: string
+</script>
+
+<div class={cn(value === 'HEALTHY' ? 'bg-green-500 dark:bg-green-800' : 'bg-red-500 dark:bg-red-800', 'font-bold text-white inline px-2 py-1 rounded')}  {...$$restProps}>{value}</div>
diff --git a/app/src/routes/explorer/(components)/table.svelte b/app/src/routes/explorer/(components)/table.svelte
@@ -55,7 +55,6 @@ $: dataStore.subscribe(() => {
 })
 </script>
 
-
 <Card.Root>
   <div bind:this={virtualListElement} >
     <Table.Root>

diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
@@ -63,6 +63,11 @@ onNavigate(navigation => {
 })
 </script>
 
+<svelte:head>
+  <title>Union - Explorer</title>
+</svelte:head>
+
+
 <main class="flex flex-row flex-1 overflow-y-hidden">
   <Resizable.PaneGroup direction="horizontal" class="w-full rounded-lg bg-re" {onLayoutChange}>
     <Resizable.Pane

diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-import {
-  flexRender,
-  type ColumnDef,
-} from "@tanstack/svelte-table"
+import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
 import request from "graphql-request"
 import { URLS } from "$lib/constants"
 import { writable } from "svelte/store"
@@ -38,15 +35,14 @@ $: if (blockData) {
     removeArrayDuplicates([...(blockData as Array<CosmosBlock>), ...currentBlocks], "height")
   )
 }
-
 const columns = [
   {
     accessorKey: "time",
     size: 100,
     meta: {
       class: "ml-1.5 justify-start"
     },
-    header: info => "Time",
+    header: () => "Time",
     cell: info =>
       flexRender(CellDurationText, {
         totalUnits: 3,
@@ -58,7 +54,7 @@ const columns = [
   },
   {
     accessorKey: "height",
-    header: info => "Height",
+    header: () => "Height",
     size: 100,
     meta: {
       class: "w-full justify-start"
@@ -76,7 +72,7 @@ const columns = [
   },
   {
     accessorKey: "chain_id",
-    header: info => "Chain ID",
+    header: () => "Chain ID",
     meta: {
       class: "w-full justify-start"
     },
@@ -91,7 +87,7 @@ const columns = [
     meta: {
       class: "w-full justify-start"
     },
-    header: info => flexRender(CellText, { value: "Hash" }),
+    header: () => flexRender(CellText, { value: "Hash" }),
     size: 1000,
     cell: info =>
       flexRender(Button, {
@@ -106,10 +102,6 @@ const columns = [
 ] as Array<ColumnDef<CosmosBlock>>
 </script>
 
-<svelte:head>
-  <title>Union - Explorer</title>
-</svelte:head>
-
 <Table columns={columns} bind:dataStore={blocksStore}/>
 {JSON.stringify($blocksStore, null, 2)}
 
diff --git a/app/src/routes/explorer/index-status/+page.svelte b/app/src/routes/explorer/index-status/+page.svelte
@@ -3,19 +3,69 @@ import request from "graphql-request"
 import { indexStatusQuery } from "$lib/graphql/documents/index-status.ts"
 import { createQuery } from "@tanstack/svelte-query"
 import { URLS } from "$lib/constants"
+import Table from "../(components)/table.svelte"
+import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
+import { removeArrayDuplicates } from "$lib/utilities"
+import { writable } from "svelte/store"
+import CellDurationText from "../(components)/cell-duration-text.svelte"
+import CellStatus from "../(components)/cell-status.svelte"
+import { DurationUnits } from "svelte-ux"
 
 $: indexStatus = createQuery({
   queryKey: ["index-status"],
-  refetchInterval: 1_000,
-  // enabled: false,
+  refetchInterval: 500,
   queryFn: async () => request(URLS.GRAPHQL, indexStatusQuery, {})
 })
-</script>
 
-<h1>Index Status</h1>
+$: indexStatusData = $indexStatus?.data?.v0_index_status ?? []
+
+type IndexStatus = (typeof indexStatusData)[number]
+
+$: indexStatusStore = writable<Array<IndexStatus>>(indexStatusData as Array<IndexStatus>)
+$: if (indexStatus) {
+  indexStatusStore.update(currentStatuses =>
+    removeArrayDuplicates(
+      [...(indexStatusData as Array<IndexStatus>), ...currentStatuses],
+      "chain_id"
+    )
+  )
+}
+
+const columns: Array<ColumnDef<{ chain_id: string }>> = [
+  {
+    accessorKey: "display_name",
+    header: () => "Chain",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "chain_id",
+    header: () => "Chain ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "timestamp",
+    header: () => "Latest block",
+    size: 200,
+    cell: info =>
+      flexRender(CellDurationText, {
+        totalUnits: 3,
+        variant: "short",
+        minUnits: DurationUnits.Second,
+        start: new Date(info.getValue() as string)
+      })
+  },
+  {
+    accessorKey: "status",
+    header: () => "Status",
+    size: 200,
+    cell: info =>
+      flexRender(CellStatus, {
+        value: info.getValue()
+      })
+  }
+]
+</script>
 
-{#if $indexStatus?.data }
-<pre class="overflow-scroll">
-  {JSON.stringify($indexStatus?.data.v0_index_status, null, 2)}
-</pre>
-{/if}
+<Table bind:dataStore={indexStatusStore} {columns} />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,5 +3,3 @@ export let value: string
		</script>

		<p {...$$restProps}>{value}</p>

		<style lang="postcss"></style>