redesign site
This commit is contained in:
parent
92b527c3a2
commit
970d589b86
6 changed files with 159 additions and 59 deletions
13
src/App.css
13
src/App.css
|
|
@ -16,8 +16,19 @@
|
|||
background-color: #f08080
|
||||
}
|
||||
|
||||
.incident {
|
||||
.severity-label {
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.nws-card {
|
||||
border-radius: 20px;
|
||||
background-color: #eee;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
149
src/App.tsx
149
src/App.tsx
|
|
@ -4,11 +4,17 @@ import './App.css';
|
|||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import {Incident, UptimeResponse} from "./nws-api/types";
|
||||
import {getIncidents, getUptime} from "./nws-api/calls";
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
|
||||
function App() {
|
||||
|
||||
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[]});
|
||||
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[], lastUpdated: ""});
|
||||
const [incidents, setIncidents] = useState<Incident[]>([]);
|
||||
const severityText: string[] = [
|
||||
"Low Severity means that this issue does not affect any services running on NWS.",
|
||||
"Medium Severity means that this issue may cause some slowdowns or outages on some services.",
|
||||
"High Severity means that this issue causes an outage on the entire NWS network or most of the services running on it."
|
||||
];
|
||||
|
||||
const fetchUptime = async () => {
|
||||
let resp: UptimeResponse = await getUptime();
|
||||
|
|
@ -25,65 +31,88 @@ function App() {
|
|||
fetchIncidents();
|
||||
}, []);
|
||||
|
||||
// @ts-ignore
|
||||
return (
|
||||
<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 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 className={"col-md-5 d-flex justify-content-center align-items-center flex-column"}>
|
||||
<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 (
|
||||
<div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
|
||||
<h3 className={"col-md-9 col-12"}><a href={e.url} style={{textDecoration: "none"}}>{e.name}</a></h3>
|
||||
<div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
|
||||
<p className={`fw-bold severity-label
|
||||
${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||
style={{width: "max-content"}}>
|
||||
{e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
|
||||
<p className={`fw-bold severity-label
|
||||
${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||
style={{width: "max-content"}}>
|
||||
{e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
||||
</p>
|
||||
</div>
|
||||
<p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {e.uptimeMonth}%</p>
|
||||
<p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {e.uptimeAllTime}%</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={"col-md-6 col-12"}>
|
||||
<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>
|
||||
{uptime.datacenters.map((e) => {
|
||||
return (<tr>
|
||||
<td>{e.name}</td>
|
||||
<td>{e.uptimeMonth}%</td>
|
||||
<td>{e.uptimeAllTime}%</td>
|
||||
<td>{e.isUp ? 'Up' : 'Down'}</td>
|
||||
</tr>);
|
||||
})}
|
||||
</table>
|
||||
</p>
|
||||
|
||||
<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>
|
||||
{uptime.services.map((e) => {
|
||||
|
||||
return (<tr>
|
||||
<td><a href={e.url}>{e.name}</a></td>
|
||||
<td>{e.uptimeMonth}%</td>
|
||||
<td>{e.uptimeAllTime}%</td>
|
||||
<td>{e.isUp ? 'Up' : 'Down'}</td>
|
||||
</tr>);
|
||||
|
||||
})}
|
||||
</table>
|
||||
</p>
|
||||
|
||||
{uptime.datacenters.map((e) => {
|
||||
return (
|
||||
<div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
|
||||
<h3 className={"col-md-9 col-12"}>{e.name}</h3>
|
||||
<div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
|
||||
<p className={`fw-bold severity-label
|
||||
${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||
style={{width: "max-content"}}>
|
||||
{e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
|
||||
<p className={`fw-bold severity-label
|
||||
${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||
style={{width: "max-content"}}>
|
||||
{e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
||||
</p>
|
||||
</div>
|
||||
<p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {e.uptimeMonth}%</p>
|
||||
<p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {e.uptimeAllTime}%</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{width: '75vw'}}>
|
||||
<hr/>
|
||||
</div>
|
||||
|
|
@ -93,9 +122,15 @@ function App() {
|
|||
let severityClass: string = e.severity == 0 ? 'low' : (e.severity == 1 ? 'med' : 'high');
|
||||
let severityString: string = e.severity == 0 ? 'Low' : (e.severity == 1 ? 'Medium' : 'High');
|
||||
return (
|
||||
<div className={`row text-left incident ${severityClass}-severity`} style={{width: '75vw'}}>
|
||||
<p className={"col-10"}><b>{e.title}</b></p>
|
||||
<p className={"col-2"}><b>{severityString} Severity</b></p>
|
||||
<div className={`row text-left nws-card`} style={{width: '75vw'}}>
|
||||
<p className={"col-md-10 col-12 mb-2"}><b>{e.title}</b></p>
|
||||
<div className={`col-md-2 col-12 mb-2`}>
|
||||
<b className={`severity-label w-min-content ${severityClass}-severity`}
|
||||
data-tip={severityText[e.severity]}>
|
||||
{severityString} Severity ⓘ
|
||||
</b>
|
||||
<ReactTooltip />
|
||||
</div>
|
||||
<p className={"mb-0"}>{e.description}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -104,6 +139,8 @@ function App() {
|
|||
<h5 className={"col-12"}>No service alerts.</h5>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
|
||||
<footer style={{margin: 25}}>
|
||||
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ export type UptimeRecord = {
|
|||
|
||||
export type UptimeResponse = {
|
||||
datacenters: UptimeRecord[],
|
||||
services: UptimeRecord[]
|
||||
services: UptimeRecord[],
|
||||
lastUpdated: string
|
||||
};
|
||||
|
||||
export type Blog = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue