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
2026-08-18 20:07:06 +00:00 · 2017-03-24 14:51:53 +01:00
parent 8814e856e0
commit 69fd397217
50 changed files with 1592 additions and 568 deletions
@@ -0,0 +1,31 @@
+import React from 'react';
+import pick from 'lodash/pick';
+
+import { applyTransform } from '../../utils/transform-utils';
+import {
+  RESOURCES_LAYER_TITLE_WIDTH,
+  RESOURCES_LAYER_HEIGHT,
+} from '../../constants/styles';
+
+
+export default class NodeResourcesLayerTopology extends React.Component {
+  render() {
+    // This component always has a fixed horizontal position and width,
+    // so we only apply the vertical zooming transformation to match the
+    // vertical position and height of the resource boxes.
+    const verticalTransform = pick(this.props.transform, ['translateY', 'scaleY']);
+    const { width, height, y } = applyTransform(verticalTransform, {
+      width: RESOURCES_LAYER_TITLE_WIDTH,
+      height: RESOURCES_LAYER_HEIGHT,
+      y: this.props.verticalPosition,
+    });
+
+    return (
+      <foreignObject width={width} height={height} y={y}>
+        <div className="node-resources-layer-topology" style={{ lineHeight: `${height}px` }}>
+          {this.props.topologyId}
+        </div>
+      </foreignObject>
+    );
+  }
+}
@@ -0,0 +1,53 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Map as makeMap } from 'immutable';
+
+import NodeResourcesMetricBox from './node-resources-metric-box';
+import NodeResourcesLayerTopology from './node-resources-layer-topology';
+import {
+  layerVerticalPositionByTopologyIdSelector,
+  layoutNodesByTopologyIdSelector,
+} from '../../selectors/resource-view/layout';
+
+
+class NodesResourcesLayer extends React.Component {
+  render() {
+    const { layerVerticalPosition, topologyId, transform, layoutNodes } = this.props;
+
+    return (
+      <g className="node-resources-layer">
+        <g className="node-resources-metric-boxes">
+          {layoutNodes.toIndexedSeq().map(node => (
+            <NodeResourcesMetricBox
+              key={node.get('id')}
+              color={node.get('color')}
+              label={node.get('label')}
+              metricSummary={node.get('metricSummary')}
+              width={node.get('width')}
+              height={node.get('height')}
+              x={node.get('offset')}
+              y={layerVerticalPosition}
+              transform={transform}
+            />
+          ))}
+        </g>
+        {!layoutNodes.isEmpty() && <NodeResourcesLayerTopology
+          verticalPosition={layerVerticalPosition}
+          transform={transform}
+          topologyId={topologyId}
+        />}
+      </g>
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+  return {
+    layerVerticalPosition: layerVerticalPositionByTopologyIdSelector(state).get(props.topologyId),
+    layoutNodes: layoutNodesByTopologyIdSelector(state).get(props.topologyId, makeMap()),
+  };
+}
+
+export default connect(
+  mapStateToProps
+)(NodesResourcesLayer);
@@ -0,0 +1,33 @@
+import React from 'react';
+
+
+export default class NodeResourcesMetricBoxInfo extends React.Component {
+  humanizedMetricInfo() {
+    const { humanizedTotalCapacity, humanizedAbsoluteConsumption,
+      humanizedRelativeConsumption, showCapacity, format } = this.props.metricSummary.toJS();
+    const showExtendedInfo = showCapacity && format !== 'percent';
+
+    return (
+      <span>
+        <strong>
+          {showExtendedInfo ? humanizedRelativeConsumption : humanizedAbsoluteConsumption}
+        </strong> used
+        {showExtendedInfo && <i>{' - '}
+          ({humanizedAbsoluteConsumption} / <strong>{humanizedTotalCapacity}</strong>)
+        </i>}
+      </span>
+    );
+  }
+
+  render() {
+    const { width, x, y } = this.props;
+    return (
+      <foreignObject x={x} y={y} width={width} height="45px">
+        <div className="node-resources-metric-box-info">
+          <span className="wrapper label truncate">{this.props.label}</span>
+          <span className="wrapper consumption truncate">{this.humanizedMetricInfo()}</span>
+        </div>
+      </foreignObject>
+    );
+  }
+}
@@ -0,0 +1,111 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import NodeResourcesMetricBoxInfo from './node-resources-metric-box-info';
+import { applyTransform } from '../../utils/transform-utils';
+import {
+  RESOURCES_LAYER_TITLE_WIDTH,
+  RESOURCES_LABEL_MIN_SIZE,
+  RESOURCES_LABEL_PADDING,
+} from '../../constants/styles';
+
+
+// Transforms the rectangle box according to the zoom state forwarded by
+// the zooming wrapper. Two main reasons why we're doing it per component
+// instead of on the parent group are:
+//   1. Due to single-precision SVG coordinate system implemented by most browsers,
+//      the resource boxes would be incorrectly rendered on extreme zoom levels (it's
+//      not just about a few pixels here and there, the whole layout gets screwed). So
+//      we don't actually use the native SVG transform but transform the coordinates
+//      ourselves (with `applyTransform` helper).
+//   2. That also enables us to do the resources info label clipping, which would otherwise
+//      not be possible with pure zooming.
+//
+// The downside is that the rendering becomes slower as the transform prop needs to be forwarded
+// down to this component, so a lot of stuff gets rerendered/recalculated on every zoom action.
+// On the other hand, this enables us to easily leave out the nodes that are not in the viewport.
+const transformedDimensions = (props) => {
+  const { width, height, x, y } = applyTransform(props.transform, props);
+
+  // Trim the beginning of the resource box just after the layer topology
+  // name to the left and the viewport width to the right. That enables us
+  // to make info tags 'sticky', but also not to render the nodes with no
+  // visible part in the viewport.
+  const xStart = Math.max(RESOURCES_LAYER_TITLE_WIDTH, x);
+  const xEnd = Math.min(x + width, props.viewportWidth);
+
+  // Update the horizontal transform with trimmed values.
+  return {
+    width: xEnd - xStart,
+    height,
+    x: xStart,
+    y,
+  };
+};
+
+class NodeResourcesMetricBox extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = transformedDimensions(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState(transformedDimensions(nextProps));
+  }
+
+  defaultRectProps(relativeHeight = 1) {
+    const { x, y, width, height } = this.state;
+    const translateY = height * (1 - relativeHeight);
+    return {
+      transform: `translate(0, ${translateY})`,
+      opacity: this.props.contrastMode ? 1 : 0.85,
+      stroke: this.props.contrastMode ? 'black' : 'white',
+      height: height * relativeHeight,
+      width,
+      x,
+      y,
+    };
+  }
+
+  render() {
+    const { x, y, width } = this.state;
+    const { label, color, metricSummary } = this.props;
+    const { showCapacity, relativeConsumption, type } = metricSummary.toJS();
+
+    const showInfo = width >= RESOURCES_LABEL_MIN_SIZE;
+    const showNode = width >= 1; // hide the thin nodes
+
+    // Don't display the nodes which are less than 1px wide.
+    // TODO: Show `+ 31 nodes` kind of tag in their stead.
+    if (!showNode) return null;
+
+    const resourceUsageTooltipInfo = showCapacity ?
+      metricSummary.get('humanizedRelativeConsumption') :
+      metricSummary.get('humanizedAbsoluteConsumption');
+
+    return (
+      <g className="node-resources-metric-box">
+        <title>{label} - {type} usage at {resourceUsageTooltipInfo}</title>
+        {showCapacity && <rect className="frame" {...this.defaultRectProps()} />}
+        <rect className="bar" fill={color} {...this.defaultRectProps(relativeConsumption)} />
+        {showInfo && <NodeResourcesMetricBoxInfo
+          label={label}
+          metricSummary={metricSummary}
+          width={width - (2 * RESOURCES_LABEL_PADDING)}
+          x={x + RESOURCES_LABEL_PADDING}
+          y={y + RESOURCES_LABEL_PADDING}
+        />}
+      </g>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    contrastMode: state.get('contrastMode'),
+    viewportWidth: state.getIn(['viewport', 'width']),
+  };
+}
+
+export default connect(mapStateToProps)(NodeResourcesMetricBox);