Show graph representing the current config #265

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

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 (
       <Dialog
@@ -73,6 +82,14 @@ class ICDialog extends React.Component {
               (<div>{statusKey + ": " + this.props.icStatus[statusKey]}</div>)
             ))
           }
+          <div>Graph:</div>
+          <div>
+            {objectURL !== '' ? (
+              <img onError={(e) => this.graphError(e)} alt={"Error"} src={objectURL} />
+            ) : (
+                <img alt="Error" />
+              )}
+          </div>
         </form>
       </Dialog>
     );

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

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

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 <Button variant="link" onClick={(ic) => this.openICStatus(ic)}>{name}</Button>    }
+      return <Button variant="link" onClick={() => this.openICStatus(ic)}>{name}</Button>    }
     else{
       return <span>{name}</span>
     }
   }
 
   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 {
         <NewICDialog show={this.state.newModal} onClose={data => this.closeNewModal(data)} />
         <EditICDialog show={this.state.editModal} onClose={data => this.closeEditModal(data)} ic={this.state.modalIC} />
         <ImportICDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} />
-        <ICDialog show={this.state.icModal} onClose={data => this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} icStatus={this.state.modalICStatus} />
+        <ICDialog show={this.state.icModal} onClose={data => this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} icStatus={this.state.modalICStatus} icGraph={this.state.modalICGraph} />
 
         <DeleteDialog title="infrastructure-component" name={this.state.modalIC.name || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
       </div>