detect slow services and show an icon
The amount of latency a service needs before being considered "slow" is configurable in config.json. By default, it is 2000ms (2s). A side effect of this change is that the "service unresponsive" icon that is shown when a service is unreachable has been changed to an X instead of a !. The slow icon now uses the ! icon. Additionally, icon "titles" were added to aid any screen readers.
This commit is contained in:
parent
4c13c191fd
commit
cb12d43aea
3 changed files with 64 additions and 24 deletions
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
"domain": "https://elstatus.stayathomeserver.club"
|
"domain": "https://elstatus.stayathomeserver.club",
|
||||||
|
"slow_threshold": 2000
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,30 +5,67 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
|
||||||
import './Service.css'
|
import './Service.css'
|
||||||
import Graph from './Graph.js'
|
import Graph from './Graph.js'
|
||||||
|
import config from '../config.json'
|
||||||
|
|
||||||
const Service = ({ graph, name, status, latency, description }) => (
|
const {
|
||||||
<div className="service">
|
slow_threshold: SLOW_THRESHOLD = 1500,
|
||||||
<header>
|
} = config
|
||||||
<div className="emoji">
|
|
||||||
<FontAwesomeIcon
|
// from clrs.cc
|
||||||
icon={`${status ? 'check' : 'exclamation'}-circle`}
|
const colors = {
|
||||||
style={{ color: status ? '#2ECC40' : '#FF4136' }}
|
alive: '#2ECC40',
|
||||||
/>
|
slow: '#FF851B',
|
||||||
</div>
|
dead: '#FF4136',
|
||||||
<h2 className="title">
|
}
|
||||||
{name} {latency ? (
|
|
||||||
<span className="latency">
|
const icons = {
|
||||||
{Math.round(latency)}ms
|
alive: 'check-circle',
|
||||||
</span>
|
slow: 'exclamation-circle',
|
||||||
) : null}
|
dead: 'times-circle',
|
||||||
</h2>
|
}
|
||||||
</header>
|
|
||||||
<p className="description">
|
const titles = {
|
||||||
{description}
|
alive: 'This service is healthy.',
|
||||||
</p>
|
slow: 'This service is slow, but responding.',
|
||||||
{graph ? <Graph data={graph} /> : null}
|
dead: 'This service is unresponsive.',
|
||||||
</div>
|
}
|
||||||
)
|
|
||||||
|
function getServiceState (status, latency) {
|
||||||
|
if (status && latency > SLOW_THRESHOLD) {
|
||||||
|
return 'slow'
|
||||||
|
}
|
||||||
|
|
||||||
|
return status ? 'alive' : 'dead'
|
||||||
|
}
|
||||||
|
|
||||||
|
const Service = ({ graph, name, status, latency, description }) => {
|
||||||
|
const state = getServiceState(status, latency)
|
||||||
|
|
||||||
|
const title = titles[state]
|
||||||
|
const icon = icons[state]
|
||||||
|
const color = colors[state]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="service">
|
||||||
|
<header>
|
||||||
|
<div className="emoji" title={title}>
|
||||||
|
<FontAwesomeIcon title={title} icon={icon} style={{ color }} />
|
||||||
|
</div>
|
||||||
|
<h2 className="title">
|
||||||
|
{name} {latency ? (
|
||||||
|
<span className="latency">
|
||||||
|
{Math.round(latency)}ms
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</h2>
|
||||||
|
</header>
|
||||||
|
<p className="description">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
{graph ? <Graph data={graph} /> : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
Service.defaultProps = {
|
Service.defaultProps = {
|
||||||
graph: null,
|
graph: null,
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import {
|
import {
|
||||||
faCheckCircle,
|
faCheckCircle,
|
||||||
|
faTimesCircle,
|
||||||
faExclamationCircle,
|
faExclamationCircle,
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
export default function register () {
|
export default function register () {
|
||||||
library.add(
|
library.add(
|
||||||
faCheckCircle,
|
faCheckCircle,
|
||||||
|
faTimesCircle,
|
||||||
faExclamationCircle,
|
faExclamationCircle,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue