Add node component

package.json

@@ -5,9 +5,12 @@
   "dependencies": {
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.5",
+    "d3-scale": "^1.0.5",
     "es6-promise": "^4.0.5",
     "flux": "^3.1.2",
+    "gaugeJS": "^1.3.2",
     "immutable": "^3.8.1",
+    "rc-slider": "^7.0.1",
     "rd3": "^0.7.4",
     "react": "^15.4.2",
     "react-bootstrap": "^0.30.7",
@@ -19,10 +22,8 @@
     "react-notification-system": "^0.2.13",
     "react-rnd": "^4.2.2",
     "react-router": "^3.0.2",
-    "superagent": "^3.5.0",
-    "gaugeJS": "^1.3.2",
-    "d3-scale": "^1.0.5",
-    "rc-slider": "^7.0.1"
+    "react-sortable-tree": "^0.1.19",
+    "superagent": "^3.5.0"
   },
   "devDependencies": {
     "chai": "^3.5.0",

src/components/node-tree.js

@@ -0,0 +1,75 @@
+/**
+ * File: node-tree.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 26.06.2017
+ *
+ * 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 React from 'react';
+import SortableTree from 'react-sortable-tree';
+import { Button, Glyphicon } from 'react-bootstrap';
+
+class NodeTree extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      treeData: [
+        { title: 'Chicken', subtitle: 'localhost:5000', children: [ { title: 'Egg' } ], expanded: true },
+        { title: 'Cow', subtitle: 'localhost:5001', children: [ { title: 'Milk' }, { title: 'Cheese' }], expanded: true },
+      ]
+    };
+  }
+
+  canNodeDrag(node, path) {
+    return (node.parentNode != null);
+  }
+
+  canNodeDrop(node, prevPath) {
+    return (node.nextParent != null);
+  }
+
+  generateNodeProps(rowInfo) {
+    var buttons = [];
+
+    if (rowInfo.parentNode == null) {
+      buttons.push(<Button bsSize="small"><Glyphicon glyph="plus" /></Button>)
+    }
+
+    buttons.push(<Button bsSize="small"><Glyphicon glyph="pencil" /></Button>);
+
+    return {
+      buttons: buttons
+    };
+  }
+
+  render() {
+    return (
+      <SortableTree
+        treeData={ this.state.treeData }
+        onChange={ (treeData) => this.setState({ treeData }) }
+        style={{ height: 400 }}
+        maxDepth='2'
+        canDrag={ (node, path) => this.canNodeDrag(node, path) }
+        canDrop={ (node, prevPath) => this.canNodeDrop(node, prevPath) }
+        generateNodeProps={(rowInfo) => this.generateNodeProps(rowInfo) }
+      />
+    );
+  }
+}
+
+export default NodeTree;

src/containers/simulators.js

@@ -24,21 +24,23 @@ import { Container } from 'flux/utils';
 import { Button, Modal, Glyphicon } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
-import SimulatorStore from '../stores/simulator-store';
+//import SimulatorStore from '../stores/simulator-store';
+import NodeStore from '../stores/node-store';
 
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
 import NewSimulatorDialog from '../components/dialog/new-simulator';
 import EditSimulatorDialog from '../components/dialog/edit-simulator';
+import NodeTree from '../components/node-tree';
 
 class Simulators extends Component {
   static getStores() {
-    return [ SimulatorStore ];
+    return [ NodeStore ];
   }
 
   static calculateState() {
     return {
-      simulators: SimulatorStore.getState(),
+      nodes: NodeStore.getState(),
 
       newModal: false,
       deleteModal: false,
@@ -49,7 +51,7 @@ class Simulators extends Component {
 
   componentWillMount() {
     AppDispatcher.dispatch({
-      type: 'simulators/start-load'
+      type: 'nodes/start-load'
     });
   }
 
@@ -99,7 +101,11 @@ class Simulators extends Component {
       <div className='section'>
         <h1>Simulators</h1>
 
-        <Table data={this.state.simulators}>
+        <Button><Glyphicon glyph="plus" /> Add Node</Button>
+
+        <NodeTree />
+
+        {/* <Table data={this.state.simulators}>
           <TableColumn title='Name' dataKey='name' labelKey='running' labelStyle={(value) => this.labelStyle(value)} labelModifier={(value) => this.labelModifier(value)} />
           <TableColumn title='Endpoint' dataKey='endpoint' width='180' />
           <TableColumn title='' width='70' editButton deleteButton onEdit={(index) => this.setState({ editModal: true, modalSimulator: this.state.simulators[index] })} onDelete={(index) => this.setState({ deleteModal: true, modalSimulator: this.state.simulators[index] })} />
@@ -124,7 +130,7 @@ class Simulators extends Component {
             <Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
             <Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
           </Modal.Footer>
-        </Modal>
+        </Modal> */}
       </div>
     );
   }

src/data-managers/nodes-data-manager.js

@@ -0,0 +1,24 @@
+/**
+ * File: nodes-data-manager.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 26.06.2017
+ *
+ * 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 RestDataManager from './rest-data-manager';
+
+export default new RestDataManager('node', '/nodes');

src/data-managers/rest-data-manager.js

@@ -22,7 +22,7 @@
 import RestAPI from '../api/rest-api';
 import AppDispatcher from '../app-dispatcher';
 
-const HOST = process.env.REACT_APP_HTTP_PROXY || "";
+const HOST = process.env.REACT_APP_HTTP_PROXY || "http://localhost:4000";
 const API_URL = HOST + '/api/v1';
 
 class RestDataManager {

src/stores/node-store.js

@@ -0,0 +1,25 @@
+/**
+ * File: node-store.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 26.06.2017
+ *
+ * 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 './array-store';
+import NodesDataManager from '../data-managers/nodes-data-manager';
+
+export default new ArrayStore('nodes', NodesDataManager);