94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import NWSLogo from "../static/images/NWS_Logo.png";
|
|
import UptimeCard from "./UptimeCard";
|
|
import IncidentCard from "./IncidentCard";
|
|
import Footer from "./Footer";
|
|
import React, {useEffect, useState} from "react";
|
|
import {Incident, UptimeResponse} from "../nws-api/types";
|
|
import {getIncidents, getUptime} from "../nws-api/calls";
|
|
import "../App.css";
|
|
|
|
|
|
export default function StatusPage() {
|
|
|
|
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services: [], lastUpdated: ""});
|
|
const [incidents, setIncidents] = useState<Incident[]>([]);
|
|
|
|
const fetchUptime = async () => {
|
|
let resp: UptimeResponse = await getUptime();
|
|
setUptime(resp);
|
|
}
|
|
|
|
const fetchIncidents = async () => {
|
|
let resp: Incident[] = await getIncidents();
|
|
setIncidents(resp);
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchUptime();
|
|
fetchIncidents();
|
|
}, []);
|
|
|
|
return(
|
|
<div className="App">
|
|
|
|
<div className={"w-100 row"}>
|
|
<div className={"col-md-6 d-flex justify-content-center flex-column align-items-center"}>
|
|
<img src={NWSLogo} alt="nws-logo" style={{width: "70%"}}/>
|
|
</div>
|
|
<div className={"col-md-6 text-center d-flex justify-content-center flex-column align-items-center"}>
|
|
<h1>Nick Web Services</h1>
|
|
<p style={{maxWidth: 500}} className={"col-md-6 text-center"}>
|
|
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>
|
|
|
|
<div style={{width: '75vw'}}>
|
|
<hr/>
|
|
</div>
|
|
|
|
<div className={"text-left row"} style={{width: '75vw'}}>
|
|
<h2>NWS System Status</h2>
|
|
<p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
|
|
<div className={"col-md-6 col-12"}>
|
|
<h3>Service Status</h3>
|
|
{uptime.services.map((e) => {
|
|
return (
|
|
<UptimeCard uptime={e}/>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className={"col-md-6 col-12"}>
|
|
<h3>Datacenter Status</h3>
|
|
{uptime.datacenters.map((e) => {
|
|
return (
|
|
<UptimeCard uptime={e}/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{width: '75vw'}}>
|
|
<hr/>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Service Alerts</h3>
|
|
{incidents !== null && incidents.map((e) => {
|
|
return (
|
|
<IncidentCard incident={e}/>
|
|
);
|
|
})}
|
|
{(incidents !== null || incidents.length == 0) &&
|
|
<div className={`row text-center`} style={{width: '75vw'}}>
|
|
<h5 className={"col-12"}>No service alerts.</h5>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|