0cb350e26e
Replace mock token usage with real data from LiteLLM free-tier APIs (global/activity, global/activity/model, global/spend/models). Adds per-model breakdown table, loading/error states, usage data models with serde tests, and i18n keys for all five languages. Also includes: replace Ollama with LiteLLM proxy, update config, docker-compose, and provider infrastructure. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
117 lines
4.2 KiB
Rust
117 lines
4.2 KiB
Rust
use dioxus::prelude::*;
|
|
|
|
use crate::i18n::{t, Locale};
|
|
use crate::infrastructure::litellm::{get_litellm_status, LitellmStatus};
|
|
|
|
/// Right sidebar for the dashboard, showing LiteLLM status, trending topics,
|
|
/// and recent search history.
|
|
///
|
|
/// Appears when no article card is selected. Disappears when the user opens
|
|
/// the article detail split view.
|
|
///
|
|
/// # Props
|
|
///
|
|
/// * `litellm_url` - LiteLLM proxy URL for status polling
|
|
/// * `trending` - Trending topic keywords extracted from recent news headlines
|
|
/// * `recent_searches` - Recent search topics stored in localStorage
|
|
/// * `on_topic_click` - Fires when a trending or recent topic is clicked
|
|
#[component]
|
|
pub fn DashboardSidebar(
|
|
litellm_url: String,
|
|
trending: Vec<String>,
|
|
recent_searches: Vec<String>,
|
|
on_topic_click: EventHandler<String>,
|
|
) -> Element {
|
|
let locale = use_context::<Signal<Locale>>();
|
|
let l = *locale.read();
|
|
|
|
// Fetch LiteLLM status once on mount.
|
|
// use_resource with no signal dependencies runs exactly once and
|
|
// won't re-fire on parent re-renders (unlike use_effect).
|
|
let url = litellm_url.clone();
|
|
let status_resource = use_resource(move || {
|
|
let u = url.clone();
|
|
async move {
|
|
get_litellm_status(u).await.unwrap_or(LitellmStatus {
|
|
online: false,
|
|
models: Vec::new(),
|
|
})
|
|
}
|
|
});
|
|
|
|
let current_status: LitellmStatus =
|
|
status_resource
|
|
.read()
|
|
.as_ref()
|
|
.cloned()
|
|
.unwrap_or(LitellmStatus {
|
|
online: false,
|
|
models: Vec::new(),
|
|
});
|
|
|
|
rsx! {
|
|
aside { class: "dashboard-sidebar",
|
|
|
|
// -- LiteLLM Status Section --
|
|
div { class: "sidebar-section",
|
|
h4 { class: "sidebar-section-title", "{t(l, \"dashboard.litellm_status\")}" }
|
|
div { class: "sidebar-status-row",
|
|
span { class: if current_status.online { "sidebar-status-dot sidebar-status-dot--online" } else { "sidebar-status-dot sidebar-status-dot--offline" } }
|
|
span { class: "sidebar-status-label",
|
|
if current_status.online {
|
|
"{t(l, \"common.online\")}"
|
|
} else {
|
|
"{t(l, \"common.offline\")}"
|
|
}
|
|
}
|
|
}
|
|
if !current_status.models.is_empty() {
|
|
div { class: "sidebar-model-list",
|
|
for model in current_status.models.iter() {
|
|
span { class: "sidebar-model-tag", "{model}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// -- Trending Topics Section --
|
|
if !trending.is_empty() {
|
|
div { class: "sidebar-section",
|
|
h4 { class: "sidebar-section-title", "{t(l, \"dashboard.trending\")}" }
|
|
for topic in trending.iter() {
|
|
{
|
|
let t = topic.clone();
|
|
rsx! {
|
|
button {
|
|
class: "sidebar-topic-link",
|
|
onclick: move |_| on_topic_click.call(t.clone()),
|
|
"{topic}"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// -- Recent Searches Section --
|
|
if !recent_searches.is_empty() {
|
|
div { class: "sidebar-section",
|
|
h4 { class: "sidebar-section-title", "{t(l, \"dashboard.recent_searches\")}" }
|
|
for search in recent_searches.iter() {
|
|
{
|
|
let s = search.clone();
|
|
rsx! {
|
|
button {
|
|
class: "sidebar-topic-link",
|
|
onclick: move |_| on_topic_click.call(s.clone()),
|
|
"{search}"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|