Merge pull request #53 from argha-dot/fix/deployment-dashboard-ui

Fix Deployment Dashboard UI, added Route macros for routes
patr-cloud · Sep 28, 2024 · 1435c51 · 1435c51
2 parents a7925ff + 0c1c9e7
commit 1435c51
Show file tree

Hide file tree

Showing 109 changed files with 2,280 additions and 1,827 deletions.
diff --git a/components/src/sidebar/sidebar.rs b/components/src/sidebar/sidebar.rs
@@ -20,90 +20,9 @@ pub struct LinkItem {
 pub fn Sidebar(
 	/// Workspace Card
 	children: ChildrenFn,
+	/// The Sidebar Items
+	sidebar_items: Vec<LinkItem>,
 ) -> impl IntoView {
-	let links: Vec<LinkItem> = vec![
-		LinkItem {
-			title: "Home".to_owned(),
-			path: "/".to_owned(),
-			icon_src: "/images/sidebar/home.svg".to_owned(),
-			subtitle: None,
-			items: None,
-		},
-		LinkItem {
-			title: "Runners".to_owned(),
-			path: "/runners".to_owned(),
-			icon_src: "/images/sidebar/runner.svg".to_owned(),
-			subtitle: None,
-			items: None,
-		},
-		LinkItem {
-			title: "Infrastructure".to_owned(),
-			path: "".to_owned(),
-			icon_src: "/images/sidebar/infrastructure.svg".to_owned(),
-			subtitle: None,
-			items: Some(vec![
-				LinkItem {
-					title: "Deployments".to_owned(),
-					path: "/deployment".to_owned(),
-					subtitle: None,
-					icon_src: "/images/sidebar/deployment.svg".to_owned(),
-					items: None,
-				},
-				LinkItem {
-					title: "Databases".to_owned(),
-					path: "/database".to_owned(),
-					subtitle: None,
-					icon_src: "/images/sidebar/database.svg".to_owned(),
-					items: None,
-				},
-			]),
-		},
-		LinkItem {
-			title: "Domain Configuration".to_owned(),
-			path: "".to_owned(),
-			icon_src: "/images/sidebar/domains.svg".to_owned(),
-			subtitle: None,
-			items: Some(vec![
-				LinkItem {
-					title: "Domains".to_owned(),
-					path: "/domain".to_owned(),
-					subtitle: None,
-					icon_src: "/images/sidebar/domains.svg".to_owned(),
-					items: None,
-				},
-				LinkItem {
-					title: "Managed URLs".to_owned(),
-					icon_src: "/images/sidebar/managed-url.svg".to_owned(),
-					subtitle: None,
-					path: "/managed-url".to_owned(),
-					items: None,
-				},
-			]),
-		},
-		LinkItem {
-			title: "User".to_owned(),
-			path: "/user".to_owned(),
-			icon_src: "/images/sidebar/workspace.svg".to_owned(),
-			subtitle: None,
-			items: Some(vec![
-				LinkItem {
-					title: "Workspace".to_owned(),
-					icon_src: "/images/sidebar/workspace.svg".to_owned(),
-					subtitle: None,
-					path: "/workspace".to_owned(),
-					items: None,
-				},
-				LinkItem {
-					title: "API Tokens".to_owned(),
-					icon_src: "/images/sidebar/secrets.svg".to_owned(),
-					subtitle: None,
-					path: "/user/api-tokens".to_owned(),
-					items: None,
-				},
-			]),
-		},
-	];
-
 	view! {
 		<aside class="sidebar flex flex-col items-start justify-start pb-xl">
 			<div class="sidebar-logo w-full">
@@ -116,7 +35,7 @@ pub fn Sidebar(
 			<div class="w-full h-full flex flex-col items-start justify-between overflow-hidden pt-md">
 				<nav class="h-full w-full flex flex-col items-start justify-start overflow-y-auto mt-md">
 					<ul class="w-full h-full flex flex-col items-start justify-start">
-						{links
+						{sidebar_items
 							.into_iter()
 							.map(|link| view! { <SidebarItem link={link}/> })
 							.collect_view()}

diff --git a/components/src/utils/mod.rs b/components/src/utils/mod.rs
@@ -1,8 +1,6 @@
 /// The alignment enum. This enum is used to specify the alignment of a
 /// component of left, right, or center.
 mod alignment;
-/// The App Route Enum. This Enum is used to specify the route of the app.
-mod app_route;
 /// The color enum. This enum is used to specify the color of a component. These
 /// include the primary and secondary colors of the app.
 mod color;
@@ -20,7 +18,7 @@ mod size;
 /// and the color variant.
 mod variant;
 
-pub use self::{alignment::*, app_route::*, color::*, size::*, variant::*};
+pub use self::{alignment::*, color::*, size::*, variant::*};
 
 /// The constants used within the components
 pub mod constants {

diff --git a/hosted-frontend/assets/styles/pages/_deployment.scss b/hosted-frontend/assets/styles/pages/_deployment.scss
@@ -11,7 +11,7 @@
 }
 
 .deployment-card {
-  height: 20rem;
+  min-height: 20rem;
 
   .date-time {
     background-color: $bg-code-snippet;
@@ -23,7 +23,7 @@
 .deployment-card-items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  grid-auto-rows: 1fr;
+  grid-auto-rows: 50px;
 
   width: 100%;
   height: 100%;

diff --git a/hosted-frontend/src/api/workspace/deployment/mod.rs b/hosted-frontend/src/api/workspace/deployment/mod.rs
@@ -8,6 +8,7 @@ mod list;
 mod list_machines;
 mod start;
 mod stop;
+mod stream_logs;
 
 pub use self::{
 	create::*,
@@ -20,4 +21,5 @@ pub use self::{
 	list_machines::*,
 	start::*,
 	stop::*,
+	stream_logs::*,
 };
diff --git a/hosted-frontend/src/api/workspace/deployment/stream_logs.rs b/hosted-frontend/src/api/workspace/deployment/stream_logs.rs
@@ -0,0 +1,43 @@
+use models::api::workspace::deployment::*;
+
+use crate::prelude::*;
+
+#[server(
+	StreamDeploymentLogsFn,
+	endpoint = "/infrastructure/deployment/stream_logs"
+)]
+pub async fn stream_deployment_logs(
+	access_token: Option<String>,
+	workspace_id: Option<Uuid>,
+	deployment_id: Uuid,
+) -> Result<(), ServerFnError<ErrorType>> {
+	use std::str::FromStr;
+
+	let access_token = access_token
+		.ok_or_else(|| ServerFnError::WrappedServerError(ErrorType::MalformedAccessToken))?;
+	let access_token = BearerToken::from_str(access_token.as_str())
+		.map_err(|_| ServerFnError::WrappedServerError(ErrorType::MalformedAccessToken))?;
+
+	let workspace_id = workspace_id
+		.ok_or_else(|| ServerFnError::WrappedServerError(ErrorType::WrongParameters))?;
+
+	let x = make_api_call::<StreamDeploymentLogsRequest>(
+		ApiRequest::builder()
+			.path(StreamDeploymentLogsPath {
+				deployment_id,
+				workspace_id,
+			})
+			.query(StreamDeploymentLogsQuery { start_time: None })
+			.headers(StreamDeploymentLogsRequestHeaders {
+				authorization: access_token,
+				user_agent: UserAgent::from_static("todo"),
+			})
+			.body(Default::default())
+			.build(),
+	)
+	.await
+	.map(|res| res.body)
+	.map_err(ServerFnError::WrappedServerError);
+
+	Ok(())
+}
diff --git a/hosted-frontend/src/app.rs b/hosted-frontend/src/app.rs
@@ -3,65 +3,48 @@ use leptos_router::{Outlet, ProtectedRoute, Route, Router, Routes};
 
 use crate::{pages::*, prelude::*, utils::AuthState};
 
+/// The View for the App Component, it encapsulates the whole application, and
+/// adds the sidebar or headedr if necessary
 #[component]
 pub fn AppOutletView() -> impl IntoView {
 	let (state, _) = AuthState::load();
+	let app_type = expect_context::<AppType>();
 
 	view! {
 		{move || match state.get() {
-			AuthState::LoggedOut => view! {
-				<PageContainer class="bg-image">
-					<Outlet/>
-				</PageContainer>
-			}.into_view(),
-			AuthState::LoggedIn { access_token: _, refresh_token: _, last_used_workspace_id } => {
-				if last_used_workspace_id.is_some() {
-					view! {
-						<div class="fr-fs-fs full-width full-height bg-secondary">
-							<Sidebar>
-								<div></div>
-							</Sidebar>
-							<main class="fc-fs-ct full-width px-lg">
-								<header style="width: 100%; min-height: 5rem;"></header>
-
-								<Outlet/>
-							</main>
-						</div>
-					}
-					.into_view()
-				} else {
-					view! {
-						<div>"No workspace exists. Create workspace"</div>
-					}
-					.into_view()
+			AuthState::LoggedOut => {
+				view! {
+					<PageContainer class="bg-image">
+						<Outlet />
+					</PageContainer>
 				}
+					.into_view()
 			}
-		}}
-	}
-}
+			AuthState::LoggedIn { .. } => {
+				view! {
+					<div class="fr-fs-fs full-width full-height bg-secondary">
+						<Sidebar sidebar_items={get_sidebar_items(
+							app_type,
+						)}>
+							{app_type
+								.is_managed()
+								.then(|| {
+									view! {
+										<Transition>
+											<WorkspaceSidebarComponent />
+										</Transition>
+									}
+								})}
+						</Sidebar>
 
-#[component]
-pub fn AppOutlet() -> impl IntoView {
-	let app_type = expect_context::<AppType>();
-
-	view! {
-		<div class="fr-fs-fs full-width full-height bg-secondary">
-			<Sidebar>
-				{
-					match app_type {
-						AppType::SelfHosted => view! {}.into_view(),
-						AppType::Managed => view! {
-							<Transition>
-								<WorkspaceSidebarComponent/>
-							</Transition>
-						}
-					}
+						<main class="fc-fs-ct full-width px-lg">
+							<Outlet />
+						</main>
+					</div>
 				}
-			</Sidebar>
-			<main class="fc-fs-ct full-width px-lg">
-				<Outlet/>
-			</main>
-		</div>
+					.into_view()
+			}
+		}}
 	}
 }
 
@@ -75,7 +58,6 @@ pub fn App() -> impl IntoView {
 	// TODO: When redirecting to login, the URL should include the path that the
 	// user was trying to access. This way, after login, the user is redirected
 	// to the page they were trying to access.
-
 	provide_context(app_type);
 
 	view! {
@@ -85,27 +67,48 @@ pub fn App() -> impl IntoView {
 				// Logged in routes
 				<ProtectedRoute
 					path={AppRoutes::Empty}
-					view={AppOutlet}
+					view={AppOutletView}
 					redirect_path={AppRoutes::LoggedOutRoute(LoggedOutRoute::Login)}
 					condition={move || state.get().is_logged_in()}
 				>
-					<ProfileRoutes/>
-					<InfrastructureRoutes/>
-					<DomainConfigurationRoutes/>
-					<RunnerRoutes />
-					<WorkspaceRoutes/>
-					<Route path="" view={|| view! { <div></div> }}/>
+					<ProfileRoutes />
+					<InfrastructureRoutes />
+					<Route path={LoggedInRoute::ManagedUrl} view={ManagedUrlPage}>
+						<Route path="create" view={|| view! { <div>"create"</div> }} />
+						<Route path={AppRoutes::Empty} view={UrlDashboard} />
+					</Route>
+					<Route path={LoggedInRoute::Domain} view={DomainsDashboard} />
+					{app_type
+						.is_managed()
+						.then(|| {
+							view! {
+								<RunnerRoutes />
+								<WorkspaceRoutes />
+							}
+						})}
+				// <Route path="" view={|| view! { <div></div> }} />
 				</ProtectedRoute>
 				<ProtectedRoute
 					path={AppRoutes::Empty}
 					redirect_path={AppRoutes::LoggedInRoute(LoggedInRoute::Home)}
 					view={AppOutletView}
 					condition={move || state.get().is_logged_out()}
 				>
-					<AppRoute<LoginRoute, _, _> view={move |_query, _params| LoginForm}/>
-					<Route path={LoggedOutRoute::SignUp} view={SignUpForm}/>
-					<Route path={LoggedOutRoute::ConfirmOtp} view={ConfirmSignUpPage}/>
+					<AppRoute<LoginRoute, _, _> view={move |_query, _params| LoginForm} />
+					<AppRoute<SignUpRoute, _, _> view={move |_query, _params| SignUpForm} />
+					{app_type
+						.is_managed()
+						.then(|| {
+							view! {
+								<AppRoute<
+								VerifySignUpRoute,
+								_,
+								_,
+							> view={move |_query, _params| ConfirmSignUpPage} />
+							}
+						})}
 				</ProtectedRoute>
+				<Route path="/*any" view={|| view! { <ErrorPage title="Page Not Found" /> }} />
 			</Routes>
 		</Router>
 	}

diff --git a/hosted-frontend/src/lib.rs b/hosted-frontend/src/lib.rs
@@ -29,13 +29,11 @@ pub mod prelude {
 		tooltip::*,
 		utils::{
 			Alignment,
-			AppRoute,
 			Color,
 			LinkStyleVariant,
 			SecondaryColorVariant,
 			Size,
 			TextColor,
-			TypedRoute,
 			Variant,
 		},
 	};

diff --git a/hosted-frontend/src/pages/auth/confirm_sign_up.rs b/hosted-frontend/src/pages/auth/confirm_sign_up.rs
@@ -60,7 +60,10 @@ pub fn ConfirmSignUpPage() -> impl IntoView {
 				</div>
 			</div>
 
-			<ActionForm action={confirm_action} class="flex flex-col items-start justify-start w-full">
+			<ActionForm
+				action={confirm_action}
+				class="flex flex-col items-start justify-start w-full"
+			>
 				<Input
 					name="username"
 					placeholder="Username"
@@ -77,10 +80,7 @@ pub fn ConfirmSignUpPage() -> impl IntoView {
 
 				<span class="mt-sm mb-xxs text-sm text-white">"Enter OTP"</span>
 				<input name="otp" type="hidden" value={otp} />
-				<OtpInput
-					otp={otp}
-					on_change={move |val: String| otp.set(val)}
-				/>
+				<OtpInput otp={otp} on_change={move |val: String| otp.set(val)} />
 				<Show when={move || !otp_error.get().is_empty()}>
 					<Alert r#type={AlertType::Error} class="mt-xs">
 						{move || otp_error.get()}