Display consistent resource consumption info in the resource view. (#2499)

client/app/scripts/decorators/node.js

@@ -23,7 +23,7 @@ export function nodeResourceBoxDecorator(node) {
 }
 
 // Decorates the node with the summary info of its metric of a fixed type.
-export function nodeMetricSummaryDecoratorByType(metricType, showCapacity) {
+export function nodeMetricSummaryDecoratorByType(metricType, showCapacity, scale = 1) {
   return (node) => {
     const metric = node
       .get('metrics', makeMap())
@@ -32,8 +32,9 @@ export function nodeMetricSummaryDecoratorByType(metricType, showCapacity) {
     // Do nothing if there is no metric info.
     if (!metric) return node;
 
-    const absoluteConsumption = metric.get('value');
-    const totalCapacity = showCapacity ? metric.get('max') : absoluteConsumption;
+    const absoluteConsumption = metric.get('value') * scale;
+    const historicalMaxValue = metric.get('max') * scale;
+    const totalCapacity = showCapacity ? historicalMaxValue : absoluteConsumption;
     const relativeConsumption = absoluteConsumption / totalCapacity;
     const defaultMetric = { format: metric.get('format') };
     const percentMetric = { format: 'percent' };

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

@@ -101,7 +101,11 @@ const decoratedNodesByTopologySelector = createSelector(
         // TODO: Also make an exception for uncontained nodes (e.g. processes).
         .filter(node => parentTopologyNodes.has(node.get('parentNodeId')) || isBaseLayer)
         // Filter out the nodes with no metric summary data, which is needed to render the node.
-        .filter(node => node.get('metricSummary'));
+        .filter(node => node.get('metricSummary'))
+        // Filter out nodes with zero-width, as they will never be shown, no matter how much we
+        // zoom in. The example is every node consuming less than 0.005% CPU, as the 2-digit
+        // precision will round it down to zero.
+        .filter(node => node.get('width') > 0);
 
       nodesByTopology = nodesByTopology.set(layerTopologyId, filteredTopologyNodes);
       parentLayerTopologyId = layerTopologyId;
@@ -158,11 +162,20 @@ export const layoutNodesByTopologyIdSelector = createSelector(
             `resource than the node itself - shrinking by factor ${shrinkFactor}`);
           // Shrink all the children.
           nodesBucket.forEach((_, nodeId) => {
-            const node = positionedNodes.get(nodeId);
-            positionedNodes = positionedNodes.mergeIn([nodeId], makeMap({
+            let node = positionedNodes.get(nodeId);
+            // Shrink the width of the resource box and update its relative offset.
+            node = node.merge(makeMap({
               offset: ((node.get('offset') - parentOffset) * shrinkFactor) + parentOffset,
               width: node.get('width') * shrinkFactor,
             }));
+            // Update the metrics summary to reflect the adjusted dimensions for consistent data.
+            node = nodeMetricSummaryDecoratorByType(
+              node.getIn(['metricSummary', 'type']),
+              node.get('showCapacity'),
+              shrinkFactor
+            )(node);
+            // Update the node in the layout.
+            positionedNodes = positionedNodes.mergeIn([nodeId], node);
           });
         }
       });