postgresml · chillenberger · Nov 13, 2024 · Nov 11, 2024 · Nov 11, 2024
diff --git a/pgml-dashboard/src/api/deployment/deployment_models.rs b/pgml-dashboard/src/api/deployment/deployment_models.rs
@@ -7,6 +7,7 @@ use crate::{
     responses::{Error, ResponseOk},
 };
 
+use crate::components::layouts::product::Index as Product;
 use crate::templates::{components::NavLink, *};
 
 use crate::models;
@@ -19,7 +20,7 @@ use std::collections::HashMap;
 // Returns models page
 #[get("/models")]
 pub async fn deployment_models(cluster: &Cluster, _connected: ConnectedCluster<'_>) -> Result<ResponseOk, Error> {
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![NavLink::new("Models", &urls::deployment_models()).active()]);
 
     let tabs = vec![tabs::Tab {
@@ -38,7 +39,7 @@ pub async fn model(cluster: &Cluster, model_id: i64, _connected: ConnectedCluste
     let model = models::Model::get_by_id(cluster.pool(), model_id).await?;
     let project = models::Project::get_by_id(cluster.pool(), model.project_id).await?;
 
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![
         NavLink::new("Models", &urls::deployment_models()),
         NavLink::new(&project.name, &urls::deployment_project_by_id(project.id)),

diff --git a/pgml-dashboard/src/api/deployment/notebooks.rs b/pgml-dashboard/src/api/deployment/notebooks.rs
@@ -11,6 +11,7 @@ use crate::{
     responses::{Error, ResponseOk},
 };
 
+use crate::components::layouts::product::Index as Product;
 use crate::templates::{components::NavLink, *};
 use crate::utils::tabs;
 
@@ -21,7 +22,7 @@ use crate::utils::urls;
 // Returns notebook page
 #[get("/notebooks")]
 pub async fn notebooks(cluster: &Cluster, _connected: ConnectedCluster<'_>) -> Result<ResponseOk, Error> {
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![NavLink::new("Notebooks", &urls::deployment_notebooks()).active()]);
 
     let tabs = vec![tabs::Tab {
@@ -43,7 +44,7 @@ pub async fn notebook(
 ) -> Result<ResponseOk, Error> {
     let notebook = models::Notebook::get_by_id(cluster.pool(), notebook_id).await?;
 
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![
         NavLink::new("Notebooks", &urls::deployment_notebooks()),
         NavLink::new(notebook.name.as_str(), &urls::deployment_notebook_by_id(notebook_id)).active(),

diff --git a/pgml-dashboard/src/api/deployment/projects.rs b/pgml-dashboard/src/api/deployment/projects.rs
@@ -7,6 +7,7 @@ use crate::{
     responses::{Error, ResponseOk},
 };
 
+use crate::components::layouts::product::Index as Product;
 use crate::templates::{components::NavLink, *};
 
 use crate::models;
@@ -17,7 +18,7 @@ use crate::utils::urls;
 // Returns the deployments projects page.
 #[get("/projects")]
 pub async fn projects(cluster: &Cluster, _connected: ConnectedCluster<'_>) -> Result<ResponseOk, Error> {
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![NavLink::new("Projects", &urls::deployment_projects()).active()]);
 
     let tabs = vec![tabs::Tab {
@@ -39,7 +40,7 @@ pub async fn project(
 ) -> Result<ResponseOk, Error> {
     let project = models::Project::get_by_id(cluster.pool(), project_id).await?;
 
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![
         NavLink::new("Projects", &urls::deployment_projects()),
         NavLink::new(project.name.as_str(), &urls::deployment_project_by_id(project_id)).active(),

diff --git a/pgml-dashboard/src/api/deployment/snapshots.rs b/pgml-dashboard/src/api/deployment/snapshots.rs
@@ -7,6 +7,7 @@ use crate::{
     responses::{Error, ResponseOk},
 };
 
+use crate::components::layouts::product::Index as Product;
 use crate::templates::{components::NavLink, *};
 
 use crate::models;
@@ -18,7 +19,7 @@ use std::collections::HashMap;
 // Returns snapshots page
 #[get("/snapshots")]
 pub async fn snapshots(cluster: &Cluster, _connected: ConnectedCluster<'_>) -> Result<ResponseOk, Error> {
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![NavLink::new("Snapshots", &urls::deployment_snapshots()).active()]);
 
     let tabs = vec![tabs::Tab {
@@ -40,7 +41,7 @@ pub async fn snapshot(
 ) -> Result<ResponseOk, Error> {
     let snapshot = models::Snapshot::get_by_id(cluster.pool(), snapshot_id).await?;
 
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![
         NavLink::new("Snapshots", &urls::deployment_snapshots()),
         NavLink::new(&snapshot.relation_name, &urls::deployment_snapshot_by_id(snapshot.id)).active(),

diff --git a/pgml-dashboard/src/api/deployment/uploader.rs b/pgml-dashboard/src/api/deployment/uploader.rs
@@ -4,6 +4,7 @@ use rocket::response::Redirect;
 use rocket::route::Route;
 use sailfish::TemplateOnce;
 
+use crate::components::layouts::product::Index as Product;
 use crate::{
     guards::Cluster,
     guards::ConnectedCluster,
@@ -20,7 +21,7 @@ use crate::utils::urls;
 // Returns the uploader page.
 #[get("/uploader")]
 pub async fn uploader(cluster: &Cluster, _connected: ConnectedCluster<'_>) -> Result<ResponseOk, Error> {
-    let mut layout = crate::templates::WebAppBase::new("Dashboard", &cluster);
+    let mut layout = Product::new("Dashboard", &cluster);
     layout.breadcrumbs(vec![NavLink::new("Upload Data", &urls::deployment_uploader()).active()]);
 
     let tabs = vec![tabs::Tab {

diff --git a/pgml-dashboard/src/components/layouts/docs/mod.rs b/pgml-dashboard/src/components/layouts/docs/mod.rs
@@ -2,7 +2,7 @@ use crate::components::cms::IndexLink;
 use crate::components::layouts::Head;
 use crate::guards::Cluster;
 use crate::models::User;
-use pgml_components::component;
+use pgml_components::{component, Component};
 use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default, Clone)]
@@ -13,23 +13,26 @@ pub struct Docs {
     user: Option<User>,
     content: Option<String>,
     index: Vec<IndexLink>,
+    body_components: Vec<Component>,
 }
 
 impl Docs {
     pub fn new(title: &str, context: Option<&Cluster>) -> Docs {
-        let (head, footer, user) = match context.as_ref() {
+        let (head, footer, user, body_components) = match context.as_ref() {
             Some(context) => (
                 Head::new().title(&title).context(&context.context.head_items),
                 Some(context.context.marketing_footer.clone()),
                 Some(context.context.user.clone()),
+                context.context.body_components.clone(),
             ),
-            None => (Head::new().title(&title), None, None),
+            None => (Head::new().title(&title), None, None, Vec::new()),
         };
 
         Docs {
             head,
             footer,
             user,
+            body_components,
             ..Default::default()
         }
     }

diff --git a/pgml-dashboard/src/components/layouts/docs/template.html b/pgml-dashboard/src/components/layouts/docs/template.html
@@ -7,6 +7,9 @@
 <html lang="en-US">
     <%+ head %>
     <body data-bs-theme="dark" data-theme="docs">
+      <% for component in body_components {%>
+        <%+ component %>
+      <% } %>
       <div class="border-bottom" data-controller="layouts-docs">
         <%+ MarketingNavbar::new(user).style_alt() %>
 

diff --git a/pgml-dashboard/src/components/layouts/marketing/base/mod.rs b/pgml-dashboard/src/components/layouts/marketing/base/mod.rs
@@ -3,7 +3,7 @@ use crate::components::notifications::marketing::AlertBanner;
 use crate::guards::Cluster;
 use crate::models::User;
 use crate::Notification;
-use pgml_components::component;
+use pgml_components::{component, Component};
 use sailfish::TemplateOnce;
 use std::fmt;
 
@@ -35,19 +35,21 @@ pub struct Base {
     pub user: Option<User>,
     pub theme: Theme,
     pub no_transparent_nav: bool,
+    pub body_components: Vec<Component>,
 }
 
 impl Base {
     pub fn new(title: &str, context: Option<&Cluster>) -> Base {
         let title = format!("{} - PostgresML", title);
 
-        let (head, footer, user) = match context.as_ref() {
+        let (head, footer, user, body_components) = match context.as_ref() {
             Some(context) => (
                 Head::new().title(&title).context(&context.context.head_items),
                 Some(context.context.marketing_footer.clone()),
                 Some(context.context.user.clone()),
+                context.context.body_components.clone(),
             ),
-            None => (Head::new().title(&title), None, None),
+            None => (Head::new().title(&title), None, None, Vec::new()),
         };
 
         Base {
@@ -56,6 +58,7 @@ impl Base {
             alert_banner: AlertBanner::from_notification(Notification::next_alert(context)),
             user,
             no_transparent_nav: false,
+            body_components,
             ..Default::default()
         }
     }

diff --git a/pgml-dashboard/src/components/layouts/marketing/base/template.html b/pgml-dashboard/src/components/layouts/marketing/base/template.html
@@ -13,6 +13,10 @@
                 behavior: 'instant'
             });
         </script>
+        <!-- global items (scripts, no rendering items) that need to be placed in body. -->
+        <% for component in body_components {%>
+            <%+ component %>
+          <% } %>
         <main>
             <%+ alert_banner %>
 

diff --git a/pgml-dashboard/src/components/layouts/mod.rs b/pgml-dashboard/src/components/layouts/mod.rs
@@ -11,3 +11,6 @@ pub use head::Head;
 
 // src/components/layouts/marketing
 pub mod marketing;
+
+// src/components/layouts/product
+pub mod product;
diff --git a/pgml-dashboard/src/components/layouts/product/index/index.scss b/pgml-dashboard/src/components/layouts/product/index/index.scss
@@ -0,0 +1 @@
+div[data-controller="layouts-product-index"] {}
diff --git a/pgml-dashboard/src/components/layouts/product/index/mod.rs b/pgml-dashboard/src/components/layouts/product/index/mod.rs
@@ -0,0 +1,103 @@
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+use pgml_components::Component;
+
+pub use crate::components::{self, cms::index_link::IndexLink, NavLink, StaticNav, StaticNavLink};
+use crate::{Notification, NotificationLevel};
+use components::notifications::product::ProductBanner;
+
+use crate::components::layouts::Head;
+use crate::models::Cluster;
+
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "layouts/product/index/template.html")]
+pub struct Index<'a> {
+    pub content: Option<String>,
+    pub breadcrumbs: Vec<NavLink<'a>>,
+    pub head: Head,
+    pub dropdown_nav: StaticNav,
+    pub product_left_nav: StaticNav,
+    pub body_components: Vec<Component>,
+    pub cluster: Cluster,
+    pub product_banners_high: Vec<ProductBanner>,
+    pub product_banner_medium: ProductBanner,
+    pub product_banner_marketing: ProductBanner,
+}
+
+impl<'a> Index<'a> {
+    pub fn new(title: &str, context: &crate::guards::Cluster) -> Self {
+        let head = Head::new().title(title).context(&context.context.head_items);
+        let cluster = context.context.cluster.clone();
+
+        let all_product_high_level = context
+            .notifications
+            .clone()
+            .unwrap_or_else(|| vec![])
+            .into_iter()
+            .filter(|n: &Notification| n.level == NotificationLevel::ProductHigh)
+            .enumerate()
+            .map(|(i, n)| ProductBanner::from_notification(Some(&n)).set_show_modal_on_load(i == 0))
+            .collect::<Vec<ProductBanner>>();
+
+        Index {
+            head,
+            cluster,
+            dropdown_nav: context.context.dropdown_nav.clone(),
+            product_left_nav: context.context.product_left_nav.clone(),
+            product_banners_high: all_product_high_level,
+            product_banner_medium: ProductBanner::from_notification(Notification::next_product_of_level(
+                context,
+                NotificationLevel::ProductMedium,
+            )),
+            product_banner_marketing: ProductBanner::from_notification(Notification::next_product_of_level(
+                context,
+                NotificationLevel::ProductMarketing,
+            )),
+            body_components: context.context.body_components.clone(),
+            ..Default::default()
+        }
+    }
+
+    pub fn breadcrumbs(&mut self, breadcrumbs: Vec<NavLink<'a>>) -> &mut Self {
+        self.breadcrumbs = breadcrumbs.to_owned();
+        self
+    }
+
+    pub fn disable_upper_nav(&mut self) -> &mut Self {
+        let links: Vec<StaticNavLink> = self
+            .product_left_nav
+            .links
+            .iter()
+            .map(|item| item.to_owned().disabled(true))
+            .collect();
+        self.product_left_nav = StaticNav { links };
+        self
+    }
+
+    pub fn content(&mut self, content: &str) -> &mut Self {
+        self.content = Some(content.to_owned());
+        self
+    }
+
+    pub fn body_components(&mut self, components: Vec<Component>) -> &mut Self {
+        self.body_components.extend(components);
+        self
+    }
+
+    pub fn render<T>(&mut self, template: T) -> String
+    where
+        T: sailfish::TemplateOnce,
+    {
+        self.content = Some(template.render_once().unwrap());
+        (*self).clone().into()
+    }
+}
+
+impl<'a> From<Index<'a>> for String {
+    fn from(layout: Index) -> String {
+        layout.render_once().unwrap()
+    }
+}
+
+component!(Index, 'a);
diff --git a/...hboard/templates/layout/web_app_base.html → ...nents/layouts/product/index/template.html b/...hboard/templates/layout/web_app_base.html → ...nents/layouts/product/index/template.html
diff --git a/pgml-dashboard/src/components/layouts/product/mod.rs b/pgml-dashboard/src/components/layouts/product/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/layouts/product/index
+pub mod index;
+pub use index::Index;
diff --git a/pgml-dashboard/src/guards.rs b/pgml-dashboard/src/guards.rs
@@ -62,6 +62,7 @@ impl Cluster {
                 },
                 marketing_footer: MarketingFooter::new().render_once().unwrap(),
                 head_items: None,
+                body_components: Vec::new(),
             },
             notifications: None,
         }

diff --git a/pgml-dashboard/src/lib.rs b/pgml-dashboard/src/lib.rs
@@ -26,11 +26,13 @@ use guards::Cluster;
 use responses::{Error, Response, ResponseOk};
 use templates::{components::StaticNav, *};
 
+use crate::components::layouts::product::Index as Product;
 use crate::components::tables::serverless_models::{ServerlessModels, ServerlessModelsTurbo};
 use crate::components::tables::serverless_pricing::{ServerlessPricing, ServerlessPricingTurbo};
 use crate::utils::cookies::{NotificationCookie, Notifications};
 use crate::utils::urls;
 use chrono;
+use pgml_components::Component;
 use std::collections::hash_map::DefaultHasher;
 use std::hash::{Hash, Hasher};
 
@@ -53,6 +55,7 @@ pub struct Context {
     pub product_left_nav: StaticNav,
     pub marketing_footer: String,
     pub head_items: Option<String>,
+    pub body_components: Vec<Component>,
 }
 
 #[derive(Debug, Clone, Default)]
@@ -323,7 +326,7 @@ pub async fn dashboard(tab: Option<&str>, id: Option<i64>) -> Redirect {
 
 #[get("/playground")]
 pub async fn playground(cluster: &Cluster) -> Result<ResponseOk, Error> {
-    let mut layout = crate::templates::WebAppBase::new("Playground", &cluster);
+    let mut layout = Product::new("Playground", &cluster);
     Ok(ResponseOk(layout.render(templates::Playground {})))
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		div[data-controller="layouts-product-index"] {}