add uptime display

This commit is contained in:
Skip R. 2018-08-08 17:06:35 -07:00
parent 190f461706
commit 6aae34927b
No known key found for this signature in database
GPG key ID: 1508C19D7436A26D
5 changed files with 35 additions and 9 deletions

View file

@ -124,9 +124,15 @@ export default class Dashboard extends Component {
}
renderServices(services) {
const { graph: graphs } = this.state.metrics
const { graph: graphs, uptime: uptimes } = this.state.metrics
return services.map(([name, info]) => (
<Service name={name} key={name} graph={graphs[name]} {...info} />
<Service
name={name}
key={name}
graph={graphs[name]}
uptime={parseFloat(uptimes[name])}
{...info}
/>
))
}

View file

@ -11,13 +11,13 @@
margin: 0;
}
.service .latency {
.service .information {
margin-left: 0.5em;
color: hsl(0, 0%, 45%);
}
@media (max-width: 500px) {
.service .latency {
.service .information {
font-size: 1rem;
}
}

View file

@ -7,6 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import './Service.css'
import Graph from './Graph.js'
import config from '../config.json'
import { truncateToTwoPlaces } from '../util'
const { slow_threshold: SLOW_THRESHOLD = 1500 } = config
@ -30,13 +31,21 @@ export function getServiceState(status, latency, threshold = SLOW_THRESHOLD) {
return status ? 'alive' : 'dead'
}
export default function Service({ graph, name, status, latency, description }) {
export default function Service({
graph,
name,
status,
latency,
description,
uptime,
}) {
const state = getServiceState(status, latency)
const title = titles[state]
const icon = icons[state]
const className = classnames('service', `service-${state}`)
const uptimePercentage = truncateToTwoPlaces(uptime)
return (
<div className={className}>
@ -47,9 +56,10 @@ export default function Service({ graph, name, status, latency, description }) {
<h2 className="title">
{name}{' '}
{latency ? (
<span className="latency">
<span className="information">
{Math.round(latency)}
ms
ms ({uptimePercentage}
%)
</span>
) : null}
</h2>

View file

@ -9,6 +9,7 @@ const props = {
name: 'sample service',
description: 'a cool service',
latency: 50.5,
uptime: 99.9994,
}
describe('<Service/>', () => {
@ -26,11 +27,15 @@ describe('<Service/>', () => {
it('renders proper information', () => {
const comp = shallow(<Service graph={graph} status {...props} />)
expect(comp.prop('className')).toEqual('service service-alive')
expect(comp.find('h2.title').text()).toEqual('sample service 51ms')
expect(comp.find('h2.title').text()).toEqual(
'sample service 51ms (99.9994%)'
)
expect(
comp.contains(<p className="description">a cool service</p>)
).toEqual(true)
expect(comp.contains(<span className="latency">51ms</span>)).toEqual(true)
expect(
comp.contains(<span className="information">51ms (99.9994%)</span>)
).toEqual(true)
})
})

View file

@ -15,6 +15,11 @@ export function objectFromEntries(entries) {
)
}
export function truncateToTwoPlaces(number) {
// https://stackoverflow.com/a/4187164/2491753
return number.toString().match(/^-?\d+(?:\.\d{0,4})?/)[0]
}
export async function strictFetch(...args) {
const resp = await fetch(...args)