tangled
alpha
login
or
join now
slices.network
/
slices
137
fork
atom
Highly ambitious ATProtocol AppView service and sdks
137
fork
atom
overview
issues
10
pulls
3
pipelines
add back formatTimestamp
chadtmiller.com
5 months ago
681874be
f6ac2a2e
+3
-32
2 changed files
expand all
collapse all
unified
split
frontend
src
features
slices
jetstream
templates
fragments
JetstreamLogs.tsx
shared
fragments
LogViewer.tsx
-2
frontend/src/features/slices/jetstream/templates/fragments/JetstreamLogs.tsx
···
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
···
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
}