Adding text wrap to expanded Tap request

Fixes #1932. This PR adds text wrap to the tap details page so the full request path can be seen.
linkerd · Mar 19, 2019 · ff7603f · ff7603f
1 parent 277e644
commit ff7603f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/web/app/js/components/ExpandableTable.jsx b/web/app/js/components/ExpandableTable.jsx
@@ -21,6 +21,9 @@ const styles = theme => ({
     marginTop: theme.spacing.unit * 3,
     overflowX: 'auto',
   },
+  expandedWrap: {
+    wordBreak: `break-word`
+  },
   table: {
     minWidth: 700
   },
@@ -107,7 +110,7 @@ class ExpandableTable extends React.Component {
           aria-labelledby="form-dialog-title">
           <DialogTitle id="form-dialog-title">Request Details</DialogTitle>
           <DialogContent>
-            {expandedRowRender(this.state.datum)}
+            {expandedRowRender(this.state.datum, classes.expandedWrap)}
           </DialogContent>
           <DialogActions>
             <Button onClick={this.handleDialogClose} color="primary">Close</Button>

diff --git a/web/app/js/components/TapEventTable.jsx b/web/app/js/components/TapEventTable.jsx
@@ -174,9 +174,9 @@ const responseEndSection = d => _isEmpty(d.responseEnd) ? null : (
 
 
 // hide verbose information
-const expandedRowRender = d => {
+const expandedRowRender = (d, expandedWrapStyle) => {
   return (
-    <Grid container spacing={16} className="tap-more-info">
+    <Grid container spacing={16} className={expandedWrapStyle}>
       <Grid item xs={4}>
         <Card>
           <CardContent>{requestInitSection(d)}</CardContent>