mirror of
https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git
synced 2026-08-10 18:53:03 +02:00
First draft of repeater telemetry feature
This commit is contained in:
Gnome Adrift
committed by
Jack Kingsman
Jack Kingsman
parent
5e1bdb2cc1
commit
78b5598f67
@@ -1,5 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
|
||||
import { api } from '../api';
|
||||
import { toast } from './ui/sonner';
|
||||
import { Button } from './ui/button';
|
||||
import { Bell, Info, Route, Star, Trash2 } from 'lucide-react';
|
||||
@@ -23,6 +24,7 @@ import { LppTelemetryPane } from './repeater/RepeaterLppTelemetryPane';
|
||||
import { OwnerInfoPane } from './repeater/RepeaterOwnerInfoPane';
|
||||
import { ActionsPane } from './repeater/RepeaterActionsPane';
|
||||
import { ConsolePane } from './repeater/RepeaterConsolePane';
|
||||
import { BatteryHistoryPane } from './repeater/RepeaterBatteryHistoryPane';
|
||||
import { ContactPathDiscoveryModal } from './ContactPathDiscoveryModal';
|
||||
|
||||
// Re-export for backwards compatibility (used by repeaterFormatters.test.ts)
|
||||
@@ -91,6 +93,27 @@ export function RepeaterDashboard({
|
||||
useRememberedServerPassword('repeater', conversation.id);
|
||||
|
||||
const isFav = isFavorite(favorites, 'contact', conversation.id);
|
||||
|
||||
// Telemetry tracking state
|
||||
const [telemetryTracked, setTelemetryTracked] = useState(false);
|
||||
useEffect(() => {
|
||||
api.getSettings().then((s) => {
|
||||
setTelemetryTracked(s.telemetry_tracked_keys.includes(conversation.id.toLowerCase()));
|
||||
}).catch(() => {});
|
||||
}, [conversation.id]);
|
||||
|
||||
const handleToggleTelemetryTracking = useCallback(async () => {
|
||||
const wasTracked = telemetryTracked;
|
||||
setTelemetryTracked(!wasTracked);
|
||||
try {
|
||||
const updated = await api.toggleTelemetryTracking(conversation.id);
|
||||
setTelemetryTracked(updated.telemetry_tracked_keys.includes(conversation.id.toLowerCase()));
|
||||
} catch {
|
||||
setTelemetryTracked(wasTracked);
|
||||
toast.error('Failed to toggle telemetry tracking');
|
||||
}
|
||||
}, [conversation.id, telemetryTracked]);
|
||||
|
||||
const handleRepeaterLogin = async (nextPassword: string) => {
|
||||
await login(nextPassword);
|
||||
persistAfterLogin(nextPassword);
|
||||
@@ -291,6 +314,11 @@ export function RepeaterDashboard({
|
||||
onRefresh={() => refreshPane('status')}
|
||||
disabled={anyLoading}
|
||||
/>
|
||||
<BatteryHistoryPane
|
||||
publicKey={conversation.id}
|
||||
isTracked={telemetryTracked}
|
||||
onToggleTracking={handleToggleTelemetryTracking}
|
||||
/>
|
||||
<RadioSettingsPane
|
||||
data={paneData.radioSettings}
|
||||
state={paneStates.radioSettings}
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import uPlot from 'uplot';
|
||||
import 'uplot/dist/uPlot.min.css';
|
||||
import { api } from '../../api';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { TelemetryHistoryEntry } from '../../types';
|
||||
|
||||
type TimeRange = 24 | 168 | 720;
|
||||
|
||||
const RANGE_LABELS: Record<TimeRange, string> = {
|
||||
24: '24h',
|
||||
168: '7d',
|
||||
720: '30d',
|
||||
};
|
||||
|
||||
export function BatteryHistoryPane({
|
||||
publicKey,
|
||||
isTracked,
|
||||
onToggleTracking,
|
||||
}: {
|
||||
publicKey: string;
|
||||
isTracked: boolean;
|
||||
onToggleTracking: () => void;
|
||||
}) {
|
||||
const chartRef = useRef<HTMLDivElement>(null);
|
||||
const uplotRef = useRef<uPlot | null>(null);
|
||||
const [entries, setEntries] = useState<TelemetryHistoryEntry[] | null>(null);
|
||||
const [range, setRange] = useState<TimeRange>(168);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchHistory = useCallback(
|
||||
async (hours: TimeRange) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const resp = await api.repeaterTelemetryHistory(publicKey, hours);
|
||||
setEntries(resp.entries);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load history');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[publicKey]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHistory(range);
|
||||
}, [fetchHistory, range]);
|
||||
|
||||
// Build / rebuild chart
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || !entries || entries.length === 0) {
|
||||
if (uplotRef.current) {
|
||||
uplotRef.current.destroy();
|
||||
uplotRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamps = entries.map((e) => e.timestamp);
|
||||
const volts = entries.map((e) => e.battery_volts);
|
||||
|
||||
const data: uPlot.AlignedData = [timestamps, volts];
|
||||
|
||||
// Get CSS variable colors for dark-theme compat
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
const textColor = style.getPropertyValue('--foreground').trim() || '#a1a1aa';
|
||||
const gridColor = style.getPropertyValue('--border').trim() || '#27272a';
|
||||
const accentColor = '#22c55e'; // green-500
|
||||
|
||||
// Resolve oklch/hsl CSS colors to a usable format
|
||||
const resolvedText = `hsl(${textColor})`;
|
||||
const resolvedGrid = `hsl(${gridColor})`;
|
||||
|
||||
const opts: uPlot.Options = {
|
||||
width: chartRef.current.clientWidth,
|
||||
height: 180,
|
||||
cursor: { show: true },
|
||||
legend: { show: false },
|
||||
padding: [8, 8, 0, 0],
|
||||
axes: [
|
||||
{
|
||||
stroke: resolvedText,
|
||||
grid: { stroke: resolvedGrid, width: 1 },
|
||||
ticks: { stroke: resolvedGrid, width: 1 },
|
||||
font: '10px sans-serif',
|
||||
space: 60,
|
||||
},
|
||||
{
|
||||
stroke: resolvedText,
|
||||
grid: { stroke: resolvedGrid, width: 1 },
|
||||
ticks: { stroke: resolvedGrid, width: 1 },
|
||||
font: '10px sans-serif',
|
||||
label: 'Volts',
|
||||
labelFont: '10px sans-serif',
|
||||
size: 50,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{},
|
||||
{
|
||||
label: 'Battery',
|
||||
stroke: accentColor,
|
||||
width: 2,
|
||||
points: { show: entries.length < 50, size: 4 },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if (uplotRef.current) {
|
||||
uplotRef.current.destroy();
|
||||
}
|
||||
|
||||
uplotRef.current = new uPlot(opts, data, chartRef.current);
|
||||
|
||||
return () => {
|
||||
if (uplotRef.current) {
|
||||
uplotRef.current.destroy();
|
||||
uplotRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [entries]);
|
||||
|
||||
// Resize handler
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || !uplotRef.current) return;
|
||||
|
||||
const observer = new ResizeObserver(() => {
|
||||
if (uplotRef.current && chartRef.current) {
|
||||
uplotRef.current.setSize({
|
||||
width: chartRef.current.clientWidth,
|
||||
height: 180,
|
||||
});
|
||||
}
|
||||
});
|
||||
observer.observe(chartRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, [entries]);
|
||||
|
||||
return (
|
||||
<div className="border border-border rounded-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border">
|
||||
<h3 className="text-sm font-medium">Battery History</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleTracking}
|
||||
className={cn(
|
||||
'text-[11px] px-2 py-0.5 rounded-full border transition-colors',
|
||||
isTracked
|
||||
? 'bg-success/15 border-success/30 text-success'
|
||||
: 'bg-muted border-border text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{isTracked ? 'Tracking' : 'Track'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
{/* Time range toggles */}
|
||||
<div className="flex gap-1 mb-2">
|
||||
{([24, 168, 720] as TimeRange[]).map((h) => (
|
||||
<button
|
||||
key={h}
|
||||
type="button"
|
||||
onClick={() => setRange(h)}
|
||||
className={cn(
|
||||
'text-[11px] px-2 py-0.5 rounded transition-colors',
|
||||
range === h
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
|
||||
)}
|
||||
>
|
||||
{RANGE_LABELS[h]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<p className="text-sm text-muted-foreground italic">Loading...</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
{!loading && !error && entries && entries.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No history yet. Fetch telemetry above to record a data point
|
||||
{!isTracked && ', or enable tracking for hourly collection'}.
|
||||
</p>
|
||||
)}
|
||||
<div ref={chartRef} className={cn(entries && entries.length > 0 ? '' : 'hidden')} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user