设备管理
This commit is contained in:
myh
parent
f7d4af5d9c
commit
3b691766d0
357
frontend/src/components/ManageDevice.js
Normal file
357
frontend/src/components/ManageDevice.js
Normal file
@ -0,0 +1,357 @@
|
||||
import getWeb3 from '../utils/web3';
|
||||
import DeviceManager, { getDefaultAccount } from '../DeviceManager';
|
||||
import { addHexPrefix } from 'ethereumjs-util';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Tag, Button, Input, Card, Timeline, Divider, Spin, Alert, Icon, notification, message } from 'antd';
|
||||
|
||||
const openNotificationWithIcon = (type, message, description) => {
|
||||
notification[type]({
|
||||
message,
|
||||
description
|
||||
});
|
||||
};
|
||||
|
||||
const eventsToSave = ['DeviceCreated', 'DevicePropertyUpdated', 'DeviceTransfered', 'DeviceSigned', 'SignatureRevoked'];
|
||||
|
||||
class ManageDevice extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
deviceId: this.props.match.params.deviceId,
|
||||
loading: true,
|
||||
showError: false,
|
||||
showEditIdentifier: false,
|
||||
showEditMetadata: false,
|
||||
showEditFirmware: false,
|
||||
showEditOwner: false
|
||||
}
|
||||
|
||||
this.commonChange = this.commonChange.bind(this);
|
||||
this.watchForChanges = this.watchForChanges.bind(this);
|
||||
this.updateDeviceData = this.updateDeviceData.bind(this);
|
||||
}
|
||||
|
||||
componentWillReceiveProps({ match }) {
|
||||
this.setState({
|
||||
...this.state,
|
||||
showError: false,
|
||||
deviceId: match.params.deviceId
|
||||
}, () => this.updateDeviceData());
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
try {
|
||||
let web3 = (await getWeb3).web3;
|
||||
let instance = await DeviceManager;
|
||||
|
||||
this.setState({
|
||||
web3,
|
||||
instance
|
||||
});
|
||||
|
||||
this.updateDeviceData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//message.error(error.message);
|
||||
this.setState({
|
||||
loading: false,
|
||||
showError: true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async updateDeviceData() {
|
||||
try {
|
||||
const { instance, deviceId } = this.state;
|
||||
let device = await instance.devices(deviceId);
|
||||
let signatureCount = await instance.deviceSignatureCount(deviceId);
|
||||
let allEvents = instance.allEvents({ fromBlock: 0, toBlock: 'latest' });
|
||||
allEvents.get((error, logs) => {
|
||||
let filteredData = logs.filter(el => eventsToSave.includes(el.event) && el.args.deviceId.toNumber() === parseInt(deviceId, 10));
|
||||
if (!error) {
|
||||
this.setState({
|
||||
data: filteredData,
|
||||
loading: false,
|
||||
owner: device[0],
|
||||
identifier: device[1],
|
||||
metadataHash: device[2],
|
||||
firmwareHash: device[3],
|
||||
signatureCount: signatureCount.toNumber()
|
||||
})
|
||||
}
|
||||
|
||||
let { identifier, metadataHash, firmwareHash, owner } = this.state;
|
||||
this.setState({
|
||||
identifierNew: identifier,
|
||||
metadataHashNew: metadataHash,
|
||||
firmwareHashNew: firmwareHash,
|
||||
ownerNew: owner
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//message.error(error.message);
|
||||
this.setState({
|
||||
loading: false,
|
||||
showError: true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
toggleEdit(property) {
|
||||
const { showEditFirmware, showEditIdentifier, showEditMetadata, showEditOwner } = this.state;
|
||||
|
||||
switch (property) {
|
||||
case 'identifier':
|
||||
this.setState({
|
||||
showEditIdentifier: !showEditIdentifier
|
||||
})
|
||||
break;
|
||||
case 'metadata':
|
||||
this.setState({
|
||||
showEditMetadata: !showEditMetadata
|
||||
})
|
||||
break;
|
||||
case 'firmware':
|
||||
this.setState({
|
||||
showEditFirmware: !showEditFirmware
|
||||
})
|
||||
break;
|
||||
case 'transfer':
|
||||
this.setState({
|
||||
showEditOwner: !showEditOwner
|
||||
})
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
watchForChanges(property) {
|
||||
let filter = this.state.web3.eth.filter('latest', (error, result) => {
|
||||
if (!error) {
|
||||
openNotificationWithIcon('success', 'Transaction mined', `Property ${property} has been updated.`);
|
||||
this.state.filter.stopWatching();
|
||||
this.updateDeviceData();
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
this.setState({
|
||||
filter
|
||||
})
|
||||
}
|
||||
|
||||
async saveData(property) {
|
||||
const { instance, deviceId, identifier, identifierNew, metadataHash, metadataHashNew, firmwareHash, firmwareHashNew, owner, ownerNew } = this.state;
|
||||
|
||||
try {
|
||||
switch (property) {
|
||||
case 'identifier':
|
||||
if (identifier !== identifierNew) {
|
||||
await instance.updateIdentifier(deviceId, addHexPrefix(identifierNew), { from: getDefaultAccount() });
|
||||
this.watchForChanges(property);
|
||||
openNotificationWithIcon('info', 'Transaction sent', 'Once mined, identifier for this device will be updated.');
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'metadata':
|
||||
if (metadataHash !== metadataHashNew) {
|
||||
await instance.updateMetadataHash(deviceId, addHexPrefix(metadataHashNew), { from: getDefaultAccount() });
|
||||
this.watchForChanges(property + ' hash');
|
||||
openNotificationWithIcon('info', 'Transaction sent', 'Once mined, metadata hash for this device will be updated.');
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'firmware':
|
||||
if (firmwareHash !== firmwareHashNew) {
|
||||
await instance.updateFirmwareHash(deviceId, addHexPrefix(firmwareHashNew), { from: getDefaultAccount() });
|
||||
this.watchForChanges(property + ' hash');
|
||||
openNotificationWithIcon('info', 'Transaction sent', 'Once mined, firmware hash for this device will be updated.');
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'transfer':
|
||||
if (owner !== ownerNew) {
|
||||
await instance.transferDevice(deviceId, addHexPrefix(ownerNew), { from: getDefaultAccount() });
|
||||
this.watchForChanges('owner');
|
||||
openNotificationWithIcon('info', 'Transaction sent', 'Once mined, owner for this device will be updated.');
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
this.toggleEdit(property);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error(error.message);
|
||||
this.toggleEdit(property);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
commonChange(e) {
|
||||
this.setState({
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { web3, loading, showError, owner, identifier, metadataHash, firmwareHash, signatureCount, showEditFirmware, showEditIdentifier, showEditMetadata, showEditOwner } = this.state;
|
||||
|
||||
let identifierContent = () => {
|
||||
if (showEditIdentifier) {
|
||||
return (
|
||||
<div>
|
||||
<Input name="identifierNew" value={this.state.identifierNew} onChange={this.commonChange} maxLength="66" />
|
||||
<Button type="primary" style={{ marginTop: '10px' }} onClick={() => this.saveData('identifier')}>Save</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
Identifier {identifier}
|
||||
{owner === getDefaultAccount() &&
|
||||
<a><Icon type="edit" onClick={() => this.toggleEdit('identifier')} /></a>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
let metadataContent = () => {
|
||||
if (showEditMetadata) {
|
||||
return (
|
||||
<div>
|
||||
<Input name="metadataHashNew" value={this.state.metadataHashNew} onChange={this.commonChange} maxLength="66" />
|
||||
<Button type="primary" style={{ marginTop: '10px' }} onClick={() => this.saveData('metadata')}>Save</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
Metadata hash {metadataHash.length > 0 ? metadataHash : 'empty'}
|
||||
{owner === getDefaultAccount() &&
|
||||
<a><Icon type="edit" onClick={() => this.toggleEdit('metadata')} /></a>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
let firmwareContent = () => {
|
||||
if (showEditFirmware) {
|
||||
return (
|
||||
<div>
|
||||
<Input name="firmwareHashNew" value={this.state.firmwareHashNew} onChange={this.commonChange} maxLength="66" />
|
||||
<Button type="primary" style={{ marginTop: '10px' }} onClick={() => this.saveData('firmware')}>Save</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
Firmware hash {firmwareHash.length > 0 ? firmwareHash : 'empty'}
|
||||
{owner === getDefaultAccount() &&
|
||||
<a><Icon type="edit" onClick={() => this.toggleEdit('firmware')} /></a>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
let transferContent = () => {
|
||||
if (showEditOwner) {
|
||||
return (
|
||||
<div>
|
||||
<Input name="ownerNew" value={this.state.ownerNew} onChange={this.commonChange} maxLength="66" />
|
||||
<Button type="primary" style={{ marginTop: '10px' }} onClick={() => this.saveData('transfer')}>Save</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{owner === getDefaultAccount() &&
|
||||
<Button type="dashed" onClick={() => this.toggleEdit('transfer')}> Transfer ownership</Button>
|
||||
}
|
||||
{owner !== getDefaultAccount() &&
|
||||
<div>
|
||||
Owned by <Link to={"/lookup-entity/" + owner}><Tag>{owner}</Tag></Link>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Spin spinning={loading} className="loading-spin">
|
||||
{loading === false && showError === false && typeof metadataHash !== 'undefined' &&
|
||||
<div>
|
||||
<h3><div style={{ marginBottom: '20px' }}>{identifierContent()}</div></h3>
|
||||
<Divider />
|
||||
<div style={{ marginBottom: '20px' }}>{metadataContent()}</div>
|
||||
<div style={{ marginBottom: '20px' }}>{firmwareContent()}</div>
|
||||
{transferContent()}
|
||||
<Divider />
|
||||
{signatureCount > 0 &&
|
||||
<div>
|
||||
<div>This device has <strong>{signatureCount}</strong> active signature(s). Devices that have been signed can't be updated.</div>
|
||||
<Divider />
|
||||
</div>
|
||||
}
|
||||
<Card title={'Historical events for device (oldest to newest)'}>
|
||||
{this.state.data.length !== 0 ?
|
||||
<div>
|
||||
<p style={{ marginBottom: '20px' }}>Events that are filtered are {eventsToSave.join(', ')} </p>
|
||||
<Timeline style={{ marginTop: '10px' }}>
|
||||
{this.state.data.map(el => {
|
||||
if (el.event === 'DeviceCreated')
|
||||
return <Timeline.Item color='green'>Device created by <Link to={"/lookup-entity/" + el.args.owner}><Tag>{el.args.owner}</Tag></Link>with <Link to={"/manage-device/" + el.args.deviceId.toNumber()}><Tag>ID {el.args.deviceId.toNumber()}</Tag></Link>, identifier <code>{el.args.identifier}</code>, metadata hash <code>{el.args.metadataHash}</code> and firmware hash <code>{el.args.firmwareHash}</code></Timeline.Item>
|
||||
if (el.event === 'DevicePropertyUpdated')
|
||||
return <Timeline.Item>Property {web3.toUtf8(el.args.property)} updated to <code>{el.args.newValue}</code></Timeline.Item>
|
||||
if (el.event === 'DeviceTransfered')
|
||||
return <Timeline.Item color='orange'>Device transfered to <Link to={"/lookup-entity/" + el.args.newOwner}><Tag>{el.args.newOwner}</Tag></Link></Timeline.Item>
|
||||
if (el.event === 'DeviceSigned')
|
||||
return <Timeline.Item color='purple'>Signature with <Link to={"/check-signature/" + el.args.signatureId.toNumber()}><Tag>ID {el.args.signatureId.toNumber()}</Tag></Link>created by {el.args.signer}</Timeline.Item>
|
||||
if (el.event === 'SignatureRevoked')
|
||||
return <Timeline.Item color='purple'>Signature with <Link to={"/check-signature/" + el.args.signatureId.toNumber()}><Tag>ID {el.args.signatureId.toNumber()}</Tag></Link>revoked</Timeline.Item>
|
||||
else
|
||||
return null
|
||||
})}
|
||||
</Timeline>
|
||||
</div>
|
||||
:
|
||||
<p><em>empty</em></p>
|
||||
}
|
||||
</Card>
|
||||
</div>
|
||||
}
|
||||
{/*
|
||||
{loading === false && owner !== getDefaultAccount() &&
|
||||
<Alert message="You don't own this device." type="error" showIcon />
|
||||
}
|
||||
*/}
|
||||
{loading === false && showError &&
|
||||
<Alert
|
||||
message="Error"
|
||||
description="Error loading device: invalid ID format or device doesn't exist."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
}
|
||||
</Spin >
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ManageDevice;
|
||||
78
frontend/src/components/ManageDevices.js
Normal file
78
frontend/src/components/ManageDevices.js
Normal file
@ -0,0 +1,78 @@
|
||||
import DeviceManager, { getDefaultAccount } from '../DeviceManager';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { Spin, List, message } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
class ManageDevices extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: true,
|
||||
instance: null,
|
||||
devices: []
|
||||
}
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
try {
|
||||
let instance = await DeviceManager;
|
||||
let deviceIds = (await instance.getDevicesByOwner(getDefaultAccount())).map(el => el.toNumber());
|
||||
|
||||
let devicePromises = [];
|
||||
for (let deviceId of deviceIds) {
|
||||
let devicePromise = instance.devices(deviceId);
|
||||
devicePromises.push(devicePromise);
|
||||
}
|
||||
|
||||
let devices = await Promise.all(devicePromises);
|
||||
|
||||
this.setState({
|
||||
instance,
|
||||
devices,
|
||||
deviceIds,
|
||||
loading: false
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { devices, loading } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Spin spinning={loading} className="loading-spin">
|
||||
{devices.length > 0 && !loading &&
|
||||
<div>
|
||||
<p>
|
||||
Below you can find your devices. Click to see more details and manage.
|
||||
</p>
|
||||
<List
|
||||
bordered={true}
|
||||
itemLayout="horizontal"
|
||||
dataSource={devices}
|
||||
renderItem={(device, index) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
/*avatar={<Icon type="profile" style={{ fontSize: 36 }} />}*/
|
||||
title={<Link to={`/manage-device/${this.state.deviceIds[index]}`}>{`Device ID ${this.state.deviceIds[index]}`}</Link>}
|
||||
description={`Identifier ${device[1]}`}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{devices.length === 0 && !loading &&
|
||||
<p>You don't have any devices registered.</p>
|
||||
}
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ManageDevices;
|
||||
Loading…
Reference in New Issue
Block a user