Add hint that a section may be truncated

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

@@ -2,15 +2,23 @@ import _ from 'lodash';
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { clickCloseDetails, clickShowTopologyForNode } from '../actions/app-actions';
+import { brightenColor, getNeutralColor, getNodeColorDark } from '../utils/color-utils';
+import { resetDocumentTitle, setDocumentTitle } from '../utils/title-utils';
+
 import NodeDetailsControls from './node-details/node-details-controls';
 import NodeDetailsHealth from './node-details/node-details-health';
 import NodeDetailsInfo from './node-details/node-details-info';
 import NodeDetailsLabels from './node-details/node-details-labels';
 import NodeDetailsRelatives from './node-details/node-details-relatives';
 import NodeDetailsTable from './node-details/node-details-table';
-import { clickCloseDetails, clickShowTopologyForNode } from '../actions/app-actions';
-import { brightenColor, getNeutralColor, getNodeColorDark } from '../utils/color-utils';
-import { resetDocumentTitle, setDocumentTitle } from '../utils/title-utils';
+import Warning from './warning';
+
+function getTruncationText(label, count) {
+  return `The section ${label} has been truncated because of too many entries.
+${count} entries are not shown.
+We are working on making this better.`;
+}
 
 export class NodeDetails extends React.Component {
 
@@ -196,7 +204,13 @@ export class NodeDetails extends React.Component {
             if (table.rows.length > 0) {
               return (
                 <div className="node-details-content-section" key={table.id}>
-                  <div className="node-details-content-section-header">{table.label}</div>
+                  <div className="node-details-content-section-header">
+                    {table.label}
+                    {table.truncationCount > 0 && <span
+                      className="node-details-content-section-header-warning">
+                      <Warning text={getTruncationText(table.label, table.truncationCount)} />
+                    </span>}
+                  </div>
                   <NodeDetailsLabels rows={table.rows} />
                 </div>
               );

client/app/scripts/components/warning.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Warning({text}) {
+  return (
+    <span className="warning warning-icon fa fa-warning" title={text} />
+  );
+}

client/app/styles/main.less

@@ -649,6 +649,10 @@ h2 {
         font-size: 90%;
         color: @text-tertiary-color;
         padding: 4px 0;
+
+        &-warning {
+          padding: 0 0.5em;
+        }
       }
     }
   }
@@ -1098,6 +1102,10 @@ h2 {
   }
 }
 
+.warning {
+  .btn-opacity;
+}
+
 .sidebar {
   position: fixed;
   bottom: 16px;

report/table.go

@@ -56,7 +56,7 @@ type Table struct {
 	ID              string        `json:"id"`
 	Label           string        `json:"label"`
 	Rows            []MetadataRow `json:"rows"`
-	TruncationCount int           `json:"truncation_count,omitempty"`
+	TruncationCount int           `json:"truncationCount,omitempty"`
 }
 
 type tablesByID []Table