Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
/**
|
|
* Admin > Monitoring > Stats
|
|
*/
|
|
const { html } = window;
|
|
const { useState, useEffect } = hooks;
|
|
|
|
export default function StatsSection() {
|
|
const [stats, setStats] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
sw.api.admin.stats()
|
|
.then(d => setStats(d))
|
|
.catch(e => sw.toast(e.message, 'error'))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
|
|
if (!stats) return html`<div class="empty-hint">No stats available</div>`;
|
|
|
|
const cards = [
|
|
{ label: 'Users', value: stats.users },
|
|
{ label: 'Channels', value: stats.channels },
|
|
{ label: 'Messages', value: stats.messages },
|
|
{ label: 'Models', value: stats.models },
|
|
{ label: 'Providers', value: stats.providers },
|
|
{ label: 'Personas', value: stats.personas },
|
|
];
|
|
|
|
return html`
|
|
<div class="stat-cards-grid">
|
|
${cards.map(c => html`
|
|
<div class="stat-card" key=${c.label}>
|
|
<div class="stat-value">${c.value != null ? c.value.toLocaleString() : '\u2014'}</div>
|
|
<div class="stat-label">${c.label}</div>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|