Merge pull request #882 from weaveworks/848-resize-terminal-on-card

Stop details cards popping up over the terminal.

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

@@ -5,6 +5,7 @@ import React from 'react';
 import { Map as makeMap } from 'immutable';
 import timely from 'timely';
 
+import { DETAILS_PANEL_WIDTH } from '../constants/styles';
 import { clickBackground } from '../actions/app-actions';
 import AppStore from '../stores/app-store';
 import Edge from './edge';
@@ -302,9 +303,8 @@ export default class NodesChart extends React.Component {
 
     // move origin node to center of viewport
     const zoomScale = state.scale;
-    const detailsWidth = 420;
     const translate = state.panTranslate;
-    const centerX = (-translate[0] + (props.width + MARGINS.left - detailsWidth) / 2) / zoomScale;
+    const centerX = (-translate[0] + (props.width + MARGINS.left - DETAILS_PANEL_WIDTH) / 2) / zoomScale;
     const centerY = (-translate[1] + (props.height + MARGINS.top) / 2) / zoomScale;
     stateNodes = stateNodes.mergeIn([props.selectedNodeId], {
       x: centerX,

client/app/scripts/components/details-card.js

@@ -1,13 +1,8 @@
 import React from 'react';
 
 import NodeDetails from './node-details';
-
-// card dimensions in px
-const marginTop = 24;
-const marginBottom = 48;
-const marginRight = 36;
-const panelWidth = 420;
-const offset = 8;
+import { DETAILS_PANEL_WIDTH as WIDTH, DETAILS_PANEL_OFFSET as OFFSET,
+  DETAILS_PANEL_MARGINS as MARGINS } from '../constants/styles';
 
 export default class DetailsCard extends React.Component {
 
@@ -27,21 +22,21 @@ export default class DetailsCard extends React.Component {
   render() {
     let transform;
     const origin = this.props.origin;
-    const panelHeight = window.innerHeight - marginBottom - marginTop;
+    const panelHeight = window.innerHeight - MARGINS.bottom - MARGINS.top;
     if (origin && !this.state.mounted) {
       // render small panel near origin, will transition into normal panel after being mounted
-      const scaleY = origin.height / (window.innerHeight - marginBottom - marginTop) / 2;
-      const scaleX = origin.width / panelWidth / 2;
-      const centerX = window.innerWidth - marginRight - (panelWidth / 2);
-      const centerY = (panelHeight) / 2 + marginTop;
+      const scaleY = origin.height / (window.innerHeight - MARGINS.bottom - MARGINS.top) / 2;
+      const scaleX = origin.width / WIDTH / 2;
+      const centerX = window.innerWidth - MARGINS.right - (WIDTH / 2);
+      const centerY = (panelHeight) / 2 + MARGINS.top;
       const dx = (origin.left + origin.width / 2) - centerX;
       const dy = (origin.top + origin.height / 2) - centerY;
       transform = `translate(${dx}px, ${dy}px) scale(${scaleX},${scaleY})`;
     } else {
       // stack effect: shift top cards to the left, shrink lower cards vertically
-      const shiftX = -1 * this.props.index * offset;
+      const shiftX = -1 * this.props.index * OFFSET;
       const position = this.props.cardCount - this.props.index - 1; // reverse index
-      const scaleY = position === 0 ? 1 : (panelHeight - 2 * offset * position) / panelHeight;
+      const scaleY = position === 0 ? 1 : (panelHeight - 2 * OFFSET * position) / panelHeight;
       if (scaleY !== 1) {
         transform = `translateX(${shiftX}px) scaleY(${scaleY})`;
       } else {

client/app/scripts/components/embedded-terminal.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { getNodeColor, getNodeColorDark } from '../utils/color-utils';
 import Terminal from './terminal';
+import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS, DETAILS_PANEL_OFFSET } from '../constants/styles';
 
 export default function EmeddedTerminal({pipe, nodeId, details}) {
   const node = details.get(nodeId);
@@ -10,12 +11,17 @@ export default function EmeddedTerminal({pipe, nodeId, details}) {
   const statusBarColor = d && getNodeColor(d.rank, d.label_major);
   const title = d && d.label_major;
 
+  const style = {
+    right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH + 10 +
+      (details.size * DETAILS_PANEL_OFFSET)
+  };
+
   // React unmount/remounts when key changes, this is important for cleaning up
   // the term.js and creating a new one for the new pipe.
   return (
-    <div className="terminal-embedded">
+    <div className="terminal-embedded" style={style}>
       <Terminal key={pipe.id} pipe={pipe} titleBarColor={titleBarColor}
-        statusBarColor={statusBarColor} title={title} />
+        statusBarColor={statusBarColor} containerMargin={style.right} title={title} />
     </div>
   );
 }

client/app/scripts/components/terminal.js

@@ -52,16 +52,16 @@ function terminalCellSize(wrapperNode, rows, cols) {
   return {pixelPerCol, pixelPerRow};
 }
 
-function openNewWindow(url, minWidth = 200) {
+function openNewWindow(url, bcr, minWidth = 200) {
   const screenLeft = window.screenX || window.screenLeft;
   const screenTop = window.screenY || window.screenTop;
   const popoutWindowToolbarHeight = 51;
   // TODO replace this stuff w/ looking up bounding box.
   const windowOptions = {
-    width: Math.max(minWidth, window.innerWidth - 420 - 36 - 36 - 10),
-    height: window.innerHeight - 24 - 48 - popoutWindowToolbarHeight,
-    left: screenLeft + 36,
-    top: screenTop + (window.outerHeight - window.innerHeight) + 24,
+    width: Math.max(minWidth, bcr.width),
+    height: bcr.height - popoutWindowToolbarHeight,
+    left: screenLeft + bcr.left,
+    top: screenTop + (window.outerHeight - window.innerHeight) + bcr.top,
     location: 'no',
   };
 
@@ -184,6 +184,14 @@ export default class Terminal extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    const containerMarginChanged = nextProps.containerMargin !== this.props.containerMargin;
+    log(nextProps.containerMargin);
+    if (containerMarginChanged) {
+      this.handleResize();
+    }
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const sizeChanged = (
       prevState.cols !== this.state.cols ||
@@ -211,8 +219,9 @@ export default class Terminal extends React.Component {
     const paramString = JSON.stringify(this.props);
     clickCloseTerminal(this.getPipeId());
 
+    const bcr = ReactDOM.findDOMNode(this).getBoundingClientRect();
     const minWidth = this.state.pixelPerCol * 80 + (8 * 2);
-    openNewWindow(`terminal.html#!/state/${paramString}`, minWidth);
+    openNewWindow(`terminal.html#!/state/${paramString}`, bcr, minWidth);
   }
 
   handleResize() {

client/app/scripts/constants/styles.js

@@ -0,0 +1,10 @@
+
+export const DETAILS_PANEL_WIDTH = 420;
+
+export const DETAILS_PANEL_MARGINS = {
+  top: 24,
+  bottom: 48,
+  right: 36
+};
+
+export const DETAILS_PANEL_OFFSET = 8;

client/app/scripts/stores/app-store.js

@@ -110,7 +110,7 @@ function closeNodeDetails(nodeId) {
     const popNodeId = nodeId || nodeDetails.keySeq().last();
     // remove pipe if it belongs to the node being closed
     controlPipes = controlPipes.filter(pipe => {
-      return pipe.nodeId !== popNodeId;
+      return pipe.get('nodeId') !== popNodeId;
     });
     nodeDetails = nodeDetails.delete(popNodeId);
   }
@@ -240,7 +240,7 @@ export class AppStore extends Store {
   }
 
   getTopCardNodeId() {
-    return nodeDetails.last().id;
+    return nodeDetails.last() && nodeDetails.last().id;
   }
 
   getNodes() {
@@ -362,6 +362,7 @@ export class AppStore extends Store {
 
     case ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE:
       nodeDetails = nodeDetails.filter((v, k) => k === payload.nodeId);
+      controlPipes = controlPipes.clear();
       selectedNodeId = payload.nodeId;
       if (payload.topologyId !== currentTopologyId) {
         setTopology(payload.topologyId);