Add Grouped View Filters (#160)

When there are a great many projects it's best to allow them to be filtered to remove some visula cruft. Fixes #147.
unikorn-cloud · Feb 4, 2025 · d877f30 · d877f30
1 parent ec560c1
commit d877f30
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 13 deletions.
diff --git a/charts/ui/Chart.yaml b/charts/ui/Chart.yaml
@@ -4,8 +4,8 @@ description: A Helm chart for deploying Unikorn UI
 
 type: application
 
-version: v0.3.5-rc5
-appVersion: v0.3.5-rc5
+version: v0.3.5-rc6
+appVersion: v0.3.5-rc6
 
 icon: https://assets.unikorn-cloud.org/assets/images/logos/dark-on-light/icon.png
 

diff --git a/src/lib/layouts/GroupedList.svelte b/src/lib/layouts/GroupedList.svelte
@@ -6,24 +6,42 @@
 	interface Props {
 		groups: Record<string, Array<any>>;
 		header: Snippet<[string]>;
+		option: Snippet<[string]>;
 		item: Snippet<[any]>;
 	}
 
-	let { groups, header, item }: Props = $props();
+	let { groups, header, option, item }: Props = $props();
+
+	let value = $state('');
 </script>
 
 <div class="flex flex-col gap-4">
+	<div class="input-group input-group-divider grid-cols-[auto_1fr] shadow-lg max-w-max">
+		<div class="input-group-shim">
+			<iconify-icon icon="mdi:filter-outline" class="text-primary-500 text-lg"></iconify-icon>
+		</div>
+		<select bind:value>
+			<option value="">all</option>
+
+			{#each Object.keys(groups) as key}
+				<option value={key}>
+					{@render option(key)}
+				</option>
+			{/each}
+		</select>
+	</div>
+
 	{#each Object.keys(groups) as key}
-		{@render header(key)}
-
-		{#if groups[key].length}
-			<ShellList>
-				{#each groups[key] as group}
-					{@render item(group)}
-				{/each}
-			</ShellList>
-		{:else}
-			There are no resources in this group, create one to get started.
+		{#if !value || value == key}
+			{@render header(key)}
+
+			{#if groups[key].length}
+				<ShellList>
+					{#each groups[key] as group}
+						{@render item(group)}
+					{/each}
+				</ShellList>
+			{/if}
 		{/if}
 	{/each}
 </div>
diff --git a/src/routes/(shell)/compute/clusters/+page.svelte b/src/routes/(shell)/compute/clusters/+page.svelte
@@ -102,6 +102,10 @@
 
 <ShellPage {settings}>
 	<GroupedList {groups}>
+		{#snippet option(projectID: string)}
+			{project(projectID).metadata.name}
+		{/snippet}
+
 		{#snippet header(projectID: string)}
 			<header class="flex justify-between">
 				<div class="flex gap-4 items-center">

diff --git a/src/routes/(shell)/kubernetes/clusters/+page.svelte b/src/routes/(shell)/kubernetes/clusters/+page.svelte
@@ -116,6 +116,10 @@
 
 <ShellPage {settings}>
 	<GroupedList {groups}>
+		{#snippet option(projectID: string)}
+			{project(projectID).metadata.name}
+		{/snippet}
+
 		{#snippet header(projectID: string)}
 			<header class="flex justify-between">
 				<div class="flex gap-4 items-center">