import React, { Component, Fragment } from 'react'; import { Avatar, Button, Divider, Dialog, DialogTitle, DialogContent, DialogActions, Box } from '@material-ui/core'; import { List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'; import DevicesIcon from '@material-ui/icons/Devices'; import MemoryIcon from '@material-ui/icons/Memory'; import ShowChartIcon from '@material-ui/icons/ShowChart'; import SdStorageIcon from '@material-ui/icons/SdStorage'; import FolderIcon from '@material-ui/icons/Folder'; import DataUsageIcon from '@material-ui/icons/DataUsage'; import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'; import RefreshIcon from '@material-ui/icons/Refresh'; import SettingsBackupRestoreIcon from '@material-ui/icons/SettingsBackupRestore'; import { redirectingAuthorizedFetch, AuthenticatedContextProps, withAuthenticatedContext } from '../authentication'; import { RestFormProps, FormButton, ErrorButton } from '../components'; import { FACTORY_RESET_ENDPOINT, RESTART_ENDPOINT } from '../api'; import { SystemStatus } from './types'; interface SystemStatusFormState { confirmRestart: boolean; confirmFactoryReset: boolean; processing: boolean; } type SystemStatusFormProps = AuthenticatedContextProps & RestFormProps; function formatNumber(num: number) { return new Intl.NumberFormat().format(num); } class SystemStatusForm extends Component { state: SystemStatusFormState = { confirmRestart: false, confirmFactoryReset: false, processing: false } approxHeapFragmentation = (): number => { const { data: { max_alloc_heap, free_heap } } = this.props; return 100 - Math.round((max_alloc_heap / free_heap) * 100); } createListItems() { const { data } = this.props return ( ); } renderRestartDialog() { return ( Confirm Restart Are you sure you want to restart the device? ) } onRestart = () => { this.setState({ confirmRestart: true }); } onRestartRejected = () => { this.setState({ confirmRestart: false }); } onRestartConfirmed = () => { this.setState({ processing: true }); redirectingAuthorizedFetch(RESTART_ENDPOINT, { method: 'POST' }) .then(response => { if (response.status === 200) { this.props.enqueueSnackbar("Device is restarting", { variant: 'info' }); this.setState({ processing: false, confirmRestart: false }); } else { throw Error("Invalid status code: " + response.status); } }) .catch(error => { this.props.enqueueSnackbar(error.message || "Problem restarting device", { variant: 'error' }); this.setState({ processing: false, confirmRestart: false }); }); } renderFactoryResetDialog() { return ( Confirm Factory Reset Are you sure you want to reset the device to its factory defaults? } variant="contained" onClick={this.onFactoryResetConfirmed} disabled={this.state.processing} autoFocus> Factory Reset ) } onFactoryReset = () => { this.setState({ confirmFactoryReset: true }); } onFactoryResetRejected = () => { this.setState({ confirmFactoryReset: false }); } onFactoryResetConfirmed = () => { this.setState({ processing: true }); redirectingAuthorizedFetch(FACTORY_RESET_ENDPOINT, { method: 'POST' }) .then(response => { if (response.status === 200) { this.props.enqueueSnackbar("Factory reset in progress.", { variant: 'error' }); this.setState({ processing: false, confirmFactoryReset: false }); } else { throw Error("Invalid status code: " + response.status); } }) .catch(error => { this.props.enqueueSnackbar(error.message || "Problem factory resetting device", { variant: 'error' }); this.setState({ processing: false, confirmRestart: false }); }); } render() { const me = this.props.authenticatedContext.me; return ( {this.createListItems()} } variant="contained" color="secondary" onClick={this.props.loadData}> Refresh {me.admin && } variant="contained" color="primary" onClick={this.onRestart}> Restart } variant="contained" onClick={this.onFactoryReset}> Factory reset } {this.renderRestartDialog()} {this.renderFactoryResetDialog()} ); } } export default withAuthenticatedContext(SystemStatusForm);