Showing resource boxes in the resource view

client/app/scripts/charts/node-resource-metric.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class NodeResourceMetric extends React.Component {
+  render() {
+    const { index } = this.props;
+    return (
+      <g className="node-resource-metric">
+        <rect x={index * 100} y="0" width="90" height="300" />
+      </g>
+    );
+  }
+}

client/app/scripts/charts/node.js

@@ -97,7 +97,7 @@ class Node extends React.Component {
       exportingGraph, showingNetworks, stack, id, metric } = this.props;
     const { hovered } = this.state;
 
-    console.log(metric && metric.toJS());
+    // console.log(metric && metric.toJS());
     const color = getNodeColor(rank, label, pseudo);
     const truncate = !focused && !hovered;
     const labelOffsetY = (showingNetworks && networks) ? 40 : 28;

client/app/scripts/charts/nodes-chart.js

@@ -7,6 +7,7 @@ import { event as d3Event, select } from 'd3-selection';
 import { zoom, zoomIdentity } from 'd3-zoom';
 
 import Logo from '../components/logo';
+import ResourceView from './resource-view';
 import NodesChartElements from './nodes-chart-elements';
 import { clickBackground, cacheZoomState } from '../actions/app-actions';
 import { activeLayoutZoomSelector } from '../selectors/nodes-chart-zoom';
@@ -110,7 +111,10 @@ class NodesChart extends React.Component {
           <g transform="translate(24,24) scale(0.25)">
             <Logo />
           </g>
-          <NodesChartElements transform={transform} />
+          {this.props.resourceView ?
+            <ResourceView transform={transform} /> :
+            <NodesChartElements transform={transform} />
+          }
         </svg>
       </div>
     );
@@ -166,6 +170,7 @@ function mapStateToProps(state) {
     layoutId: JSON.stringify(activeTopologyZoomCacheKeyPathSelector(state)),
     selectedNodeId: state.get('selectedNodeId'),
     forceRelayout: state.get('forceRelayout'),
+    resourceView: state.get('resourceView'),
   };
 }
 

client/app/scripts/charts/resource-view.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import NodeResourceMetric from './node-resource-metric';
+
+class ResourceView extends React.Component {
+  render() {
+    const { nodes, transform } = this.props;
+    return (
+      <g className="resource-view" transform={transform}>
+        {nodes.toIndexedSeq().map((node, index) => (
+          <NodeResourceMetric
+            index={index}
+            key={node.get('id')}
+            metric={node.get('metrics')}
+          />
+        ))}
+      </g>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    nodes: state.get('nodes'),
+  };
+}
+
+export default connect(
+  mapStateToProps
+)(ResourceView);