From f88a75a972f2773f93d3ecce4a9285e47a7ebc0d Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Sat, 28 Nov 2020 21:17:26 +0100 Subject: [PATCH] Show graph representing the current config #265 --- src/ic/ic-data-data-manager.js | 11 ++-- src/ic/ic-dialog.js | 17 +++++ src/ic/ic-graph-store.js | 62 +++++++++++++++++++ .../{ic-api-store.js => ic-status-store.js} | 24 +++---- src/ic/ics.js | 32 ++++++---- 5 files changed, 112 insertions(+), 34 deletions(-) create mode 100644 src/ic/ic-graph-store.js rename src/ic/{ic-api-store.js => ic-status-store.js} (70%) diff --git a/src/ic/ic-data-data-manager.js b/src/ic/ic-data-data-manager.js index d82497a..d0ca2fd 100644 --- a/src/ic/ic-data-data-manager.js +++ b/src/ic/ic-data-data-manager.js @@ -47,7 +47,7 @@ class IcDataDataManager { getStatus(url,socketname,token,icid){ RestAPI.get(url, null).then(response => { AppDispatcher.dispatch({ - type: 'ic-api/status-received', + type: 'ic-status/status-received', data: response, token: token, socketname: socketname, @@ -55,23 +55,24 @@ class IcDataDataManager { }); }).catch(error => { AppDispatcher.dispatch({ - type: 'ic-api/status-error', + type: 'ic-status/status-error', error: error }) }) } - getGraph(url,socketname,token){ + getGraph(url,socketname,token,icid){ RestAPI.apiDownload(url, null).then(response => { AppDispatcher.dispatch({ - type: 'ic-api/status-received', + type: 'ic-graph/graph-received', data: response, token: token, socketname: socketname, + icid: icid, }); }).catch(error => { AppDispatcher.dispatch({ - type: 'ic-api/status-error', + type: 'ic-graph/graph-error', error: error }) }) diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index cdb48ad..12f65ec 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -29,7 +29,16 @@ class ICDialog extends React.Component { this.setState({[key]: !this.state[key]}); } + graphError(e){ + console.log("graph error"); + } + render() { + + let objectURL='' + if(typeof this.props.icGraph !== "undefined") { + objectURL = this.props.icGraph.objectURL + } return ( {statusKey + ": " + this.props.icStatus[statusKey]}) )) } +
Graph:
+
+ {objectURL !== '' ? ( + this.graphError(e)} alt={"Error"} src={objectURL} /> + ) : ( + Error + )} +
); diff --git a/src/ic/ic-graph-store.js b/src/ic/ic-graph-store.js new file mode 100644 index 0000000..cb44812 --- /dev/null +++ b/src/ic/ic-graph-store.js @@ -0,0 +1,62 @@ +/** + * 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 . + ******************************************************************************/ + +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 icID = parseInt(action.icid); + const dublicate = state.some(element => element.icID === icID); + if(dublicate){ + return state + } + let icGraph = {}; + icGraph["icID"] = icID; + icGraph["data"] = new Blob([action.data.data], {type: action.data.type}); + icGraph["type"] = action.data.type; + icGraph["objectURL"] = URL.createObjectURL(icGraph["data"]); + + this.__emitChange(); + return this.updateElements(state, [icGraph]); + } + + 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(); diff --git a/src/ic/ic-api-store.js b/src/ic/ic-status-store.js similarity index 70% rename from src/ic/ic-api-store.js rename to src/ic/ic-status-store.js index 20d3816..c78353a 100644 --- a/src/ic/ic-api-store.js +++ b/src/ic/ic-status-store.js @@ -18,42 +18,32 @@ import ArrayStore from '../common/array-store'; import ICDataDataManager from './ic-data-data-manager'; -class ICAPIStore extends ArrayStore { +class ICStatusStore extends ArrayStore { constructor() { - super('ic-api', ICDataDataManager); + super('ic-status', ICDataDataManager); } reduce(state, action) { switch(action.type) { - case 'ic-api/get-status': + case 'ic-status/get-status': ICDataDataManager.getStatus(action.url, action.socketname, action.token,action.icid); return super.reduce(state, action); - case 'ic-api/status-received': + case 'ic-status/status-received': let tempData = action.data; - tempData.icId = action.icid; + tempData.icID = action.icid; return this.updateElements(state, [tempData]); - case 'ic-api/status-error': + case 'ic-status/status-error': console.log("status error"); return super.reduce(state, action); - case 'ic-api/get-graph': - ICDataDataManager.getGraph(action.url, action.socketname, action.token); - return super.reduce(state, action); - - case 'ic-api/graph-received': - return super.reduce(state, action); - - case 'ic-api/graph-error': - return super.reduce(state, action); - default: return super.reduce(state, action); } } } -export default new ICAPIStore(); +export default new ICStatusStore(); diff --git a/src/ic/ics.js b/src/ic/ics.js index a7024e8..f3ec9d3 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -24,7 +24,8 @@ import moment from 'moment' import AppDispatcher from '../common/app-dispatcher'; import InfrastructureComponentStore from './ic-store'; -import ICAPIStore from './ic-api-store'; +import ICStatusStore from './ic-status-store'; +import ICGraphStore from './ic-graph-store'; import Icon from '../common/icon'; import Table from '../common/table'; @@ -39,7 +40,7 @@ import DeleteDialog from '../common/dialogs/delete-dialog'; class InfrastructureComponents extends Component { static getStores() { - return [ InfrastructureComponentStore, ICAPIStore ]; + return [ InfrastructureComponentStore, ICStatusStore, ICGraphStore ]; } static statePrio(state) { @@ -75,14 +76,17 @@ class InfrastructureComponents extends Component { } }); - const icInfo = ICAPIStore.getState(); - + const icStatus = ICStatusStore.getState(); + const icGraph = ICGraphStore.getState(); + return { sessionToken: localStorage.getItem("token"), ics: ics, - icInfo: icInfo, + icStatus: icStatus, + icGraph: icGraph, modalIC: {}, modalICStatus: {}, + modalICGraph: {}, deleteModal: false, icModal: false, selectedICs: [], @@ -119,7 +123,7 @@ class InfrastructureComponents extends Component { if (ic.type === "villas-node" || ic.type === "villas-relay") { let splitWebsocketURL = ic.websocketurl.split("/"); AppDispatcher.dispatch({ - type: 'ic-api/get-status', + type: 'ic-status/get-status', url: ic.apiurl + "/status", socketname: splitWebsocketURL[splitWebsocketURL.length - 1], token: this.state.sessionToken, @@ -127,10 +131,11 @@ class InfrastructureComponents extends Component { }); AppDispatcher.dispatch({ - type: 'ic-api/get-graph', + type: 'ic-graph/get-graph', url: ic.apiurl + "/graph.svg", socketname: splitWebsocketURL[splitWebsocketURL.length - 1], token: this.state.sessionToken, + icid: ic.id, }); } }) @@ -343,18 +348,21 @@ class InfrastructureComponents extends Component { modifyNameColumn(name){ let ic = this.state.ics.find(ic => ic.name === name); - let index = this.state.ics.indexOf(ic); + if(ic.type === "villas-node" || ic.type === "villas-relay"){ - return } + return } else{ return {name} } } openICStatus(ic){ + let index = this.state.ics.indexOf(ic); - let icStatus = this.state.icInfo.find(info => info.icID === ic.id); - this.setState({ icModal: true, modalIC: ic, modalICStatus: icStatus, modalIndex: index }) + 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 }) } render() { @@ -427,7 +435,7 @@ class InfrastructureComponents extends Component { this.closeNewModal(data)} /> this.closeEditModal(data)} ic={this.state.modalIC} /> this.closeImportModal(data)} /> - this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} icStatus={this.state.modalICStatus} /> + this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} icStatus={this.state.modalICStatus} icGraph={this.state.modalICGraph} /> this.closeDeleteModal(e)} />