redesign site
This commit is contained in:
parent
92b527c3a2
commit
970d589b86
|
|
@ -2,7 +2,12 @@
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ChangeListManager">
|
<component name="ChangeListManager">
|
||||||
<list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
|
<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/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>
|
</list>
|
||||||
<option name="SHOW_DIALOG" value="false" />
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
|
@ -64,7 +69,7 @@
|
||||||
<workItem from="1643936709048" duration="547000" />
|
<workItem from="1643936709048" duration="547000" />
|
||||||
<workItem from="1648500425230" duration="246000" />
|
<workItem from="1648500425230" duration="246000" />
|
||||||
<workItem from="1658028513357" duration="2964000" />
|
<workItem from="1658028513357" duration="2964000" />
|
||||||
<workItem from="1666469240565" duration="3558000" />
|
<workItem from="1666469240565" duration="6879000" />
|
||||||
</task>
|
</task>
|
||||||
<servers />
|
<servers />
|
||||||
</component>
|
</component>
|
||||||
|
|
|
||||||
41
package-lock.json
generated
41
package-lock.json
generated
|
|
@ -20,6 +20,7 @@
|
||||||
"react-bootstrap": "^2.4.0",
|
"react-bootstrap": "^2.4.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
|
"react-tooltip": "^4.4.3",
|
||||||
"typescript": "^4.5.5",
|
"typescript": "^4.5.5",
|
||||||
"web-vitals": "^2.1.4"
|
"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": {
|
"node_modules/react-transition-group": {
|
||||||
"version": "4.4.2",
|
"version": "4.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
"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"
|
"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": {
|
"react-transition-group": {
|
||||||
"version": "4.4.2",
|
"version": "4.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
"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-bootstrap": "^2.4.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
|
"react-tooltip": "^4.4.3",
|
||||||
"typescript": "^4.5.5",
|
"typescript": "^4.5.5",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"@types/react": "17.0.2",
|
||||||
|
"@types/react-dom": "17.0.2"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
|
|
|
||||||
13
src/App.css
13
src/App.css
|
|
@ -16,8 +16,19 @@
|
||||||
background-color: #f08080
|
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;
|
border-radius: 20px;
|
||||||
|
background-color: #eee;
|
||||||
padding: .75rem;
|
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 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
import {Incident, UptimeResponse} from "./nws-api/types";
|
import {Incident, UptimeResponse} from "./nws-api/types";
|
||||||
import {getIncidents, getUptime} from "./nws-api/calls";
|
import {getIncidents, getUptime} from "./nws-api/calls";
|
||||||
|
import ReactTooltip from 'react-tooltip';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[]});
|
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[], lastUpdated: ""});
|
||||||
const [incidents, setIncidents] = useState<Incident[]>([]);
|
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 () => {
|
const fetchUptime = async () => {
|
||||||
let resp: UptimeResponse = await getUptime();
|
let resp: UptimeResponse = await getUptime();
|
||||||
|
|
@ -25,65 +31,88 @@ function App() {
|
||||||
fetchIncidents();
|
fetchIncidents();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<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%"}}/>
|
<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>
|
<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
|
Nick Web Services is a hosting service based out of
|
||||||
Austin, Texas. It is committed
|
Austin, Texas. It is committed
|
||||||
to achieving maximum uptime with better performance and a lower cost than any of the major cloud
|
to achieving maximum uptime with better performance and a lower cost than any of the major cloud
|
||||||
services.
|
services.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={"col-md-5 d-flex justify-content-center align-items-center flex-column"}>
|
</div>
|
||||||
<h3>Datacenter Status</h3>
|
<div style={{width: '75vw'}}>
|
||||||
<p>
|
<hr/>
|
||||||
<table>
|
</div>
|
||||||
<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 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>
|
<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) => {
|
{uptime.services.map((e) => {
|
||||||
|
return (
|
||||||
return (<tr>
|
<div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
|
||||||
<td><a href={e.url}>{e.name}</a></td>
|
<h3 className={"col-md-9 col-12"}><a href={e.url} style={{textDecoration: "none"}}>{e.name}</a></h3>
|
||||||
<td>{e.uptimeMonth}%</td>
|
<div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
|
||||||
<td>{e.uptimeAllTime}%</td>
|
<p className={`fw-bold severity-label
|
||||||
<td>{e.isUp ? 'Up' : 'Down'}</td>
|
${e.isUp ? 'low' : (e.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||||
</tr>);
|
style={{width: "max-content"}}>
|
||||||
|
{e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
||||||
})}
|
|
||||||
</table>
|
|
||||||
</p>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div style={{width: '75vw'}}>
|
<div style={{width: '75vw'}}>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -93,9 +122,15 @@ function App() {
|
||||||
let severityClass: string = e.severity == 0 ? 'low' : (e.severity == 1 ? 'med' : 'high');
|
let severityClass: string = e.severity == 0 ? 'low' : (e.severity == 1 ? 'med' : 'high');
|
||||||
let severityString: string = e.severity == 0 ? 'Low' : (e.severity == 1 ? 'Medium' : 'High');
|
let severityString: string = e.severity == 0 ? 'Low' : (e.severity == 1 ? 'Medium' : 'High');
|
||||||
return (
|
return (
|
||||||
<div className={`row text-left incident ${severityClass}-severity`} style={{width: '75vw'}}>
|
<div className={`row text-left nws-card`} style={{width: '75vw'}}>
|
||||||
<p className={"col-10"}><b>{e.title}</b></p>
|
<p className={"col-md-10 col-12 mb-2"}><b>{e.title}</b></p>
|
||||||
<p className={"col-2"}><b>{severityString} Severity</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>
|
<p className={"mb-0"}>{e.description}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -104,6 +139,8 @@ function App() {
|
||||||
<h5 className={"col-12"}>No service alerts.</h5>
|
<h5 className={"col-12"}>No service alerts.</h5>
|
||||||
</div>}
|
</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<footer style={{margin: 25}}>
|
<footer style={{margin: 25}}>
|
||||||
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
|
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,8 @@ export type UptimeRecord = {
|
||||||
|
|
||||||
export type UptimeResponse = {
|
export type UptimeResponse = {
|
||||||
datacenters: UptimeRecord[],
|
datacenters: UptimeRecord[],
|
||||||
services: UptimeRecord[]
|
services: UptimeRecord[],
|
||||||
|
lastUpdated: string
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Blog = {
|
export type Blog = {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue