2018-07-16 04:44:59 +00:00
|
|
|
import React from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
|
|
|
|
import './DegradedNotice.css'
|
|
|
|
|
2018-07-19 00:48:16 +00:00
|
|
|
export default function DegradedNotice ({ services }) {
|
2018-07-16 04:44:59 +00:00
|
|
|
const keys = Object.keys(services)
|
|
|
|
const serviceNames = keys.join(', ')
|
2018-07-17 01:18:14 +00:00
|
|
|
|
2018-07-16 04:44:59 +00:00
|
|
|
const plural = keys.length === 1 ? '' : 's'
|
2018-07-17 01:18:14 +00:00
|
|
|
const indicative = keys.length === 1 ? 'is' : 'are'
|
2018-07-16 04:44:59 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="degraded-notice">
|
2018-07-17 01:18:14 +00:00
|
|
|
<header>{keys.length} service{plural} {indicative} unreachable</header>
|
2018-07-16 04:44:59 +00:00
|
|
|
<p>
|
|
|
|
elstat is having trouble contacting <strong>{serviceNames}</strong>.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
DegradedNotice.propTypes = {
|
|
|
|
services: PropTypes.object.isRequired,
|
|
|
|
}
|