add uptime display
This commit is contained in:
parent
190f461706
commit
6aae34927b
|
@ -124,9 +124,15 @@ export default class Dashboard extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderServices(services) {
|
renderServices(services) {
|
||||||
const { graph: graphs } = this.state.metrics
|
const { graph: graphs, uptime: uptimes } = this.state.metrics
|
||||||
return services.map(([name, info]) => (
|
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}
|
||||||
|
/>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,13 +11,13 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service .latency {
|
.service .information {
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
color: hsl(0, 0%, 45%);
|
color: hsl(0, 0%, 45%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
.service .latency {
|
.service .information {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@ 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'
|
import config from '../config.json'
|
||||||
|
import { truncateToTwoPlaces } from '../util'
|
||||||
|
|
||||||
const { slow_threshold: SLOW_THRESHOLD = 1500 } = config
|
const { slow_threshold: SLOW_THRESHOLD = 1500 } = config
|
||||||
|
|
||||||
|
@ -30,13 +31,21 @@ export function getServiceState(status, latency, threshold = SLOW_THRESHOLD) {
|
||||||
return status ? 'alive' : 'dead'
|
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 state = getServiceState(status, latency)
|
||||||
|
|
||||||
const title = titles[state]
|
const title = titles[state]
|
||||||
const icon = icons[state]
|
const icon = icons[state]
|
||||||
|
|
||||||
const className = classnames('service', `service-${state}`)
|
const className = classnames('service', `service-${state}`)
|
||||||
|
const uptimePercentage = truncateToTwoPlaces(uptime)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
|
@ -47,9 +56,10 @@ export default function Service({ graph, name, status, latency, description }) {
|
||||||
<h2 className="title">
|
<h2 className="title">
|
||||||
{name}{' '}
|
{name}{' '}
|
||||||
{latency ? (
|
{latency ? (
|
||||||
<span className="latency">
|
<span className="information">
|
||||||
{Math.round(latency)}
|
{Math.round(latency)}
|
||||||
ms
|
ms ({uptimePercentage}
|
||||||
|
%)
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
@ -9,6 +9,7 @@ const props = {
|
||||||
name: 'sample service',
|
name: 'sample service',
|
||||||
description: 'a cool service',
|
description: 'a cool service',
|
||||||
latency: 50.5,
|
latency: 50.5,
|
||||||
|
uptime: 99.9994,
|
||||||
}
|
}
|
||||||
|
|
||||||
describe('<Service/>', () => {
|
describe('<Service/>', () => {
|
||||||
|
@ -26,11 +27,15 @@ describe('<Service/>', () => {
|
||||||
it('renders proper information', () => {
|
it('renders proper information', () => {
|
||||||
const comp = shallow(<Service graph={graph} status {...props} />)
|
const comp = shallow(<Service graph={graph} status {...props} />)
|
||||||
expect(comp.prop('className')).toEqual('service service-alive')
|
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(
|
expect(
|
||||||
comp.contains(<p className="description">a cool service</p>)
|
comp.contains(<p className="description">a cool service</p>)
|
||||||
).toEqual(true)
|
).toEqual(true)
|
||||||
expect(comp.contains(<span className="latency">51ms</span>)).toEqual(true)
|
expect(
|
||||||
|
comp.contains(<span className="information">51ms (99.9994%)</span>)
|
||||||
|
).toEqual(true)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
export async function strictFetch(...args) {
|
||||||
const resp = await fetch(...args)
|
const resp = await fetch(...args)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue