Hide node properties when not set

Move to react 16 return style for node properties

src/components/SearchContainer/Tabs/ComputerNodeData.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import NodeALink from './NodeALink';
 import PropTypes from 'prop-types';
+import NodeProps from './NodeProps';
 
 export default class ComputerNodeData extends Component {
     constructor(){
@@ -21,7 +22,9 @@ export default class ComputerNodeData extends Component {
             transitiveControl: -1,
             derivativeLocalAdmins: -1,
             driversessions: [],
-            propertyMap: {}
+            propertyMap: {},
+            ServicePrincipalNames: [],
+            displayMap: { "OperatingSystem": "OS", "Enabled": "Enabled", "UnconstrainedDelegation": "Allows Unconstrained Delegation"}
         };
 
         emitter.on('computerNodeClicked', this.getNodeData.bind(this));
@@ -183,24 +186,7 @@ export default class ComputerNodeData extends Component {
                     <dd>
                         {this.state.label}
                     </dd>
-                    <dt>
-                        OS
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("OperatingSystem")}
-                    </dd>
-                    <dt>
-                        Enabled
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("Enabled")}
-                    </dd>
-                    <dt>
-                        Allows Unconstrained Delegation
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("UnconstrainedDelegation")}
-                    </dd>
+                    <NodeProps properties={this.state.propertyMap} displayMap={this.state.displayMap} ServicePrincipalNames={this.state.ServicePrincipalNames} />
                     <dt>
                         Sessions
                     </dt>

src/components/SearchContainer/Tabs/NodeALink.jsx

@@ -1,29 +1,29 @@
 import React, { Component } from 'react';
 import { If, Then, Else } from 'react-if';
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 export default class NodeALink extends Component {
-	constructor(props){
-		super(props);
-	}
-	render() {
-		return (
-			<If condition={this.props.ready}>
-				<Then><a href="#" onClick={this.props.click}>{this.props.value}</a></Then>
-				<Else>{() =>
-					<div className="spinner">
-					  <div className="bounce1"></div>
-					  <div className="bounce2"></div>
-					  <div className="bounce3"></div>
-					</div>
-				}</Else>
-			</If>
-		);
-	}
+    constructor(props){
+        super(props);
+    }
+    render() {
+        return (
+            <If condition={this.props.ready}>
+                <Then><a href="#" onClick={this.props.click}>{this.props.value}</a></Then>
+                <Else>{() =>
+                    <div className="spinner">
+                      <div className="bounce1" />
+                      <div className="bounce2" />
+                      <div className="bounce3" />
+                    </div>
+                }</Else>
+            </If>
+        );
+    }
 }
 
 NodeALink.propTypes = {
-	ready : PropTypes.bool.isRequired,
-	click : PropTypes.func,
-	value : PropTypes.number
+    ready : PropTypes.bool.isRequired,
+    click : PropTypes.func,
+    value : PropTypes.number
 }

src/components/SearchContainer/Tabs/NodeProps.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class componentName extends Component {
+    constructor(props){
+        super(props);
+    }
+
+    convertToDisplayProp(propName) {
+        var obj = this.props.properties[propName];
+        var type = typeof obj;
+        if (type === 'undefined') {
+            return null;
+        } else if (obj.hasOwnProperty('low')) {
+            var t = obj.low;
+            if (t === 0) {
+                return "Never";
+            } else {
+                return new Date(obj.low * 1000).toUTCString();
+            }
+        } else if (type === 'boolean') {
+            return obj.toString().toTitleCase();
+        } else if (obj === "") {
+            return null;
+        } else {
+            return obj;
+        }
+    }
+
+    render() {
+        let l = [];
+
+        $.each(this.props.displayMap, function(key, value){
+            let val = this.convertToDisplayProp(key);
+
+            if (val !== null){
+                l.push(<dt key={key}>{value}</dt>);
+                l.push(<dd key={val}>{val}</dd>);
+            }
+        }.bind(this));
+
+        if (this.props.ServicePrincipalNames.length > 0){
+            l.push(<dt key="spn">Service Principal Names</dt>);
+            $.each(this.props.ServicePrincipalNames, function(index, value){
+                l.push(<dd key={index}>{value}</dd>);
+            });
+        }
+
+        return l;
+    }
+}

src/components/SearchContainer/Tabs/UserNodeData.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import NodeALink from './NodeALink';
 import NodePropItem from './NodePropItem';
 import PropTypes from 'prop-types';
+import NodeProps from './NodeProps';
 
 import { If, Then, Else } from 'react-if';
 
@@ -25,7 +26,9 @@ export default class UserNodeData extends Component {
             unrolledControl: -1,
             transitiveControl: -1,
             driversessions : [],
-            propertyMap: {ServicePrincipalNames: []}
+            propertyMap: {},
+            ServicePrincipalNames: [],
+            displayMap: {"DisplayName":"Display Name", "PwdLastSet":"Password Last Changed", "LastLogon": "Last Logon", "Enabled":"Enabled","Email":"Email"}
         };
 
         emitter.on('userNodeClicked', this.getNodeData.bind(this));
@@ -51,7 +54,8 @@ export default class UserNodeData extends Component {
             firstdegreeControl: -1,
             unrolledControl: -1,
             transitiveControl: -1,
-            propertyMap: {ServicePrincipalNames: []}
+            propertyMap: {},
+            ServicePrincipalNames: []
         });
 
         var domain = '@' + payload.split('@').last();
@@ -75,7 +79,9 @@ export default class UserNodeData extends Component {
             .then(function(result){
                 var properties = result.records[0]._fields[0].properties;
                 if (typeof properties.ServicePrincipalNames === 'undefined'){
-                    properties.ServicePrincipalNames = [];
+                    this.setState({ServicePrincipalNames: []});
+                }else{
+                    this.setState({ ServicePrincipalNames: properties.ServicePrincipalNames });
                 }
                 this.setState({propertyMap: properties});
                 props.close();
@@ -201,48 +207,7 @@ export default class UserNodeData extends Component {
                     <dd>
                         {this.state.label}
                     </dd>
-                    <dt>
-                        Display Name
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("DisplayName")}
-                    </dd>
-                    <dt>
-                        Password Last Changed
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("PwdLastSet")}
-                    </dd>
-                    <dt>
-                        Last Logon
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("LastLogon")}
-                    </dd>
-                    <dt>
-                        Enabled
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("Enabled")}
-                    </dd>
-                    <dt>
-                        Email
-                    </dt>
-                    <dd>
-                        {this.convertToDisplayProp("Email")}
-                    </dd>
-                    <dt>
-                        Service Principal Names
-                    </dt>
-                    {(() => {
-                        if (this.state.propertyMap.ServicePrincipalNames.length === 0){
-                            return <dd>None</dd>;
-                        }
-                    })()}
-                    {Object.keys(this.state.propertyMap.ServicePrincipalNames).map(function(key){
-                        var x = <dd key={key}>{this.state.propertyMap.ServicePrincipalNames[key]}</dd>;
-                        return x;
-                    }.bind(this))}
+                    <NodeProps properties={this.state.propertyMap} displayMap={this.state.displayMap} ServicePrincipalNames={this.state.ServicePrincipalNames} />
                     <dt>
                         Sessions
                     </dt>