mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
- fix indentation - fix loading of IC and refresh of status - add missing IC data store - show refresh button only for villas-node and villas-relay - remove duplicated function
This commit is contained in:
Sonja Happ
parent
19d347040b
commit
57e6a6c3d0
1 changed files with 287 additions and 320 deletions
607
src/ic/ic.js
607
src/ic/ic.js
|
|
@ -16,7 +16,8 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import InfrastructureComponentStore from './ic-store';
|
||||
import ICstore from './ic-store';
|
||||
import ICdataStore from './ic-data-store'
|
||||
import { Container as FluxContainer } from 'flux/utils';
|
||||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import { Container, Col, Row, Table, Button } from 'react-bootstrap';
|
||||
|
|
@ -28,338 +29,304 @@ import IconButton from '../common/icon-button';
|
|||
|
||||
|
||||
class InfrastructureComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
confirmCommand: false,
|
||||
command: '',
|
||||
};
|
||||
this.state = {
|
||||
confirmCommand: false,
|
||||
command: '',
|
||||
sessionToken: localStorage.getItem("token"),
|
||||
currentUser: JSON.parse(localStorage.getItem("currentUser")),
|
||||
};
|
||||
}
|
||||
|
||||
static getStores() {
|
||||
return [ICstore, ICdataStore];
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
return {
|
||||
ic: ICstore.getState().find(ic => ic.id === parseInt(props.match.params.ic, 10))
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let icID = parseInt(this.props.match.params.ic, 10);
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/start-load',
|
||||
data: icID,
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
refresh() {
|
||||
// get status of VILLASnode and VILLASrelay ICs
|
||||
if ((this.state.ic.type === "villas-node" || this.state.ic.type === "villas-relay")
|
||||
&& this.state.ic.apiurl !== '' && this.state.ic.apiurl !== undefined && this.state.ic.apiurl !== null && !this.state.ic.managedexternally) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/get-status',
|
||||
url: this.state.ic.apiurl,
|
||||
token: this.state.sessionToken,
|
||||
ic: this.state.ic
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
isJSON(data) {
|
||||
if (data === undefined || data === null) {
|
||||
return false;
|
||||
}
|
||||
let str = JSON.stringify(data);
|
||||
try {
|
||||
JSON.parse(str)
|
||||
}
|
||||
catch (ex) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async downloadGraph(url) {
|
||||
let blob = await fetch(url).then(r => r.blob())
|
||||
FileSaver.saveAs(blob, this.state.ic.name + ".svg");
|
||||
}
|
||||
|
||||
sendControlCommand() {
|
||||
if (this.state.command === "restart") {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/restart',
|
||||
url: this.state.ic.apiurl + "/restart",
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
} else if (this.state.command === "shutdown") {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/shutdown',
|
||||
url: this.state.ic.apiurl + "/shutdown",
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
confirmCommand(canceled){
|
||||
if(!canceled){
|
||||
this.sendControlCommand();
|
||||
}
|
||||
|
||||
static getStores() {
|
||||
return [InfrastructureComponentStore];
|
||||
this.setState({confirmCommand: false, command: ''});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
if (this.state.ic === undefined) {
|
||||
return <h1>Loading Infrastructure Component...</h1>;
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
if (prevState == null) {
|
||||
prevState = {};
|
||||
}
|
||||
|
||||
return {
|
||||
sessionToken: localStorage.getItem("token"),
|
||||
currentUser: JSON.parse(localStorage.getItem("currentUser")),
|
||||
ic: InfrastructureComponentStore.getState().find(ic => ic.id === parseInt(props.match.params.ic, 10))
|
||||
}
|
||||
let graphURL = ""
|
||||
if (this.state.ic.apiurl !== "") {
|
||||
graphURL = this.state.ic.apiurl + "/graph.svg"
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let icID = parseInt(this.props.match.params.ic, 10);
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/start-load',
|
||||
data: icID,
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
|
||||
// get status of VILLASnode and VILLASrelay ICs
|
||||
if(this.state.ic != undefined){
|
||||
if ((this.state.ic.type === "villas-node" || this.state.ic.type === "villas-relay")
|
||||
&& this.state.ic.apiurl !== '' && this.state.ic.apiurl !== undefined && this.state.ic.apiurl !== null && !this.state.ic.managedexternally) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/get-status',
|
||||
url: this.state.ic.apiurl,
|
||||
token: this.state.sessionToken,
|
||||
ic: this.state.ic
|
||||
});
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.timer = window.setInterval(() => this.refresh(), 10000);
|
||||
}
|
||||
const buttonStyle = {
|
||||
marginLeft: '5px',
|
||||
}
|
||||
|
||||
|
||||
refresh() {
|
||||
|
||||
let icID = parseInt(this.props.match.params.ic, 10);
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/start-load',
|
||||
token: this.state.sessionToken,
|
||||
data: icID
|
||||
});
|
||||
|
||||
// get status of VILLASnode and VILLASrelay ICs
|
||||
if ((this.state.ic.type === "villas-node" || this.state.ic.type === "villas-relay")
|
||||
&& this.state.ic.apiurl !== '' && this.state.ic.apiurl !== undefined && this.state.ic.apiurl !== null && !this.state.ic.managedexternally) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/get-status',
|
||||
url: this.state.ic.apiurl,
|
||||
token: this.state.sessionToken,
|
||||
ic: this.state.ic
|
||||
});
|
||||
}
|
||||
|
||||
if(this.timer){
|
||||
window.clearInterval(this.timer);
|
||||
}
|
||||
|
||||
const iconStyle = {
|
||||
height: '25px',
|
||||
width: '25px'
|
||||
}
|
||||
|
||||
isJSON(data) {
|
||||
if (data === undefined || data === null) {
|
||||
return false;
|
||||
}
|
||||
let str = JSON.stringify(data);
|
||||
try {
|
||||
JSON.parse(str)
|
||||
}
|
||||
catch (ex) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async downloadGraph(url) {
|
||||
let blob = await fetch(url).then(r => r.blob())
|
||||
FileSaver.saveAs(blob, this.state.ic.name + ".svg");
|
||||
}
|
||||
|
||||
sendControlCommand() {
|
||||
if (this.state.command === "restart") {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/restart',
|
||||
url: this.state.ic.apiurl + "/restart",
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
} else if (this.state.command === "shutdown") {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/shutdown',
|
||||
url: this.state.ic.apiurl + "/shutdown",
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
confirmCommand(canceled){
|
||||
if(!canceled){
|
||||
this.sendControlCommand();
|
||||
}
|
||||
|
||||
this.setState({confirmCommand: false, command: ''});
|
||||
}
|
||||
|
||||
async downloadGraph(url) {
|
||||
|
||||
let blob = await fetch(url).then(r => r.blob())
|
||||
FileSaver.saveAs(blob, this.props.ic.name + ".svg");
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.ic === undefined) {
|
||||
return <h1>Loading Infrastructure Component...</h1>;
|
||||
}
|
||||
|
||||
let graphURL = ""
|
||||
if (this.state.ic.apiurl !== "") {
|
||||
graphURL = this.state.ic.apiurl + "/graph.svg"
|
||||
}
|
||||
|
||||
const buttonStyle = {
|
||||
marginLeft: '5px',
|
||||
}
|
||||
|
||||
const iconStyle = {
|
||||
height: '25px',
|
||||
width: '25px'
|
||||
}
|
||||
|
||||
return <div className='section'>
|
||||
<h1>{this.state.ic.name}</h1>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<Table striped size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>{this.state.ic.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Description</td>
|
||||
<td>{this.state.ic.description}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UUID</td>
|
||||
<td>{this.state.ic.uuid}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>State</td>
|
||||
<td>{this.state.ic.state}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Category</td>
|
||||
<td>{this.state.ic.category}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Type</td>
|
||||
<td>{this.state.ic.type}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Uptime</td>
|
||||
<td>{moment.duration(this.state.ic.uptime, "seconds").humanize()}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Location</td>
|
||||
<td>{this.state.ic.location}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Websocket URL</td>
|
||||
<td>{this.state.ic.websocketurl}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>API URL</td>
|
||||
<td>{this.state.ic.apiurl}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Start parameter schema</td>
|
||||
<td>
|
||||
{this.isJSON(this.state.ic.startparameterschema) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.startparameterschema}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={0}
|
||||
/> : <div>No Start parameter schema JSON available.</div>}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
<Col>
|
||||
{this.state.ic.type === "villas-node" ?
|
||||
<>
|
||||
<div className='section-buttons-group-right'>
|
||||
<IconButton
|
||||
childKey={0}
|
||||
tooltip='Download Graph'
|
||||
onClick={() => this.downloadGraph(graphURL)}
|
||||
icon='download'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</div>
|
||||
<hr></hr>
|
||||
<b>Graph:</b>
|
||||
<div>
|
||||
<img alt={"Graph image download failed and/or incorrect image API URL"} src={graphURL} />
|
||||
</div>
|
||||
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<div>
|
||||
<hr></hr>
|
||||
<b>Controls:</b>
|
||||
<div className='solid-button'>
|
||||
<Button variant='secondary' style={{ margin: '5px' }} size='lg'
|
||||
onClick={() => this.setState({ confirmCommand: true, command: 'restart' })}>Restart</Button>
|
||||
<Button variant='secondary' style={{ margin: '5px' }} size='lg' onClick={() => this.setState({
|
||||
confirmCommand: true,
|
||||
command: 'shutdown'
|
||||
})}>Shutdown</Button>
|
||||
</div>
|
||||
</div>
|
||||
: <div />
|
||||
}
|
||||
<ConfirmCommand show={this.state.confirmCommand} command={this.state.command} name={this.state.ic.name}
|
||||
onClose={c => this.confirmCommand(c)} />
|
||||
</>
|
||||
: <div />}
|
||||
|
||||
{this.state.ic.type === "villas-relay" ?
|
||||
<>
|
||||
<div className='section-buttons-group-right'>
|
||||
<IconButton
|
||||
childKey={1}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.refresh()}
|
||||
icon='sync-alt'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</div>
|
||||
<b>Raw Status</b>
|
||||
{this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid JSON raw data available.</div>}
|
||||
</>
|
||||
:
|
||||
<div />}
|
||||
</Col>
|
||||
</Row>
|
||||
return <div className='section'>
|
||||
<h1>{this.state.ic.name}</h1>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<Table striped size="sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>{this.state.ic.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Description</td>
|
||||
<td>{this.state.ic.description}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UUID</td>
|
||||
<td>{this.state.ic.uuid}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>State</td>
|
||||
<td>{this.state.ic.state}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Category</td>
|
||||
<td>{this.state.ic.category}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Type</td>
|
||||
<td>{this.state.ic.type}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Uptime</td>
|
||||
<td>{moment.duration(this.state.ic.uptime, "seconds").humanize()}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Location</td>
|
||||
<td>{this.state.ic.location}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Websocket URL</td>
|
||||
<td>{this.state.ic.websocketurl}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>API URL</td>
|
||||
<td>{this.state.ic.apiurl}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Start parameter schema</td>
|
||||
<td>
|
||||
{this.isJSON(this.state.ic.startparameterschema) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.startparameterschema}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={0}
|
||||
/> : <div>No Start parameter schema JSON available.</div>}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
<Col>
|
||||
{this.state.ic.type === "villas-node" ?
|
||||
<>
|
||||
<div className='section-buttons-group-right'>
|
||||
<IconButton
|
||||
childKey={2}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.refresh()}
|
||||
icon='sync-alt'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</div>
|
||||
<Row>
|
||||
{this.state.ic.type === "villas-node" ?
|
||||
<>
|
||||
<Col>
|
||||
<b>Raw Status</b>
|
||||
{this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid JSON raw data available.</div>}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Config</b>
|
||||
{this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["config"]) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw["config"]}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid config JSON raw data available.</div>}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Statistics</b>
|
||||
{this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["statistics"]) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw["statistics"]}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid statistics JSON raw data available.</div>}
|
||||
</Col>
|
||||
</>
|
||||
: <div />}
|
||||
</Row>
|
||||
</Container>
|
||||
</div>;
|
||||
}
|
||||
<IconButton
|
||||
childKey={0}
|
||||
tooltip='Download Graph'
|
||||
onClick={() => this.downloadGraph(graphURL)}
|
||||
icon='download'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</div>
|
||||
<hr/>
|
||||
<b>Graph:</b>
|
||||
<div>
|
||||
<img alt={"Graph image download failed and/or incorrect image API URL"} src={graphURL} />
|
||||
</div>
|
||||
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<div>
|
||||
<hr/>
|
||||
<b>Controls:</b>
|
||||
<div className='solid-button'>
|
||||
<Button variant='secondary' style={{ margin: '5px' }} size='lg'
|
||||
onClick={() => this.setState({ confirmCommand: true, command: 'restart' })}>Restart</Button>
|
||||
<Button variant='secondary' style={{ margin: '5px' }} size='lg' onClick={() => this.setState({
|
||||
confirmCommand: true,
|
||||
command: 'shutdown'
|
||||
})}>Shutdown</Button>
|
||||
</div>
|
||||
</div>
|
||||
: <div />
|
||||
}
|
||||
<ConfirmCommand
|
||||
show={this.state.confirmCommand}
|
||||
command={this.state.command}
|
||||
name={this.state.ic.name}
|
||||
onClose={c => this.confirmCommand(c)}
|
||||
/>
|
||||
</>
|
||||
: <div />}
|
||||
|
||||
{this.state.ic.type === "villas-relay" ?
|
||||
<>
|
||||
<div className='section-buttons-group-right'>
|
||||
<IconButton
|
||||
childKey={1}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.refresh()}
|
||||
icon='sync-alt'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</div>
|
||||
<b>Raw Status</b>
|
||||
{this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid JSON raw data available.</div>}
|
||||
</>
|
||||
:
|
||||
<div />}
|
||||
</Col>
|
||||
</Row>
|
||||
{this.state.ic.type === "villas-node" ?
|
||||
<>
|
||||
<div className='section-buttons-group-right'>
|
||||
<IconButton
|
||||
childKey={2}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.refresh()}
|
||||
icon='sync-alt'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</div>
|
||||
<Row>
|
||||
|
||||
<Col>
|
||||
<b>Raw Status</b>
|
||||
{this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid JSON raw data available.</div>}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Config</b>
|
||||
{this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["config"]) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw["config"]}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid config JSON raw data available.</div>}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Statistics</b>
|
||||
{this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["statistics"]) ?
|
||||
<ReactJson
|
||||
src={this.state.ic.statusupdateraw["statistics"]}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={1}
|
||||
/> : <div>No valid statistics JSON raw data available.</div>}
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</>: <div />}
|
||||
</Container>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue