-
Ensure the script finishes running before continuing
-
}
{
page === 'dns' &&
Create Container Deployment
+Create Container Deployment
+
+
About
+Deployment Info
+Repo Setup
+DNS Configuration
+
{
page === 'info' &&
@@ -65,33 +72,34 @@ export default function CreateCruisePage() {
fall of organized civilization.
-
+
}
{
page === 'framework-hostname' &&
-
+
-
-
-
-
}
{
page === 'scriptgen' &&
What is this deployment's name?
- May only be lowercase letters and dashes, max 20 chars -+
What is this deployment's name?
+May only be lowercase letters and dashes, max 20 chars
+ {setName(e.currentTarget.value)}}/> --
How did you create your website?
-Don't see your technology/framework? Email me: nws-support@nickorlow.com
+ +How did you create your website?
+Don't see your technology/framework? Email me: nws-support@nickorlow.com
--
What is the url of the github repo where your code is hosted? (e.g. https://github.com/nickorlow/personal-site)
-Other git hosting providers are not currently supported through the Web UI
-The repo must be public to create it through the Web UI
- {setGUI(e.currentTarget.value)}}/> --
What domain name will you use with your website? (e.g. nickorlow.com)
- {setHUI(e.currentTarget.value)}}/> --
Copy & Paste the below into your terminal to add NWS deployment scripts to your webapp
- curl -s https://raw.githubusercontent.com/nickorlow/nws-ghactions-templates/main/add-nws.sh | bash -s {strat} {owner} {repo}
+
+ curl -s https://raw.githubusercontent.com/nickorlow/nws-ghactions-templates/main/add-nws.sh | bash -s {strat} {owner} {repo}
+
Ensure the script finishes running before continuing
-
-
}
{
- new URI(hostUriInput).subdomain().length > 0 &&
+ new URI("https://"+hostUriInput).subdomain().length > 0 &&
Add the following DNS entry to {new URI(hostUriInput).hostname()}
+Add the following DNS entry to {new URI("https://"+hostUriInput).hostname()}
{ - new URI(hostUriInput).subdomain().length == 0 && + new URI("https://"+hostUriInput).subdomain().length == 0 &&If your DNS provider is:
-
@@ -159,7 +169,7 @@ export default function CreateCruisePage() {
Type: CNAME
Name: {new URI(hostUriInput).subdomain()} ({new URI(hostUriInput).hostname()})
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index dd1af73..7661373 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -1,4 +1,4 @@ -import NWSLogo from "../static/images/NWS_Logo.png"; +import NWSLogo from "../static/images/NWS_Logo_Transparent.png"; import UptimeCard from "./UptimeCard"; import IncidentCard from "./IncidentCard"; import Footer from "./Footer"; @@ -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(
-
@@ -45,7 +46,10 @@ export default function HomePage() {
-
+
@@ -53,10 +57,11 @@ export default function HomePage() {
+
Better uptime than GitHub Pages!
+Watch the NWS Deployment Demo
+Compare us to our competitors
Last updated at {new Date(uptime.lastUpdated).toLocaleString()}
-
+
+
+
);
})}
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..aa4529c
--- /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(
+
+
+
+
+
+
+
+
+
+ );
+}
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(
+
+
+ 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.isService &&
+ 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
+
+ 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/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 (
+
+ Service Name
++
Uptime (Last Month)
++
Uptime ({new Date().getFullYear()} YTD)
++
Avg Response Time (24hr)
++
Current Status
+
-
- */}
- {/* Blog*/}
- {/* */}
-
-
-
-
-
- Home
-
-
- Status
-
-
- {/*
- { localStorage.getItem("session_key") === null &&
- (
-
- Login
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{props.children}