471 lines
19 KiB
Rust
471 lines
19 KiB
Rust
use gloo_timers::callback::Interval;
|
|
use yew::prelude::*;
|
|
|
|
use crate::api;
|
|
use crate::components::status_badge::StatusBadge;
|
|
use crate::types::Status;
|
|
|
|
/// Format a UTC datetime string as a relative time like "in 2h 15m".
|
|
fn format_next_run(datetime_str: &str) -> String {
|
|
let now_ms = js_sys::Date::new_0().get_time();
|
|
let parsed = js_sys::Date::parse(datetime_str);
|
|
|
|
// NaN means parse failed
|
|
if parsed.is_nan() {
|
|
return datetime_str.to_string();
|
|
}
|
|
|
|
let delta_ms = parsed - now_ms;
|
|
if delta_ms <= 0.0 {
|
|
return "soon".to_string();
|
|
}
|
|
let total_mins = (delta_ms / 60_000.0) as u64;
|
|
let hours = total_mins / 60;
|
|
let mins = total_mins % 60;
|
|
if hours > 0 {
|
|
format!("in {hours}h {mins}m")
|
|
} else {
|
|
format!("in {mins}m")
|
|
}
|
|
}
|
|
|
|
#[function_component(DashboardPage)]
|
|
pub fn dashboard() -> Html {
|
|
let status = use_state(|| None::<Status>);
|
|
let error = use_state(|| None::<String>);
|
|
let message = use_state(|| None::<String>);
|
|
|
|
// Fetch status function
|
|
let fetch_status = {
|
|
let status = status.clone();
|
|
let error = error.clone();
|
|
Callback::from(move |_: ()| {
|
|
let status = status.clone();
|
|
let error = error.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::get_status().await {
|
|
Ok(s) => {
|
|
error.set(None);
|
|
status.set(Some(s));
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
// Initial fetch
|
|
{
|
|
let fetch = fetch_status.clone();
|
|
use_effect_with((), move |_| {
|
|
fetch.emit(());
|
|
});
|
|
}
|
|
|
|
// Auto-refresh every 5 seconds
|
|
{
|
|
let fetch = fetch_status.clone();
|
|
use_effect_with((), move |_| {
|
|
let interval = Interval::new(1_000, move || {
|
|
fetch.emit(());
|
|
});
|
|
// Keep the interval alive for the component's lifetime
|
|
move || drop(interval)
|
|
});
|
|
}
|
|
|
|
// Action handlers
|
|
let on_sync = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::sync_downloads().await {
|
|
Ok(s) => {
|
|
message.set(Some(format!(
|
|
"Synced: {} enqueued, {} skipped",
|
|
s.enqueued, s.skipped
|
|
)));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_process = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::process_downloads().await {
|
|
Ok(t) => {
|
|
message.set(Some(format!(
|
|
"Downloads started (task: {})",
|
|
&t.task_id[..8]
|
|
)));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_index = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::trigger_index().await {
|
|
Ok(t) => {
|
|
message.set(Some(format!("Indexing started ({})", &t.task_id[..8])));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_tag = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::trigger_tag().await {
|
|
Ok(t) => {
|
|
message.set(Some(format!("Tagging started ({})", &t.task_id[..8])));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_organize = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::trigger_organize().await {
|
|
Ok(t) => {
|
|
message.set(Some(format!("Organizing started ({})", &t.task_id[..8])));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_monitor_check = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::trigger_monitor_check().await {
|
|
Ok(t) => {
|
|
message.set(Some(format!(
|
|
"Monitor check started (task: {})",
|
|
&t.task_id[..8]
|
|
)));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
let on_pipeline = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::trigger_pipeline().await {
|
|
Ok(p) => {
|
|
message.set(Some(format!(
|
|
"Pipeline started — {} tasks queued",
|
|
p.task_ids.len()
|
|
)));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
if let Some(ref err) = *error {
|
|
return html! { <div class="error">{ format!("Error: {err}") }</div> };
|
|
}
|
|
|
|
let Some(ref s) = *status else {
|
|
return html! { <p class="loading">{ "Loading..." }</p> };
|
|
};
|
|
|
|
let pipeline_active = s
|
|
.tasks
|
|
.iter()
|
|
.any(|t| t.status == "Pending" || t.status == "Running");
|
|
|
|
// Pre-compute scheduled task rows
|
|
let scheduled_rows = {
|
|
let mut rows = Vec::new();
|
|
if let Some(ref sched) = s.scheduled {
|
|
if let Some(ref next) = sched.next_pipeline {
|
|
let on_skip = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::skip_scheduled_pipeline().await {
|
|
Ok(_) => {
|
|
message.set(Some("Next pipeline run skipped".into()));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
rows.push(html! {
|
|
<tr>
|
|
<td>{ "Auto Pipeline" }</td>
|
|
<td><span class="badge badge-pending">{ "Scheduled" }</span></td>
|
|
<td class="text-sm text-muted">{ format!("Next run: {}", format_next_run(next)) }</td>
|
|
<td><button class="btn btn-sm btn-danger" onclick={on_skip}>{ "Skip" }</button></td>
|
|
</tr>
|
|
});
|
|
}
|
|
if let Some(ref next) = sched.next_monitor {
|
|
let on_skip = {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch_status.clone();
|
|
Callback::from(move |_: MouseEvent| {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::skip_scheduled_monitor().await {
|
|
Ok(_) => {
|
|
message.set(Some("Next monitor check skipped".into()));
|
|
fetch.emit(());
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
rows.push(html! {
|
|
<tr>
|
|
<td>{ "Monitor Check" }</td>
|
|
<td><span class="badge badge-pending">{ "Scheduled" }</span></td>
|
|
<td class="text-sm text-muted">{ format!("Next run: {}", format_next_run(next)) }</td>
|
|
<td><button class="btn btn-sm btn-danger" onclick={on_skip}>{ "Skip" }</button></td>
|
|
</tr>
|
|
});
|
|
}
|
|
}
|
|
rows
|
|
};
|
|
let has_scheduled = !scheduled_rows.is_empty();
|
|
|
|
html! {
|
|
<div>
|
|
<div class="page-header">
|
|
<h2>{ "Dashboard" }</h2>
|
|
</div>
|
|
|
|
if let Some(ref msg) = *message {
|
|
<div class="card" style="border-color: var(--success);">
|
|
<p>{ msg }</p>
|
|
</div>
|
|
}
|
|
|
|
// Stats grid
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="value">{ s.library.total_items }</div>
|
|
<div class="label">{ "Total Items" }</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">{ s.library.wanted }</div>
|
|
<div class="label">{ "Wanted" }</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">{ s.library.downloaded }</div>
|
|
<div class="label">{ "Downloaded" }</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">{ s.library.owned }</div>
|
|
<div class="label">{ "Owned" }</div>
|
|
</div>
|
|
</div>
|
|
|
|
// Pipeline
|
|
<div class="card">
|
|
<div class="flex items-center justify-between">
|
|
<h3>{ "Pipeline" }</h3>
|
|
<button class="btn btn-primary" onclick={on_pipeline} disabled={pipeline_active}>
|
|
{ "Set Sail" }
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-muted mt-1">
|
|
{ "Sync \u{2192} Download \u{2192} Index \u{2192} Tag \u{2192} Organize \u{2192} Enrich" }
|
|
</p>
|
|
</div>
|
|
|
|
// Individual Actions
|
|
<div class="card">
|
|
<h3>{ "Individual Actions" }</h3>
|
|
<div class="actions mt-1">
|
|
<button class="btn btn-secondary" onclick={on_sync}>{ "Sync Watchlist" }</button>
|
|
<button class="btn btn-secondary" onclick={on_process}>{ "Process Downloads" }</button>
|
|
<button class="btn btn-secondary" onclick={on_index}>{ "Re-index" }</button>
|
|
<button class="btn btn-secondary" onclick={on_tag}>{ "Auto-tag" }</button>
|
|
<button class="btn btn-secondary" onclick={on_organize}>{ "Organize" }</button>
|
|
<button class="btn btn-secondary" onclick={on_monitor_check}>{ "Check Monitored Artists" }</button>
|
|
</div>
|
|
</div>
|
|
|
|
// Background Tasks (always show if there are tasks or scheduled items)
|
|
if !s.tasks.is_empty() || has_scheduled {
|
|
<div class="card">
|
|
<h3>{ "Background Tasks" }</h3>
|
|
<table class="tasks-table">
|
|
<thead>
|
|
<tr><th>{ "Type" }</th><th>{ "Status" }</th><th>{ "Progress" }</th><th>{ "Result" }</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for scheduled_rows.into_iter() }
|
|
{ for s.tasks.iter().map(|t| {
|
|
let progress_html = if let Some(ref p) = t.progress {
|
|
if p.total > 0 {
|
|
let pct = (p.current as f64 / p.total as f64 * 100.0) as u32;
|
|
html! {
|
|
<div>
|
|
<div class="text-sm">{ &p.message }{ format!(" ({}/{})", p.current, p.total) }</div>
|
|
<div style="background: var(--bg-card); border-radius: 4px; height: 8px; margin-top: 4px;">
|
|
<div style={format!("background: var(--accent); border-radius: 4px; height: 100%; width: {pct}%;")}></div>
|
|
</div>
|
|
</div>
|
|
}
|
|
} else {
|
|
html! { <span class="text-sm text-muted">{ &p.message }</span> }
|
|
}
|
|
} else {
|
|
html! {}
|
|
};
|
|
html! {
|
|
<tr>
|
|
<td>{ &t.task_type }</td>
|
|
<td><StatusBadge status={t.status.clone()} /></td>
|
|
<td>{ progress_html }</td>
|
|
<td class="text-sm text-muted">{ t.result.as_deref().unwrap_or("") }</td>
|
|
</tr>
|
|
}
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
|
|
// Download Queue Items
|
|
if !s.queue.items.is_empty() {
|
|
<div class="card">
|
|
<h3>{ format!("Download Queue ({} pending, {} downloading, {} failed)",
|
|
s.queue.pending, s.queue.downloading, s.queue.failed) }</h3>
|
|
<table>
|
|
<thead>
|
|
<tr><th>{ "Query" }</th><th>{ "Status" }</th><th>{ "Error" }</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for s.queue.items.iter().map(|item| html! {
|
|
<tr>
|
|
<td>{ &item.query }</td>
|
|
<td><StatusBadge status={item.status.clone()} /></td>
|
|
<td class="text-sm text-muted">{ item.error_message.as_deref().unwrap_or("") }</td>
|
|
</tr>
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
} else if s.queue.pending > 0 || s.queue.downloading > 0 {
|
|
<div class="card">
|
|
<h3>{ "Download Queue" }</h3>
|
|
<p>{ format!("{} pending, {} downloading", s.queue.pending, s.queue.downloading) }</p>
|
|
</div>
|
|
}
|
|
|
|
// Tagging Queue
|
|
if let Some(ref tagging) = s.tagging {
|
|
if tagging.needs_tagging > 0 {
|
|
<div class="card">
|
|
<h3>{ format!("Tagging Queue ({} tracks need metadata)", tagging.needs_tagging) }</h3>
|
|
if !tagging.items.is_empty() {
|
|
<table>
|
|
<thead>
|
|
<tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Album" }</th><th>{ "MBID" }</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for tagging.items.iter().map(|t| html! {
|
|
<tr>
|
|
<td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
|
|
<td>{ t.artist.as_deref().unwrap_or("") }</td>
|
|
<td class="text-muted">{ t.album.as_deref().unwrap_or("—") }</td>
|
|
<td class="text-sm text-muted">
|
|
if t.album.is_some() {
|
|
{ "needs album link" }
|
|
} else {
|
|
{ "needs metadata" }
|
|
}
|
|
</td>
|
|
</tr>
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
}
|
|
}
|