mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
simplify graph handling #265
This commit is contained in:
parent
0d96b11eae
commit
98e9e86757
4 changed files with 20 additions and 142 deletions
|
@ -71,23 +71,6 @@ class IcDataDataManager {
|
|||
})
|
||||
}
|
||||
|
||||
getGraph(url,socketname,token,icid){
|
||||
RestAPI.apiDownload(url, null).then(response => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ic-graph/graph-received',
|
||||
data: response,
|
||||
token: token,
|
||||
socketname: socketname,
|
||||
icid: icid,
|
||||
});
|
||||
}).catch(error => {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ic-graph/graph-error',
|
||||
error: error
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
restart(url,socketname,token){
|
||||
RestAPI.post(url, null).then(response => {
|
||||
AppDispatcher.dispatch({
|
||||
|
|
|
@ -3,7 +3,7 @@ import {Button, Row, Col} from 'react-bootstrap';
|
|||
import Dialog from '../common/dialogs/dialog';
|
||||
import Icon from "../common/icon";
|
||||
import ConfirmCommand from './confirm-command';
|
||||
import JsonView from 'react-json-view';
|
||||
import ReactJson from 'react-json-view';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
|
||||
|
@ -33,7 +33,7 @@ class ICDialog extends React.Component {
|
|||
}
|
||||
|
||||
handleChange(e) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
showFurtherInfo(key){
|
||||
|
@ -41,10 +41,6 @@ class ICDialog extends React.Component {
|
|||
this.setState({[key]: !this.state[key]});
|
||||
}
|
||||
|
||||
graphError(e){
|
||||
console.log("graph error");
|
||||
}
|
||||
|
||||
closeConfirmModal(canceled){
|
||||
if(!canceled){
|
||||
this.props.sendControlCommand(this.state.command,this.props.ic);
|
||||
|
@ -53,21 +49,24 @@ class ICDialog extends React.Component {
|
|||
this.setState({confirmCommand: false, command: ''});
|
||||
}
|
||||
|
||||
downloadGraph(url){
|
||||
FileSaver.saveAs(url, this.props.ic.name + ".svg");
|
||||
}
|
||||
async downloadGraph(url) {
|
||||
|
||||
let blob = await fetch(url).then(r => r.blob())
|
||||
FileSaver.saveAs(blob, this.props.ic.name + ".svg");
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
let icStatus = this.state.icStatus;
|
||||
delete icStatus['icID'];
|
||||
|
||||
let objectURL=''
|
||||
if(typeof this.props.icGraph !== "undefined") {
|
||||
objectURL = this.props.icGraph.objectURL
|
||||
let graphURL = ""
|
||||
if (this.props.ic.apiurl !== ""){
|
||||
graphURL = this.props.ic.apiurl + "/graph.svg"
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
|
@ -83,28 +82,24 @@ class ICDialog extends React.Component {
|
|||
<Col>
|
||||
<h5>Status:</h5>
|
||||
|
||||
<JsonView
|
||||
<ReactJson
|
||||
src={icStatus}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={true}
|
||||
collapsed={1}
|
||||
/>
|
||||
|
||||
</Col>
|
||||
|
||||
<Col>
|
||||
<div className='section-buttons-group-right'>
|
||||
<Button style={{ margin: '5px' }} size='sm' onClick={() => this.downloadGraph(objectURL)}><Icon icon="download" /></Button>
|
||||
<Button style={{ margin: '5px' }} size='sm' onClick={() => this.downloadGraph(graphURL)}><Icon icon="download" /></Button>
|
||||
</div>
|
||||
<h5>Graph:</h5>
|
||||
<div>
|
||||
{objectURL !== '' ? (
|
||||
<img onError={(e) => this.graphError(e)} alt={"Error"} src={objectURL} />
|
||||
) : (
|
||||
<img alt="Error" />
|
||||
)}
|
||||
<img alt={"Graph image download failed and/or incorrect image URL"} src={graphURL} />
|
||||
</div>
|
||||
|
||||
{this.props.userRole === "Admin" ? (
|
||||
|
|
|
@ -1,87 +0,0 @@
|
|||
/**
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import ArrayStore from '../common/array-store';
|
||||
import ICDataDataManager from './ic-data-data-manager';
|
||||
|
||||
class ICGraphStore extends ArrayStore {
|
||||
constructor() {
|
||||
super('ic-graph', ICDataDataManager);
|
||||
}
|
||||
|
||||
saveGraph(state, action){
|
||||
|
||||
let icGraph = {};
|
||||
icGraph["icID"] = action.icid;
|
||||
icGraph["data"] = new Blob([action.data.data], {type: action.data.type});
|
||||
icGraph["type"] = action.data.type;
|
||||
icGraph["objectURL"] = URL.createObjectURL(icGraph["data"]);
|
||||
|
||||
let newElements = [icGraph]
|
||||
|
||||
// search for existing element to update
|
||||
state.forEach((element, index, array) => {
|
||||
newElements = newElements.filter((updateElement, newIndex) => {
|
||||
if (element.icID === updateElement.icID) {
|
||||
// update each property
|
||||
for (var key in updateElement) {
|
||||
if (updateElement.hasOwnProperty(key) && key === "objectURL") {
|
||||
URL.revokeObjectURL(array[index][key]);
|
||||
} else if (updateElement.hasOwnProperty(key)){
|
||||
array[index][key] = updateElement[key];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// remove updated element from update list
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// all elements still in the list will just be added
|
||||
state = state.concat(newElements);
|
||||
|
||||
// announce change to listeners
|
||||
this.__emitChange();
|
||||
|
||||
return state;
|
||||
|
||||
}
|
||||
|
||||
reduce(state, action) {
|
||||
switch(action.type) {
|
||||
|
||||
case 'ic-graph/get-graph':
|
||||
ICDataDataManager.getGraph(action.url, action.socketname, action.token, action.icid);
|
||||
return super.reduce(state, action);
|
||||
|
||||
case 'ic-graph/graph-received':
|
||||
return this.saveGraph(state, action);
|
||||
|
||||
case 'ic-graph/graph-error':
|
||||
return super.reduce(state, action);
|
||||
|
||||
default:
|
||||
return super.reduce(state, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new ICGraphStore();
|
|
@ -25,7 +25,6 @@ import moment from 'moment'
|
|||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import InfrastructureComponentStore from './ic-store';
|
||||
import ICStatusStore from './ic-status-store';
|
||||
import ICGraphStore from './ic-graph-store';
|
||||
|
||||
import Icon from '../common/icon';
|
||||
import Table from '../common/table';
|
||||
|
@ -40,7 +39,7 @@ import DeleteDialog from '../common/dialogs/delete-dialog';
|
|||
|
||||
class InfrastructureComponents extends Component {
|
||||
static getStores() {
|
||||
return [ InfrastructureComponentStore, ICStatusStore, ICGraphStore ];
|
||||
return [ InfrastructureComponentStore, ICStatusStore];
|
||||
}
|
||||
|
||||
static statePrio(state) {
|
||||
|
@ -80,10 +79,8 @@ class InfrastructureComponents extends Component {
|
|||
sessionToken: localStorage.getItem("token"),
|
||||
ics: ics,
|
||||
icStatus: ICStatusStore.getState(),
|
||||
icGraph: ICGraphStore.getState(),
|
||||
modalIC: {},
|
||||
modalICStatus: {},
|
||||
modalICGraph: {},
|
||||
deleteModal: false,
|
||||
icModal: false,
|
||||
selectedICs: [],
|
||||
|
@ -116,7 +113,7 @@ class InfrastructureComponents extends Component {
|
|||
token: this.state.sessionToken,
|
||||
});
|
||||
|
||||
// get status and graph of VILLASnode and VILLASrelay ICs
|
||||
// get status of VILLASnode and VILLASrelay ICs
|
||||
this.state.ics.forEach(ic => {
|
||||
if ((ic.type === "villas-node" || ic.type === "villas-relay")
|
||||
&& ic.apiurl !== '' && ic.apiurl !== undefined && ic.apiurl !== null) {
|
||||
|
@ -129,14 +126,6 @@ class InfrastructureComponents extends Component {
|
|||
icid: ic.id,
|
||||
ic: ic
|
||||
});
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ic-graph/get-graph',
|
||||
url: ic.apiurl + "/graph.svg",
|
||||
socketname: splitWebsocketURL[splitWebsocketURL.length - 1],
|
||||
token: this.state.sessionToken,
|
||||
icid: ic.id,
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -361,9 +350,8 @@ class InfrastructureComponents extends Component {
|
|||
|
||||
let index = this.state.ics.indexOf(ic);
|
||||
let icStatus = this.state.icStatus.find(status => status.icID === ic.id);
|
||||
let icGraph = this.state.icGraph.find(graph => graph.icID === ic.id);
|
||||
|
||||
this.setState({ icModal: true, modalIC: ic, modalICStatus: icStatus, modalICGraph: icGraph, modalIndex: index })
|
||||
this.setState({ icModal: true, modalIC: ic, modalICStatus: icStatus, modalIndex: index })
|
||||
}
|
||||
|
||||
sendControlCommand(command,ic){
|
||||
|
@ -464,7 +452,6 @@ class InfrastructureComponents extends Component {
|
|||
token={this.state.sessionToken}
|
||||
userRole={this.state.currentUser.role}
|
||||
icStatus={this.state.modalICStatus}
|
||||
icGraph={this.state.modalICGraph}
|
||||
sendControlCommand={(command, ic) => this.sendControlCommand(command, ic)}/>
|
||||
|
||||
<DeleteDialog title="infrastructure-component" name={this.state.modalIC.name || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
|
||||
|
|
Loading…
Add table
Reference in a new issue