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/decorators/node.js

@@ -0,0 +1,65 @@
+import { Map as makeMap } from 'immutable';
+
+import { getNodeColor } from '../utils/color-utils';
+import { formatMetricSvg } from '../utils/string-utils';
+import { RESOURCES_LAYER_HEIGHT } from '../constants/styles';
+
+
+export function nodeResourceViewColorDecorator(node) {
+  // Color lightness is normally determined from the node label. However, in the resource view
+  // mode, we don't want to vary the lightness so we just always forward the empty string instead.
+  return node.set('color', getNodeColor(node.get('rank'), '', node.get('pseudo')));
+}
+
+// Decorates the resource node with dimensions taken from its metric summary.
+export function nodeResourceBoxDecorator(node) {
+  const metricSummary = node.get('metricSummary', makeMap());
+  const width = metricSummary.get('showCapacity') ?
+    metricSummary.get('totalCapacity') :
+    metricSummary.get('absoluteConsumption');
+  const height = RESOURCES_LAYER_HEIGHT;
+
+  return node.merge(makeMap({ width, height }));
+}
+
+// Decorates the node with the summary info of its metric of a fixed type.
+export function nodeMetricSummaryDecoratorByType(metricType, showCapacity) {
+  return (node) => {
+    const metric = node
+      .get('metrics', makeMap())
+      .find(m => m.get('label') === metricType);
+
+    // 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 relativeConsumption = absoluteConsumption / totalCapacity;
+    const defaultMetric = { format: metric.get('format') };
+    const percentMetric = { format: 'percent' };
+    const format = metric.get('format');
+
+    return node.set('metricSummary', makeMap({
+      showCapacity,
+      type: metricType,
+      humanizedTotalCapacity: formatMetricSvg(totalCapacity, defaultMetric),
+      humanizedAbsoluteConsumption: formatMetricSvg(absoluteConsumption, defaultMetric),
+      humanizedRelativeConsumption: formatMetricSvg(100 * relativeConsumption, percentMetric),
+      totalCapacity,
+      absoluteConsumption,
+      relativeConsumption,
+      format,
+    }));
+  };
+}
+
+// Decorates the node with the ID of the parent node belonging to a fixed topology.
+export function nodeParentDecoratorByTopologyId(topologyId) {
+  return (node) => {
+    const parent = node
+      .get('parents', makeMap())
+      .find(p => p.get('topologyId') === topologyId);
+
+    return parent ? node.set('parentNodeId', parent.get('id')) : node;
+  };
+}