Added 3d viewer

MoimHossain · Aug 28, 2017 · 8f75074 · 8f75074
1 parent e54ced7
commit 8f75074
Show file tree

Hide file tree

Showing 27 changed files with 2,548 additions and 10 deletions.
diff --git a/dev/js/actions/actionLoadNodes.js b/dev/js/actions/actionLoadNodes.js
diff --git a/dev/js/components/TaskMatrix.js b/dev/js/components/TaskMatrix.js
@@ -52,8 +52,7 @@ const GetArrangedByContainerSpec = (tasks) => {
 const Tasks = (node, tasks, actionDispatch) => {
     return (
         <td 
-            key={node.ID}
-            //className="hover-effect"
+            key={node.ID}            
             >
             {
                 tasks.map((task) => {

diff --git a/dev/js/containers/layouts/side-bar.js b/dev/js/containers/layouts/side-bar.js
@@ -14,6 +14,7 @@ class SideBar extends Component {
     render() {
         return (
             <div className="ui thin  visible sidebar inverted vertical menu">
+                <a className="item" onClick={() => history.push('/3d') }><div><i className="codepen icon"></i>Dashboard</div></a>
                 <a className="item" onClick={() => history.push('/tasks') }><div><i className="codepen icon"></i>Tasks</div></a>
                 <a className="item" onClick={() => history.push('/nodes') }><div><i className="server icon"></i>Nodes</div></a>
                 <a className="item" onClick={() => history.push('/services') }><div><i className="connectdevelop icon"></i>Services</div></a>                

diff --git a/dev/js/containers/networks.js b/dev/js/containers/networks.js
@@ -5,12 +5,14 @@ import { connect } from 'react-redux';
 import {bindActionCreators} from 'redux';
 import loadNetworks from './../actions/actionLoadNetworks';
 import NetworkNode from './../components/NetworkNode';
+import SwarmGraph from './../graphics/swarm-graph';
 
 class Networks extends Component {
     componentDidMount() {      
         this.props.loadNetworks();
+        new SwarmGraph(document.getElementById('threedarea')).start();
     }
-    
+
     renderNetworks() {
         return (
             <div className="ui cards">
@@ -27,7 +29,9 @@ class Networks extends Component {
       return (
           <div className="ui segment work-space dimmed">              
               <h3 className="ui dividing header">Networks</h3>
-
+              <div id="threedarea">
+
+              </div>
               {this.renderNetworks()}
           </div>
       );

diff --git a/dev/js/containers/threedview.js b/dev/js/containers/threedview.js
@@ -0,0 +1,30 @@
+
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {bindActionCreators} from 'redux';
+import loadNetworks from './../actions/actionLoadNetworks';
+import SwarmGraph from './../graphics/swarm-graph';
+
+class ThreeDView extends Component {
+    componentDidMount() {      
+        this.props.loadNetworks();
+        new SwarmGraph(document.getElementById('threedarea')).start();
+    }
+
+    render() {        
+      return (
+          <div className="ui segment work-space dimmed">              
+              <h3 className="ui dividing header">Swarm</h3>
+              <div id="threedarea">
+
+              </div>
+
+          </div>
+      );
+    }
+}
+
+export default connect(
+  (state)=> { return { networks: state.networks }; },
+  (dispatch) => { return bindActionCreators({loadNetworks: loadNetworks}, dispatch); })(ThreeDView);