Handle long strings in build/buildsets tables

A few user-supplied strings can have an adverse effect on the build
and buildset tables.  Normally these fields wrap if the strings are
too long, however there are some circumstances where they will not
wrap.  Especially if more than one of these applies, it can cause
entirel columns to be pushed out of the right side of the viewport
and be inaccessible.  Browsers will wrap words on spaces and hyphens,
but extra work is needed to allow them to wrap in other cases.
Some example strings that cause this problem are:

* job-nameswithreallylongwords-in-them
* branches/with_underscores_instead_of_dashes
* changes,withcommitshasaspatchnumbers

To address all of the columns except changes, we add the patternfly
breakWord cell transform.  This will allow the text to break anywhere
necessary (but will still prefer spaces and hyphens).

For the change column, we set the width of the column to 10% and
truncate the text within.  In practice, this appears to allow for about
10 digits or so.  That's enough to fully identify a typical gerrit
change and patchset, as well as effectively uniquely identify a
github PR and commit (at least, unique enough within the table display).
The rest will be truncated with elipses (...).

Change-Id: I067528af64dd106353dc6be877dec938a0d2e8e0

web/src/containers/build/BuildTable.jsx

@@ -39,6 +39,9 @@ import {
   TableHeader,
   TableBody,
   TableVariant,
+  truncate,
+  breakWord,
+  cellWidth,
 } from '@patternfly/react-table'
 import 'moment-duration-format'
 import * as moment from 'moment'
@@ -58,14 +61,17 @@ function BuildTable({
     {
       title: <IconProperty icon={<BuildIcon />} value="Job" />,
       dataLabel: 'Job',
+      cellTransforms: [breakWord],
     },
     {
       title: <IconProperty icon={<CubeIcon />} value="Project" />,
       dataLabel: 'Project',
+      cellTransforms: [breakWord],
     },
     {
       title: <IconProperty icon={<CodeBranchIcon />} value="Branch" />,
       dataLabel: 'Branch',
+      cellTransforms: [breakWord],
     },
     {
       title: <IconProperty icon={<StreamIcon />} value="Pipeline" />,
@@ -74,6 +80,8 @@ function BuildTable({
     {
       title: <IconProperty icon={<CodeIcon />} value="Change" />,
       dataLabel: 'Change',
+      transforms: [cellWidth(10)],
+      cellTransforms: [truncate],
     },
     {
       title: <IconProperty icon={<OutlinedClockIcon />} value="Duration" />,

web/src/containers/build/BuildsetTable.jsx

@@ -37,6 +37,9 @@ import {
   TableHeader,
   TableBody,
   TableVariant,
+  truncate,
+  breakWord,
+  cellWidth,
 } from '@patternfly/react-table'
 
 import { BuildResult, BuildResultWithIcon, IconProperty } from './Misc'
@@ -53,18 +56,23 @@ function BuildsetTable({
     {
       title: <IconProperty icon={<CubeIcon />} value="Project" />,
       dataLabel: 'Project',
+      cellTransforms: [breakWord],
     },
     {
       title: <IconProperty icon={<CodeBranchIcon />} value="Branch" />,
       dataLabel: 'Branch',
+      cellTransforms: [breakWord],
     },
     {
       title: <IconProperty icon={<StreamIcon />} value="Pipeline" />,
       dataLabel: 'Pipeline',
+      cellTransforms: [breakWord],
     },
     {
       title: <IconProperty icon={<CodeIcon />} value="Change" />,
       dataLabel: 'Change',
+      transforms: [cellWidth(10)],
+      cellTransforms: [truncate],
     },
     {
       title: <IconProperty icon={<PollIcon />} value="Result" />,