/
viz.html
121 lines (111 loc) · 3.7 KB
/
viz.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
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<title>Compute Studio</title>
<link rel="icon" href="{% static 'imgs/cslashs.png' %}" type="image/x-icon" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />
<style>
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
font-family: sans-serif;
}
.embedded {
position: relative;
height: 100vh;
width: 100%;
border: 0;
}
/* From bootstrap. */
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body class="main container-fluid" id="iframe-container">
{% if deployment.status == "running" %}
<iframe id="embedded-iframe" class="embedded" title="{{object.title}}"
src="{{protocol}}://{{viz_host}}/{{object.owner}}/{{object.title}}/{{deployment.public_name}}/"></iframe>
{% else %}
<div id="notready">
<p>Starting the {{object.owner}}/{{object.title}} visualization...</p>
</div>
{% endif %}
<div style="position: fixed; top: 2rem; right: 2rem;">
<a href="/{{object.owner}}/{{object.title}}/" style="color:#586069 !important"><i
class="fas fa-times fa-2x"></i></a>
</div>
<div style="position: fixed; bottom: 1rem; right: 1rem;">
<a href="/"><img height="50" width="50" alt="Compute Studio Logo" src="{% static 'imgs/cslashs.png' %}" /></a>
</div>
</body>
<script>
const checkReady = function () {
const resp = fetch(
"/apps/api/v1/{{object.owner}}/{{object.title}}/deployments/{{deployment.name}}/"
).then(function (response) {
response.json().then(function (data) {
if (data.status === "running") {
const container = document.getElementById("iframe-container");
const placeholder = document.getElementById("notready");
container.removeChild(placeholder);
const iframe = document.createElement("iframe");
iframe.src =
"{{protocol}}://{{viz_host}}/{{object.owner}}/{{object.title}}/{{deployment.public_name}}/";
iframe.title = "{{object.title}}";
iframe.className = "embedded";
iframe.id = "embedded-iframe";
container.appendChild(iframe);
setTimeout(pingDeployment, 10000);
} else {
setTimeout(checkReady, 3000);
}
});
});
};
const pingDeployment = function () {
if (!document.hasFocus()) {
setTimeout(pingDeployment, 2000);
return;
}
const resp = fetch("/apps/api/v1/deployments/{{deployment.id}}/?ping=true").then(function (
response
) {
response.json().then(function (data) {
if (data.status === "terminated") {
// reload modal
const container = document.getElementById("iframe-container");
const iframe = document.getElementById("embedded-iframe");
container.removeChild(iframe);
const restart = document.createElement("p");
restart.textContent =
"Restarting the {{object.owner}}/{{object.title}} visualization...";
restart.style.height = "75vh";
container.appendChild(restart);
setTimeout(function () {
window.location.reload();
}, 2000);
} else {
setTimeout(pingDeployment, 10000);
}
});
});
};
window.onload = function () {
const initIframe = document.getElementById("embedded-iframe");
if (initIframe === null) {
return checkReady();
} else {
return pingDeployment();
}
};
</script>
</html>