From 1b2b02985b46ab96028a36b6308649cf0506ad12 Mon Sep 17 00:00:00 2001
From: Risha Mars <mars@buoyant.io>
Date: Mon, 29 Oct 2018 18:27:02 -0700
Subject: [PATCH] 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       | 18 ++++++++++++++----
 web/app/js/components/ErrorModal.jsx      |  2 +-
 web/app/js/components/ExpandableTable.jsx |  4 +++-
 web/app/js/components/MetricsTable.jsx    |  2 +-
 web/app/js/components/TopEventTable.jsx   |  3 ++-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/app/js/components/BaseTable.jsx b/web/app/js/components/BaseTable.jsx
index cba7cc277..25ae818da 100644
--- a/web/app/js/components/BaseTable.jsx
+++ b/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)}
diff --git a/web/app/js/components/ErrorModal.jsx b/web/app/js/components/ErrorModal.jsx
index e8368239b..a89d61191 100644
--- a/web/app/js/components/ErrorModal.jsx
+++ b/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 = {
diff --git a/web/app/js/components/ExpandableTable.jsx b/web/app/js/components/ExpandableTable.jsx
index b0181bd62..146c6d294 100644
--- a/web/app/js/components/ExpandableTable.jsx
+++ b/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>
               {
diff --git a/web/app/js/components/MetricsTable.jsx b/web/app/js/components/MetricsTable.jsx
index bd84c36f5..41ef7c330 100644
--- a/web/app/js/components/MetricsTable.jsx
+++ b/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 => {
diff --git a/web/app/js/components/TopEventTable.jsx b/web/app/js/components/TopEventTable.jsx
index e33795cf1..1f17df3ed 100644
--- a/web/app/js/components/TopEventTable.jsx
+++ b/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" />
     );
   }
 }