1
0
Fork 0
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:
Sonja Happ 2021-01-26 12:43:57 +01:00
parent 0d96b11eae
commit 98e9e86757
4 changed files with 20 additions and 142 deletions

View file

@ -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({

View file

@ -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" ? (

View file

@ -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();

View file

@ -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)} />