WIP: Show status of VILLASnode ICs #265

src/ic/ic-api-store.js

@@ -0,0 +1,49 @@
+/**
+ * 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 ICAPIStore extends ArrayStore {
+  constructor() {
+    super('ic-api', ICDataDataManager);
+  }
+
+
+  reduce(state, action) {
+    switch(action.type) {
+
+      case 'ic-api/get-status':
+        ICDataDataManager.getStatus(action.url, action.socketname, action.token,action.icid);
+        return super.reduce(state, action);
+
+      case 'ic-api/status-received':
+        let tempData = action.data;
+        tempData.icId = action.icid;
+        return this.updateElements(state, [tempData]);
+
+      case 'ic-api/status-error':
+        console.log("status error");
+        return super.reduce(state, action);
+
+      default:
+        return super.reduce(state, action);
+    }
+  }
+}
+
+export default new ICAPIStore();

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

@@ -17,6 +17,7 @@
 
 import WebsocketAPI from '../common/api/websocket-api';
 import AppDispatcher from '../common/app-dispatcher';
+import RestAPI from "../common/api/rest-api";
 
 const OFFSET_TYPE = 2;
 const OFFSET_VERSION = 4;
@@ -43,6 +44,23 @@ class IcDataDataManager {
     }
   }
 
+  getStatus(url,socketname,token,icid){
+    RestAPI.get(url, null).then(response => {
+      AppDispatcher.dispatch({
+        type: 'ic-api/status-received',
+        data: response,
+        token: token,
+        socketname: socketname,
+        icid: icid,
+      });
+    }).catch(error => {
+      AppDispatcher.dispatch({
+        type: 'ic-api/status-error',
+        error: error
+      })
+    })
+  }
+
   closeAll() {
     // close every open socket
     for (var identifier in this._sockets) {

src/ic/ic-dialog.js

@@ -1,6 +1,9 @@
 import React from 'react';
-import {FormLabel} from 'react-bootstrap';
+import {FormLabel, Button} from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
+import {Collapse} from 'react-collapse';
+import Icon from "../common/icon";
+
 
 
 class ICDialog extends React.Component {
@@ -10,10 +13,20 @@ class ICDialog extends React.Component {
     super(props);
 
     this.state = {
-      ic: props.ic
+      timezone: false,
+      kernel: false,
+      system: false,
     };
   }
 
+/*  static getDerivedStateFromProps(props, state){
+    let icStatus = props.icStatus;
+    return {
+      icStatus: icStatus,
+      ic: props.ic,
+    };
+  }*/
+
   onClose(canceled) {
     this.props.onClose();
   }
@@ -22,6 +35,19 @@ class ICDialog extends React.Component {
     
   }
 
+  showFurtherInfo(key){
+    switch(key){
+      case 'timezone':
+        this.setState({timezone: !this.state.timezone});
+        return;
+      case 'kernel':
+        this.setState({kernel: !this.state.kernel});
+        return;
+      case 'system':
+        this.setState({system: !this.state.system});
+        return;
+    }
+  }
 
   render() {
     
@@ -35,7 +61,26 @@ class ICDialog extends React.Component {
         size='lg'
       >
         <form>
-          <FormLabel>Infos and Controls</FormLabel>
+          <FormLabel>Status</FormLabel>
+          {
+            typeof this.props.icStatus !== "undefined" && Object.keys(this.props.icStatus).map(statusKey => (
+              typeof this.props.icStatus[statusKey] === 'object' ?
+              (<div>
+                <Button variant="light" onClick={() => this.showFurtherInfo(statusKey)}  >{statusKey}
+                <Icon icon='chevron-down' style={{color: '#007bff'}}/></Button>
+                <Collapse isOpened={this.state[statusKey]} >
+                  {
+                    Object.keys(this.props.icStatus[statusKey]).map(key => (
+                      <div>{key + ": " + this.props.icStatus[statusKey][key]}</div>
+                    ))
+                  }
+                </Collapse>
+
+              </div>) 
+              :
+              (<div>{statusKey + ": " + this.props.icStatus[statusKey]}</div>)
+            ))
+          }
         </form>
       </Dialog>
     );

src/ic/ics.js

@@ -24,6 +24,7 @@ import moment from 'moment'
 
 import AppDispatcher from '../common/app-dispatcher';
 import InfrastructureComponentStore from './ic-store';
+import ICAPIStore from './ic-api-store';
 
 import Icon from '../common/icon';
 import Table from '../common/table';
@@ -38,7 +39,7 @@ import DeleteDialog from '../common/dialogs/delete-dialog';
 
 class InfrastructureComponents extends Component {
   static getStores() {
-    return [ InfrastructureComponentStore ];
+    return [ InfrastructureComponentStore, ICAPIStore ];
   }
 
   static statePrio(state) {
@@ -73,11 +74,15 @@ class InfrastructureComponents extends Component {
         return a.stateUpdatedAt < b.stateUpdatedAt;
       }
     });
+    
+     const icInfo = ICAPIStore.getState();
 
     return {
       sessionToken: localStorage.getItem("token"),
       ics: ics,
+      icInfo: icInfo,
       modalIC: {},
+      modalICStatus: {},
       deleteModal: false,
       icModal: false,
       selectedICs: [],
@@ -90,11 +95,11 @@ class InfrastructureComponents extends Component {
       type: 'ics/start-load',
       token: this.state.sessionToken,
     });
-
-    // Start timer for periodic refresh
+    
+   // Start timer for periodic refresh
     this.timer = window.setInterval(() => this.refresh(), 10000);
   }
-
+  
   componentWillUnmount() {
     window.clearInterval(this.timer);
   }
@@ -109,6 +114,19 @@ class InfrastructureComponents extends Component {
         type: 'ics/start-load',
         token: this.state.sessionToken,
       });
+
+      this.state.ics.forEach(ic => {
+        if (ic.type === "villas-node" || ic.type === "villas-relay") {
+          let splitWebsocketURL = ic.websocketurl.split("/");
+          AppDispatcher.dispatch({
+            type: 'ic-api/get-status',
+            url: ic.apiurl + "/status",
+            socketname: splitWebsocketURL[splitWebsocketURL.length - 1],
+            token: this.state.sessionToken,
+            icid: ic.id,
+          });
+        }
+      })
     }
   }
 
@@ -320,12 +338,18 @@ class InfrastructureComponents extends Component {
     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={() => this.setState({ icModal: true, modalIC: ic, modalIndex: index })}>{name}</Button>    }
+      return <Button variant="link" onClick={(ic) => 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 })
+  }
+
   render() {
     const buttonStyle = {
       marginLeft: '10px'
@@ -396,7 +420,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} />
+        <ICDialog show={this.state.icModal} onClose={data => this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} icStatus={this.state.modalICStatus} />
 
         <DeleteDialog title="infrastructure-component" name={this.state.modalIC.name || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
       </div>