Move truncation of docker ids to FE to allow full value in tooltips

client/app/scripts/components/matched-results.js

@@ -18,7 +18,8 @@ class MatchedResults extends React.Component {
           <span className="matched-results-match-label">
             {match.label}:
           </span>
-          <MatchedText text={text} match={match} maxLength={MAX_MATCH_LENGTH} />
+          <MatchedText text={text} match={match} maxLength={MAX_MATCH_LENGTH}
+            truncate={match.truncate} />
         </div>
       </div>
     );

client/app/scripts/components/matched-text.js

@@ -82,15 +82,20 @@ function truncateChunks(chunks, text, maxLength) {
 class MatchedText extends React.Component {
 
   render() {
-    const { match, text, maxLength } = this.props;
+    const { match, text, truncate, maxLength } = this.props;
+
+    const showFullValue = !truncate || match && match.start + match.length > truncate;
+    const displayText = showFullValue ? text : text.slice(0, truncate);
 
     if (!match) {
-      return <span>{text}</span>;
+      return <span>{displayText}</span>;
     }
 
+    const chunks = chunkText(displayText, match);
+
     return (
       <span className="matched-text" title={text}>
-        {truncateChunks(chunkText(text, match), text, maxLength).map((chunk, index) => {
+        {truncateChunks(chunks, displayText, maxLength).map((chunk, index) => {
           if (chunk.match) {
             return (
               <span className="match" key={index}>

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

@@ -42,7 +42,10 @@ export default class NodeDetailsInfo extends React.Component {
               {field.label}
             </div>
             <div className="node-details-info-field-value truncate" title={field.value}>
-              <MatchedText text={field.value} match={matches.get(field.id)} />
+              <MatchedText
+                text={field.value}
+                truncate={field.truncate}
+                match={matches.get(field.id)} />
             </div>
           </div>
         ))}

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

@@ -64,15 +64,15 @@ function matchPrefix(label, prefix) {
  * no match).
  * Returns a new instance of nodeMatches.
  */
-function findNodeMatch(nodeMatches, keyPath, text, query, prefix, label) {
+function findNodeMatch(nodeMatches, keyPath, text, query, prefix, label, truncate) {
   if (!prefix || matchPrefix(label, prefix)) {
     const queryRe = makeRegExp(query);
     const matches = text.match(queryRe);
     if (matches) {
       const firstMatch = matches[0];
       const index = text.search(queryRe);
       nodeMatches = nodeMatches.setIn(keyPath,
-        {text, label, start: index, length: firstMatch.length});
+        {text, label, start: index, length: firstMatch.length, truncate});
     }
   }
   return nodeMatches;
@@ -135,7 +135,7 @@ export function searchTopology(nodes, { prefix, query, metric, comp, value }) {
         node.get('metadata').forEach(field => {
           const keyPath = [nodeId, 'metadata', field.get('id')];
           nodeMatches = findNodeMatch(nodeMatches, keyPath, field.get('value'),
-            query, prefix, field.get('label'));
+            query, prefix, field.get('label'), field.get('truncate'));
         });
       }
 

render/detailed/metadata_test.go

@@ -27,7 +27,7 @@ func TestNodeMetadata(t *testing.T) {
 				Add(docker.ContainerIPs, report.MakeStringSet("10.10.10.0/24", "10.10.10.1/24")),
 			),
 			want: []report.MetadataRow{
-				{ID: docker.ContainerID, Label: "ID", Value: fixture.ClientContainerID, Priority: 1},
+				{ID: docker.ContainerID, Label: "ID", Value: fixture.ClientContainerID, Priority: 1, Truncate: 12},
 				{ID: docker.ContainerStateHuman, Label: "State", Value: "running", Priority: 2},
 				{ID: docker.ContainerIPs, Label: "IPs", Value: "10.10.10.0/24, 10.10.10.1/24", Priority: 15},
 			},

render/detailed/node_test.go

@@ -198,9 +198,9 @@ func TestMakeDetailedContainerNode(t *testing.T) {
 			Linkable:   true,
 			Pseudo:     false,
 			Metadata: []report.MetadataRow{
-				{ID: "docker_container_id", Label: "ID", Value: fixture.ServerContainerID, Priority: 1},
+				{ID: "docker_container_id", Label: "ID", Value: fixture.ServerContainerID, Priority: 1, Truncate: 12},
 				{ID: "docker_container_state_human", Label: "State", Value: "running", Priority: 2},
-				{ID: "docker_image_id", Label: "Image ID", Value: fixture.ServerContainerImageID, Priority: 11},
+				{ID: "docker_image_id", Label: "Image ID", Value: fixture.ServerContainerImageID, Priority: 11, Truncate: 12},
 			},
 			Metrics: []report.MetricRow{
 				{

render/detailed/summary_test.go

@@ -127,7 +127,7 @@ func TestMakeNodeSummary(t *testing.T) {
 				Shape:      "hexagon",
 				Linkable:   true,
 				Metadata: []report.MetadataRow{
-					{ID: docker.ContainerID, Label: "ID", Value: fixture.ClientContainerID, Priority: 1},
+					{ID: docker.ContainerID, Label: "ID", Value: fixture.ClientContainerID, Priority: 1, Truncate: 12},
 				},
 				Adjacency: report.MakeIDList(fixture.ServerContainerNodeID),
 			},

report/metadata_template.go

@@ -45,13 +45,11 @@ func (t MetadataTemplate) MetadataRows(n Node) []MetadataRow {
 		from = fromCounters
 	}
 	if val, ok := from(n, t.ID); ok {
-		if t.Truncate > 0 && len(val) > t.Truncate {
-			val = val[:t.Truncate]
-		}
 		return []MetadataRow{{
 			ID:       t.ID,
 			Label:    t.Label,
 			Value:    val,
+			Truncate: t.Truncate,
 			Datatype: t.Datatype,
 			Priority: t.Priority,
 		}}
@@ -89,6 +87,7 @@ type MetadataRow struct {
 	Value    string  `json:"value"`
 	Priority float64 `json:"priority,omitempty"`
 	Datatype string  `json:"dataType,omitempty"`
+	Truncate int     `json:"truncate,omitempty"`
 }
 
 // Copy returns a value copy of a metadata row.