redesign site
This commit is contained in:
parent
92b527c3a2
commit
970d589b86
|
|
@ -2,7 +2,12 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/nws-api/types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/nws-api/types.ts" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
|
|
@ -64,7 +69,7 @@
|
|||
<workItem from="1643936709048" duration="547000" />
|
||||
<workItem from="1648500425230" duration="246000" />
|
||||
<workItem from="1658028513357" duration="2964000" />
|
||||
<workItem from="1666469240565" duration="3558000" />
|
||||
<workItem from="1666469240565" duration="6879000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
|
|
|||
41
package-lock.json
generated
41
package-lock.json
generated
|
|
@ -20,6 +20,7 @@
|
|||
"react-bootstrap": "^2.4.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"react-tooltip": "^4.4.3",
|
||||
"typescript": "^4.5.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
|
|
@ -13350,6 +13351,30 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-tooltip": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.4.3.tgz",
|
||||
"integrity": "sha512-l7/TDBwq3JtuLBtq6FvIs7wsqcHjvoHFT8AvNGpf0JhHwzh+ZhCDN25wM/+gxelj8i1ngw/ULFv53XRQ/wCMzQ==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1",
|
||||
"uuid": "^7.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"npm": ">=6.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.0.0",
|
||||
"react-dom": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-tooltip/node_modules/uuid": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
|
||||
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
||||
|
|
@ -25646,6 +25671,22 @@
|
|||
"workbox-webpack-plugin": "^6.4.1"
|
||||
}
|
||||
},
|
||||
"react-tooltip": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.4.3.tgz",
|
||||
"integrity": "sha512-l7/TDBwq3JtuLBtq6FvIs7wsqcHjvoHFT8AvNGpf0JhHwzh+ZhCDN25wM/+gxelj8i1ngw/ULFv53XRQ/wCMzQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1",
|
||||
"uuid": "^7.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
|
||||
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
||||
|
|
|
|||
|
|
@ -15,9 +15,14 @@
|
|||
"react-bootstrap": "^2.4.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"react-tooltip": "^4.4.3",
|
||||
"typescript": "^4.5.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "17.0.2",
|
||||
"@types/react-dom": "17.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
|
|
|
|||
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
129
src/App.tsx
129
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"}>
|
||||
|
||||
|
||||
<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}}>
|
||||
<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 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>
|
||||
{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>
|
||||
</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>
|
||||
<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>
|
||||
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>
|
||||
{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…
Reference in a new issue