show times in current timezone

backend/app/models/log.py

@@ -1,4 +1,5 @@
 import json
+from datetime import timezone
 from copy import deepcopy
 from app import db, socketio
 from .frame import Frame, update_frame
@@ -16,7 +17,7 @@ class Log(db.Model):
     def to_dict(self):
         return {
             'id': self.id,
-            'timestamp': self.timestamp.isoformat(),
+            'timestamp': self.timestamp.replace(tzinfo=timezone.utc).isoformat(),
             'type': self.type,
             'line': self.line,
             'frame_id': self.frame_id
@@ -38,7 +39,7 @@ def new_log(frame_id: int, type: str, line: str) -> Log:
             db.session.delete(old_log)
         db.session.commit()
 
-    socketio.emit('new_log', {**log.to_dict(), 'timestamp': str(log.timestamp)})
+    socketio.emit('new_log', {**log.to_dict(), 'timestamp': log.timestamp.replace(tzinfo=timezone.utc).isoformat()})
     return log
 
 

frontend/src/scenes/frame/panels/Logs/Logs.tsx

@@ -7,6 +7,15 @@ import { frameLogic } from '../../frameLogic'
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
 import { Button } from '../../../../components/Button'
 
+function formatTimestamp(isoTimestamp: string): string {
+  const date = new Date(isoTimestamp)
+  return `${date.getFullYear()}-${date.getMonth() + 1 < 10 ? '0' : ''}${date.getMonth() + 1}-${
+    date.getDate() < 10 ? '0' : ''
+  }${date.getDate()} ${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${
+    date.getMinutes() < 10 ? '0' : ''
+  }${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`
+}
+
 export function Logs() {
   const { frameId } = useValues(frameLogic)
   const { logs, logsLoading } = useValues(logsLogic({ frameId }))
@@ -53,7 +62,7 @@ export function Logs() {
                 'text-red-300': log.type === 'stderr',
               })}
             >
-              <div className="flex-0 mr-2 text-yellow-900 whitespace-nowrap">{log.timestamp.replace('T', ' ')}</div>
+              <div className="flex-0 mr-2 text-yellow-900 whitespace-nowrap">{formatTimestamp(log.timestamp)}</div>
               <div className="flex-1 break-words" style={{ wordBreak: 'break-word' }}>
                 {logLine}
               </div>