Show field datetype

jgorgel · Aug 15, 2024 · 61bd657 · 61bd657
1 parent 6acb7cc
commit 61bd657
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 10 deletions.
diff --git a/duo-ui/src/lib/components/Datatype.svelte b/duo-ui/src/lib/components/Datatype.svelte
@@ -0,0 +1,58 @@
+<script>
+	/**
+	 * @type {string}
+	 */
+	export let type = '';
+	/**
+	 * @type {string}
+	 */
+	let typeName;
+	/**
+	 * @type {string}
+	 */
+	let color;
+
+	$: {
+		typeName = convertTypeName();
+		switch (typeName) {
+			case 'number':
+				color = '#975f0f';
+				break;
+			case 'str':
+				color = '#079ea3';
+				break;
+			case 'bool':
+				color = '#7e0571';
+				break;
+			default:
+				color = 'gray';
+				break;
+		}
+	}
+
+	function convertTypeName() {
+		switch (type.toLowerCase()) {
+			case 'utf8':
+				return 'str';
+			case 'int8':
+			case 'int16':
+			case 'int32':
+			case 'int64':
+			case 'uint8':
+			case 'uint16':
+			case 'uint32':
+			case 'uint64':
+				return 'num';
+			case 'boolean':
+				return 'bool';
+			default:
+				return '';
+		}
+	}
+</script>
+
+{#if typeName}
+	<div class="rounded border text-xs px-1" style:color style:border-color={color}>
+		{typeName}
+	</div>
+{/if}
diff --git a/duo-ui/src/routes/+page.svelte b/duo-ui/src/routes/+page.svelte
@@ -13,6 +13,7 @@
 	import { cn } from '$lib/utils';
 	import dayjs from 'dayjs';
 	import LogItem from '$lib/components/LogItem.svelte';
+	import Datatype from '$lib/components/Datatype.svelte';
 
 	export const ssr = false;
 
@@ -75,7 +76,7 @@
 		return dayjs(date).hour(parseInt(hour)).minute(parseInt(minute)).valueOf();
 	}
 
-	function filterableSchema() {
+	function filterableFields() {
 		let excludedFields = ['message', 'time', 'line'];
 		return data.schema.fields.filter(
 			(/** @type {{ name: string; }} */ field) => !excludedFields.includes(field.name)
@@ -167,15 +168,19 @@
 	<Separator class="my-8" />
 	<Resizable.PaneGroup direction="horizontal" class="rounded-lg border py-2">
 		<Resizable.Pane defaultSize={18}>
-			{#each filterableSchema() as field}
-				<Collapsible.Root class="space-y-2">
-					<div class="flex items-center justify-between space-x-4 px-4">
-						<Collapsible.Trigger asChild let:builder>
-							<div>{field.name}</div>
-							<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
-								<ChevronsUpDown class="h-4 w-4" />
-								<span class="sr-only">Toggle</span>
-							</Button>
+			<h2 class="px-4 text-center text-lg font-bold">Fields</h2>
+			{#each filterableFields() as field}
+				<Collapsible.Root class="space-y-2 text-sm">
+					<div class="space-x-4 px-4">
+						<Collapsible.Trigger class="w-full">
+							<div class="flex items-center p-1 text-slate-500 hover:bg-gray-100">
+								<span class="flex grow">
+									{field.name}
+								</span>
+								<span class="mx-1">
+									<Datatype type={field.data_type} />
+								</span>
+							</div>
 						</Collapsible.Trigger>
 					</div>
 					<Collapsible.Content class="space-y-2">