-2

frontend/src/features/slices/jetstream/templates/fragments/JetstreamLogs.tsx

reviewed

··· 1 1 - import { formatTimestamp } from "../../../../../utils/time.ts"; 2 1 import { LogViewer } from "../../../../../shared/fragments/LogViewer.tsx"; 3 2 import { NetworkSlicesSliceGetJobLogsLogEntry } from "../../../../../client.ts"; 4 3 ··· 11 10 <LogViewer 12 11 logs={logs} 13 12 emptyMessage="No Jetstream logs available for this slice." 14 14 - formatTimestamp={formatTimestamp} 15 13 /> 16 14 ); 17 15 }

+3 -30

frontend/src/shared/fragments/LogViewer.tsx

reviewed

··· 2 2 import { Text } from "./Text.tsx"; 3 3 import { Card } from "./Card.tsx"; 4 4 import { NetworkSlicesSliceGetJobLogsLogEntry } from "../../client.ts"; 5 5 + import { formatTimestamp } from "../../utils/time.ts"; 5 6 6 7 interface LogViewerProps { 7 8 logs: NetworkSlicesSliceGetJobLogsLogEntry[]; 8 9 emptyMessage?: string; 9 9 - formatTimestamp?: (timestamp: string) => string; 10 10 } 11 11 12 12 export function LogViewer({ 13 13 logs, 14 14 emptyMessage = "No logs available.", 15 15 - formatTimestamp = (timestamp) => new Date(timestamp).toLocaleString(), 16 15 }: LogViewerProps) { 17 16 if (logs.length === 0) { 18 17 return ( ··· 63 62 className="p-3 hover:bg-zinc-50 dark:hover:bg-zinc-800 font-mono text-sm" 64 63 > 65 64 <div className="flex items-start gap-3"> 66 66 - <span 67 67 - className="log-timestamp text-xs text-zinc-500 dark:text-zinc-400" 68 68 - data-timestamp={log.createdAt} 69 69 - > 70 70 - {log.createdAt} 65 65 + <span className="text-xs text-zinc-500 dark:text-zinc-400"> 66 66 + {formatTimestamp(log.createdAt)} 71 67 </span> 72 68 <LogLevelBadge level={log.level} /> 73 69 <div className="flex-1"> ··· 98 94 ))} 99 95 </Card.Content> 100 96 </Card> 101 101 - <script 102 102 - dangerouslySetInnerHTML={{ 103 103 - __html: ` 104 104 - (function() { 105 105 - document.querySelectorAll('.log-timestamp').forEach(function(el) { 106 106 - var timestamp = el.getAttribute('data-timestamp'); 107 107 - if (timestamp) { 108 108 - var date = new Date(timestamp); 109 109 - el.textContent = date.toLocaleString([], { 110 110 - month: 'numeric', 111 111 - day: 'numeric', 112 112 - year: 'numeric', 113 113 - hour: 'numeric', 114 114 - minute: '2-digit', 115 115 - second: '2-digit', 116 116 - hour12: true 117 117 - }); 118 118 - } 119 119 - }); 120 120 - })(); 121 121 - `, 122 122 - }} 123 123 - /> 124 97 </> 125 98 ); 126 99 }