Add Scope to Views (#56)

unikorn-cloud · Jun 21, 2024 · 47b23d2 · 47b23d2
1 parent 85b829c
commit 47b23d2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 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.2.6
-appVersion: v0.2.6
+version: v0.2.7
+appVersion: v0.2.7
 
 icon: https://assets.unikorn-cloud.org/assets/images/logos/dark-on-light/icon.png
 

diff --git a/src/lib/layouts/ShellListItem.svelte b/src/lib/layouts/ShellListItem.svelte
@@ -1,15 +1,39 @@
 <script lang="ts">
+	import * as Kubernetes from '$lib/openapi/kubernetes';
 	import * as Identity from '$lib/openapi/identity';
 	import StatusIcon from '$lib/StatusIcon.svelte';
 
-	export let metadata: Identity.ResourceReadMetadata;
+	export let metadata: Kubernetes.ResourceReadMetadata;
+	export let projects: Identity.Projects = [];
 	export let href: string;
+
+	function lookupProject(id: string): string {
+		if (projects) {
+			const project = projects.find((x) => x.metadata.id == id);
+			if (project) {
+				return project.metadata.name;
+			}
+		}
+
+		return id;
+	}
+
+	let scope: string;
+
+	if ('projectId' in metadata) {
+		const projectMeta = metadata as Kubernetes.ProjectScopedResourceReadMetadata;
+		scope = lookupProject(projectMeta.projectId);
+	}
 </script>
 
 <div class="flex gap-4 items-center justify-between variant-glass rounded-lg p-4">
 	<header class="flex items-center gap-4">
 		<StatusIcon {metadata} />
-		<a class="font-bold" {href}>{metadata.name}</a>
+		{#if scope}
+			<a class="font-bold" {href}>{scope}/{metadata.name}</a>
+		{:else}
+			<a class="font-bold" {href}>{metadata.name}</a>
+		{/if}
 		{#if metadata.description}
 			<em>{metadata.description}</em>
 		{/if}

diff --git a/src/routes/(shell)/infrastructure/clustermanagers/+page.svelte b/src/routes/(shell)/infrastructure/clustermanagers/+page.svelte
@@ -26,11 +26,14 @@
 	import type { InternalToken } from '$lib/oauth2';
 	import { token } from '$lib/credentials';
 	import * as Kubernetes from '$lib/openapi/kubernetes';
+	import * as Identity from '$lib/openapi/identity';
 
 	let at: InternalToken;
 
 	let resources: Kubernetes.ClusterManagers;
 
+	let projects: Identity.Projects;
+
 	let organizationID: string;
 
 	organizationStore.subscribe((value: string) => {
@@ -57,6 +60,11 @@
 			.apiV1OrganizationsOrganizationIDClustermanagersGet(parameters)
 			.then((v: Kubernetes.ClusterManagers) => (resources = v))
 			.catch((e: Error) => Clients.error(e));
+
+		Clients.identity(toastStore, at)
+			.apiV1OrganizationsOrganizationIDProjectsGet(parameters)
+			.then((v: Identity.Projects) => (projects = v))
+			.catch((e: Error) => Clients.error(e));
 	}
 
 	function remove(resource: Kubernetes.ClusterManagerRead): void {
@@ -88,7 +96,7 @@
 <ShellPage {settings}>
 	<ShellList>
 		{#each resources || [] as resource}
-			<ShellListItem metadata={resource.metadata} href="#">
+			<ShellListItem metadata={resource.metadata} {projects} href="#">
 				<button on:click={() => remove(resource)} on:keypress={() => remove(resource)}>
 					<iconify-icon icon="mdi:close" />
 				</button>

diff --git a/src/routes/(shell)/infrastructure/clusters/+page.svelte b/src/routes/(shell)/infrastructure/clusters/+page.svelte
@@ -22,6 +22,7 @@
 	/* Client setup */
 	import * as Clients from '$lib/clients';
 	import * as Kubernetes from '$lib/openapi/kubernetes';
+	import * as Identity from '$lib/openapi/identity';
 	import type { InternalToken } from '$lib/oauth2';
 	import { token } from '$lib/credentials';
 
@@ -34,6 +35,8 @@
 
 	let resources: Kubernetes.KubernetesClusters;
 
+	let projects: Identity.Projects;
+
 	let organizationID: string;
 
 	organizationStore.subscribe((value: string) => {
@@ -60,6 +63,11 @@
 			.apiV1OrganizationsOrganizationIDClustersGet(parameters)
 			.then((v: Kubernetes.KubernetesClusters) => (resources = v))
 			.catch((e: Error) => Clients.error(e));
+
+		Clients.identity(toastStore, at)
+			.apiV1OrganizationsOrganizationIDProjectsGet(parameters)
+			.then((v: Identity.Projects) => (projects = v))
+			.catch((e: Error) => Clients.error(e));
 	}
 
 	function remove(resource: Kubernetes.KubernetesClusterRead): void {
@@ -128,7 +136,7 @@
 
 	<ShellList>
 		{#each resources || [] as resource}
-			<ShellListItem metadata={resource.metadata} href="#">
+			<ShellListItem metadata={resource.metadata} {projects} href="#">
 				<div class="flex items-center gap-4">
 					<button
 						on:click={() => getKubeconfig(resource)}