diff --git a/priv/frontend/src/components/Dashboard.js b/priv/frontend/src/components/Dashboard.js
index 9aa7671..abd0433 100644
--- a/priv/frontend/src/components/Dashboard.js
+++ b/priv/frontend/src/components/Dashboard.js
@@ -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]) => (
-
+
))
}
diff --git a/priv/frontend/src/components/Service.css b/priv/frontend/src/components/Service.css
index ebe727c..f31190d 100644
--- a/priv/frontend/src/components/Service.css
+++ b/priv/frontend/src/components/Service.css
@@ -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;
}
}
diff --git a/priv/frontend/src/components/Service.js b/priv/frontend/src/components/Service.js
index f93cb25..cd9f66b 100644
--- a/priv/frontend/src/components/Service.js
+++ b/priv/frontend/src/components/Service.js
@@ -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 (
@@ -47,9 +56,10 @@ export default function Service({ graph, name, status, latency, description }) {
{name}{' '}
{latency ? (
-
+
{Math.round(latency)}
- ms
+ ms ({uptimePercentage}
+ %)
) : null}
diff --git a/priv/frontend/src/components/__tests__/Service.js b/priv/frontend/src/components/__tests__/Service.js
index a1e3a0b..028fc92 100644
--- a/priv/frontend/src/components/__tests__/Service.js
+++ b/priv/frontend/src/components/__tests__/Service.js
@@ -9,6 +9,7 @@ const props = {
name: 'sample service',
description: 'a cool service',
latency: 50.5,
+ uptime: 99.9994,
}
describe('
', () => {
@@ -26,11 +27,15 @@ describe('
', () => {
it('renders proper information', () => {
const comp = shallow(
)
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(
a cool service
)
).toEqual(true)
- expect(comp.contains(
51ms)).toEqual(true)
+ expect(
+ comp.contains(
51ms (99.9994%))
+ ).toEqual(true)
})
})
diff --git a/priv/frontend/src/util.js b/priv/frontend/src/util.js
index c1774f8..6e00d52 100644
--- a/priv/frontend/src/util.js
+++ b/priv/frontend/src/util.js
@@ -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)