Show event logs in the console (#17)

* Event logs * [Not currently implemented] 'Pipelines UI' * Bare bones date range logic (will evolve as we see what's useful). --------- Co-authored-by: Zack <[email protected]>
hiphops-io · Nov 22, 2023 · 04ba21b · 04ba21b
1 parent 8e896bb
commit 04ba21b
Show file tree

Hide file tree

Showing 36 changed files with 985 additions and 139 deletions.
diff --git a/console/README.md b/console/README.md
@@ -35,6 +35,12 @@ Then start hops console
 go run main.go start console -d --address=0.0.0.0:8916
 ```
 
+or the following to get the full capabilities.
+
+```bash
+go run main.go start -d --address=0.0.0.0:8916
+```
+
 Once you've installed dependencies with `pnpm install`, start a development server:
 
 ```bash

diff --git a/console/package.json b/console/package.json
@@ -41,6 +41,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",
 		"date-fns": "^2.30.0",
+		"javascript-time-ago": "^2.5.9",
 		"ky": "^1.0.1",
 		"svelte-forms": "^2.3.1",
 		"svelte-use-form": "^2.10.0"

diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
diff --git a/console/src/lib/advanced/PipelineNav.svelte b/console/src/lib/advanced/PipelineNav.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { ArrowLeftSolid } from 'flowbite-svelte-icons';
+</script>
+
+<div
+	class="pl-8 pr-8 md:pl-20 md:pr-20 py-9 w-full flex justify-between border-solid border-b items-center border-grey dark:border-white dark:border-opacity-10"
+>
+	<a href="/console/advanced">
+		<ArrowLeftSolid class="dark:text-white text-black" />
+	</a>
+</div>
diff --git a/console/src/lib/components/Loading.svelte b/console/src/lib/components/Loading.svelte
@@ -0,0 +1,4 @@
+<div class="flex items-center justify-center h-screen">
+	<div />
+	<img src="/images/casey-white.svg" alt="Hiphops logo" class="animate-ping" />
+</div>
diff --git a/console/src/lib/components/Tag.svelte b/console/src/lib/components/Tag.svelte
@@ -0,0 +1,5 @@
+<div
+	class="rounded-sm px-2 py-1 w-fit mb-2 text-xs font-medium dark:text-midgrey text-grey bg-lightgrey dark:bg-almostblack"
+>
+	<slot />
+</div>
diff --git a/console/src/lib/events/api.ts b/console/src/lib/events/api.ts
@@ -0,0 +1,59 @@
+import TimeAgo from 'javascript-time-ago';
+import en from 'javascript-time-ago/locale/en';
+
+export interface Event {
+	hops: {
+		action: string;
+		event: string;
+		source: string;
+	};
+
+	timestamp: number;
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	[key: string]: any;
+}
+
+export interface EventLog {
+	start_timestamp: string;
+	end_timestamp: string;
+	event_items: EventItem[];
+}
+
+export interface EventItem {
+	event: Event;
+	sequence_id: string;
+	timestamp: string;
+}
+
+export interface EventTable {
+	timestamp: string; // '2023-11-22T10:44:00.518137754Z';
+	eventId: string;
+	event: string;
+	source: string;
+	action: string;
+	JSON: {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		[key: string]: any;
+	};
+}
+
+export function eventToTable(eventItem: EventItem): EventTable {
+	return {
+		timestamp: new Date(eventItem.timestamp).toLocaleString(),
+		eventId: eventItem.sequence_id,
+		event: eventItem.event.hops.event,
+		source: eventItem.event.hops.source,
+		action: eventItem.event.hops.action || '',
+		JSON: eventItem.event
+	};
+}
+
+TimeAgo.addLocale(en);
+const timeAgo = new TimeAgo('en');
+
+export function ago(startTimestamp: string): string {
+	const then = new Date(startTimestamp);
+	console.log(timeAgo.format(then));
+	return timeAgo.format(then);
+}
diff --git a/console/src/lib/nav/HopsNav.svelte b/console/src/lib/nav/HopsNav.svelte
@@ -3,18 +3,17 @@
 	import { base } from '$app/paths';
 
 	import { page } from '$app/stores';
-	import { Navbar, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
 	$: activeUrl = $page.url.pathname;
+	import { Navbar, Dropdown, DropdownItem } from 'flowbite-svelte';
+	import { DotsHorizontalOutline } from 'flowbite-svelte-icons';
 </script>
 
 <div
-	class="pl-8 pr-8 md:pl-20 md:pr-20 pt-4 pb-4 w-full flex justify-between border-solid border-b items-center border-lightgrey dark:border-white dark:border-opacity-20"
+	class="pl-8 pr-8 md:pl-20 md:pr-20 pt-4 pb-4 w-full flex justify-between border-solid border-b items-center border-lightgrey dark:border-white dark:border-opacity-10"
 >
 	<Navbar
-		let:hidden
-		let:toggle
 		fluid={true}
-		class="dark:bg-black px-0 sm:px-0"
+		class="dark:bg-black dark:bg-opacity-0 px-0 sm:px-0"
 		navDivClass="flex flex-wrap justify-between items-center"
 	>
 		<div>
@@ -28,19 +27,26 @@
 			</a>
 		</div>
 
-		<NavHamburger on:click={toggle} />
-		<NavUl
-			{activeUrl}
-			{hidden}
-			classUl="dark:bg-black dark:text-white p-0 md:items-center md:space-x-4 mx-2"
-			activeClass="text-white dark:text-black bg-black dark:bg-white rounded-full md:px-4 md:py-2 font-semibold text-base"
-			nonActiveClass="md:px-4 md:py-2 text-base rounded-full dark:hover:bg-grey dark:hover:bg-opacity-20 hover:bg-lightgrey hover:bg-opacity-40"
+		<DotsHorizontalOutline class="dots-menu dark:text-white" />
+		<Dropdown
+			triggeredBy=".dots-menu"
+			containerClass="text-left border border-lightgrey dark:bg-black"
 		>
-			<NavLi href="/console">Tasks</NavLi>
-			<NavLi href="https://docs.hiphops.io">Docs</NavLi>
+			<DropdownItem defaultClass="hover:bg-almostblack px-4 py-2 text-sm">
+				<a href="/console">Tasks</a>
+			</DropdownItem>
+
+			<DropdownItem defaultClass="hover:bg-almostblack px-4 py-2 text-sm">
+				<a href="/console/advanced">Advanced</a>
+			</DropdownItem>
+
+			<DropdownItem defaultClass="hover:bg-almostblack px-4 py-2 text-sm">
+				<a href="https://docs.hiphops.io" target="_blank">Docs</a>
+			</DropdownItem>
+			<!-- 
 			<div>
 				<ThemeToggle />
-			</div>
-		</NavUl>
+			</div> -->
+		</Dropdown>
 	</Navbar>
 </div>
diff --git a/console/src/lib/tables/TableDataCell.svelte b/console/src/lib/tables/TableDataCell.svelte
@@ -0,0 +1,5 @@
+<td
+	class=" border-r border-b border-midgrey dark:border-almostblack p-2 last:border-r-0 text-grey dark:text-midgrey text-sm"
+>
+	<slot />
+</td>
diff --git a/console/src/lib/tables/TableHeadItem.svelte b/console/src/lib/tables/TableHeadItem.svelte
@@ -0,0 +1,5 @@
+<th
+	class=" border-r border-b border-midgrey dark:border-almostblack p-2 last:border-b last:border-r-0 text-black dark:text-midgrey font-medium text-sm"
+>
+	<slot />
+</th>
diff --git a/console/src/lib/tasks/TaskItemCard.svelte b/console/src/lib/tasks/TaskItemCard.svelte
@@ -6,9 +6,9 @@
 
 <a href="/console/{command.name}">
 	<div
-		class="px-6 py-8 bg-grey bg-opacity-5 rounded-xl dark:bg-white dark:bg-opacity-10 border border-white dark:border-black hover:border dark:hover:border hover:border-purple dark:hover:border-purple"
+		class="px-6 py-8 bg-grey bg-opacity-5 rounded-xl dark:bg-almostblack border border-white dark:border-black dark:border-opacity-20 hover:border dark:hover:border hover:border-purple dark:hover:border-purple hover:duration-300"
 	>
-		<h3 class="text-4xl mb-4">{command.emoji}</h3>
+		<h3 class="text-4xl mb-4">{command.emoji || '▶️'}</h3>
 		<p class="text-black font-medium dark:text-white">{command.display_name}</p>
 	</div>
 </a>
diff --git a/console/src/lib/tasks/TaskNav.svelte b/console/src/lib/tasks/TaskNav.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-	class="pl-8 pr-8 md:pl-20 md:pr-20 pt-8 pb-8 w-full flex justify-between border-solid border-b items-center border-lightgrey dark:border-white dark:border-opacity-20"
+	class="pl-8 pr-8 md:pl-20 md:pr-20 py-9 w-full flex justify-between border-solid border-b items-center border-lightgrey dark:border-white dark:border-opacity-10"
 >
 	<a href="/console/">
 		<ArrowLeftSolid class="dark:text-white text-black" />

diff --git a/console/src/routes/+page.svelte b/console/src/routes/+page.svelte
@@ -14,31 +14,33 @@
 	<meta name="description" content="Trigger task flows" />
 </svelte:head>
 
-<HopsNav />
+<div class="dark:bg-grain bg-cover bg-norepeat bg-fixed min-h-screen">
+	<HopsNav />
 
-<!--Page title-->
-<div class="mx-8 md:mx-20 mt-16 pb-4">
-	<h1 class="text-left text-6xl font-normal mb-4 dark:text-white">Tasks</h1>
-	<h2 class="text-2xl mb-4 text-grey dark:text-white dark:text-opacity-50">
-		Make things happen in one click
-	</h2>
-</div>
-
-<!--Tasks list-->
-<div class="mx-8 md:mx-20 pb-20 md:space-x-4">
-	<div class="grid md:grid-cols-4 gap-4">
-		<!--Task list items-->
-		{#each tasks as command}
-			<TaskItemCard {command} />
-		{/each}
+	<!--Page title-->
+	<div class="mx-8 md:mx-20 mt-16 pb-4">
+		<h1 class="text-left text-6xl font-normal mb-4 dark:text-white">Tasks</h1>
+		<h2 class="text-2xl mb-4 text-grey dark:text-white dark:text-opacity-50">
+			Make things happen in one click
+		</h2>
 	</div>
 
-	<!--Tasks empty state -->
-	{#if tasks.length === 0}
-		<div
-			class="bg-[url('/images/grain.jpg')] bg-cover flex items-center justify-center text-center rounded-lg mt-4 py-60 md:!ml-0"
-		>
-			<p class="text-white text-base font-medium">No tasks yet</p>
+	<!--Tasks list-->
+	<div class="mx-8 md:mx-20 pb-20 md:space-x-4">
+		<div class="grid md:grid-cols-4 gap-4">
+			<!--Task list items-->
+			{#each tasks as command}
+				<TaskItemCard {command} />
+			{/each}
 		</div>
-	{/if}
+
+		<!--Tasks empty state -->
+		{#if tasks.length === 0}
+			<div
+				class="bg-[url('/images/grain.jpg')] bg-cover flex items-center justify-center text-center rounded-lg mt-4 py-60 md:!ml-0"
+			>
+				<p class="text-white text-base font-medium">No tasks yet</p>
+			</div>
+		{/if}
+	</div>
 </div>