Nice refactoring

client/app/scripts/charts/nodes-resources-layer.js

@@ -3,8 +3,10 @@ import { connect } from 'react-redux';
 import { Map as makeMap } from 'immutable';
 
 import { RESOURCES_LAYER_TITLE_WIDTH, RESOURCES_LAYER_HEIGHT } from '../constants/styles';
-import { layoutNodesByTopologyMetaSelector } from '../selectors/resource-view/layout';
-import { layersVerticalPositionSelector } from '../selectors/resource-view/layers';
+import {
+  layersVerticalPositionSelector,
+  positionedNodesByTopologySelector,
+} from '../selectors/resource-view/layers';
 import NodeResourceBox from './node-resource-box';
 import NodeResourceLabel from './node-resource-label';
 
@@ -86,7 +88,7 @@ class NodesResourcesLayer extends React.Component {
 
 function mapStateToProps(state, props) {
   const yPosition = layersVerticalPositionSelector(state).get(props.topologyId);
-  const nodes = layoutNodesByTopologyMetaSelector(state)(state)[props.topologyId];
+  const nodes = positionedNodesByTopologySelector(state).get(props.topologyId, makeMap());
   // TODO: Move to selectors?
   const labels = getPositionedLabels(nodes, props.transform);
   return { yPosition, nodes, labels };

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

@@ -9,11 +9,12 @@ import NodesResourcesLayer from './nodes-resources-layer';
 
 class NodesResources extends React.Component {
   renderLayers(transform) {
-    return this.props.layersTopologyIds.map(topologyId => (
+    return this.props.layersTopologyIds.map((topologyId, index) => (
       <NodesResourcesLayer
         key={topologyId}
         topologyId={topologyId}
         transform={transform}
+        slot={index}
       />
     ));
   }

client/app/scripts/decorators/node.js

@@ -0,0 +1,37 @@
+import { Map as makeMap } from 'immutable';
+
+import { getNodeColor } from '../utils/color-utils';
+import { getMetricValue } from '../utils/metric-utils';
+import { RESOURCES_LAYER_HEIGHT } from '../constants/styles';
+
+
+export function nodeColorDecorator(node) {
+  return node.set('color', getNodeColor(node.get('rank'), node.get('label'), node.get('pseudo')));
+}
+
+export function nodeResourceBoxDecorator(node) {
+  const metricType = node.get('metricType');
+  const metric = node.get('metrics', makeMap()).find(m => m.get('label') === metricType);
+  if (!metric) return node;
+
+  const { formattedValue } = getMetricValue(metric);
+  const info = `Resource usage: ${formattedValue}`;
+  const withCapacity = node.get('withCapacity');
+  const totalCapacity = metric.get('max') / 1e5;
+  const absoluteConsumption = metric.get('value') / 1e5;
+  const relativeConsumption = absoluteConsumption / totalCapacity;
+  const consumption = withCapacity ? relativeConsumption : 1;
+  const width = withCapacity ? totalCapacity : absoluteConsumption;
+  const height = RESOURCES_LAYER_HEIGHT;
+
+  return node.merge(makeMap({ width, height, consumption, withCapacity, info }));
+}
+
+export function nodeParentNodeDecorator(node) {
+  const parentTopologyId = node.get('directParentTopologyId');
+  const parents = node.get('parents', makeMap());
+  const parent = parents.find(p => p.get('topologyId') === parentTopologyId);
+  if (!parent) return node;
+
+  return node.set('parentNodeId', parent.get('id'));
+}

client/app/scripts/selectors/resource-view/default-zoom.js

@@ -3,30 +3,30 @@ import { Map as makeMap } from 'immutable';
 
 import { RESOURCES_LAYER_HEIGHT } from '../../constants/styles';
 import { canvasMarginsSelector, canvasWidthSelector, canvasHeightSelector } from '../canvas';
-import { layersVerticalPositionSelector } from './layers';
-import { layoutNodesSelector } from './layout';
+import { layersVerticalPositionSelector, positionedNodesByTopologySelector } from './layers';
 
 
 // Compute the default zoom settings for the given chart.
 export const resourcesDefaultZoomSelector = createSelector(
   [
     layersVerticalPositionSelector,
-    layoutNodesSelector,
+    positionedNodesByTopologySelector,
     canvasMarginsSelector,
     canvasWidthSelector,
     canvasHeightSelector,
   ],
-  (layersVerticalPositions, layoutNodes, canvasMargins, width, height) => {
-    if (layoutNodes.size === 0) {
+  (verticalPositions, nodes, canvasMargins, width, height) => {
+    if (nodes.size === 0) {
       return makeMap();
     }
 
-    const xMin = layoutNodes.map(n => n.get('x')).min();
-    const yMin = layersVerticalPositions.min();
-    const xMax = layoutNodes.map(n => n.get('x') + n.get('width')).max();
-    const yMax = layersVerticalPositions.max() + RESOURCES_LAYER_HEIGHT;
+    const flattenedNodes = nodes.flatten(true);
+    const xMin = flattenedNodes.map(n => n.get('x')).min();
+    const yMin = verticalPositions.toList().min();
+    const xMax = flattenedNodes.map(n => n.get('x') + n.get('width')).max();
+    const yMax = verticalPositions.toList().max() + RESOURCES_LAYER_HEIGHT;
 
-    const minNodeWidth = layoutNodes.map(n => n.get('width')).min();
+    const minNodeWidth = flattenedNodes.map(n => n.get('width')).min();
 
     const scaleX = (width / (xMax - xMin)) * 1.0;
     const scaleY = (height / (yMax - yMin)) * 0.7;

client/app/scripts/selectors/resource-view/layers.js

@@ -1,8 +1,21 @@
+import { times } from 'lodash';
+import { fromJS, Map as makeMap } from 'immutable';
 import { createSelector } from 'reselect';
-import { Map as makeMap, fromJS } from 'immutable';
 
-import { resourceViewLayers } from '../../constants/resources';
 import { RESOURCES_LAYER_PADDING, RESOURCES_LAYER_HEIGHT } from '../../constants/styles';
+import { resourceViewLayers } from '../../constants/resources';
+import {
+  nodeColorDecorator,
+  nodeParentNodeDecorator,
+  nodeResourceBoxDecorator,
+} from '../../decorators/node';
+
+
+const RESOURCE_VIEW_MAX_LAYERS = 3;
+
+const nodeWeight = node => (
+  node.get('withCapacity') ? -node.get('consumption') : -node.get('width')
+);
 
 export const layersTopologyIdsSelector = createSelector(
   [
@@ -27,3 +40,70 @@ export const layersVerticalPositionSelector = createSelector(
     return yPositions;
   }
 );
+
+const decoratedNodesByTopologySelector = createSelector(
+  [
+    layersTopologyIdsSelector,
+    state => state.get('pinnedMetricType'),
+    ...times(RESOURCE_VIEW_MAX_LAYERS, index => (
+      state => state.getIn(['nodesByTopology', layersTopologyIdsSelector(state).get(index)])
+    ))
+  ],
+  (layersTopologyIds, pinnedMetricType, ...topologiesNodes) => {
+    let nodesByTopology = makeMap();
+    let lastLayerTopologyId = null;
+
+    topologiesNodes.forEach((topologyNodes, index) => {
+      const layerTopologyId = layersTopologyIds.get(index);
+      const decoratedTopologyNodes = (topologyNodes || makeMap())
+        .map(node => node.set('directParentTopologyId', lastLayerTopologyId))
+        .map(node => node.set('topologyId', layerTopologyId))
+        .map(node => node.set('metricType', pinnedMetricType))
+        .map(node => node.set('withCapacity', layerTopologyId === 'hosts'))
+        .map(nodeResourceBoxDecorator)
+        .map(nodeParentNodeDecorator)
+        .map(nodeColorDecorator);
+      const filteredTopologyNodes = decoratedTopologyNodes
+        .map(node => node.set('meta', node))
+        .filter(node => node.get('parentNodeId') || index === 0)
+        .filter(node => node.get('width'));
+
+      nodesByTopology = nodesByTopology.set(layerTopologyId, filteredTopologyNodes);
+      lastLayerTopologyId = layerTopologyId;
+    });
+
+    return nodesByTopology;
+  }
+);
+
+export const positionedNodesByTopologySelector = createSelector(
+  [
+    layersTopologyIdsSelector,
+    decoratedNodesByTopologySelector,
+    layersVerticalPositionSelector,
+  ],
+  (layersTopologyIds, decoratedNodesByTopology, layersVerticalPosition) => {
+    let result = makeMap();
+
+    layersTopologyIds.forEach((layerTopologyId, index) => {
+      const decoratedNodes = decoratedNodesByTopology.get(layerTopologyId, makeMap());
+      const buckets = decoratedNodes.groupBy(node => node.get('parentNodeId'));
+      const y = layersVerticalPosition.get(layerTopologyId);
+
+      buckets.forEach((bucket, parentNodeId) => {
+        const parentTopologyId = layersTopologyIds.get(index - 1);
+        const sortedBucket = bucket.sortBy(nodeWeight);
+
+        let x = result.getIn([parentTopologyId, parentNodeId, 'x'], 0);
+
+        sortedBucket.forEach((node, nodeId) => {
+          const positionedNode = node.merge(makeMap({ x, y }));
+          result = result.setIn([layerTopologyId, nodeId], positionedNode);
+          x += node.get('width');
+        });
+      });
+    });
+
+    return result;
+  }
+);