feat: added Logs component.

Author: Sahil2004

infrastructure/control-panel/src/fragments/Logs/Logs.stories.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps } from "svelte";
+import Logs from "./Logs.svelte";
+
+export default {
+    title: "UI/Logs",
+    component: Logs,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: Logs;
+        props: ComponentProps<typeof Logs>;
+    }) => ({
+        Component: Logs,
+        props: args,
+    }),
+};
+
+export const Default = {
+    args: {
+        events: [
+            {
+                timestamp: new Date(),
+                action: "upload",
+                message: "msg_123",
+                to: "alice.vault.dev",
+            },
+            {
+                timestamp: new Date(),
+                action: "fetch",
+                message: "msg_124",
+                from: "bob.vault.dev",
+            },
+            {
+                timestamp: new Date(),
+                action: "webhook",
+                to: "Alice",
+                from: "Pic",
+            },
+        ],
+    },
+};

infrastructure/control-panel/src/fragments/Logs/Logs.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { LogEvent } from '$lib/types';
+	import { capitalizeFirstLetter, cn, parseTimestamp } from '$lib/utils';
+
+	let {
+		events,
+		activeEventIndex = $bindable(),
+		...restProps
+	}: { events: LogEvent[]; activeEventIndex: number } = $props();
+
+	const commonClasses = 'w-full h-full bg-white';
+	const commonLogClasses =
+		'flex cursor-pointer gap-2 rounded-md p-2 transition-colors hover:bg-gray-100';
+	const activeLogClass = 'bg-gray-100';
+	const actionClasses = {
+		upload: 'text-green-600',
+		fetch: 'text-blue-800',
+		webhook: 'text-red-500'
+	};
+</script>
+
+<section class={cn(commonClasses, restProps.class)}>
+	<h2 class="pb-4 pl-8 text-xl">Logs</h2>
+	{#each events as event, i}
+		<article
+			{...restProps}
+			class={cn(commonLogClasses, i === activeEventIndex && activeLogClass)}
+			onclick={() => {
+				activeEventIndex = i;
+			}}
+		>
+			<p class="font-light text-black/60">[{parseTimestamp(event.timestamp)}]</p>
+			<div>
+				<span class={actionClasses[event.action]}>
+					{capitalizeFirstLetter(event.action)}
+					{event.action === 'webhook' ? 'triggered' : ''}
+				</span>
+				{#if event.action === 'upload'}
+					→ {event.to}
+				{:else if event.action === 'fetch'}
+					← {event.from}
+				{:else if event.action === 'webhook'}
+					({event.from} → {event.to})
+				{/if}
+				{#if event.action === 'upload' || event.action === 'fetch'}
+					<br />
+					({event.message})
+				{/if}
+			</div>
+		</article>
+	{/each}
+</section>

infrastructure/control-panel/src/fragments/index.ts

@@ -1 +1,2 @@
-export { default as LiveDataFlow } from "./LiveDataFlow/LiveDataFlow.svelte";
+export { default as LiveDataFlow } from "./LiveDataFlow/LiveDataFlow.svelte";
+export { default as Logs } from "./Logs/Logs.svelte";

infrastructure/control-panel/src/lib/types/index.ts

@@ -0,0 +1 @@
+export * from "./log.types";

infrastructure/control-panel/src/lib/types/log.types.ts

@@ -0,0 +1,22 @@
+export interface UploadEvent {
+    timestamp: Date;
+    action: "upload";
+    message: string;
+    to: string;
+}
+
+export interface FetchEvent {
+    timestamp: Date;
+    action: "fetch";
+    message: string;
+    from: string;
+}
+
+export interface WebhookEvent {
+    timestamp: Date;
+    action: "webhook";
+    from: string;
+    to: string;
+}
+
+export type LogEvent = UploadEvent | FetchEvent | WebhookEvent;

infrastructure/control-panel/src/lib/utils/index.ts

@@ -1 +1,3 @@
-export * from './mergeClasses';
+export * from "./mergeClasses";
+export * from "./parseDates";
+export * from "./typography";

infrastructure/control-panel/src/lib/utils/parseDates.ts

@@ -0,0 +1,3 @@
+export const parseTimestamp = (timestamp: Date) => {
+    return `${timestamp.getHours().toString().padStart(2, "0")}:${timestamp.getMinutes().toString().padStart(2, "0")}:${timestamp.getSeconds().toString().padStart(2, "0")}`;
+};

infrastructure/control-panel/src/lib/utils/typography.ts

@@ -0,0 +1,3 @@
+export const capitalizeFirstLetter = (val: string) => {
+    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+};