1import { useEffect, useState } from "react";
2import axios from "axios";
4interface BenchmarkStatus {
5 current_dataset: string;
6 current_algorithm: string;
7 completed_count: number;
8 total_count: number;
9 progress_percentage: number;
10 elapsed_time: number;
11 last_update: string;
12 completed_benchmarks: Array<{
13 dataset: string;
14 algorithm: string;
15 compression_ratio: number;
16 encode_time: number;
17 decode_time: number;
18 }>;
19}
21export default function Monitor() {
22 const [status, setStatus] = useState<BenchmarkStatus | null>(null);
23 const [error, setError] = useState<string | null>(null);
24 const [loading, setLoading] = useState(true);
26 useEffect(() => {
27 const fetchStatus = async () => {
28 try {
29 const response = await axios.get(
30 "https://tempory.net/f/memobin/benchmark_status/current.json",
31 );
32 setStatus(response.data);
33 setError(null);
34 } catch (error) {
35 const message =
36 error instanceof Error ? error.message : "Failed to fetch status";
37 setError(message);
38 console.error("Error fetching benchmark status:", error);
39 } finally {
40 setLoading(false);
41 }
42 };
44 // Fetch immediately and then every 30 seconds
45 fetchStatus();
46 const interval = setInterval(fetchStatus, 30000);
48 return () => clearInterval(interval);
49 }, []);
51 if (loading) {
52 return <div>Loading benchmark status...</div>;
53 }
55 if (error) {
56 return <div>Error: {error}</div>;
57 }
59 if (!status) {
60 return <div>No active benchmark run found.</div>;
61 }
63 const formatTime = (seconds: number) => {
64 const hours = Math.floor(seconds / 3600);
65 const minutes = Math.floor((seconds % 3600) / 60);
66 const remainingSeconds = Math.floor(seconds % 60);
67 return `${hours}h ${minutes}m ${remainingSeconds}s`;
68 };
70 return (
71 <div style={{ padding: "20px" }}>
72 <h1>Benchmark Progress</h1>
74 <div style={{ marginBottom: "20px" }}>
75 <h2>Current Status</h2>
76 <div
77 style={{
78 border: "1px solid #eee",
79 padding: "20px",
80 borderRadius: "8px",
81 backgroundColor: "#f9f9f9",
82 }}
83 >
84 <p>
85 <strong>Current Dataset:</strong> {status.current_dataset}
86 </p>
87 <p>
88 <strong>Current Algorithm:</strong> {status.current_algorithm}
89 </p>
90 <p>
91 <strong>Progress:</strong> {status.completed_count} /{" "}
92 {status.total_count} ({status.progress_percentage.toFixed(1)}%)
93 </p>
94 <p>
95 <strong>Elapsed Time:</strong> {formatTime(status.elapsed_time)}
96 </p>
97 <p>
98 <strong>Last Update:</strong>{" "}
99 {new Date(status.last_update).toLocaleString()}
100 </p>
102 <div style={{ marginTop: "10px" }}>
103 <div
104 style={{
105 width: "100%",
106 height: "20px",
107 backgroundColor: "#eee",
108 borderRadius: "10px",
109 overflow: "hidden",
110 }}
111 >
112 <div
113 style={{
114 width: `${status.progress_percentage}%`,
115 height: "100%",
116 backgroundColor: "#4CAF50",
117 transition: "width 0.5s ease-in-out",
118 }}
119 />
120 </div>
121 </div>
122 </div>
123 </div>
125 <div>
126 <h2>Completed Benchmarks</h2>
127 <div style={{ overflowX: "auto" }}>
128 <table
129 style={{
130 width: "100%",
131 borderCollapse: "collapse",
132 marginTop: "10px",
133 }}
134 >
135 <thead>
136 <tr style={{ backgroundColor: "#f5f5f5" }}>
137 <th
138 style={{
139 padding: "12px",
140 textAlign: "left",
141 borderBottom: "2px solid #ddd",
142 }}
143 >
144 Dataset
145 </th>
146 <th
147 style={{
148 padding: "12px",
149 textAlign: "left",
150 borderBottom: "2px solid #ddd",
151 }}
152 >
153 Algorithm
154 </th>
155 <th
156 style={{
157 padding: "12px",
158 textAlign: "right",
159 borderBottom: "2px solid #ddd",
160 }}
161 >
162 Compression Ratio
163 </th>
164 <th
165 style={{
166 padding: "12px",
167 textAlign: "right",
168 borderBottom: "2px solid #ddd",
169 }}
170 >
171 Encode Time (ms)
172 </th>
173 <th
174 style={{
175 padding: "12px",
176 textAlign: "right",
177 borderBottom: "2px solid #ddd",
178 }}
179 >
180 Decode Time (ms)
181 </th>
182 </tr>
183 </thead>
184 <tbody>
185 {status.completed_benchmarks.map((benchmark, index) => (
186 <tr
187 key={index}
188 style={{
189 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
190 }}
191 >
192 <td
193 style={{ padding: "12px", borderBottom: "1px solid #ddd" }}
194 >
195 {benchmark.dataset}
196 </td>
197 <td
198 style={{ padding: "12px", borderBottom: "1px solid #ddd" }}
199 >
200 {benchmark.algorithm}
201 </td>
202 <td
203 style={{
204 padding: "12px",
205 textAlign: "right",
206 borderBottom: "1px solid #ddd",
207 }}
208 >
209 {benchmark.compression_ratio.toFixed(2)}x
210 </td>
211 <td
212 style={{
213 padding: "12px",
214 textAlign: "right",
215 borderBottom: "1px solid #ddd",
216 }}
217 >
218 {(benchmark.encode_time * 1000).toFixed(2)}
219 </td>
220 <td
221 style={{
222 padding: "12px",
223 textAlign: "right",
224 borderBottom: "1px solid #ddd",
225 }}
226 >
227 {(benchmark.decode_time * 1000).toFixed(2)}
228 </td>
229 </tr>
230 ))}
231 </tbody>
232 </table>
233 </div>
234 </div>
235 </div>
236 );
237}