You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import Card from '@material-ui/core/Card';
|
|
import CardHeader from '@material-ui/core/CardHeader';
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
import Avatar from '@material-ui/core/Avatar';
|
|
import WifiIcon from '@material-ui/icons/Wifi';
|
|
import WifiOffIcon from '@material-ui/icons/WifiOff';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import numeral from 'numeral';
|
|
import { lastSeen } from '../Util';
|
|
import { AppState } from '../AppState';
|
|
import { IconMenu } from './IconMenu';
|
|
import { PopoverDisplay } from './PopoverDisplay';
|
|
import { Device } from '../sdk/devices_pb';
|
|
import { grpc } from '../Api';
|
|
import { observer } from 'mobx-react';
|
|
|
|
interface Props {
|
|
device: Device.AsObject;
|
|
onRemove: () => void;
|
|
}
|
|
|
|
@observer
|
|
export class DeviceListItem extends React.Component<Props> {
|
|
removeDevice = async () => {
|
|
try {
|
|
await grpc.devices.deleteDevice({
|
|
name: this.props.device.name,
|
|
});
|
|
this.props.onRemove();
|
|
} catch {
|
|
window.alert('api request failed');
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const device = this.props.device;
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
title={device.name}
|
|
avatar={
|
|
<Avatar style={{ backgroundColor: device.connected ? '#76de8a' : '#bdbdbd' }}>
|
|
{/* <DonutSmallIcon /> */}
|
|
{device.connected ? <WifiIcon /> : <WifiOffIcon />}
|
|
</Avatar>
|
|
}
|
|
action={
|
|
<IconMenu>
|
|
<MenuItem style={{ color: 'red' }} onClick={this.removeDevice}>
|
|
Delete
|
|
</MenuItem>
|
|
</IconMenu>
|
|
}
|
|
/>
|
|
<CardContent>
|
|
<table cellPadding="5">
|
|
<tbody>
|
|
{AppState.info?.metadataEnabled && device.connected && (
|
|
<>
|
|
<tr>
|
|
<td>Endpoint</td>
|
|
<td>{device.endpoint}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Download</td>
|
|
<td>{numeral(device.transmitBytes).format('0b')}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Upload</td>
|
|
<td>{numeral(device.receiveBytes).format('0b')}</td>
|
|
</tr>
|
|
</>
|
|
)}
|
|
{AppState.info?.metadataEnabled && !device.connected && (
|
|
<>
|
|
<tr>
|
|
<td>Disconnected</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Last Seen</td>
|
|
<td>{lastSeen(device.lastHandshakeTime)}</td>
|
|
</tr>
|
|
</>
|
|
)}
|
|
<tr>
|
|
<td>Public key</td>
|
|
<td>
|
|
<PopoverDisplay label="show">{device.publicKey}</PopoverDisplay>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
}
|