move things into components
This commit is contained in:
parent
970d589b86
commit
8456552f5a
|
|
@ -2,12 +2,10 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
|
||||
<change afterPath="$PROJECT_DIR$/src/components/IncidentCard.tsx" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/components/UptimeCard.tsx" afterDir="false" />
|
||||
<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" />
|
||||
|
|
@ -18,6 +16,7 @@
|
|||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="TypeScript File" />
|
||||
<option value="TypeScript JSX File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
|
@ -69,7 +68,8 @@
|
|||
<workItem from="1643936709048" duration="547000" />
|
||||
<workItem from="1648500425230" duration="246000" />
|
||||
<workItem from="1658028513357" duration="2964000" />
|
||||
<workItem from="1666469240565" duration="6879000" />
|
||||
<workItem from="1666469240565" duration="7361000" />
|
||||
<workItem from="1666543043382" duration="439000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
|
|
|||
63
src/App.tsx
63
src/App.tsx
|
|
@ -5,16 +5,13 @@ 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';
|
||||
import UptimeCard from "./components/UptimeCard";
|
||||
import IncidentCard from "./components/IncidentCard";
|
||||
|
||||
function App() {
|
||||
|
||||
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();
|
||||
|
|
@ -55,32 +52,13 @@ function App() {
|
|||
</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>
|
||||
{uptime.services.map((e) => {
|
||||
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>
|
||||
<UptimeCard uptime={e}/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -88,29 +66,10 @@ function App() {
|
|||
<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>
|
||||
<UptimeCard uptime={e}/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{width: '75vw'}}>
|
||||
|
|
@ -119,20 +78,8 @@ function App() {
|
|||
<div>
|
||||
<h3>Service Alerts</h3>
|
||||
{incidents.map((e) => {
|
||||
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 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>
|
||||
<IncidentCard incident={e}/>
|
||||
);
|
||||
})}
|
||||
{incidents.length == 0 && <div className={`row text-center`} style={{width: '75vw'}}>
|
||||
|
|
|
|||
30
src/components/IncidentCard.tsx
Normal file
30
src/components/IncidentCard.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import {Incident} from "../nws-api/types";
|
||||
import ReactTooltip from "react-tooltip";
|
||||
import React from "react";
|
||||
|
||||
export default function IncidentCard(props: {incident: 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."
|
||||
];
|
||||
let severityClass: string = props.incident.severity == 0 ? 'low' : (props.incident.severity == 1 ? 'med' : 'high');
|
||||
let severityString: string = props.incident.severity == 0 ? 'Low' : (props.incident.severity == 1 ? 'Medium' : 'High');
|
||||
|
||||
return (
|
||||
<div className={`row text-left nws-card`} style={{width: '75vw'}}>
|
||||
<p className={"col-md-10 col-12 mb-2"}><b>{props.incident.title}</b></p>
|
||||
<div className={`col-md-2 col-12 mb-2`}>
|
||||
<div className={`severity-label w-max-content ${severityClass}-severity`}
|
||||
data-tip={severityText[props.incident.severity]}>
|
||||
<b>
|
||||
{severityString} Severity ⓘ
|
||||
</b>
|
||||
<ReactTooltip />
|
||||
</div>
|
||||
</div>
|
||||
<p className={"mb-0"}>{props.incident.description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/components/UptimeCard.tsx
Normal file
29
src/components/UptimeCard.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import {UptimeRecord} from "../nws-api/types";
|
||||
import React from "react";
|
||||
import '../App.css';
|
||||
|
||||
export default function UptimeCard(props: {uptime: UptimeRecord}) {
|
||||
return(
|
||||
<div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
|
||||
{props.uptime.url != null && <h3 className={"col-md-9 col-12"}><a href={props.uptime.url} style={{textDecoration: "none"}}>{props.uptime.name}</a></h3>}
|
||||
{props.uptime.url == null && <h3 className={"col-md-9 col-12"}>{props.uptime.name}</h3>}
|
||||
|
||||
<div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
|
||||
<p className={`fw-bold severity-label
|
||||
${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||
style={{width: "max-content"}}>
|
||||
{props.uptime.isUp ? 'Up' : (props.uptime.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
|
||||
${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
|
||||
style={{width: "max-content"}}>
|
||||
{props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
|
||||
</p>
|
||||
</div>
|
||||
<p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {props.uptime.uptimeMonth}%</p>
|
||||
<p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {props.uptime.uptimeAllTime}%</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue