56 lines
1.2 KiB
JavaScript
56 lines
1.2 KiB
JavaScript
|
import React from 'react'
|
||
|
import PropTypes from 'prop-types'
|
||
|
|
||
|
import './Incident.css'
|
||
|
import Stage from './Stage'
|
||
|
import ms from 'ms'
|
||
|
|
||
|
const OUTAGE_TYPES = {
|
||
|
major_outage: 'Major Outage',
|
||
|
outage: 'Outage',
|
||
|
partial_outage: 'Partial Outage',
|
||
|
degraded_service: 'Degraded Service',
|
||
|
}
|
||
|
|
||
|
const Incident = ({ incident }) => {
|
||
|
const { content, end_date: end, start_date: start, title, type, stages } = incident
|
||
|
const ago = ms(Date.now() - start * 1000)
|
||
|
const agoEnd = end ? ms(Date.now - end * 1000) : null
|
||
|
|
||
|
const stageNodes = stages.map(
|
||
|
(stage) => <Stage key={stage.title} stage={stage}/>
|
||
|
)
|
||
|
|
||
|
return (
|
||
|
<div className="incident">
|
||
|
<h2>{OUTAGE_TYPES[type] || type}: {title}</h2>
|
||
|
<p>{content}</p>
|
||
|
<footer>
|
||
|
Started {ago} ago
|
||
|
{end ? `, ended ${agoEnd} ago` : null}
|
||
|
</footer>
|
||
|
{stageNodes.length
|
||
|
? (
|
||
|
<div className="stages">
|
||
|
{stageNodes}
|
||
|
</div>
|
||
|
)
|
||
|
: null
|
||
|
}
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
Incident.propTypes = {
|
||
|
incident: PropTypes.shape({
|
||
|
content: PropTypes.string,
|
||
|
end_date: PropTypes.number,
|
||
|
start_date: PropTypes.number,
|
||
|
title: PropTypes.string,
|
||
|
type: PropTypes.string,
|
||
|
stages: PropTypes.array,
|
||
|
}),
|
||
|
}
|
||
|
|
||
|
export default Incident
|