diff --git a/src/ic/ic.js b/src/ic/ic.js index 5752f3e..ed5c8ef 100644 --- a/src/ic/ic.js +++ b/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

Loading Infrastructure Component...

; } - 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

Loading Infrastructure Component...

; - } - - 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
-

{this.state.ic.name}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Name{this.state.ic.name}
Description{this.state.ic.description}
UUID{this.state.ic.uuid}
State{this.state.ic.state}
Category{this.state.ic.category}
Type{this.state.ic.type}
Uptime{moment.duration(this.state.ic.uptime, "seconds").humanize()}
Location{this.state.ic.location}
Websocket URL{this.state.ic.websocketurl}
API URL{this.state.ic.apiurl}
Start parameter schema - {this.isJSON(this.state.ic.startparameterschema) ? - :
No Start parameter schema JSON available.
} -
- - - {this.state.ic.type === "villas-node" ? - <> -
- this.downloadGraph(graphURL)} - icon='download' - buttonStyle={buttonStyle} - iconStyle={iconStyle} - /> -
-
- Graph: -
- {"Graph -
- - {this.state.currentUser.role === "Admin" ? -
-
- Controls: -
- - -
-
- :
- } - this.confirmCommand(c)} /> - - :
} - - {this.state.ic.type === "villas-relay" ? - <> -
- this.refresh()} - icon='sync-alt' - buttonStyle={buttonStyle} - iconStyle={iconStyle} - /> -
- Raw Status - {this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ? - :
No valid JSON raw data available.
} - - : -
} - - + return
+

{this.state.ic.name}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name{this.state.ic.name}
Description{this.state.ic.description}
UUID{this.state.ic.uuid}
State{this.state.ic.state}
Category{this.state.ic.category}
Type{this.state.ic.type}
Uptime{moment.duration(this.state.ic.uptime, "seconds").humanize()}
Location{this.state.ic.location}
Websocket URL{this.state.ic.websocketurl}
API URL{this.state.ic.apiurl}
Start parameter schema + {this.isJSON(this.state.ic.startparameterschema) ? + :
No Start parameter schema JSON available.
} +
+ + + {this.state.ic.type === "villas-node" ? + <>
- this.refresh()} - icon='sync-alt' - buttonStyle={buttonStyle} - iconStyle={iconStyle} - /> -
- - {this.state.ic.type === "villas-node" ? - <> - - Raw Status - {this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ? - :
No valid JSON raw data available.
} - - - Raw Config - {this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["config"]) ? - :
No valid config JSON raw data available.
} - - - Raw Statistics - {this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["statistics"]) ? - :
No valid statistics JSON raw data available.
} - - - :
} - - -
; - } + this.downloadGraph(graphURL)} + icon='download' + buttonStyle={buttonStyle} + iconStyle={iconStyle} + /> +
+
+ Graph: +
+ {"Graph +
+ {this.state.currentUser.role === "Admin" ? +
+
+ Controls: +
+ + +
+
+ :
+ } + this.confirmCommand(c)} + /> + + :
} + + {this.state.ic.type === "villas-relay" ? + <> +
+ this.refresh()} + icon='sync-alt' + buttonStyle={buttonStyle} + iconStyle={iconStyle} + /> +
+ Raw Status + {this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ? + :
No valid JSON raw data available.
} + + : +
} + + + {this.state.ic.type === "villas-node" ? + <> +
+ this.refresh()} + icon='sync-alt' + buttonStyle={buttonStyle} + iconStyle={iconStyle} + /> +
+ + + + Raw Status + {this.state.ic.statusupdateraw !== null && this.isJSON(this.state.ic.statusupdateraw) ? + :
No valid JSON raw data available.
} + + + Raw Config + {this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["config"]) ? + :
No valid config JSON raw data available.
} + + + Raw Statistics + {this.state.ic.statusupdateraw && this.isJSON(this.state.ic.statusupdateraw["statistics"]) ? + :
No valid statistics JSON raw data available.
} + + + + :
} + +
; + } } let fluxContainerConverter = require('../common/FluxContainerConverter');