HealthCheckWeb/src/components/ServiceTile.jsx

44 lines
1.2 KiB
JavaScript

import {Component} from "react";
import {PropTypes} from "prop-types";
export class ServiceTile extends Component {
// componentDidMount() {
// this.interval = setInterval(this.fetchStatus, 10000);
// }
componentWillUnmount() {
clearInterval(this.interval);
}
fetchStatus() {
fetch(this.props.apiURL + "/status/" + this.props.service)
.then(response => {
this.setState({isUp: response.status === 200});
});
}
render() {
const {isUp,service, statusCode, checkedAt} = this.props;
return (
<div className={`ServiceTile ${isUp ? "up" : "down"}`}>
<h3>{service}</h3>
<p className={"status"}>
Status: <strong>{isUp ? '🟢 UP' : '🔴 DOWN'}</strong>
</p>
<p>HTTP Code: {statusCode || 'N/A'}</p>
<p className="timestamp">
Checked at: {checkedAt || 'N/A'}
</p>
</div>
)
}
}
ServiceTile.propTypes = {
service: PropTypes.string,
statusCode: PropTypes.number,
checkedAt: PropTypes.string,
apiURL: PropTypes.string,
isUp: PropTypes.bool
}