Merge pull request #946 from weaveworks/929-show-more-metadata

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

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

@@ -1,10 +1,34 @@
 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() {
+    let rows = (this.props.rows || []);
+    const prime = rows.filter(row => row.prime);
+    let expandText = 'Show less';
+    let showExpand = this.state.expanded;
+    if (!this.state.expanded && prime.length < rows.length) {
+      expandText = 'Show more';
+      showExpand = true;
+      rows = prime;
+    }
     return (
       <div className="node-details-info">
-        {this.props.rows && this.props.rows.map(field => {
+        {rows.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 +42,7 @@ export default class NodeDetailsInfo extends React.Component {
             </div>
           );
         })}
+        {showExpand && <div className="node-details-info-expand" onClick={this.handleClickMore}>{expandText}</div>}
       </div>
     );
   }

client/app/styles/main.less

@@ -596,6 +596,7 @@ h2 {
         bottom: -2px;
         left: 0;
         right: 0;
+        font-weight: bold;
       }
 
       &-item {
@@ -637,6 +638,17 @@ h2 {
   &-info {
     margin: 16px 0;
 
+    &-expand {
+      .btn-opacity;
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 80%;
+      cursor: pointer;
+      color: @text-secondary-color;
+      padding: 2px 0;
+      font-weight: bold;
+    }
+
     &-field {
       display: flex;
       align-items: baseline;
@@ -698,18 +710,13 @@ h2 {
     }
 
     &-more {
-      .palable;
+      .btn-opacity;
       padding: 2px 0;
       text-transform: uppercase;
       cursor: pointer;
       color: @text-secondary-color;
-      opacity: 0.7;
       font-size: 80%;
       font-weight: bold;
-
-      &:hover {
-        opacity: 1;
-      }
     }
 
     &-node {

render/detailed/metadata.go

@@ -16,38 +16,38 @@ import (
 
 var (
 	processNodeMetadata = []MetadataRowTemplate{
-		Latest{ID: process.PID},
-		Latest{ID: process.PPID},
-		Latest{ID: process.Cmdline},
-		Latest{ID: process.Threads},
+		Latest{ID: process.PID, Prime: true},
+		Latest{ID: process.Cmdline, Prime: true},
+		Latest{ID: process.PPID, Prime: true},
+		Latest{ID: process.Threads, Prime: true},
 	}
 	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},
-		Latest{ID: kubernetes.Namespace},
-		Latest{ID: kubernetes.PodCreated},
+		Latest{ID: kubernetes.PodID, Prime: true},
+		Latest{ID: kubernetes.Namespace, Prime: true},
+		Latest{ID: kubernetes.PodCreated, Prime: true},
 	}
 	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{},
 					},