add uptime display

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]) => (
-      <Service name={name} key={name} graph={graphs[name]} {...info} />
+      <Service
+        name={name}
+        key={name}
+        graph={graphs[name]}
+        uptime={parseFloat(uptimes[name])}
+        {...info}
+      />
     ))
   }
 

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;
   }
 }

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 (
     <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>

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('<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)
   })
 })
 

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)