Adds support for filtering graph/table by relatives

client/app/scripts/charts/node.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { Map as makeMap } from 'immutable';
+import { Map as makeMap, List as makeList } from 'immutable';
 
 import { clickNode, enterNode, leaveNode } from '../actions/app-actions';
 import { getNodeColor } from '../utils/color-utils';
@@ -110,6 +110,8 @@ class Node extends React.Component {
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
     };
+    const matchedNodeDetails = matches.get('metadata', makeList())
+      .concat(matches.get('parents', makeList()));
 
     return (
       <g className={nodeClassName} transform={transform}>
@@ -127,7 +129,7 @@ class Node extends React.Component {
               <div className={subLabelClassName}>
                 <MatchedText text={subLabel} match={matches.get('sublabel')} />
               </div>
-              {!blurred && <MatchedResults matches={matches.get('metadata')} />}
+              {!blurred && <MatchedResults matches={matchedNodeDetails} />}
             </div>
           </foreignObject>}
 

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

@@ -158,7 +158,9 @@ export class NodeDetails extends React.Component {
               <MatchedText text={details.label} match={nodeMatches.get('label')} />
             </h2>
             <div className="node-details-header-relatives">
-              {details.parents && <NodeDetailsRelatives relatives={details.parents} />}
+              {details.parents && <NodeDetailsRelatives
+                matches={nodeMatches.get('parents')}
+                relatives={details.parents} />}
             </div>
           </div>
         </div>

client/app/scripts/components/node-details/node-details-relatives-link.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 
 import { clickRelative } from '../../actions/app-actions';
+import MatchedText from '../matched-text';
 
 class NodeDetailsRelativesLink extends React.Component {
 
@@ -21,7 +22,7 @@ class NodeDetailsRelativesLink extends React.Component {
     const title = `View in ${this.props.topologyId}: ${this.props.label}`;
     return (
       <span className="node-details-relatives-link" title={title} onClick={this.handleClick}>
-        {this.props.label}
+        <MatchedText text={this.props.label} match={this.props.match} />
       </span>
     );
   }

client/app/scripts/components/node-details/node-details-relatives.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Map as makeMap } from 'immutable';
 
 import NodeDetailsRelativesLink from './node-details-relatives-link';
 
@@ -20,7 +21,9 @@ export default class NodeDetailsRelatives extends React.Component {
   }
 
   render() {
-    let relatives = this.props.relatives;
+    let { relatives } = this.props;
+    const { matches = makeMap() } = this.props;
+
     const limited = this.state.limit > 0 && relatives.length > this.state.limit;
     const showLimitAction = limited || (this.state.limit === 0
       && relatives.length > this.DEFAULT_LIMIT);
@@ -31,7 +34,11 @@ export default class NodeDetailsRelatives extends React.Component {
 
     return (
       <div className="node-details-relatives">
-        {relatives.map(relative => <NodeDetailsRelativesLink {...relative} key={relative.id} />)}
+        {relatives.map(relative => (
+          <NodeDetailsRelativesLink
+            key={relative.id}
+            match={matches.get(relative.id)}
+            {...relative} />))}
         {showLimitAction && <span className="node-details-relatives-more"
           onClick={this.handleLimitClick}>{limitActionText}</span>}
       </div>

client/app/scripts/utils/search-utils.js

@@ -139,6 +139,15 @@ export function searchTopology(nodes, { prefix, query, metric, comp, value }) {
         });
       }
 
+      // parents and relatives
+      if (node.get('parents')) {
+        node.get('parents').forEach(parent => {
+          const keyPath = [nodeId, 'parents', parent.get('id')];
+          nodeMatches = findNodeMatch(nodeMatches, keyPath, parent.get('label'),
+            query, prefix, parent.get('topologyId'));
+        });
+      }
+
       // tables (envvars and labels)
       const tables = node.get('tables');
       if (tables) {