detect slow services and show an icon

The amount of latency a service needs before being considered "slow" is
configurable in config.json. By default, it is 2000ms (2s).

A side effect of this change is that the "service unresponsive" icon
that is shown when a service is unreachable has been changed to an X
instead of a !.

The slow icon now uses the ! icon.

Additionally, icon "titles" were added to aid any screen readers.

priv/frontend/config.json

@@ -1,3 +1,4 @@
 {
-  "domain": "https://elstatus.stayathomeserver.club"
+  "domain": "https://elstatus.stayathomeserver.club",
+  "slow_threshold": 2000
 }

priv/frontend/src/components/Service.js

@@ -5,15 +5,51 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import './Service.css'
 import Graph from './Graph.js'
+import config from '../config.json'
 
-const Service = ({ graph, name, status, latency, description }) => (
+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">
+        <div className="emoji" title={title}>
-        <FontAwesomeIcon
+          <FontAwesomeIcon title={title} icon={icon} style={{ color }} />
-          icon={`${status ? 'check' : 'exclamation'}-circle`}
-          style={{ color: status ? '#2ECC40' : '#FF4136' }}
-        />
         </div>
         <h2 className="title">
           {name} {latency ? (
@@ -28,7 +64,8 @@ const Service = ({ graph, name, status, latency, description }) => (
       </p>
       {graph ? <Graph data={graph} /> : null}
     </div>
-)
+  )
+}
 
 Service.defaultProps = {
   graph: null,

priv/frontend/src/icons.js

@@ -1,12 +1,14 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCheckCircle,
+  faTimesCircle,
   faExclamationCircle,
 } from '@fortawesome/free-solid-svg-icons'
 
 export default function register () {
   library.add(
     faCheckCircle,
+    faTimesCircle,
     faExclamationCircle,
   )
 }