LEA -> WIP: Major upgrade to leptos 0.7

Cargo.toml

@@ -89,11 +89,11 @@ hyper-util = "0.1.6"
 indicatif = "0.17.7"
 indoc = "2.0.4"
 jsonwebtoken = "9.2.0"
-leptos = { version = "0.6.15" }
+leptos = { version = "0.7.3" }
 # https://gitlab.com/GoodLucky777/leptos_oidc, version 0.7.0
 leptos_oidc = { git = "https://gitlab.com/GoodLucky777/leptos_oidc", rev = "ed55987efec1004de93455591ef702bf1ffd2e43" }
-leptos_router = { version = "0.6.15" }
-leptos-use = { version = "0.13.10" }
+leptos_router = { version = "0.7.3" }
+leptos-use = { version = "0.15.3" }
 mime = "0.3.17"
 mockall = "0.13.0"
 netlink-packet-route = "0.19.0"

opendut-carl/opendut-carl-api/src/carl/mod.rs

@@ -209,7 +209,7 @@ cfg_if! {
 
 #[cfg(feature = "wasm-client")]
 pub mod wasm {
-    use leptos::{create_signal, provide_context};
+    use leptos::prelude::{signal, provide_context};
     use tonic::codegen::InterceptedService;
 
     use opendut_auth::public::{Auth, AuthInterceptor, OptionalAuthData};
@@ -228,7 +228,7 @@ pub mod wasm {
 
     impl CarlClient {
         pub async fn create(url: url::Url, auth: Option<Auth>) -> Result<CarlClient, InitializationError> {
-            let auth_data_signal = create_signal(
+            let auth_data_signal = signal(
                 OptionalAuthData { auth_data: None }
             );
             provide_context(auth_data_signal);

opendut-lea/Cargo.toml

@@ -16,7 +16,7 @@ gloo-net = { workspace = true, features = ["json"]}
 jsonwebtoken = { workspace = true }
 leptos = { workspace = true, features = ["csr"] }
 leptos_oidc =  { workspace = true }
-leptos_router = { workspace = true, features = ["csr"] }
+leptos_router = { workspace = true }
 leptos-use = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
 shadow-rs = { workspace = true, default-features = false, features = ["tzdb"] }

opendut-lea/src/about/overview.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use crate::app::{ExpectGlobals, use_app_globals};
 use crate::components::{BasePageContainer, Initialized};
 
@@ -15,7 +15,7 @@ pub fn AboutOverview() -> impl IntoView {
 
         let globals = use_app_globals();
 
-        let metadata: Resource<(), VersionInfo> = create_local_resource(|| {}, move |_| {
+        let metadata: LocalResource<VersionInfo> = LocalResource::new(move || {
             let mut carl = globals.expect_client();
             async move {
                 carl.metadata.version().await

opendut-lea/src/app.rs

@@ -1,7 +1,7 @@
-use std::rc::Rc;
+use std::sync::Arc;
 
 use gloo_net::http;
-use leptos::*;
+use leptos::prelude::*;
 use leptos_oidc::{Auth, AuthParameters};
 use serde::{Deserialize, Deserializer};
 use tracing::info;
@@ -20,8 +20,8 @@ pub struct AppGlobals {
     pub auth: Option<Auth>,
 }
 
-pub fn use_app_globals() -> Resource<(), Result<AppGlobals, AppGlobalsError>> {
-    use_context::<Resource<(), Result<AppGlobals, AppGlobalsError>>>()
+pub fn use_app_globals() -> LocalResource<Result<AppGlobals, AppGlobalsError>> {
+    use_context::<LocalResource<Result<AppGlobals, AppGlobalsError>>>()
         .expect("The AppGlobals should be provided in the context.")
 }
 
@@ -87,7 +87,7 @@ pub struct AppGlobalsError {
 #[component]
 pub fn App() -> impl IntoView {
 
-    let globals: Resource<(), Result<AppGlobals, AppGlobalsError>> = create_local_resource(|| {}, |_| async move {
+    let globals: LocalResource<Result<AppGlobals, AppGlobalsError>> = LocalResource::new(move || async {
         let config = http::Request::get("/api/lea/config")
             .send()
             .await
@@ -123,7 +123,7 @@ pub fn App() -> impl IntoView {
     });
 
     provide_context(globals);
-    provide_context(Rc::new(Toaster::new()));
+    provide_context(Arc::new(Toaster::new()));
 
     view! {
         <Navbar />
@@ -134,14 +134,14 @@ pub fn App() -> impl IntoView {
 }
 
 pub trait ExpectGlobals {
-    fn expect_config(&self) -> AppConfig;
-    fn expect_client(&self) -> CarlClient;
-    fn expect_auth(&self) -> Option<Auth>;
+    async fn expect_config(&self) -> AppConfig;
+    async fn expect_client(&self) -> CarlClient;
+    async fn expect_auth(&self) -> Option<Auth>;
 }
 
-impl ExpectGlobals for Resource<(), Result<AppGlobals, AppGlobalsError>> {
+impl ExpectGlobals for LocalResource<Result<AppGlobals, AppGlobalsError>> {
 
-    fn expect_config(&self) -> AppConfig {
+    async fn expect_config(&self) -> AppConfig {
         self.get()
             .expect("AppGlobals should be loaded to get the config")
             .expect("AppGlobals should be loaded successfully to get the config")

opendut-lea/src/clusters/card.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use crate::app::{ExpectGlobals, use_app_globals};
 
 use crate::clusters::components::CreateClusterButton;
@@ -15,7 +15,7 @@ pub fn ClustersCard() -> impl IntoView {
 
     let globals = use_app_globals();
 
-    let clusters: Resource<(), Clusters> = create_local_resource(|| {}, move |_| {
+    let clusters: LocalResource<Clusters> = LocalResource::new(move || {
         let mut carl = globals.expect_client();
         async move {
             let configured = carl.cluster.list_cluster_configurations().await

opendut-lea/src/clusters/components/create_cluster_button.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 use opendut_types::cluster::ClusterId;
 

opendut-lea/src/clusters/configurator/components/cluster_name_input.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 use opendut_types::cluster::{IllegalClusterName, ClusterName};
 

opendut-lea/src/clusters/configurator/components/controls.rs

@@ -1,6 +1,6 @@
-use std::rc::Rc;
+use std::sync::Arc;
 
-use leptos::*;
+use leptos::prelude::*;
 use tracing::{debug, error};
 
 use opendut_types::cluster::{ClusterConfiguration, ClusterId};
@@ -15,7 +15,7 @@ use crate::routing::{navigate_to, WellKnownRoutes};
 pub fn Controls(cluster_configuration: ReadSignal<UserClusterConfiguration>, deployed_signal: RwSignal<IsDeployed>) -> impl IntoView {
 
     let (info_text, _) =
-        create_signal({
+        signal({
             if deployed_signal.get().0 {
                 String::from("Cluster can not be updated or deleted while it is deployed.")
             } else {
@@ -41,7 +41,7 @@ fn SaveClusterButton(cluster_configuration: ReadSignal<UserClusterConfiguration>
     let toaster = use_toaster();
 
     let store_action = create_action(move |_: &()| {
-        let toaster = Rc::clone(&toaster);
+        let toaster = Arc::clone(&toaster);
         let configuration = ClusterConfiguration::try_from(cluster_configuration.get_untracked());
         async move {
             match configuration {
@@ -124,7 +124,7 @@ fn DeleteClusterButton(cluster_configuration: ReadSignal<UserClusterConfiguratio
         } else if delete_action.pending().get() {
             ButtonState::Loading
         } else {
-            ButtonState::Default
+            ButtonState::Enabled
         }
     });
 

opendut-lea/src/clusters/configurator/components/device_selector.rs

@@ -1,9 +1,10 @@
 use std::collections::HashSet;
 use std::ops::Not;
 
-use leptos::*;
+use leptos::prelude::*;
+use leptos::reactive::wrappers::write::SignalSetter;
 
-use opendut_types::peer::PeerId;
+use opendut_types::peer::{PeerDescriptor, PeerId};
 use opendut_types::topology::{DeviceDescriptor, DeviceId};
 use opendut_types::util::net::NetworkInterfaceDescriptor;
 use crate::clusters::configurator::components::{get_all_peers, get_all_selected_devices};
@@ -37,75 +38,73 @@ pub fn DeviceSelector(cluster_configuration: RwSignal<UserClusterConfiguration>)
         })
     };
 
-    let rows = move || {
-        let mut all_devices_by_peer: Vec<_> = Vec::new();
+    fn render_peer_descriptors(peer_descriptors: Vec<PeerDescriptor>, selected_devices: HashSet<DeviceId>, getter: Signal<DeviceSelection>, setter: SignalSetter<DeviceSelection>) -> impl IntoView {
+            let mut all_devices_by_peer: Vec<_> = Vec::new();
 
-        for peer in peer_descriptors.get().unwrap_or_default() {
-            let mut devices = peer.topology.devices;
-            let selected_devices = selected_devices();
+            for peer in peer_descriptors {
+                let mut devices = peer.topology.devices;
 
-            devices.sort_by(|a, b|
+                devices.sort_by(|a, b|
                 a.name.value().to_lowercase().cmp(&b.name.value().to_lowercase()));
 
-            let interfaces_and_devices = peer.network.interfaces_zipped_with_devices(&devices);
-
-            let devices_per_peer = interfaces_and_devices.into_iter()
-                .map(|(network_interface, device)| {
-                    let collapsed_signal = create_rw_signal(true);
-                    let collapse_button_icon = MaybeSignal::derive(move || if collapsed_signal.get() { FontAwesomeIcon::ChevronDown } else {FontAwesomeIcon::ChevronUp} );
-                    let selected_signal = create_rw_signal(selected_devices.contains(&device.id));
-                    view! {
-                        <tr>
-                            <td class="is-narrow">
-                                <IconButton
-                                    icon=collapse_button_icon
-                                    color=ButtonColor::White
-                                    size=ButtonSize::Small
-                                    state=ButtonState::Enabled
-                                    label="Show or hide device details"
-                                    on_action=move || collapsed_signal.update(|collapsed| *collapsed = collapsed.not())
+                let interfaces_and_devices = peer.network.interfaces_zipped_with_devices(&devices);
+
+                let devices_per_peer = interfaces_and_devices.into_iter()
+                    .map(|(network_interface, device)| {
+                        let collapsed_signal = RwSignal::new(true);
+                        let collapse_button_icon = MaybeSignal::derive(move || if collapsed_signal.get() { FontAwesomeIcon::ChevronDown } else {FontAwesomeIcon::ChevronUp} );
+                        let selected_signal = RwSignal::new(selected_devices.contains(&device.id));
+                        view! {
+                            <tr>
+                                <td class="is-narrow">
+                                    <IconButton
+                                        icon=collapse_button_icon
+                                        color=ButtonColor::White
+                                        size=ButtonSize::Small
+                                        state=ButtonState::Enabled
+                                        label="Show or hide device details"
+                                        on_action=move || collapsed_signal.update(|collapsed| *collapsed = collapsed.not())
+                                    />
+                                </td>
+                                <td>
+                                    {device.name.to_string()}
+                                </td>
+                                <td>{peer.location.clone().unwrap_or_default().to_string()}</td>
+                                <td class="is-narrow">
+                                    <IconButton
+                                        icon=FontAwesomeIcon::Check
+                                        color=MaybeSignal::derive(move || match selected_signal.get() {
+                                            false => ButtonColor::Light,
+                                            true => ButtonColor::Success,
+                                        })
+                                        size=ButtonSize::Small
+                                        state=ButtonState::Enabled
+                                        label="More infos"
+                                        on_action=move || icon_button_on_action(
+                                            selected_signal,
+                                            getter,
+                                            setter,
+                                            device.id,
+                                        )
+                                    />
+                                </td>
+                            </tr>
+                            <tr hidden={collapsed_signal}>
+                                <DeviceInfo
+                                    device = device
+                                    network_interface = network_interface
+                                    peer_id = peer.id
                                 />
-                            </td>
-                            <td>
-                                {&device.name.to_string()}
-                            </td>
-                            <td>{peer.location.clone().unwrap_or_default().to_string()}</td>
-                            <td class="is-narrow">
-                                <IconButton
-                                    icon=FontAwesomeIcon::Check
-                                    color=MaybeSignal::derive(move || match selected_signal.get() {
-                                        false => ButtonColor::Light,
-                                        true => ButtonColor::Success,
-                                    })
-                                    size=ButtonSize::Small
-                                    state=ButtonState::Enabled
-                                    label="More infos"
-                                    on_action=move || icon_button_on_action(
-                                        selected_signal,
-                                        getter,
-                                        setter,
-                                        device.id,
-                                    )
-                                />
-                            </td>
-                        </tr>
-                        <tr hidden={collapsed_signal}>
-                            <DeviceInfo
-                                device = device
-                                network_interface = network_interface
-                                peer_id = peer.id
-                            />
-                        </tr>
-                    }
-                })
-                .collect::<Vec<_>>();
-
-            for device in devices_per_peer {
-                all_devices_by_peer.push(device);
+                            </tr>
+                        }
+                    }).collect_view();
+
+                for device in devices_per_peer {
+                    all_devices_by_peer.push(device);
+                }
             }
-        }
-        all_devices_by_peer
-    };
+            all_devices_by_peer
+    }
 
     view! {
         <p class="help has-text-danger">{ help_text }</p>
@@ -120,7 +119,17 @@ pub fn DeviceSelector(cluster_configuration: RwSignal<UserClusterConfiguration>)
                     </tr>
                 </thead>
                     <tbody>
-                        { rows }
+                        <Suspense
+                            fallback=move || view! { <p>"Loading..."</p> }
+                        >
+                            {move || Suspend::new(async move {
+                                let peer_descriptors = peer_descriptors.await;
+                                let selected_devices = selected_devices();
+                                view! {
+                                    { render_peer_descriptors(peer_descriptors, selected_devices, getter, setter) }
+                                }
+                            })}
+                        </Suspense>        
                     </tbody>
             </table>
         </div>

opendut-lea/src/clusters/configurator/components/leader_selector.rs

@@ -1,6 +1,6 @@
 use std::collections::HashSet;
 
-use leptos::{component, create_read_slice, create_slice, view, IntoView, RwSignal, SignalGet, SignalWith};
+use leptos::prelude::*;
 
 use opendut_types::peer::PeerId;
 use opendut_types::topology::DeviceId;

opendut-lea/src/clusters/configurator/components/mod.rs

@@ -4,7 +4,7 @@ mod cluster_name_input;
 mod leader_selector;
 
 use std::collections::HashSet;
-use leptos::{create_local_resource, Resource, Signal, SignalWith};
+use leptos::prelude::*;
 pub use controls::Controls;
 pub use device_selector::{DeviceSelector, DeviceSelection};
 pub use cluster_name_input::ClusterNameInput;
@@ -14,10 +14,10 @@ use opendut_types::topology::DeviceId;
 use crate::app::{ExpectGlobals, use_app_globals};
 
 
-fn get_all_peers() -> Resource<(), Vec<PeerDescriptor>> {
+fn get_all_peers() -> LocalResource<Vec<PeerDescriptor>> {
     let globals = use_app_globals();
 
-    create_local_resource(|| {}, move |_| {
+    LocalResource::new(move || {
         async move {
             let mut carl = globals.expect_client();
             carl.peers.list_peer_descriptors().await