Initial version of the resource view (#2296)

* Added resource view selector button

* Showing resource boxes in the resource view

* Crude CPU resource view prototype

* Improved the viewMode state logic

* Extracted zooming into a separate wrapper component

* Split the layout selectors between graph-view and resource-view

* Proper zooming logic for the resource view

* Moved all node networks utils to selectors

* Improved the zoom caching logic

* Further refactoring of selectors

* Added sticky labels to the resource boxes

* Added panning translation limits in the resource view

* Renamed GridModeSelector -> ViewModeSelector

* Polished the topology resource view selection logic

* Search bar hidden in the resource view

* Added per-layer topology names to the resource view

* Made metric selectors work for the resource view

* Adjusted the viewport selectors

* Renamed viewport selector to canvas (+ maximal zoom fix)

* Showing more useful metric info in the resource box labels

* Fetching only necessary nodes for the resource view

* Refactored the resource view layer component

* Addressed first batch UI comments (from the Scope meeting)

* Switch to deep zooming transform in the resource view to avoid SVG precision errors

* Renamed and moved resource view components

* Polished all the resource view components

* Changing the available metrics selection

* Improved and polished the state transition logic for the resource view

* Separated zoom limits from the zoom active state

* Renaming and bunch of comments

* Addressed all the UI comments (@davkal + @fons)

* Made graph view selectors independent from resource view selectors

client/app/scripts/components/nodes.js

@@ -4,17 +4,21 @@ import { debounce } from 'lodash';
 
 import NodesChart from '../charts/nodes-chart';
 import NodesGrid from '../charts/nodes-grid';
+import NodesResources from '../components/nodes-resources';
 import NodesError from '../charts/nodes-error';
 import DelayedShow from '../utils/delayed-show';
 import { Loading, getNodeType } from './loading';
 import { isTopologyEmpty } from '../utils/topology-utils';
 import { setViewportDimensions } from '../actions/app-actions';
+import {
+  isGraphViewModeSelector,
+  isTableViewModeSelector,
+  isResourceViewModeSelector,
+} from '../selectors/topology';
+
 import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer';
 
 
-const navbarHeight = 194;
-const marginTop = 0;
-
 const EmptyTopologyError = show => (
   <NodesError faIconClass="fa-circle-thin" hidden={!show}>
     <div className="heading">Nothing to show. This can have any of these reasons:</div>
@@ -47,9 +51,10 @@ class Nodes extends React.Component {
   }
 
   render() {
-    const { topologyEmpty, gridMode, topologiesLoaded, nodesLoaded, topologies,
-      currentTopology } = this.props;
+    const { topologyEmpty, topologiesLoaded, nodesLoaded, topologies, currentTopology,
+      isGraphViewMode, isTableViewMode, isResourceViewMode } = this.props;
 
+    // TODO: Rename view mode components.
     return (
       <div className="nodes-wrapper">
         <DelayedShow delay={1000} show={!topologiesLoaded || (topologiesLoaded && !nodesLoaded)}>
@@ -60,23 +65,25 @@ class Nodes extends React.Component {
         </DelayedShow>
         {EmptyTopologyError(topologiesLoaded && nodesLoaded && topologyEmpty)}
 
-        {gridMode ? <NodesGrid /> : <NodesChart />}
+        {isGraphViewMode && <NodesChart />}
+        {isTableViewMode && <NodesGrid />}
+        {isResourceViewMode && <NodesResources />}
       </div>
     );
   }
 
   setDimensions() {
-    const width = window.innerWidth;
-    const height = window.innerHeight - navbarHeight - marginTop;
-    this.props.setViewportDimensions(width, height);
+    this.props.setViewportDimensions(window.innerWidth, window.innerHeight);
   }
 }
 
 
 function mapStateToProps(state) {
   return {
+    isGraphViewMode: isGraphViewModeSelector(state),
+    isTableViewMode: isTableViewModeSelector(state),
+    isResourceViewMode: isResourceViewModeSelector(state),
     currentTopology: state.get('currentTopology'),
-    gridMode: state.get('gridMode'),
     nodesLoaded: state.get('nodesLoaded'),
     topologies: state.get('topologies'),
     topologiesLoaded: state.get('topologiesLoaded'),