Reinstante Toasts (#153)

When doing things like creating objects, we probably want to see errors e.g. from quotas being exceeded. Fixes #149.
unikorn-cloud · Feb 3, 2025 · 187e21d · 187e21d
1 parent d7a7a42
commit 187e21d
Show file tree

Hide file tree

Showing 25 changed files with 121 additions and 43 deletions.
diff --git a/src/lib/clients/index.ts b/src/lib/clients/index.ts
@@ -9,7 +9,7 @@ import * as Application from '$lib/openapi/application';
 import * as Identity from '$lib/openapi/identity';
 import * as Region from '$lib/openapi/region';
 import { token, removeCredentials } from '$lib/credentials';
-import type { ToastSettings } from '@skeletonlabs/skeleton';
+import type { ToastSettings, ToastStore } from '@skeletonlabs/skeleton';
 
 import { ROOT_CONTEXT, defaultTextMapSetter, trace } from '@opentelemetry/api';
 import type { Span } from '@opentelemetry/api';
@@ -51,10 +51,16 @@ function traceContextMiddleware(): Identity.Middleware {
 				resolve();
 			});
 		},
-		post: (ctx: Identity.ResponseContext): Promise<Response | void> => {
-			return new Promise((resolve) => {
+		post: (ctx: Identity.ResponseContext) => {
+			return new Promise(async (resolve) => {
 				span.end();
-				resolve();
+
+				const headers = new Headers({ traceparent: span.spanContext().traceId });
+				ctx.response.headers.forEach((value, key) => headers.append(key, value));
+
+				const body = await ctx.response.blob();
+
+				resolve(new Response(body, { status: ctx.response.status, headers: headers }));
 			});
 		}
 	};
@@ -179,6 +185,16 @@ export function region(tokens: InternalToken, fetchImpl?: typeof fetch): Region.
 
 // error is a generic fallback when an exception occurs, everything else should
 // be handled in a middleware, and not on a per API basis.
-export function error(error: Error): void {
-	console.log(error);
+export async function error(toaster: ToastStore, error: Error) {
+	const responseError = error as Identity.ResponseError;
+
+	const errorJSON = Identity.ModelErrorFromJSON(await responseError.response.json());
+
+	const toast = {
+		autohide: false,
+		message: `An error has occurred - trace ID: ${responseError.response.headers.get('traceparent')}, error: ${errorJSON.error}, description:  ${errorJSON.errorDescription}`,
+		background: 'variant-filled-error'
+	};
+
+	toaster.trigger(toast);
 }
diff --git a/src/lib/shell/SideBar.svelte b/src/lib/shell/SideBar.svelte
@@ -14,9 +14,6 @@
 	import * as Stores from '$lib/stores';
 	import * as RBAC from '$lib/rbac';
 
-	import { getToastStore } from '@skeletonlabs/skeleton';
-	const toastStore = getToastStore();
-
 	interface Props {
 		token: InternalToken;
 		organizations: Array<Identity.OrganizationRead>;

diff --git a/src/routes/(shell)/compute/clusters/+page.svelte b/src/routes/(shell)/compute/clusters/+page.svelte
@@ -7,9 +7,10 @@
 
 	let { data }: { data: PageData } = $props();
 
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 
+	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	import * as Clients from '$lib/clients';
@@ -75,7 +76,7 @@
 				Clients.compute(data.token)
 					.apiV1OrganizationsOrganizationIDProjectsProjectIDClustersClusterIDDelete(parameters)
 					.then(() => invalidate('layout:clusters'))
-					.catch((e: Error) => Clients.error(e));
+					.catch((e: Error) => Clients.error(toastStore, e));
 			}
 		};
 

diff --git a/src/routes/(shell)/compute/clusters/create/+page.svelte b/src/routes/(shell)/compute/clusters/create/+page.svelte
@@ -6,6 +6,10 @@
 
 	import { uniqueNamesGenerator, adjectives, animals } from 'unique-names-generator';
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Compute from '$lib/openapi/compute';
 
@@ -108,7 +112,7 @@
 		Clients.compute(data.token)
 			.apiV1OrganizationsOrganizationIDProjectsProjectIDClustersPost(parameters)
 			.then(() => window.location.assign('/compute/clusters'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 
 	let firewallRuleValid: boolean = $state(false);

diff --git a/src/routes/(shell)/identity/groups/+page.svelte b/src/routes/(shell)/identity/groups/+page.svelte
@@ -7,8 +7,9 @@
 	let { data }: { data: PageData } = $props();
 
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 
+	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	import * as Clients from '$lib/clients';
@@ -53,7 +54,7 @@
 				Clients.identity(data.token)
 					.apiV1OrganizationsOrganizationIDGroupsGroupidDelete(parameters)
 					.then(() => invalidate('page:groups'))
-					.catch((e: Error) => Clients.error(e));
+					.catch((e: Error) => Clients.error(toastStore, e));
 			}
 		};
 

diff --git a/src/routes/(shell)/identity/groups/create/+page.svelte b/src/routes/(shell)/identity/groups/create/+page.svelte
@@ -3,6 +3,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Identity from '$lib/openapi/identity';
 
@@ -46,7 +50,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDGroupsPost(parameters)
 			.then(() => window.location.assign('/identity/groups'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 </script>
 

diff --git a/src/routes/(shell)/identity/groups/view/[id]/+page.svelte b/src/routes/(shell)/identity/groups/view/[id]/+page.svelte
@@ -4,6 +4,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 
 	import type { ShellPageSettings } from '$lib/layouts/types.ts';
@@ -49,7 +53,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDGroupsGroupidPut(parameters)
 			.then(() => window.location.assign('/identity/groups'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 </script>
 

diff --git a/src/routes/(shell)/identity/oauth2providers/+page.svelte b/src/routes/(shell)/identity/oauth2providers/+page.svelte
@@ -7,8 +7,9 @@
 	let { data }: { data: PageData } = $props();
 
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 
+	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	import * as Clients from '$lib/clients';
@@ -52,7 +53,7 @@
 				Clients.identity(data.token)
 					.apiV1OrganizationsOrganizationIDOauth2providersProviderIDDelete(parameters)
 					.then(() => invalidate('layout:oauth2providers'))
-					.catch((e: Error) => Clients.error(e));
+					.catch((e: Error) => Clients.error(toastStore, e));
 			}
 		};
 

diff --git a/src/routes/(shell)/identity/oauth2providers/create/+page.svelte b/src/routes/(shell)/identity/oauth2providers/create/+page.svelte
@@ -4,6 +4,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Identity from '$lib/openapi/identity';
 
@@ -50,7 +54,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDOauth2providersPost(parameters)
 			.then(() => window.location.assign('/identity/oauth2providers'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 
 	var callback: string = browser

diff --git a/src/routes/(shell)/identity/organizations/+page.svelte b/src/routes/(shell)/identity/organizations/+page.svelte
@@ -3,6 +3,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Identity from '$lib/openapi/identity';
 
@@ -37,7 +41,7 @@
 
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDPut(parameters)
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 
 	let providerType = $derived.by(() => {

diff --git a/src/routes/(shell)/identity/projects/+page.svelte b/src/routes/(shell)/identity/projects/+page.svelte
@@ -7,8 +7,9 @@
 	let { data }: { data: PageData } = $props();
 
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 
+	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	import * as Clients from '$lib/clients';
@@ -53,7 +54,7 @@
 				Clients.identity(data.token)
 					.apiV1OrganizationsOrganizationIDProjectsProjectIDDelete(parameters)
 					.then(() => invalidate('layout:projects'))
-					.catch((e: Error) => Clients.error(e));
+					.catch((e: Error) => Clients.error(toastStore, e));
 			}
 		};
 

diff --git a/src/routes/(shell)/identity/projects/create/+page.svelte b/src/routes/(shell)/identity/projects/create/+page.svelte
@@ -3,6 +3,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Identity from '$lib/openapi/identity';
 
@@ -46,7 +50,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDProjectsPost(parameters)
 			.then(() => window.location.assign('/identity/projects'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 </script>
 

diff --git a/src/routes/(shell)/identity/projects/view/[id]/+page.svelte b/src/routes/(shell)/identity/projects/view/[id]/+page.svelte
@@ -4,6 +4,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 
 	import type { ShellPageSettings } from '$lib/layouts/types.ts';
@@ -49,7 +53,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDProjectsProjectIDPut(parameters)
 			.then(() => window.location.assign('/identity/projects'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 </script>
 

diff --git a/src/routes/(shell)/identity/quotas/+page.svelte b/src/routes/(shell)/identity/quotas/+page.svelte
@@ -3,6 +3,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 
 	import type { ShellPageSettings } from '$lib/layouts/types.ts';
@@ -30,7 +34,7 @@
 
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDQuotasPut(parameters)
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 
 	type QuotaMetadata = {

diff --git a/src/routes/(shell)/identity/serviceaccounts/+page.svelte b/src/routes/(shell)/identity/serviceaccounts/+page.svelte
@@ -6,9 +6,10 @@
 
 	let { data }: { data: PageData } = $props();
 
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 
+	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	import * as Clients from '$lib/clients';
@@ -54,7 +55,7 @@
 				Clients.identity(data.token)
 					.apiV1OrganizationsOrganizationIDServiceaccountsServiceAccountIDDelete(parameters)
 					.then(() => invalidate('layout:serviceaccounts'))
-					.catch((e: Error) => Clients.error(e));
+					.catch((e: Error) => Clients.error(toastStore, e));
 			}
 		};
 

diff --git a/src/routes/(shell)/identity/serviceaccounts/create/+page.svelte b/src/routes/(shell)/identity/serviceaccounts/create/+page.svelte
@@ -3,6 +3,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Identity from '$lib/openapi/identity';
 
@@ -48,7 +52,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDServiceaccountsPost(parameters)
 			.then((v: Identity.ServiceAccountCreate) => (serviceAccount = v))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 </script>
 

diff --git a/src/routes/(shell)/identity/serviceaccounts/view/[id]/+page.svelte b/src/routes/(shell)/identity/serviceaccounts/view/[id]/+page.svelte
@@ -4,6 +4,10 @@
 
 	let { data }: { data: PageData } = $props();
 
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	const toastStore = getToastStore();
+
 	import * as Clients from '$lib/clients';
 	import * as Identity from '$lib/openapi/identity';
 
@@ -43,7 +47,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDServiceaccountsServiceAccountIDPut(parameters)
 			.then(() => window.location.assign('/identity/serviceaccounts'))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 
 	let newServiceAccount: Identity.ServiceAccountCreate | undefined = $state();
@@ -57,7 +61,7 @@
 		Clients.identity(data.token)
 			.apiV1OrganizationsOrganizationIDServiceaccountsServiceAccountIDRotatePost(parameters)
 			.then((v: Identity.ServiceAccountCreate) => (newServiceAccount = v))
-			.catch((e: Error) => Clients.error(e));
+			.catch((e: Error) => Clients.error(toastStore, e));
 	}
 </script>
 

diff --git a/src/routes/(shell)/identity/users/+page.svelte b/src/routes/(shell)/identity/users/+page.svelte
@@ -6,9 +6,10 @@
 
 	let { data }: { data: PageData } = $props();
 
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 
+	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	import * as Clients from '$lib/clients';
@@ -56,7 +57,7 @@
 				Clients.identity(data.token)
 					.apiV1OrganizationsOrganizationIDUsersUserIDDelete(parameters)
 					.then(() => invalidate('layout:users'))
-					.catch((e: Error) => Clients.error(e));
+					.catch((e: Error) => Clients.error(toastStore, e));
 			}
 		};