updated service monitors

This commit is contained in:
Nicholas Orlowsky 2022-07-17 16:10:09 -05:00
parent 0e6af62311
commit aea818dde6
No known key found for this signature in database
GPG key ID: 3845F78A73B14100
4 changed files with 436 additions and 30 deletions

View file

@ -1,18 +1,21 @@
import React, {useEffect, useState} from 'react';
import NWSLogo from './static/images/NWS_Logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
const setup_time = 1643927861;
const[uptime, setUptime] = useState("100%");
const today = new Date();
const setup_time = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
const [monitors, setMonitors] = useState(new Array<any>());
useEffect(() => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
var urlencoded = new URLSearchParams();
urlencoded.append("api_key", "ur1612363-492fa5df2a31fab5b52171b4");
urlencoded.append("monitors", "790552884");
urlencoded.append("custom_uptime_ranges", setup_time+"_"+(new Date().valueOf()/1000));
urlencoded.append("custom_uptime_ranges", (setup_time.valueOf() / 1000) + "_" + (today.valueOf() / 1000));
urlencoded.append("all_time_uptime_ratio", "1");
var requestOptions = {
@ -25,16 +28,16 @@ function App() {
// @ts-ignore
fetch("https://api.uptimerobot.com/v2/getMonitors", requestOptions)
.then(response => response.json().then(json => {
setUptime(json.monitors[0].custom_uptime_ranges);
setMonitors(json.monitors);
}))
.then(result => console.log(result))
.catch(error => console.log('error', error));
}, []);
let diff = new Date().getTime() - new Date(setup_time*1000).getTime();
let diff = new Date().getTime() - setup_time.getTime();
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
diff -= days * (1000 * 60 * 60 * 24);
diff -= days * (1000 * 60 * 60 * 24);
let hours = Math.floor(diff / (1000 * 60 * 60));
diff -= hours * (1000 * 60 * 60);
@ -46,27 +49,73 @@ function App() {
diff -= seconds * (1000);
return (
<div className="App" >
<img src={NWSLogo} alt="nws-logo" height={500} />
<h1>Nick Web Services</h1>
<p style={{marginBottom: 40, maxWidth: 500}}>Nick Web Services is a hosting service based out of Austin, Texas. It is committed
to achieving maximum uptime with better performance and a lower cost than any of the major cloud services.</p>
<div className="App">
<div className={"row w-100"}>
<div className={"col-md-7 d-flex justify-content-center align-items-center flex-column"}>
<img src={NWSLogo} alt="nws-logo" style={{width: "70%"}}/>
<h1>Nick Web Services</h1>
<p style={{ maxWidth: 500}}>
Nick Web Services is a hosting service based out of
Austin, Texas. It is committed
to achieving maximum uptime with better performance and a lower cost than any of the major cloud
services.
</p>
</div>
<div className={"col-md-5 d-flex justify-content-center align-items-center flex-column"}>
<h3>Datacenter Status</h3>
<p>
<table>
<tr>
<th>Location</th>
<th>Uptime (Last Month)</th>
<th>Uptime (All Time)</th>
<th>Current Status</th>
</tr>
{monitors.map((e) => {
let name_parts = e.friendly_name.split('.');
if (name_parts[0] === 'datacenter') {
return (<tr>
<td>{name_parts[1]}</td>
<td>{e.custom_uptime_ranges}%</td>
<td>{e.all_time_uptime_ratio}%</td>
<td>{e.status === 2 ? 'Up' : 'Down'}</td>
</tr>);
<h3>System Status</h3>
<p>
NWS has had {uptime}% uptime since {(new Date(setup_time*1000)).toLocaleString()}
</p>
{uptime === "100.000" &&
<p>
Continuous 100% SLA uptime for {days + " days, " + hours + " hours, " + mins + " minutes, " + seconds + " seconds"}
</p>
}
}
})}
</table>
</p>
<footer style={{marginTop: 50}}>
<h3>Service Status</h3>
<p>
<table>
<tr>
<th>Service Name</th>
<th>Uptime (Last Month)</th>
<th>Uptime (All Time)</th>
<th>Current Status</th>
</tr>
{monitors.map((e) => {
let name_parts = e.friendly_name.split('.');
if (name_parts[0] === 'service') {
return (<tr>
<td><a href={e.url}>{name_parts[1]}</a></td>
<td>{e.custom_uptime_ranges}%</td>
<td>{e.all_time_uptime_ratio}%</td>
<td>{e.status === 2 ? 'Up' : 'Down'}</td>
</tr>);
}
})}
</table>
</p>
</div>
</div>
<footer style={{margin: 25}}>
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
</footer>
</div>
);
);
}
export default App;