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,30 +5,67 @@ 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 {
-  <div className="service">
+  slow_threshold: SLOW_THRESHOLD = 1500,
-    <header>
+} = config
-      <div className="emoji">
+
-        <FontAwesomeIcon
+// from clrs.cc
-          icon={`${status ? 'check' : 'exclamation'}-circle`}
+const colors = {
-          style={{ color: status ? '#2ECC40' : '#FF4136' }}
+  alive: '#2ECC40',
-        />
+  slow: '#FF851B',
-      </div>
+  dead: '#FF4136',
-      <h2 className="title">
+}
-        {name} {latency ? (
+
-          <span className="latency">
+const icons = {
-            {Math.round(latency)}ms
+  alive: 'check-circle',
-          </span>
+  slow: 'exclamation-circle',
-        ) : null}
+  dead: 'times-circle',
-      </h2>
+}
-    </header>
+
-    <p className="description">
+const titles = {
-      {description}
+  alive: 'This service is healthy.',
-    </p>
+  slow: 'This service is slow, but responding.',
-    {graph ? <Graph data={graph} /> : null}
+  dead: 'This service is unresponsive.',
-  </div>
+}
-)
+
+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" title={title}>
+          <FontAwesomeIcon title={title} icon={icon} style={{ color }} />
+        </div>
+        <h2 className="title">
+          {name} {latency ? (
+            <span className="latency">
+              {Math.round(latency)}ms
+            </span>
+          ) : null}
+        </h2>
+      </header>
+      <p className="description">
+        {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,
   )
 }