Add more data to stats footer

crates/librqbit/webui/src/api-types.ts

@@ -46,7 +46,10 @@ export interface AggregatePeerStats {
 export interface SessionStats {
   download_speed: Speed;
   upload_speed: Speed;
+  fetched_bytes: number;
+  uploaded_bytes: number;
   peers: AggregatePeerStats;
+  uptime_seconds: number;
 }
 
 // Interface for the Torrent Stats API response

crates/librqbit/webui/src/components/Footer.tsx

@@ -1,12 +1,20 @@
+import { formatBytes } from "../helper/formatBytes";
+import { formatSecondsToTime } from "../helper/formatSecondsToTime";
 import { useStatsStore } from "../stores/statsStore";
-import { Speed } from "./Speed";
 
 export const Footer: React.FC<{}> = () => {
   let stats = useStatsStore((stats) => stats.stats);
   return (
     <div className="sticky bottom-0 bg-white/10 dark:text-gray-200 backdrop-blur text-nowrap text-xs font-medium text-gray-500 flex p-1 gap-x-3 justify-center">
-      <div>↓ {stats.download_speed.human_readable}</div>
-      <div>↑ {stats.upload_speed.human_readable}</div>
+      <div>
+        ↓ {stats.download_speed.human_readable} (total{" "}
+        {formatBytes(stats.fetched_bytes)})
+      </div>
+      <div>
+        ↑ {stats.upload_speed.human_readable} (total{" "}
+        {formatBytes(stats.uploaded_bytes)})
+      </div>
+      <div>up {formatSecondsToTime(stats.uptime_seconds)}</div>
     </div>
   );
 };

crates/librqbit/webui/src/stores/statsStore.ts

@@ -19,6 +19,9 @@ export const useStatsStore = create<StatsStore>((set) => ({
       queued: 0,
       seen: 0,
     },
+    fetched_bytes: 0,
+    uploaded_bytes: 0,
+    uptime_seconds: 0,
   },
   setStats: (stats) => {
     set({ stats });