Only show key metadata by default. Hide rest in a drawer.

To make the interface cleaner, we can hide some non-key metadata by
default.

This needs styling, js testing, and probably a js refactor.

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

@@ -1,10 +1,30 @@
 import React from 'react';
 
 export default class NodeDetailsInfo extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      expanded: false
+    };
+    this.handleClickMore = this.handleClickMore.bind(this);
+  }
+
+  handleClickMore(ev) {
+    ev.preventDefault();
+    const expanded = !this.state.expanded;
+    this.setState({expanded});
+  }
+
   render() {
+    const rows = (this.props.rows || []);
+    const prime = rows.filter(row => row.prime);
+    const overflow = rows.filter(row => !row.prime);
+    const showOverflow = overflow.length > 0 && !this.state.expanded;
+    const showLess = this.state.expanded;
     return (
       <div className="node-details-info">
-        {this.props.rows && this.props.rows.map(field => {
+        {prime && prime.map(field => {
           return (
             <div className="node-details-info-field" key={field.id}>
               <div className="node-details-info-field-label truncate" title={field.label}>
@@ -18,6 +38,22 @@ export default class NodeDetailsInfo extends React.Component {
             </div>
           );
         })}
+        {this.state.expanded && overflow && overflow.map(field => {
+          return (
+            <div className="node-details-info-field" key={field.id}>
+              <div className="node-details-info-field-label truncate" title={field.label}>
+                {field.label}
+              </div>
+              <div className="node-details-info-field-value" title={field.value}>
+                <div className="truncate">
+                  {field.value}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        {showOverflow && <div className="node-details-info-overflow-expand" onClick={this.handleClickMore}>Show more</div>}
+        {showLess && <div className="node-details-info-expand" onClick={this.handleClickMore}>Show less</div>}
       </div>
     );
   }

render/detailed/metadata.go

@@ -16,27 +16,27 @@ import (
 
 var (
 	processNodeMetadata = []MetadataRowTemplate{
-		Latest{ID: process.PID},
+		Latest{ID: process.PID, Prime: true},
+		Latest{ID: process.Cmdline, Prime: true},
 		Latest{ID: process.PPID},
-		Latest{ID: process.Cmdline},
 		Latest{ID: process.Threads},
 	}
 	containerNodeMetadata = []MetadataRowTemplate{
-		Latest{ID: docker.ContainerID, Truncate: 12},
+		Latest{ID: docker.ContainerID, Truncate: 12, Prime: true},
+		Latest{ID: docker.ContainerState, Prime: true},
+		Latest{ID: docker.ContainerCommand, Prime: true},
 		Latest{ID: docker.ImageID, Truncate: 12},
-		Latest{ID: docker.ContainerState},
 		Latest{ID: docker.ContainerUptime},
 		Latest{ID: docker.ContainerRestartCount},
 		Set{ID: docker.ContainerIPs},
 		Set{ID: docker.ContainerPorts},
 		Latest{ID: docker.ContainerCreated},
-		Latest{ID: docker.ContainerCommand},
 		Latest{ID: overlay.WeaveMACAddress},
 		Latest{ID: overlay.WeaveDNSHostname},
 	}
 	containerImageNodeMetadata = []MetadataRowTemplate{
-		Latest{ID: docker.ImageID, Truncate: 12},
-		Counter{ID: render.ContainersKey},
+		Latest{ID: docker.ImageID, Truncate: 12, Prime: true},
+		Counter{ID: render.ContainersKey, Prime: true},
 	}
 	podNodeMetadata = []MetadataRowTemplate{
 		Latest{ID: kubernetes.PodID},
@@ -44,10 +44,10 @@ var (
 		Latest{ID: kubernetes.PodCreated},
 	}
 	hostNodeMetadata = []MetadataRowTemplate{
+		Latest{ID: host.KernelVersion, Prime: true},
+		Latest{ID: host.Uptime, Prime: true},
 		Latest{ID: host.HostName},
 		Latest{ID: host.OS},
-		Latest{ID: host.KernelVersion},
-		Latest{ID: host.Uptime},
 		Set{ID: host.LocalNetworks},
 	}
 )
@@ -60,7 +60,8 @@ type MetadataRowTemplate interface {
 // Latest extracts some metadata rows from a node's Latest
 type Latest struct {
 	ID       string
-	Truncate int
+	Truncate int  // If > 0, truncate the value to this length.
+	Prime    bool // Whether the row should be shown by default
 }
 
 // MetadataRows implements MetadataRowTemplate
@@ -69,7 +70,7 @@ func (l Latest) MetadataRows(n report.Node) []MetadataRow {
 		if l.Truncate > 0 && len(val) > l.Truncate {
 			val = val[:l.Truncate]
 		}
-		return []MetadataRow{{ID: l.ID, Value: val}}
+		return []MetadataRow{{ID: l.ID, Value: val, Prime: l.Prime}}
 	}
 	return nil
 }
@@ -89,13 +90,14 @@ func (s Set) MetadataRows(n report.Node) []MetadataRow {
 
 // Counter extracts some metadata rows from a node's Counters
 type Counter struct {
-	ID string
+	ID    string
+	Prime bool
 }
 
 // MetadataRows implements MetadataRowTemplate
 func (c Counter) MetadataRows(n report.Node) []MetadataRow {
 	if val, ok := n.Counters.Lookup(c.ID); ok {
-		return []MetadataRow{{ID: c.ID, Value: strconv.Itoa(val)}}
+		return []MetadataRow{{ID: c.ID, Value: strconv.Itoa(val), Prime: c.Prime}}
 	}
 	return nil
 }
@@ -104,6 +106,7 @@ func (c Counter) MetadataRows(n report.Node) []MetadataRow {
 type MetadataRow struct {
 	ID    string
 	Value string
+	Prime bool
 }
 
 // Copy returns a value copy of a metadata row.
@@ -121,10 +124,12 @@ func (m MetadataRow) MarshalJSON() ([]byte, error) {
 		ID    string `json:"id"`
 		Label string `json:"label"`
 		Value string `json:"value"`
+		Prime bool   `json:"prime,omitempty"`
 	}{
 		ID:    m.ID,
 		Label: Label(m.ID),
 		Value: m.Value,
+		Prime: m.Prime,
 	})
 }
 

render/detailed/metadata_test.go

@@ -27,8 +27,8 @@ func TestNodeMetadata(t *testing.T) {
 				Add(docker.ContainerIPs, report.MakeStringSet("10.10.10.0/24", "10.10.10.1/24")),
 			),
 			want: []detailed.MetadataRow{
-				{ID: docker.ContainerID, Value: fixture.ClientContainerID},
-				{ID: docker.ContainerState, Value: "running"},
+				{ID: docker.ContainerID, Value: fixture.ClientContainerID, Prime: true},
+				{ID: docker.ContainerState, Value: "running", Prime: true},
 				{ID: docker.ContainerIPs, Value: "10.10.10.0/24, 10.10.10.1/24"},
 			},
 		},

render/detailed/node_test.go

@@ -120,9 +120,9 @@ func TestMakeDetailedContainerNode(t *testing.T) {
 			Label:    "server",
 			Linkable: true,
 			Metadata: []detailed.MetadataRow{
-				{ID: "docker_container_id", Value: fixture.ServerContainerID},
+				{ID: "docker_container_id", Value: fixture.ServerContainerID, Prime: true},
+				{ID: "docker_container_state", Value: "running", Prime: true},
 				{ID: "docker_image_id", Value: fixture.ServerContainerImageID},
-				{ID: "docker_container_state", Value: "running"},
 			},
 			DockerLabels: []detailed.MetadataRow{
 				{ID: "label_" + render.AmazonECSContainerNameLabel, Value: `server`},
@@ -159,7 +159,7 @@ func TestMakeDetailedContainerNode(t *testing.T) {
 						Label:    "apache",
 						Linkable: true,
 						Metadata: []detailed.MetadataRow{
-							{ID: process.PID, Value: fixture.ServerPID},
+							{ID: process.PID, Value: fixture.ServerPID, Prime: true},
 						},
 						Metrics: []detailed.MetricRow{},
 					},