readme + docker

src/App.css

@@ -1,38 +1,3 @@
 .App {
   text-align: center;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,26 +1,65 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, {useEffect, useState} from 'react';
+import NWSLogo from './static/images/NWS_Logo.png';
 import './App.css';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    const setup_time = 1643927861;
+    const[uptime, setUptime] = useState("100%");
+    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("all_time_uptime_ratio", "1");
+
+        var requestOptions = {
+            method: 'POST',
+            headers: myHeaders,
+            body: urlencoded,
+            redirect: 'follow'
+        };
+
+        // @ts-ignore
+        fetch("https://api.uptimerobot.com/v2/getMonitors", requestOptions)
+            .then(response => response.json().then(json => {
+                setUptime(json.monitors[0].custom_uptime_ranges);
+            }))
+            .then(result => console.log(result))
+            .catch(error => console.log('error', error));
+    }, []);
+
+    let diff = new Date().getTime() - new Date(setup_time*1000).getTime();
+
+    let days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    diff -=  days * (1000 * 60 * 60 * 24);
+
+    let hours = Math.floor(diff / (1000 * 60 * 60));
+    diff -= hours * (1000 * 60 * 60);
+
+    let mins = Math.floor(diff / (1000 * 60));
+    diff -= mins * (1000 * 60);
+
+    let seconds = Math.floor(diff / (1000));
+    diff -= seconds * (1000);
+
+    return (
+        <div className="App">
+          <header className="App-header">
+            <img src={NWSLogo} alt="nws-logo" />
+            <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>
+              }
+          </header>
+        </div>
+      );
 }
 
 export default App;