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;
20}
22export default function Monitor() {
23 const [status, setStatus] = useState<BenchmarkStatus | null>(null);
24 const [error, setError] = useState<string | null>(null);
25 const [loading, setLoading] = useState(true);
28 setLoading(true);
29 try {
47f2554cachebustJeremy Magland 32 `https://tempory.net/f/memobin/benchmark_status/current.json?cachebust=${cacheBust}`,
34 setStatus(response.data);
35 setError(null);
36 } catch (error) {
37 const message =
38 error instanceof Error ? error.message : "Failed to fetch status";
39 setError(message);
40 console.error("Error fetching benchmark status:", error);
41 } finally {
42 setLoading(false);
43 }
44 };
48 }, []);
50 if (loading) {
51 return <div>Loading benchmark status...</div>;
52 }
54 if (error) {
55 return <div>Error: {error}</div>;
56 }
58 if (!status) {
59 return <div>No active benchmark run found.</div>;
60 }
62 const formatTime = (seconds: number) => {
63 const hours = Math.floor(seconds / 3600);
64 const minutes = Math.floor((seconds % 3600) / 60);
65 const remainingSeconds = Math.floor(seconds % 60);
66 return `${hours}h ${minutes}m ${remainingSeconds}s`;
67 };
69 return (
70 <div style={{ padding: "20px" }}>
72 style={{
73 display: "flex",
74 alignItems: "center",
75 gap: "20px",
76 marginBottom: "20px",
77 }}
78 >
79 <h1 style={{ margin: 0 }}>Benchmark Progress</h1>
80 <button
81 onClick={fetchStatus}
82 style={{
83 padding: "8px 16px",
84 backgroundColor: "#4CAF50",
85 color: "white",
86 border: "none",
87 borderRadius: "4px",
88 cursor: "pointer",
89 display: "flex",
90 alignItems: "center",
91 gap: "8px",
92 }}
93 disabled={loading}
94 >
95 {loading ? "Refreshing..." : "Refresh"}
96 </button>
97 </div>
99 <div style={{ marginBottom: "20px" }}>
100 <h2>Current Status</h2>
101 <div
102 style={{
103 border: "1px solid #eee",
104 padding: "20px",
105 borderRadius: "8px",
106 backgroundColor: "#f9f9f9",
107 }}
108 >
109 <p>
110 <strong>Current Dataset:</strong> {status.current_dataset}
111 </p>
112 <p>
113 <strong>Current Algorithm:</strong> {status.current_algorithm}
114 </p>
115 <p>
116 <strong>Progress:</strong> {status.completed_count} /{" "}
117 {status.total_count} ({status.progress_percentage.toFixed(1)}%)
118 </p>
119 <p>
120 <strong>Elapsed Time:</strong> {formatTime(status.elapsed_time)}
121 </p>
122 <p>
123 <strong>Last Update:</strong>{" "}
124 {new Date(status.last_update).toLocaleString()}
125 </p>
127 <div style={{ marginTop: "10px" }}>
128 <div
129 style={{
130 width: "100%",
131 height: "20px",
132 backgroundColor: "#eee",
133 borderRadius: "10px",
134 overflow: "hidden",
135 }}
136 >
137 <div
138 style={{
139 width: `${status.progress_percentage}%`,
140 height: "100%",
141 backgroundColor: "#4CAF50",
142 transition: "width 0.5s ease-in-out",
143 }}
144 />
145 </div>
146 </div>
147 </div>
148 </div>
150 <div>
151 <h2>Completed Benchmarks</h2>
152 <div style={{ overflowX: "auto" }}>
153 <table
154 style={{
155 width: "100%",
156 borderCollapse: "collapse",
157 marginTop: "10px",
158 }}
159 >
160 <thead>
161 <tr style={{ backgroundColor: "#f5f5f5" }}>
162 <th
163 style={{
164 padding: "12px",
165 textAlign: "left",
166 borderBottom: "2px solid #ddd",
167 }}
168 >
169 Dataset
170 </th>
171 <th
172 style={{
173 padding: "12px",
174 textAlign: "left",
175 borderBottom: "2px solid #ddd",
176 }}
177 >
178 Algorithm
179 </th>
180 <th
181 style={{
182 padding: "12px",
183 textAlign: "right",
184 borderBottom: "2px solid #ddd",
185 }}
186 >
187 Compression Ratio
188 </th>
189 <th
190 style={{
191 padding: "12px",
192 textAlign: "right",
193 borderBottom: "2px solid #ddd",
194 }}
195 >
196 Encode Time (ms)
197 </th>
198 <th
199 style={{
200 padding: "12px",
201 textAlign: "right",
202 borderBottom: "2px solid #ddd",
203 }}
204 >
205 Decode Time (ms)
206 </th>
208 style={{
209 padding: "12px",
210 textAlign: "center",
211 borderBottom: "2px solid #ddd",
212 }}
213 >
214 Cache Status
215 </th>
217 </thead>
218 <tbody>
219 {status.completed_benchmarks.map((benchmark, index) => (
220 <tr
221 key={index}
222 style={{
224 benchmark.cache_status === "cached"
225 ? "#f5f5f5"
226 : index % 2 === 0
227 ? "white"
228 : "#fafafa",
230 >
231 <td
232 style={{ padding: "12px", borderBottom: "1px solid #ddd" }}
233 >
234 {benchmark.dataset}
235 </td>
236 <td
237 style={{ padding: "12px", borderBottom: "1px solid #ddd" }}
238 >
239 {benchmark.algorithm}
240 </td>
241 <td
242 style={{
243 padding: "12px",
244 textAlign: "right",
245 borderBottom: "1px solid #ddd",
246 }}
247 >
248 {benchmark.compression_ratio.toFixed(2)}x
249 </td>
250 <td
251 style={{
252 padding: "12px",
253 textAlign: "right",
254 borderBottom: "1px solid #ddd",
255 }}
256 >
257 {(benchmark.encode_time * 1000).toFixed(2)}
258 </td>
259 <td
260 style={{
261 padding: "12px",
262 textAlign: "right",
263 borderBottom: "1px solid #ddd",
264 }}
265 >
266 {(benchmark.decode_time * 1000).toFixed(2)}
267 </td>
269 style={{
270 padding: "12px",
271 textAlign: "center",
272 borderBottom: "1px solid #ddd",
273 color:
274 benchmark.cache_status === "cached" ? "#888" : "#000",
275 }}
276 >
277 {benchmark.cache_status}
278 </td>
280 ))}
281 </tbody>
282 </table>
283 </div>
284 </div>
285 </div>
286 );
287}