tormakris/cf-workers-status-page
1
0
Fork 0
mirror of https://github.com/tormachris/cf-workers-status-page.git synced 2024-11-23 22:45:43 +01:00
Code Releases Activity

refactor: move status header to its own component

Browse Source
This commit is contained in:
Alex 2020-11-16 22:57:14 +01:00
parent eff367f15e
commit 61f788df1f
2 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
pages/index.js
View File

@ -9,6 +9,7 @@ import {
import config from '../config.yaml' import config from '../config.yaml'
import MonitorStatusLabel from '../src/components/monitorStatusLabel' import MonitorStatusLabel from '../src/components/monitorStatusLabel'
import MonitorStatusHeader from '../src/components/monitorStatusHeader'
export async function getEdgeProps() { export async function getEdgeProps() {
// get KV data // get KV data
@ -68,24 +69,10 @@ export default function Index({
/> />
{config.settings.title} {config.settings.title}
</h1> </h1>
<div <MonitorStatusHeader
className={`ui inverted segment ${ operational={monitorsOperational}
monitorsOperational ? 'green' : 'yellow' lastUpdate={kvLastUpdate}
}`} />
>
<div className="horizontal flex between">
<div className="ui marginless header black-text">
{monitorsOperational
? config.settings.allmonitorsOperational
: config.settings.notAllmonitorsOperational}
</div>
{kvLastUpdate.metadata && typeof window !== 'undefined' && (
<div className="black-text">
checked {Math.round((Date.now() - kvLastUpdate.value) / 1000)} sec ago (from {kvLastUpdate.metadata.loc})
</div>
)}
</div>
</div>
{config.monitors.map((monitor, key) => { {config.monitors.map((monitor, key) => {
return ( return (
<div key={key} className="ui segment"> <div key={key} className="ui segment">

31
src/components/monitorStatusHeader.js Normal file
View File

@ -0,0 +1,31 @@
import config from '../../config.yaml'
export default function MonitorStatusHeader({ operational, lastUpdate }) {
let backgroundColor = 'green'
let headerText = config.settings.allmonitorsOperational
let textColor = 'black'
if (!operational) {
backgroundColor = 'yellow'
headerText = config.settings.notAllmonitorsOperational
}
const lastCheckAgo = Math.round((Date.now() - lastUpdate.value) / 1000)
return (
<div className={`ui inverted segment ${backgroundColor}`}>
<div className="horizontal flex between">
<div className={`ui marginless header ${textColor}-text`}>
{headerText}
</div>
{
lastUpdate.metadata && typeof window !== 'undefined' && (
<div className={`${textColor}-text`}>
checked {lastCheckAgo} sec ago (from {lastUpdate.metadata.loc})
</div>
)
}
</div>
</div>
)
}