elstat/priv/frontend/src/components/Service.js

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

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

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.',
}

export function getServiceState(status, latency, threshold = SLOW_THRESHOLD) {
  if (status && latency > threshold) {
    return 'slow'
  }

  return status ? 'alive' : 'dead'
}

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}>
      <header>
        <div className="emoji" title={title}>
          <FontAwesomeIcon title={title} icon={icon} />
        </div>
        <h2 className="title">
          {name}{' '}
          {latency ? (
            <span className="information">
              {Math.round(latency)}
              ms ({uptimePercentage}
              %)
            </span>
          ) : null}
        </h2>
      </header>
      <p className="description">{description}</p>
      {graph ? <Graph data={graph} /> : null}
    </div>
  )
}

Service.defaultProps = {
  graph: null,
  latency: null,
}

Service.propTypes = {
  graph: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
  name: PropTypes.string.isRequired,
  status: PropTypes.bool.isRequired,
  latency: PropTypes.number,
  description: PropTypes.string.isRequired,
}