elstat/priv/frontend/src/components/Service.js

86 lines
1.8 KiB
JavaScript
Raw Normal View History

2018-07-16 04:04:43 +00:00
import React from 'react'
import PropTypes from 'prop-types'
2018-06-12 21:56:50 +00:00
2018-07-16 04:04:43 +00:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
2018-07-14 01:57:02 +00:00
2018-07-16 04:04:43 +00:00
import './Service.css'
import Graph from './Graph.js'
import config from '../config.json'
2018-06-12 21:56:50 +00:00
const {
slow_threshold: SLOW_THRESHOLD = 1500,
} = config
// from clrs.cc
const colors = {
alive: '#2ECC40',
slow: '#FF851B',
dead: '#FF4136',
}
const icons = {
alive: 'check-circle',
slow: 'exclamation-circle',
dead: 'times-circle',
}
const titles = {
alive: 'This service is healthy.',
slow: 'This service is slow, but responding.',
dead: 'This service is unresponsive.',
}
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}>
2018-07-17 01:06:15 +00:00
<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>
2018-07-17 01:06:15 +00:00
{graph ? <Graph data={graph}/> : null}
</div>
)
}
2018-06-12 21:56:50 +00:00
2018-07-14 02:01:13 +00:00
Service.defaultProps = {
graph: null,
latency: null,
2018-07-16 04:04:43 +00:00
}
2018-07-14 02:01:13 +00:00
Service.propTypes = {
graph: PropTypes.arrayOf(
PropTypes.arrayOf(PropTypes.number),
),
name: PropTypes.string.isRequired,
status: PropTypes.bool.isRequired,
latency: PropTypes.number,
description: PropTypes.string.isRequired,
2018-07-16 04:04:43 +00:00
}
2018-07-14 02:01:13 +00:00
2018-07-16 04:04:43 +00:00
export default Service