diff --git a/priv/frontend/config.json b/priv/frontend/config.json
index 0044e0d..3d74eb6 100644
--- a/priv/frontend/config.json
+++ b/priv/frontend/config.json
@@ -1,3 +1,4 @@
{
- "domain": "https://elstatus.stayathomeserver.club"
+ "domain": "https://elstatus.stayathomeserver.club",
+ "slow_threshold": 2000
}
diff --git a/priv/frontend/src/components/Service.js b/priv/frontend/src/components/Service.js
index 914acc5..afdc2c0 100644
--- a/priv/frontend/src/components/Service.js
+++ b/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 }) => (
-
-
-
-
-
-
- {name} {latency ? (
-
- {Math.round(latency)}ms
-
- ) : null}
-
-
-
- {description}
-
- {graph ?
: null}
-
-)
+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 (
+
+
+
+
+
+
+ {name} {latency ? (
+
+ {Math.round(latency)}ms
+
+ ) : null}
+
+
+
+ {description}
+
+ {graph ?
: null}
+
+ )
+}
Service.defaultProps = {
graph: null,
diff --git a/priv/frontend/src/icons.js b/priv/frontend/src/icons.js
index c6694a1..7ca46f3 100644
--- a/priv/frontend/src/icons.js
+++ b/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,
)
}