diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js index 5b48831ab..2f17cd33c 100644 --- a/client/app/scripts/components/node-details/node-details-table-row.js +++ b/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}> - {} + {intersperse(field.relatives.map(relative => + + ), ' ')} ); } - return ; + return ( + + ); } // empty cell to complete the row for proper hover - return ; + return ( + + ); }); } - export default class NodeDetailsTableRow extends React.Component { constructor(props, context) { super(props, context); diff --git a/client/app/scripts/utils/array-utils.js b/client/app/scripts/utils/array-utils.js index 0f962755c..2ad6218a6 100644 --- a/client/app/scripts/utils/array-utils.js +++ b/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: [, ].join(' ') + // But you can't because React Components aren't strings. + // + // intersperse([, ], ' ') + // Will get you there! + // + return [].concat(...items.map(e => [value, e])).slice(1); +}