Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history 
First commit
  • Loading branch information
@ImInTheICU
ImInTheICU authored Jan 25, 2025
1 parent 4fd486d commit ab755d2
Show file tree
Hide file tree
Showing 7 changed files with 437 additions and 0 deletions.
11 changes: 11 additions & 0 deletions exports/exporting.js
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions exports/highcharts.js
View file

Large diffs are not rendered by default.

50 changes: 50 additions & 0 deletions htmls/errors.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Private DSTAT - Error</title>
<style>
html,
body {
height: 100%;
margin: 0;
background-color: #181818;
color: #ffffff;
}

body {
display: flex;
align-items: center;
justify-content: center;
}

.message-box {
text-align: center;
background-color: #282828;
border-radius: 12px;
padding: 20px 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
font-family: Arial, sans-serif;
width: fit-content;
max-width: 90%;
}

a {
color: #4e90ff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>

<body>
<div class="message-box">
<p>You've hit a road block!</p>
<p>500 | Internal Server Error</p>
</div>
</body>
</html>
58 changes: 58 additions & 0 deletions htmls/hit.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Private DSTAT - Hit</title>
<style>
html,
body {
height: 100%;
margin: 0;
background-color: #181818;
color: #ffffff;
}

body {
display: flex;
align-items: center;
justify-content: center;
}

.message-box {
text-align: center;
background-color: #282828;
border-radius: 12px;
padding: 20px 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
font-family: Arial, sans-serif;
width: fit-content;
max-width: 90%;
}

a {
color: #4e90ff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>

<body>
<div class="message-box">
<p>You've hit the server. You can see it here:</p>
<p id="server-link"></p>
</div>

<script>
window.onload = () => {
const serverLink = document.getElementById("server-link");
const host = location.host;
serverLink.innerHTML = `<a href="http://${host}" target="_blank">${host}</a>`;
};
</script>
</body>
</html>
198 changes: 198 additions & 0 deletions htmls/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Private DSTAT - Charts</title>
<style>
html,
body {
height: 100%;
margin: 0;
background-color: #181818;
color: #ffffff;
}

body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

body > div {
width: 100%;
}

#chart {
width: 80%;
margin: auto;
position: relative;
}

#info {
margin-top: 2em;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
}

#loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 1.5em;
z-index: 10;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
flex-direction: column;
}

#loading-overlay .spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #4e90ff;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin-top: 20px;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

a {
color: #4e90ff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>

<body>
<div>
<h2 id="info"></h2>
<div id="chart"></div>
</div>

<div id="loading-overlay">
<span>Reconnecting...</span>
<div class="spinner"></div>
</div>

<script src="./exports/highcharts.js"></script>
<script src="./exports/exporting.js"></script>
<script>
window.onload = () => {
let info = document.getElementById("info");
let chartContainer = document.getElementById("chart");
let loadingOverlay = document.getElementById("loading-overlay");

let chart = Highcharts.chart("chart", {
exporting: {
enabled: true,
},
chart: {
type: "area",
backgroundColor: "#181818",
style: {
fontFamily: "Arial, Helvetica, sans-serif",
},
},
title: {
text: "Private DSTAT",
style: {
color: "#ffffff",
},
},
xAxis: {
type: "datetime",
labels: {
style: {
color: "#ffffff",
},
},
},
yAxis: {
title: {
text: "",
style: {
color: "#ffffff",
},
},
labels: {
style: {
color: "#ffffff",
},
},
},
series: [{
name: "Requests",
data: [],
color: "#4e90ff",
fillOpacity: 0,
},],
});

info.innerHTML = 'Capturing requests from <a href="http://' + location.host + '/hit" target="_blank">' + location.host + '/hit</a>';

let ws;
let reconnectTimeout = 1000;
let isReconnecting = false;

const connectWebSocket = () => {
ws = new WebSocket(
(location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/"
);

ws.onopen = () => {
if (isReconnecting) {
setTimeout(() => {
loadingOverlay.style.display = "none";
}, 500);
isReconnecting = false;
}
reconnectTimeout = 1000;
};

ws.onclose = (event) => {
if (!isReconnecting) {
isReconnecting = true;
setTimeout(() => {
loadingOverlay.style.display = "flex";
}, 500);
}
setTimeout(connectWebSocket, reconnectTimeout);
reconnectTimeout = Math.min(reconnectTimeout * 2, 16000);
};

ws.onerror = (error) => {
ws.close();
};

ws.onmessage = (event) => {
let now = new Date().getTime();
let requests = Number(event.data);
let time = now;

chart.series[0].addPoint([time, requests], true, chart.series[0].points.length > 60);
};
};

connectWebSocket();
};
</script>
</body>
</html>
Loading

0 comments on commit ab755d2

Please sign in to comment.