From 970d589b8631415f97803c1d307fdb3d1cc39d9f Mon Sep 17 00:00:00 2001 From: Nicholas Orlowsky Date: Sat, 22 Oct 2022 20:13:52 -0500 Subject: [PATCH] redesign site --- .idea/workspace.xml | 7 +- package-lock.json | 41 ++++++++++++ package.json | 5 ++ src/App.css | 13 +++- src/App.tsx | 149 +++++++++++++++++++++++++++---------------- src/nws-api/types.ts | 3 +- 6 files changed, 159 insertions(+), 59 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 04bbb43..0473e0c 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,7 +2,12 @@ + + + + + diff --git a/package-lock.json b/package-lock.json index defe0f3..a03bb6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index c11dbab..0a8c972 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.css b/src/App.css index c9a9b36..c98933c 100644 --- a/src/App.css +++ b/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; } + diff --git a/src/App.tsx b/src/App.tsx index 713fbca..679d8e3 100644 --- a/src/App.tsx +++ b/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({datacenters: [], services:[]}); + const [uptime, setUptime] = useState({datacenters: [], services:[], lastUpdated: ""}); const [incidents, setIncidents] = useState([]); + 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 (
-
-
- nws-logo -

Nick Web Services

-

- 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. -

+ + +
+
+ nws-logo +
+
+

Nick Web Services

+

+ 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. +

+
-
+
+
+
+ +
+ +

NWS System Status

+

Last updated at {new Date(uptime.lastUpdated).toLocaleString()}

+
+

Service Status

+ {uptime.services.map((e) => { + return ( +
+

{e.name}

+
+

+ {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')} +

+
+
+

+ {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')} +

+
+

Last Month Uptime: {e.uptimeMonth}%

+

All Time Uptime: {e.uptimeAllTime}%

+
+ ); + })} +
+

Datacenter Status

-

- - - - - - - - {uptime.datacenters.map((e) => { - return ( - - - - - ); - })} -
LocationUptime (Last Month)Uptime (All Time)Current Status
{e.name}{e.uptimeMonth}%{e.uptimeAllTime}%{e.isUp ? 'Up' : 'Down'}
-

- -

Service Status

-

- - - - - - - - {uptime.services.map((e) => { - - return ( - - - - - ); - - })} -
Service NameUptime (Last Month)Uptime (All Time)Current Status
{e.name}{e.uptimeMonth}%{e.uptimeAllTime}%{e.isUp ? 'Up' : 'Down'}
-

- + {uptime.datacenters.map((e) => { + return ( +
+

{e.name}

+
+

+ {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')} +

+
+
+

+ {e.isUp ? 'Up' : (e.undergoingMaintenance ? 'Maintenance' : 'Down')} +

+
+

Last Month Uptime: {e.uptimeMonth}%

+

All Time Uptime: {e.uptimeAllTime}%

+
+ ); + })}
+
@@ -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 ( -
-

{e.title}

-

{severityString} Severity

+
+

{e.title}

+
+ + {severityString} Severity ⓘ + + +

{e.description}

); @@ -104,6 +139,8 @@ function App() {
No service alerts.
}
+ + diff --git a/src/nws-api/types.ts b/src/nws-api/types.ts index 95abb13..bd33bf5 100644 --- a/src/nws-api/types.ts +++ b/src/nws-api/types.ts @@ -9,7 +9,8 @@ export type UptimeRecord = { export type UptimeResponse = { datacenters: UptimeRecord[], - services: UptimeRecord[] + services: UptimeRecord[], + lastUpdated: string }; export type Blog = {