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