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