Small tweaks to the metrics tables to make them denser (#1826)

Try to squish the metrics columns so that the data fits on the page without
having to scroll the table. This was mostly evident in the Tap and Top tables,
where a lot of the table content would be initially out of view.

This branch also includes an unrelated tiny fix for max error length, which had
been changed from 500 to 50 for testing, and had not been changed back

web/app/js/components/BaseTable.jsx

@@ -8,6 +8,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import _ from 'lodash';
+import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
@@ -24,6 +25,10 @@ const styles = theme => ({
   inactiveSortIcon: {
     opacity: 0.4,
   },
+  denseTable: {
+    paddingRight: "8px",
+    paddingLeft: "8px"
+  }
 });
 
 class BaseTable extends React.Component {
@@ -56,14 +61,17 @@ class BaseTable extends React.Component {
     return order === 'desc' ? _.reverse(sorted) : sorted;
   }
 
-  renderHeaderCell = (col, order, orderBy, classes) => {
+  renderHeaderCell = (col, order, orderBy) => {
     let active = orderBy === col.dataIndex;
+    const { classes, padding } = this.props;
+
     if (col.sorter) {
       return (
         <TableCell
           key={col.key || col.dataIndex}
           numeric={col.isNumeric}
-          sortDirection={orderBy === col.dataIndex ? order : false}>
+          sortDirection={orderBy === col.dataIndex ? order : false}
+          className={classNames({[classes.denseTable]: padding === 'dense'})}>
           <TableSortLabel
             active={active}
             direction={active ? order : col.defaultSortOrder || 'asc'}
@@ -77,7 +85,8 @@ class BaseTable extends React.Component {
       return (
         <TableCell
           key={col.key || col.dataIndex}
-          numeric={col.isNumeric}>
+          numeric={col.isNumeric}
+          className={classNames({[classes.denseTable]: padding === 'dense'})}>
           {col.title}
         </TableCell>
       );
@@ -95,7 +104,7 @@ class BaseTable extends React.Component {
           <TableHead>
             <TableRow>
               { _.map(tableColumns, c => (
-                this.renderHeaderCell(c, order, orderBy, classes)
+                this.renderHeaderCell(c, order, orderBy)
               ))}
             </TableRow>
           </TableHead>
@@ -107,6 +116,7 @@ class BaseTable extends React.Component {
                 <TableRow key={key}>
                   { _.map(tableColumns, c => (
                     <TableCell
+                      className={classNames({[classes.denseTable]: padding === 'dense'})}
                       key={`table-${key}-${c.key || c.dataIndex}`}
                       numeric={c.isNumeric}>
                       {c.render ? c.render(d) : _.get(d, c.dataIndex)}

web/app/js/components/ErrorModal.jsx

@@ -15,7 +15,7 @@ import _ from 'lodash';
 import { friendlyTitle } from './util/Utils.js';
 
 // max characters we display for error messages before truncating them
-const maxErrorLength = 50;
+const maxErrorLength = 500;
 
 class ErrorModal extends React.Component {
   state = {

web/app/js/components/ExpandableTable.jsx

@@ -59,7 +59,9 @@ class ExpandableTable extends React.Component {
 
     return (
       <Paper className={classes.root}>
-        <Table className={`${classes.table} ${tableClassName}`}>
+        <Table
+          className={`${classes.table} ${tableClassName}`}
+          padding="dense">
           <TableHead>
             <TableRow>
               {

web/app/js/components/MetricsTable.jsx

@@ -105,7 +105,7 @@ const columnDefinitions = (resource, showNamespaceColumn, PrefixedLink) => {
         b.tlsRequestPercent ? b.tlsRequestPercent.get() : -1)
     },
     {
-      title: "Grafana Dashboard",
+      title: "Grafana",
       key: "grafanaDashboard",
       isNumeric: true,
       render: row => {

web/app/js/components/TopEventTable.jsx

@@ -95,7 +95,8 @@ class TopEventTable extends React.Component {
         tableColumns={columns}
         tableClassName="metric-table"
         defaultOrderBy="count"
-        defaultOrder="desc" />
+        defaultOrder="desc"
+        padding="dense" />
     );
   }
 }