import React, { Component, Fragment } from 'react'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import LinearProgress from '@material-ui/core/LinearProgress'; import Typography from '@material-ui/core/Typography'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import Avatar from '@material-ui/core/Avatar'; import Divider from '@material-ui/core/Divider'; import SwapVerticalCircleIcon from '@material-ui/icons/SwapVerticalCircle'; import AccessTimeIcon from '@material-ui/icons/AccessTime'; import DNSIcon from '@material-ui/icons/Dns'; import TimerIcon from '@material-ui/icons/Timer'; import UpdateIcon from '@material-ui/icons/Update'; import AvTimerIcon from '@material-ui/icons/AvTimer'; import { isSynchronized, ntpStatusHighlight, ntpStatus } from '../constants/NTPStatus'; import * as Highlight from '../constants/Highlight'; import { unixTimeToTimeAndDate } from '../constants/TimeFormat'; import { NTP_STATUS_ENDPOINT } from '../constants/Endpoints'; import { restComponent } from '../components/RestComponent'; import SectionContent from '../components/SectionContent'; import moment from 'moment'; const styles = theme => ({ ["ntpStatus_" + Highlight.SUCCESS]: { backgroundColor: theme.palette.highlight_success }, ["ntpStatus_" + Highlight.ERROR]: { backgroundColor: theme.palette.highlight_error }, ["ntpStatus_" + Highlight.WARN]: { backgroundColor: theme.palette.highlight_warn }, fetching: { margin: theme.spacing.unit * 4, textAlign: "center" }, button: { marginRight: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2, } }); class NTPStatus extends Component { componentDidMount() { this.props.loadData(); } createListItems(data, classes) { return ( {isSynchronized(data) && 0 ? unixTimeToTimeAndDate(data.last_sync) : "never"} /> } ); } renderNTPStatus(data, classes) { return (
{this.createListItems(data, classes)}
); } render() { const { data, fetched, errorMessage, classes } = this.props; return ( { !fetched ?
Loading...
: data ? this.renderNTPStatus(data, classes) :
{errorMessage}
}
) } } export default restComponent(NTP_STATUS_ENDPOINT, withStyles(styles)(NTPStatus));