-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (99 loc) · 3.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Demo</title>
<style>
#logs {
width: 100%;
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>Server-Sent Events Demo</h1>
<form id="deploymentForm" target="_blank">
<button type="submit">Start Deployment</button>
</form>
<div id="deploymentId"></div>
<div id="logs"></div>
<script>
document.getElementById('deploymentForm').addEventListener('submit', async function (event) {
event.preventDefault();
const response = await fetch('/deployment', { method: 'POST' });
const data = await response.json();
const newWindow = window.open('', '_blank');
// Construct HTML content with title and deployment ID
const newWindowContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deployment Logs</title>
<style>
#logs {
width: 90%;
height: 800px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>Deployment Logs</h1>
<div id="deploymentId">Deployment ID: ${data.deployment_id}</div>
<div id="logs"></div>
<script>
const eventSource = new EventSource('/logs/' + '${data.deployment_id}');
let clientIdHeaderValue = '';
eventSource.onopen = function(event) {
clientIdHeaderValue = eventSource.url.split('=')[1]; // Extract client ID from the URL
// Send a ping every 15 seconds to keep the connection alive
setInterval(function() {
fetch('/ping', {
method: 'POST',
headers: {
'X-Client-ID': clientIdHeaderValue
}
});
}, 15000);
};
eventSource.onmessage = function(event) {
const logsElement = document.getElementById('logs');
const newLog = document.createElement('p');
newLog.textContent = event.data;
logsElement.prepend(newLog);
};
eventSource.addEventListener('termination', function(event) {
alert('Server is shutting down.');
eventSource.close();
});
eventSource.addEventListener('inactivity', function(event) {
alert('Server closed connection due to inactivity.');
eventSource.close();
});
window.onbeforeunload = function() {
fetch('/disconnect', {
method: 'POST',
headers: {
'X-Client-ID': clientIdHeaderValue
}
});
};
<\/script>
</body>
</html>
`;
newWindow.document.open();
newWindow.document.write(newWindowContent);
newWindow.document.close();
});
</script>
</body>
</html>