From d764fd29e1b2ea4d2d789dbe08a47362e1d77c5a Mon Sep 17 00:00:00 2001 From: Nicholas Orlowsky Date: Mon, 23 Jan 2023 14:37:22 -0600 Subject: [PATCH] better comparison + fixed navbar --- .idea/workspace.xml | 21 +++--- src/components/HomePage.tsx | 13 ++-- src/components/UptimeCard.css | 13 ++++ src/components/UptimeComparisonCard.tsx | 80 +++++++++++++++++++++ src/components/UptimeLabelCard.tsx | 24 +++++++ src/index.tsx | 94 +++++++++++++++---------- 6 files changed, 191 insertions(+), 54 deletions(-) create mode 100644 src/components/UptimeComparisonCard.tsx create mode 100644 src/components/UptimeLabelCard.tsx diff --git a/.idea/workspace.xml b/.idea/workspace.xml index c846066..7c0808c 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,13 +2,12 @@ - + + - - - - + + - + + + + - + diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index d497e5e..7661373 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -6,6 +6,8 @@ import React, {useEffect, useState} from "react"; import {Incident, UptimeResponse} from "../nws-api/types"; import {getIncidents, getUptime} from "../nws-api/calls"; import "../App.css"; +import UptimeComparisonCard from "./UptimeComparisonCard"; +import UptimeLabelCard from "./UptimeLabelCard"; export default function HomePage() { @@ -30,7 +32,6 @@ export default function HomePage() { return(
-
nws-logo @@ -45,7 +46,10 @@ export default function HomePage() {

- +
+

Better uptime than GitHub Pages!

+

Watch the NWS Deployment Demo

+
@@ -53,10 +57,11 @@ export default function HomePage() {

Compare us to our competitors

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

-
+
+ {uptime.competitors.sort((a,b)=>{return b.uptimeMonth === a.uptimeMonth ? (a.name === "NWS" ? -1000 : b.name.localeCompare(a.name)) : b.uptimeMonth - a.uptimeMonth}).map((e) => { return ( - + ); })}
diff --git a/src/components/UptimeCard.css b/src/components/UptimeCard.css index c19f5ad..da99646 100644 --- a/src/components/UptimeCard.css +++ b/src/components/UptimeCard.css @@ -26,3 +26,16 @@ width: 500px; max-width: 100vw; } + +.stat-perfect { + font-weight: bold; + color: #069D06 +} + +.stat-middle { + color: #877E1C +} + +.stat-bad { + color: #921111 +} diff --git a/src/components/UptimeComparisonCard.tsx b/src/components/UptimeComparisonCard.tsx new file mode 100644 index 0000000..3cb2e26 --- /dev/null +++ b/src/components/UptimeComparisonCard.tsx @@ -0,0 +1,80 @@ +import {UptimeRecord} from "../nws-api/types"; +import React, {useState} from "react"; +import '../App.css'; +import "./UptimeCard.css" +import Modal from "react-modal"; + +function getUptimeClass(uptime: number) { + if(uptime === 100) { + return "stat-perfect"; + } + + if(uptime >= 95) { + return "stat-middle"; + } + + return "stat-bad"; +} + +function getResponseTimeClass(respTime: number) { + // https://www.littledata.io/average/server-response-time + if(respTime < 205) { + return "stat-perfect"; + } + + if(respTime < 495) { + return "stat-middle"; + } + + return "stat-bad"; +} + +export default function UptimeComparisonCard(props: {uptime: UptimeRecord, isService: boolean}) { + const [isModalOpen, setModalOpen] = useState(false); + return( +
+
+

setModalOpen(true)}>{props.uptime.name}

+
+
+

Uptime (Last Month)

+

{props.uptime.uptimeMonth}%

+
+

Uptime ({new Date().getFullYear()} YTD)

+

{props.uptime.uptimeYtd}%

+
+

Avg Response Time (24hr)

+

{props.uptime.averageResponseTime}ms

+
+

Current Status

+
+

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

+
+ +
+

{props.uptime.name}

+ {props.uptime.url &&

({props.uptime.url})

} +
+
+

Monitoring since {props.uptime.monitorStart}

+

{new Date().getFullYear()} Uptime (YTD): {props.uptime.uptimeYtd}%

+

Last Month Uptime: {props.uptime.uptimeMonth}%

+

All-Time Uptime: {props.uptime.uptimeAllTime}%

+

Average Response Time: {props.uptime.averageResponseTime}ms

+
+ { + props.isService && +
+ Note that the uptime and performance of services hosted on NWS may be affected by factors not controlled by NWS such as bad bad optimization or buggy software. +
+ } + + + +
+ ); +} diff --git a/src/components/UptimeLabelCard.tsx b/src/components/UptimeLabelCard.tsx new file mode 100644 index 0000000..5fce811 --- /dev/null +++ b/src/components/UptimeLabelCard.tsx @@ -0,0 +1,24 @@ +import {UptimeRecord} from "../nws-api/types"; +import React, {useState} from "react"; +import '../App.css'; +import "./UptimeCard.css" +import Modal from "react-modal"; + +export default function UptimeLabelCard() { + + return( +
+
+

Service Name

+
+
+

Uptime (Last Month)

+
+

Uptime ({new Date().getFullYear()} YTD)

+
+

Avg Response Time (24hr)

+
+

Current Status

+
+ ); +} diff --git a/src/index.tsx b/src/index.tsx index c40e6ee..7a41e44 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,49 +20,67 @@ import VerifyPage from "./components/VerifyPage"; import DashboardPage from "./components/DashboardPage"; import CreateCruisePage from "./components/CreateCruisePage"; import HomePage from "./components/HomePage"; +import NavbarCollapse from "react-bootstrap/NavbarCollapse"; +import NavbarOffcanvas from "react-bootstrap/NavbarOffcanvas"; function Layout (props: {children: any}) { return (
- -
- - nws-logo - - - Home - - - Status - -
- {/**/} - {/* Blog*/} - {/**/} -
- { localStorage.getItem("session_key") === null && - ( - - Login - +
+
+ +
+
+
+ + + +
+
+ +
+
+
+ + + +
+ + + +
+ +
+
{props.children}