Merge pull request #2087 from weaveworks/1982-control-indicator

Add control status icon to Terminal header
weaveworks · Dec 20, 2016 · 32bb7c3 · 32bb7c3
2 parents 293c87f + 2b83ebd
commit 32bb7c3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
@@ -367,7 +367,8 @@ export function doControl(nodeId, control) {
   return (dispatch) => {
     dispatch({
       type: ActionTypes.DO_CONTROL,
-      nodeId
+      nodeId,
+      control
     });
     doControlRequest(nodeId, control, dispatch);
   };
@@ -591,7 +592,7 @@ export function receiveControlPipeFromParams(pipeId, rawTty, resizeTtyControl) {
   };
 }
 
-export function receiveControlPipe(pipeId, nodeId, rawTty, resizeTtyControl) {
+export function receiveControlPipe(pipeId, nodeId, rawTty, resizeTtyControl, control) {
   return (dispatch, getState) => {
     const state = getState();
     if (state.get('nodeDetails').last()
@@ -611,7 +612,8 @@ export function receiveControlPipe(pipeId, nodeId, rawTty, resizeTtyControl) {
       nodeId,
       pipeId,
       rawTty,
-      resizeTtyControl
+      resizeTtyControl,
+      control
     });
 
     updateRoute(getState);

diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
@@ -315,6 +315,7 @@ class Terminal extends React.Component {
             title="Close" className="terminal-header-tools-item-icon fa fa-close"
             onClick={this.handleCloseClick} />
         </div>
+        {this.getControlStatusIcon()}
         <span className="terminal-header-title">{this.getTitle()}</span>
       </div>
     );
@@ -386,12 +387,26 @@ class Terminal extends React.Component {
       </div>
     );
   }
+  getControlStatusIcon() {
+    const icon = this.props.controlStatus && this.props.controlStatus.get('control').icon;
+    return (
+      <span
+        style={{marginRight: '8px', width: '14px'}}
+        className={classNames('fa', {[icon]: icon})}
+      />
+    );
+  }
 }
 
+function mapStateToProps(state, ownProps) {
+  const controlStatus = state.get('controlPipes').find((pipe) =>
+    pipe.get('nodeId') === ownProps.pipe.get('nodeId')
+  );
+  return { controlStatus };
+}
 
 Terminal.defaultProps = {
   connect: true
 };
 
-
-export default connect()(Terminal);
+export default connect(mapStateToProps)(Terminal);
diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js
@@ -469,6 +469,7 @@ export function rootReducer(state = initialState, action) {
         nodeId: action.nodeId,
         raw: action.rawTty,
         resizeTtyControl: action.resizeTtyControl,
+        control: action.control
       }));
     }
 

diff --git a/client/app/scripts/utils/web-api-utils.js b/client/app/scripts/utils/web-api-utils.js
@@ -238,7 +238,9 @@ export function doControlRequest(nodeId, control, dispatch) {
             res.pipe,
             nodeId,
             res.raw_tty,
-            resizeTtyControl));
+            resizeTtyControl,
+            control
+          ));
         }
         if (res.removedNode) {
           dispatch(receiveControlNodeRemoved(nodeId));