Merge pull request #2648 from weaveworks/2627-node-grid-multiple-relatives

Show multiple relatives in the nodes-grid view

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
+import { groupBy, mapValues } from 'lodash';
+import { intersperse } from '../../utils/array-utils';
+
 
 import NodeDetailsTableNodeLink from './node-details-table-node-link';
 import NodeDetailsTableNodeMetric from './node-details-table-node-metric';
 import { formatDataType } from '../../utils/string-utils';
 
 function getValuesForNode(node) {
-  const values = {};
+  let values = {};
   ['metrics', 'metadata'].forEach((collection) => {
     if (node[collection]) {
       node[collection].forEach((field) => {
@@ -17,22 +20,29 @@ function getValuesForNode(node) {
     }
   });
 
-  (node.parents || []).forEach((p) => {
-    values[p.topologyId] = {
-      id: p.topologyId,
-      label: p.topologyId,
-      value: p.label,
-      relative: p,
+  if (node.parents) {
+    const byTopologyId = groupBy(node.parents, parent => parent.topologyId);
+    const relativesByTopologyId = mapValues(byTopologyId, (relatives, topologyId) => ({
+      id: topologyId,
+      label: topologyId,
+      value: relatives.map(relative => relative.label).join(', '),
       valueType: 'relatives',
+      relatives,
+    }));
+
+    values = {
+      ...values,
+      ...relativesByTopologyId,
     };
-  });
+  }
 
   return values;
 }
 
+
 function renderValues(node, columns = [], columnStyles = [], timestamp = null) {
   const fields = getValuesForNode(node);
-  return columns.map(({id}, i) => {
+  return columns.map(({ id }, i) => {
     const field = fields[id];
     const style = columnStyles[i];
     if (field) {
@@ -55,18 +65,28 @@ function renderValues(node, columns = [], columnStyles = [], timestamp = null) {
             title={field.value}
             style={style}
             key={field.id}>
-            {<NodeDetailsTableNodeLink linkable nodeId={field.relative.id} {...field.relative} />}
+            {intersperse(field.relatives.map(relative =>
+              <NodeDetailsTableNodeLink
+                key={relative.id}
+                linkable
+                nodeId={relative.id}
+                {...relative}
+              />
+            ), ' ')}
           </td>
         );
       }
-      return <NodeDetailsTableNodeMetric style={style} key={field.id} {...field} />;
+      return (
+        <NodeDetailsTableNodeMetric style={style} key={field.id} {...field} />
+      );
     }
     // empty cell to complete the row for proper hover
-    return <td className="node-details-table-node-value" style={style} key={id} />;
+    return (
+      <td className="node-details-table-node-value" style={style} key={id} />
+    );
   });
 }
 
-
 export default class NodeDetailsTableRow extends React.Component {
   constructor(props, context) {
     super(props, context);

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

@@ -26,3 +26,16 @@ export function moveElement(array, from, to) {
   }
   return insertElement(removeElement(array, from), to, array[from]);
 }
+
+export function intersperse(items, value) {
+  //
+  // intersperse([1, 2, 3], 'a') => [1, 'a', 2, 'a', 3]
+  //
+  // Useful for when you wanna do: [<MyReactListItem />, <MyReactListItem />].join(' ')
+  // But you can't because React Components aren't strings.
+  //
+  // intersperse([<MyReactListItem />, <MyReactListItem />], ' ')
+  // Will get you there!
+  //
+  return [].concat(...items.map(e => [value, e])).slice(1);
+}