Merge branch 'master' into color-design

solyuan · Nov 19, 2018 · bf0c5cc · bf0c5cc
2 parents 1f1841f + be93727
commit bf0c5cc
Show file tree

Hide file tree

Showing 16 changed files with 296 additions and 166 deletions.
diff --git a/dist/_ionicons_svg_md-cog.svg b/dist/_ionicons_svg_md-cog.svg
diff --git a/dist/_ionicons_svg_md-construct.svg b/dist/_ionicons_svg_md-construct.svg
diff --git a/dist/_ionicons_svg_md-crop.svg b/dist/_ionicons_svg_md-crop.svg
diff --git a/dist/_ionicons_svg_md-crop2.svg b/dist/_ionicons_svg_md-crop2.svg
diff --git a/dist/_ionicons_svg_md-git-network.svg b/dist/_ionicons_svg_md-git-network.svg
diff --git a/dist/_ionicons_svg_md-git-network2.svg b/dist/_ionicons_svg_md-git-network2.svg
diff --git a/src/client/actions/graphing.js b/src/client/actions/graphing.js
@@ -0,0 +1,4 @@
+export const handleLegendToggle = (value) => ({
+  type: 'HANDLE_LEGEND_TOGGLE',
+  payload: value,
+});
diff --git a/src/client/app.js b/src/client/app.js
@@ -17,7 +17,6 @@ import { withStyles } from '@material-ui/core/styles';
 import styles from './styles/drawerStyles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
@@ -33,7 +32,6 @@ import Popper from '@material-ui/core/Popper';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
-import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
 
 // import images
 import img from './images/k8slogo.png';
@@ -66,7 +64,12 @@ class App extends React.Component {
 			nodeSelected: false,
 			// pass events object down to our render method which will invoke our selectItem method
 			events: {
-				select: this.selectItem
+				select: this.selectItem,
+				hoverNode: this.hoverNode,
+				blurNode: this.blurNode,
+				dragStart: this.dragStart,
+				dragging: this.dragging,
+				dragEnd: this.dragEnd
 			},
 			modalIsOpen: false,
 			// drawer states
@@ -125,6 +128,24 @@ class App extends React.Component {
 		this.setState({ graphTable: 'table', menuOpen: false })
 	}
 
+	// cursor change event methods
+	hoverNode = () => {
+		document.body.style.cursor = "pointer";
+	}
+	blurNode = () => {
+		document.body.style.cursor = "default";
+	}
+	dragStart = () => {
+		document.body.style.cursor = "pointer";
+	}
+	dragging = () => {
+		document.body.style.cursor = "grabbing";
+	}
+	dragEnd = () => {
+		document.body.style.cursor = "default";
+
+	}
+
 	// when an item is selected, it will open a modal window and show information related to that item 
 	selectItem = (event) => {
 		var { nodes, edges } = event;
@@ -180,6 +201,7 @@ class App extends React.Component {
 	}
 
 	render() {
+		console.log(this.state.graph.nodes);
 		// gets the state and props for drawer
 		const { classes, theme } = this.props;
     const { anchor, open, menuOpen } = this.state;

diff --git a/src/client/components/leftPanel.js b/src/client/components/leftPanel.js
@@ -34,13 +34,13 @@ const LeftPanel = (props) => {
 
       {/* this is where you write for the inside of the drawer */}
       {/* Legend */}
-      <Divider style={{'background-color':'#9CABB8'}}/>
-      <Divider style={{'background-color':'#9CABB8'}}/>
+      <Divider style={{'backgroundColor':'#9CABB8'}}/>
+      <Divider style={{'backgroundColor':'#9CABB8'}}/>
       <Legend />
 
       {/* Monitoring */}
-      <Divider style={{'background-color':'#9CABB8'}}/>
-      <Divider style={{'background-color':'#9CABB8'}}/>
+      <Divider style={{'backgroundColor':'#9CABB8'}}/>
+      <Divider style={{'backgroundColor':'#9CABB8'}}/>
       <Monitoring 
         nodes={props.nodes}
         edges={props.edges}
@@ -49,8 +49,8 @@ const LeftPanel = (props) => {
       />
 
       {/* Directions */}
-      <Divider style={{'background-color':'#9CABB8'}}/>
-      <Divider style={{'background-color':'#9CABB8'}}/>
+      <Divider style={{'backgroundColor':'#9CABB8'}}/>
+      <Divider style={{'backgroundColor':'#9CABB8'}}/>
       <Directions />
 
     </Drawer>

diff --git a/src/client/components/legend.js b/src/client/components/legend.js
@@ -8,11 +8,21 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import Switch from '@material-ui/core/Switch';
 
+import blue from '@material-ui/core/colors/blue';
+import purple from '@material-ui/core/colors/purple';
+
+
 // image imports
 import PodIcon from '../../../dist/_ionicons_svg_logo-codepen.svg';
 import ServiceIcon from '../../../dist/_ionicons_svg_md-wifi.svg';
 import IngressIcon from '../../../dist/_ionicons_svg_md-aperture.svg';
 
+// redux
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux'; 
+import { handleLegendToggle } from '../actions/graphing'; 
+
+
 const styles = theme => ({
   root: {
     width: '100%',
@@ -33,27 +43,8 @@ const styles = theme => ({
 class Legend extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      checked: ['pod'],
-    }
   }
 
-  handleToggle = value => () => {
-    const { checked } = this.state;
-    const currentIndex = checked.indexOf(value);
-    const newChecked = [...checked];
-
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
-    }
-
-    this.setState({
-      checked: newChecked,
-    });
-  };
-
   render() {
     const { classes } = this.props;
 
@@ -76,8 +67,8 @@ class Legend extends React.Component {
                 classes={{
                   bar: classes.colorBar
                 }}
-                onChange={this.handleToggle('pod')}
-                checked={this.state.checked.indexOf('pod') !== -1}
+                onChange={() => this.props.handleLegendToggle('pod')}
+                checked={this.props.checked.indexOf('pod') !== -1}
               />
             </ListItemSecondaryAction>
           </ListItem>
@@ -94,8 +85,8 @@ class Legend extends React.Component {
                 classes={{
                   bar: classes.colorBar
                 }}
-                onChange={this.handleToggle('service')}
-                checked={this.state.checked.indexOf('service') !== -1}
+                onChange={() => this.props.handleLegendToggle('service')}
+                checked={this.props.checked.indexOf('service') !== -1}
               />
             </ListItemSecondaryAction>
           </ListItem>
@@ -112,8 +103,8 @@ class Legend extends React.Component {
                 classes={{
                   bar: classes.colorBar,
                 }}
-                onChange={this.handleToggle('ingress')}
-                checked={this.state.checked.indexOf('ingress') !== -1}
+                onChange={() => this.props.handleLegendToggle('ingress')}
+                checked={this.props.checked.indexOf('ingress') !== -1}
               />
             </ListItemSecondaryAction >
           </ListItem>
@@ -128,4 +119,18 @@ Legend.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
+const mapStateToProps = (state) => {
+  return {
+    checked: state.graphing.checked
+  }
+}
+
+const mapDispatchToProps = (dispatch) => { 
+  return bindActionCreators({  
+    handleLegendToggle
+  }, dispatch) 
+} 
+
+Legend = connect(mapStateToProps, mapDispatchToProps)(Legend);
+
 export default withStyles(styles)(Legend);