move service emoji colors to css
This commit is contained in:
parent
d66aa77aa7
commit
81147a373a
|
@ -30,3 +30,15 @@
|
||||||
.service .description {
|
.service .description {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.service.service-alive .emoji {
|
||||||
|
color: #2ECC40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service.service-slow .emoji {
|
||||||
|
color: #FF851B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service.service-dead .emoji {
|
||||||
|
color: #FF4136;
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
|
||||||
|
@ -11,13 +12,6 @@ const {
|
||||||
slow_threshold: SLOW_THRESHOLD = 1500,
|
slow_threshold: SLOW_THRESHOLD = 1500,
|
||||||
} = config
|
} = config
|
||||||
|
|
||||||
// from clrs.cc
|
|
||||||
const colors = {
|
|
||||||
alive: '#2ECC40',
|
|
||||||
slow: '#FF851B',
|
|
||||||
dead: '#FF4136',
|
|
||||||
}
|
|
||||||
|
|
||||||
const icons = {
|
const icons = {
|
||||||
alive: 'check-circle',
|
alive: 'check-circle',
|
||||||
slow: 'exclamation-circle',
|
slow: 'exclamation-circle',
|
||||||
|
@ -43,13 +37,17 @@ export default function Service ({ graph, name, status, latency, description })
|
||||||
|
|
||||||
const title = titles[state]
|
const title = titles[state]
|
||||||
const icon = icons[state]
|
const icon = icons[state]
|
||||||
const color = colors[state]
|
|
||||||
|
const className = classnames(
|
||||||
|
'service',
|
||||||
|
`service-${state}`
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="service">
|
<div className={className}>
|
||||||
<header>
|
<header>
|
||||||
<div className="emoji" title={title}>
|
<div className="emoji" title={title}>
|
||||||
<FontAwesomeIcon title={title} icon={icon} style={{ color }}/>
|
<FontAwesomeIcon title={title} icon={icon}/>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="title">
|
<h2 className="title">
|
||||||
{name} {latency ? (
|
{name} {latency ? (
|
||||||
|
|
Loading…
Reference in New Issue