nws/nws-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new uptime monitors + half-completed create container deployment flow

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-01-17 01:06:38 -06:00
parent ddb20ee17c
commit 847d11c841
No known key found for this signature in database
GPG key ID: 3845F78A73B14100
16 changed files with 550 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/UptimeCard.tsx
View file

@ -1,29 +1,52 @@
import {UptimeRecord} from "../nws-api/types";
import React from "react";
import React, {useState} from "react";
import '../App.css';
import "./UptimeCard.css"
import Modal from "react-modal";
export default function UptimeCard(props: {uptime: UptimeRecord}) {
export default function UptimeCard(props: {uptime: UptimeRecord, isService: boolean}) {
const [isModalOpen, setModalOpen] = useState(false);
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={"nws-card row mb-2 m-0"} style={{maxWidth: '100%'}}>
<h3 className={"col-md-9 col-12 uptime-lnk"} onClick={()=>setModalOpen(true)}>{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
<p className={`fw-bold severity-label w-100
${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"}}>
style={{width: "max-content", height: '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>
<p className={"col-md-6 col-12"}><b>{new Date().getFullYear()} Uptime:</b> {props.uptime.uptimeYtd}%</p>
<p className={"col-md-6 col-12"}><b>Avg Response Time:</b> {props.uptime.averageResponseTime}ms</p>
<Modal className={"uptime-modal"} isOpen={isModalOpen}>
<div className={"mb-3"}>
<h1 className={"mb-0"}>{props.uptime.name}</h1>
{props.uptime.url && <p>(<a href={props.uptime.url}>{props.uptime.url}</a>)</p>}
</div>
<div className={"mb-3"}>
<p>Monitoring since {props.uptime.monitorStart}</p>
<p><b>{new Date().getFullYear()} Uptime (YTD):</b> {props.uptime.uptimeYtd}%</p>
<p><b>Last Month Uptime:</b> {props.uptime.uptimeMonth}%</p>
<p><b>All-Time Uptime:</b> {props.uptime.uptimeAllTime}%</p>
<p><b>Average Response Time:</b> {props.uptime.averageResponseTime}ms</p>
</div>
{
props.isService &&
<div className={"mb-3"}>
<i>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.</i>
</div>
}
<button className={"w-100"} onClick={()=>setModalOpen(false)}>Close</button>
</Modal>
</div>
);
}