Skip to content

Commit

Permalink
refactor: improvements to node selection code
Browse files Browse the repository at this point in the history
  • Loading branch information
@bochaco
bochaco committed Dec 10, 2024
1 parent 7a19ff7 commit e336504
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 46 deletions.
14 changes: 10 additions & 4 deletions src/node_actions.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,14 @@ pub fn NodesActionsView() -> impl IntoView {
}

action.apply(&info).await;
context.selecting_nodes.update(|(_, _, s)| {
s.remove(&info.read_untracked().container_id);
});

// let's await for it to finish transitioning unless it was a removal action
while action != NodeAction::Remove
&& !was_cancelled()
&& info.read().status.is_transitioning()
&& info.read_untracked().status.is_transitioning()
{
sleep(Duration::from_millis(NODES_LIST_POLLING_FREQ_MILLIS)).await;
}
Expand Down Expand Up @@ -177,10 +180,9 @@ pub fn NodesActionsView() -> impl IntoView {
on:click=move |_| {
context
.selecting_nodes
.update(|(f, g, s)| {
.update(|(f, _, s)| {
s.clear();
*f = false;
*g = false;
})
}
data-tooltip-target="tooltip-cancel"
Expand Down Expand Up @@ -213,7 +215,11 @@ pub fn NodesActionsView() -> impl IntoView {
data-tooltip-target="tooltip-manage"
data-tooltip-placement="left"
class=move || {
if is_selecting_nodes() { "hidden" } else { "btn-manage-nodes-action" }
if is_selecting_nodes() || is_selection_executing() {
"hidden"
} else {
"btn-manage-nodes-action"
}
}
>
<IconManageNodes />
Expand Down
101 changes: 63 additions & 38 deletions src/nodes_list_view.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,18 @@ fn NodeInstanceView(
set_chart_data: WriteSignal<ChartSeriesData>,
) -> impl IntoView {
let context = expect_context::<ClientGlobalState>();
let is_selecting_nodes = move || context.selecting_nodes.read().0;
let is_selected = move || {
context
.selecting_nodes
.read()
.2
.contains(&info.read_untracked().container_id)
};
let is_selection_on = move || {
let (is_selecting_nodes, is_selection_executing, _) = *context.selecting_nodes.read();
is_selecting_nodes && (!is_selection_executing || is_selected())
};

let is_transitioning = move || info.read().status.is_transitioning();

let peer_id = move || {
Expand All @@ -226,45 +237,12 @@ fn NodeInstanceView(
};

view! {
<div class="relative max-w-sm m-2 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<div class=move || { if is_selected() { "node-card-selected" } else { "node-card" } }>
<div class="flex justify-end">
<Show when=move || is_selecting_nodes() fallback=move || view! { "" }.into_view()>
<div>
<span class=" absolute left-4">
<input
type="checkbox"
checked=context
.selecting_nodes
.read()
.2
.contains(&info.read_untracked().container_id)
disabled=move || context.selecting_nodes.read().1
on:change=move |ev| {
if event_target_checked(&ev) {
context
.selecting_nodes
.update(|(_, _, s)| {
s.insert(info.read_untracked().container_id.clone());
})
} else {
context
.selecting_nodes
.update(|(_, _, s)| {
s.remove(&info.read_untracked().container_id);
})
}
}
class=move || {
if is_transitioning() {
"hidden"
} else {
"w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
}
}
/>
</span>
</div>
<Show when=move || is_selection_on() fallback=move || view! { "" }.into_view()>
<NodeSelection info />
</Show>

<Show when=move || is_transitioning() fallback=move || view! { "" }.into_view()>
<div>
<span class="loading loading-spinner absolute left-4"></span>
Expand Down Expand Up @@ -449,6 +427,53 @@ fn NodeInstanceView(
}
}

#[component]
fn NodeSelection(info: RwSignal<NodeInstanceInfo>) -> impl IntoView {
let context = expect_context::<ClientGlobalState>();
let is_selection_executing = move || context.selecting_nodes.read().1;
let is_selected = move || {
context
.selecting_nodes
.read()
.2
.contains(&info.read_untracked().container_id)
};

view! {
<div>
<span class="absolute left-4">
<input
type="checkbox"
checked=move || is_selected()
disabled=move || is_selection_executing()
on:change=move |ev| {
if event_target_checked(&ev) {
context
.selecting_nodes
.update(|(_, _, s)| {
s.insert(info.read_untracked().container_id.clone());
})
} else {
context
.selecting_nodes
.update(|(_, _, s)| {
s.remove(&info.read_untracked().container_id);
})
}
}
class=move || {
if info.read().status.is_transitioning() {
"hidden"
} else {
"w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
}
}
/>
</span>
</div>
}
}

#[component]
fn NodeLogs(info: RwSignal<NodeInstanceInfo>, set_logs: WriteSignal<Vec<String>>) -> impl IntoView {
// we use the context to switch on/off the streaming of logs
Expand Down
16 changes: 12 additions & 4 deletions style/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,26 @@
@apply btn-disabled inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-200 bg-white border border-gray-200 rounded hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white;
}

.node-card {
@apply relative max-w-sm m-2 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700;
}

.node-card-selected {
@apply relative max-w-sm m-2 p-4 bg-gray-50 border border-blue-700 rounded-lg shadow dark:bg-gray-800 dark:border-blue-400;
}

.node-info-item {
@apply text-blue-700 dark:text-blue-400
@apply text-blue-700 dark:text-blue-400;
}

.settings-tab {
@apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300
@apply inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;
}

.settings-active-tab {
@apply inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500
@apply inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500;
}

.btn-manage-nodes-action {
@apply flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400
@apply flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400;
}

0 comments on commit e336504

Please sign in to comment.