simplify graph handling #265

src/ic/ic-data-data-manager.js

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

src/ic/ic-dialog.js

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

src/ic/ic-graph-store.js

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

src/ic/ics.js

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