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/constants/action-types.js

@@ -59,7 +59,7 @@ const ACTION_TYPES = [
   'SHOW_NETWORKS',
   'SET_RECEIVED_NODES_DELTA',
   'SORT_ORDER_CHANGED',
-  'SET_GRID_MODE',
+  'SET_VIEW_MODE',
   'CHANGE_INSTANCE',
   'TOGGLE_CONTRAST_MODE',
   'SHUTDOWN'

client/app/scripts/constants/naming.js

@@ -1,2 +1,8 @@
 
 export const EDGE_ID_SEPARATOR = '---';
+
+// NOTE: Inconsistent naming is a consequence of
+// keeping it backwards-compatible with the old URLs.
+export const GRAPH_VIEW_MODE = 'topo';
+export const TABLE_VIEW_MODE = 'grid';
+export const RESOURCE_VIEW_MODE = 'resource';

client/app/scripts/constants/resources.js

@@ -0,0 +1,27 @@
+
+// Cap the number of layers in the resource view to this constant. The reason why we have
+// this constant is not just about the style, but also helps us build the selectors.
+export const RESOURCE_VIEW_MAX_LAYERS = 3;
+
+// TODO: Consider fetching these from the backend.
+export const TOPOLOGIES_WITH_CAPACITY = ['hosts'];
+
+// TODO: These too should ideally be provided by the backend. Currently, we are showing
+// the same layers for all the topologies, because their number is small, but later on
+// we might be interested in fully customizing the layers' hierarchy per topology.
+export const RESOURCE_VIEW_LAYERS = {
+  hosts: ['hosts', 'containers', 'processes'],
+  containers: ['hosts', 'containers', 'processes'],
+  processes: ['hosts', 'containers', 'processes'],
+};
+
+// TODO: These are all the common metrics that appear across all the current resource view
+// topologies. The reason for taking them only is that we want to get meaningful data for all
+// the layers. These should be taken directly from the backend report, but as their info is
+// currently only contained in the nodes data, it would be hard to determine them before all
+// the nodes for all the layers have been loaded, so we'd need to change the routing logic
+// since the requirement is that one these is always pinned in the resource view.
+export const RESOURCE_VIEW_METRICS = [
+  { label: 'CPU', id: 'host_cpu_usage_percent' },
+  { label: 'Memory', id: 'host_mem_usage_bytes' },
+];

client/app/scripts/constants/styles.js

@@ -1,20 +1,20 @@
+import { GRAPH_VIEW_MODE, TABLE_VIEW_MODE, RESOURCE_VIEW_MODE } from './naming';
+
 
 export const DETAILS_PANEL_WIDTH = 420;
-
+export const DETAILS_PANEL_OFFSET = 8;
 export const DETAILS_PANEL_MARGINS = {
   top: 24,
   bottom: 48,
   right: 36
 };
 
-export const DETAILS_PANEL_OFFSET = 8;
-
-export const CANVAS_MARGINS = {
-  top: 160,
-  left: 40,
-  right: 40,
-  bottom: 0,
-};
+// Resource view
+export const RESOURCES_LAYER_TITLE_WIDTH = 200;
+export const RESOURCES_LAYER_HEIGHT = 150;
+export const RESOURCES_LAYER_PADDING = 10;
+export const RESOURCES_LABEL_MIN_SIZE = 50;
+export const RESOURCES_LABEL_PADDING = 10;
 
 // Node shapes
 export const NODE_SHAPE_HIGHLIGHT_RADIUS = 70;
@@ -30,6 +30,13 @@ export const NODE_SHAPE_DOT_RADIUS = 10;
 //      are given on a small unit scale as foreign objects in SVG.
 export const NODE_BASE_SIZE = 100;
 
+
+export const CANVAS_MARGINS = {
+  [GRAPH_VIEW_MODE]: { top: 160, left: 40, right: 40, bottom: 150 },
+  [TABLE_VIEW_MODE]: { top: 160, left: 40, right: 40, bottom: 30 },
+  [RESOURCE_VIEW_MODE]: { top: 160, left: 210, right: 40, bottom: 50 },
+};
+
 // Node details table constants
 export const NODE_DETAILS_TABLE_CW = {
   XS: '32px',