Apply co-break-word within resource lists, to Name & Namespace column…

…s selectively so that long strings wrap appropriately. Related fix https://jira.coreos.com/browse/CONSOLE-560
openshift · Jun 29, 2018 · f246620 · f246620
1 parent 2c7a4b0
commit f246620
Show file tree

Hide file tree

Showing 33 changed files with 145 additions and 155 deletions.
diff --git a/frontend/public/components/RBAC/_rbac.scss b/frontend/public/components/RBAC/_rbac.scss
@@ -3,6 +3,7 @@
 }
 
 .rbac-rule {
+  width: 100%; // since its parent .co-resource-list__item is a flex container
   &__actions {
     align-items: baseline;
     display: flex;

diff --git a/frontend/public/components/RBAC/bindings.jsx b/frontend/public/components/RBAC/bindings.jsx
@@ -117,7 +117,7 @@ export const RoleLink = ({binding}) => {
 };
 
 const Row = ({obj: binding}) => <ResourceRow obj={binding}>
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <BindingName binding={binding} />
   </div>
   <OverflowYFade className="col-xs-3">

diff --git a/frontend/public/components/RBAC/role.jsx b/frontend/public/components/RBAC/role.jsx
@@ -43,11 +43,11 @@ const Header = props => <ListHeader>
 </ListHeader>;
 
 const Row = ({obj: role}) => <div className="row co-resource-list__item">
-  <div className="col-xs-6">
+  <div className="col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind={roleKind(role)} resource={role} />
     <ResourceLink kind={roleKind(role)} name={role.metadata.name} namespace={role.metadata.namespace} />
   </div>
-  <div className="col-xs-6">
+  <div className="col-xs-6 co-break-word">
     {role.metadata.namespace ? <ResourceLink kind="Namespace" name={role.metadata.namespace} /> : 'all'}
   </div>
 </div>;

diff --git a/frontend/public/components/_list.scss b/frontend/public/components/_list.scss
@@ -13,11 +13,6 @@
   }
 }
 
-.middler {
-  display:flex;
-  align-items: center;
-}
-
 .co-m-table-grid {
   &__head {
     color: $color-text-secondary;
@@ -29,14 +24,13 @@
   &__sort-arrow {
     margin-left: 10px;
   }
-  [class^="col-"] {
-    @include co-break-word;
-  }
 }
 
 .co-resource-list__item {
-  transition: all 0.25s;
+  align-items: center;
+  display:flex;
   height: 100%;
+  transition: all 0.25s;
 }
 
 .compaction-btn {

diff --git a/frontend/public/components/_resource.scss b/frontend/public/components/_resource.scss
@@ -95,3 +95,7 @@ $height: 18px;
 .co-m-resource-icon--align-left {
   margin-left: 0;
 }
+
+.co-m-selector {
+  @include co-break-word;
+}
diff --git a/frontend/public/components/build-config.tsx b/frontend/public/components/build-config.tsx
@@ -89,11 +89,11 @@ const BuildConfigsHeader = props => <ListHeader>
 </ListHeader>;
 
 const BuildConfigsRow: React.SFC<BuildConfigsRowProps> = ({obj}) => <div className="row co-resource-list__item">
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceCog actions={menuActions} kind={BuildConfigsReference} resource={obj} />
     <ResourceLink kind={BuildConfigsReference} name={obj.metadata.name} namespace={obj.metadata.namespace} title={obj.metadata.name} />
   </div>
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
   </div>
   <div className="col-xs-3">

diff --git a/frontend/public/components/build.tsx b/frontend/public/components/build.tsx
@@ -128,11 +128,11 @@ const BuildsHeader = props => <ListHeader>
 </ListHeader>;
 
 const BuildsRow: React.SFC<BuildsRowProps> = ({ obj }) => <div className="row co-resource-list__item">
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceCog actions={menuActions} kind={BuildsReference} resource={obj} />
     <ResourceLink kind={BuildsReference} name={obj.metadata.name} namespace={obj.metadata.namespace} title={obj.metadata.name} />
   </div>
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
   </div>
   <div className="col-xs-3">

diff --git a/frontend/public/components/conditions.tsx b/frontend/public/components/conditions.tsx
@@ -5,20 +5,20 @@ import { Timestamp } from './utils';
 
 export const Conditions: React.SFC<ConditionsProps> = ({conditions}) => {
   const rows = _.map(conditions, condition => <div className="row" key={condition.type}>
-    <div className="col-xs-3 col-sm-2 col-md-2">
+    <div className="col-xs-4 col-sm-2 col-md-2">
       {condition.type}
     </div>
-    <div className="col-xs-3 col-sm-2 col-md-2">
+    <div className="col-xs-4 col-sm-2 col-md-2">
       {condition.status}
     </div>
     <div className="hidden-xs hidden-sm col-md-2">
       <Timestamp timestamp={condition.lastUpdateTime || condition.lastTransitionTime} />
     </div>
-    <div className="col-xs-3 col-sm-3 col-md-2">
+    <div className="col-xs-4 col-sm-3 col-md-2 co-break-word">
       {condition.reason || '-'}
     </div>
     {/* remove initial newline which appears in route messages */}
-    <div className="col-xs-3 col-sm-5 col-md-4 co-pre-line">
+    <div className="hidden-xs col-sm-5 col-md-4 co-pre-line">
       {_.trim(condition.message) || '-'}
     </div>
   </div>);
@@ -27,11 +27,11 @@ export const Conditions: React.SFC<ConditionsProps> = ({conditions}) => {
     {conditions
       ? <div className="co-m-table-grid co-m-table-grid--bordered">
         <div className="row co-m-table-grid__head">
-          <div className="col-xs-3 col-sm-2 col-md-2">Type</div>
-          <div className="col-xs-3 col-sm-2 col-md-2">Status</div>
+          <div className="col-xs-4 col-sm-2 col-md-2">Type</div>
+          <div className="col-xs-4 col-sm-2 col-md-2">Status</div>
           <div className="hidden-xs hidden-sm col-md-2">Updated</div>
-          <div className="col-xs-3 col-sm-3 col-md-2">Reason</div>
-          <div className="col-xs-3 col-sm-5 col-md-4">Message</div>
+          <div className="col-xs-4 col-sm-3 col-md-2">Reason</div>
+          <div className="hidden-xs col-sm-5 col-md-4">Message</div>
         </div>
         <div className="co-m-table-grid__body">
           {rows}

diff --git a/frontend/public/components/configmap.jsx b/frontend/public/components/configmap.jsx
@@ -31,11 +31,11 @@ const ConfigMapHeader = props => <ListHeader>
 </ListHeader>;
 
 const ConfigMapRow = ({obj: configMap}) => <ResourceRow obj={configMap}>
-  <div className="col-sm-4 col-xs-6">
+  <div className="col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind="ConfigMap" resource={configMap} />
     <ResourceLink kind="ConfigMap" name={configMap.metadata.name} namespace={configMap.metadata.namespace} title={configMap.metadata.uid} />
   </div>
-  <div className="col-sm-4 col-xs-6">
+  <div className="col-sm-4 col-xs-6 co-break-word">
     <ResourceLink kind="Namespace" name={configMap.metadata.namespace} title={configMap.metadata.namespace} />
   </div>
   <div className="col-sm-2 hidden-xs">{_.size(configMap.data)}</div>

diff --git a/frontend/public/components/cron-job.jsx b/frontend/public/components/cron-job.jsx
@@ -38,11 +38,11 @@ const Header = props => <ListHeader>
 
 const kind = 'CronJob';
 const Row = ({obj: cronjob}) => <div className="row co-resource-list__item">
-  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind={kind} resource={cronjob} />
     <ResourceLink kind={kind} name={cronjob.metadata.name} title={cronjob.metadata.name} namespace={cronjob.metadata.namespace} />
   </div>
-  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceLink kind="Namespace" name={cronjob.metadata.namespace} title={cronjob.metadata.namespace} />
   </div>
   <div className="col-lg-2 col-md-3 col-sm-4 hidden-xs">

diff --git a/frontend/public/components/custom-resource-definition.jsx b/frontend/public/components/custom-resource-definition.jsx
@@ -49,11 +49,11 @@ const isEstablished = conditions => {
 const namespaced = crd => crd.spec.scope === 'Namespaced';
 
 const CRDRow = ({obj: crd}) => <div className="row co-resource-list__item">
-  <div className="col-lg-4 col-md-4 col-sm-4 col-xs-6">
+  <div className="col-lg-4 col-md-4 col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind="CustomResourceDefinition" resource={crd} />
     <ResourceLink kind={referenceForCRD(crd)} displayName={_.get(crd, 'spec.names.kind', crd.metadata.name)} namespace={crd.metadata.namespace} title={crd.metadata.name} />
   </div>
-  <div className="col-lg-3 col-md-4 col-sm-4 col-xs-6">
+  <div className="col-lg-3 col-md-4 col-sm-4 col-xs-6 co-break-word">
     { crd.spec.group }
   </div>
   <div className="col-lg-2 col-md-2 col-sm-4 hidden-xs">

diff --git a/frontend/public/components/daemonset.jsx b/frontend/public/components/daemonset.jsx
@@ -36,11 +36,11 @@ const DaemonSetHeader = props => <ListHeader>
 </ListHeader>;
 
 const DaemonSetRow = ({obj: daemonset}) => <ResourceRow obj={daemonset}>
-  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind="DaemonSet" resource={daemonset} />
     <ResourceLink kind="DaemonSet" name={daemonset.metadata.name} namespace={daemonset.metadata.namespace} title={daemonset.metadata.uid} />
   </div>
-  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceLink kind="Namespace" name={daemonset.metadata.namespace} title={daemonset.metadata.namespace} />
   </div>
   <div className="col-lg-3 col-md-4 col-sm-4 hidden-xs">

diff --git a/frontend/public/components/default-resource.jsx b/frontend/public/components/default-resource.jsx
@@ -17,11 +17,11 @@ const Header = props => <ListHeader>
 
 const RowForKind = kind => function RowForKind_ ({obj}) {
   return <div className="row co-resource-list__item">
-    <div className="col-xs-4">
+    <div className="col-xs-4 co-break-word">
       <ResourceCog actions={menuActions} kind={referenceFor(obj) || kind} resource={obj} />
       <ResourceLink kind={kind} name={obj.metadata.name} namespace={obj.metadata.namespace} title={obj.metadata.name} />
     </div>
-    <div className="col-xs-4">
+    <div className="col-xs-4 co-break-word">
       { obj.metadata.namespace
         ? <ResourceLink kind="Namespace" name={obj.metadata.namespace} title={obj.metadata.namespace} />
         : 'None'

diff --git a/frontend/public/components/factory/list.jsx b/frontend/public/components/factory/list.jsx
@@ -378,11 +378,11 @@ export class ResourceRow extends React.Component {
 }
 
 export const WorkloadListRow = ({kind, actions, obj: o}) => <ResourceRow obj={o}>
-  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={actions} kind={kind} resource={o} />
     <ResourceLink kind={kind} name={o.metadata.name} namespace={o.metadata.namespace} title={o.metadata.uid} />
   </div>
-  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceLink kind="Namespace" name={o.metadata.namespace} title={o.metadata.namespace} />
   </div>
   <div className="col-lg-3 col-md-4 col-sm-4 hidden-xs">

diff --git a/frontend/public/components/hpa.tsx b/frontend/public/components/hpa.tsx
@@ -201,17 +201,17 @@ const HorizontalPodAutoscalersHeader = props => <ListHeader>
 </ListHeader>;
 
 const HorizontalPodAutoscalersRow: React.SFC<HorizontalPodAutoscalersRowProps> = ({obj}) => <div className="row co-resource-list__item">
-  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-3 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind={HorizontalPodAutoscalersReference} resource={obj} />
     <ResourceLink kind={HorizontalPodAutoscalersReference} name={obj.metadata.name} namespace={obj.metadata.namespace} title={obj.metadata.name} />
   </div>
-  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+  <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceLink kind="Namespace" name={obj.metadata.namespace} title={obj.metadata.namespace} />
   </div>
   <div className="col-lg-3 col-md-3 col-sm-4 hidden-xs">
     <LabelList kind="HorizontalPodAutoscaler" labels={obj.metadata.labels} />
   </div>
-  <div className="col-lg-2 col-md-3 hidden-sm hidden-xs">
+  <div className="col-lg-2 col-md-3 hidden-sm hidden-xs co-break-word">
     <ResourceLink kind={obj.spec.scaleTargetRef.kind} name={obj.spec.scaleTargetRef.name} namespace={obj.metadata.namespace} title={obj.spec.scaleTargetRef.name} />
   </div>
   <div className="col-lg-1 hidden-md hidden-sm hidden-xs">

diff --git a/frontend/public/components/image-stream.tsx b/frontend/public/components/image-stream.tsx
@@ -31,23 +31,21 @@ const ImageStreamTagsRow: React.SFC<ImageStreamTagsRowProps> = ({imageStream, sp
   const image = _.get(latest, 'image');
   const created = _.get(latest, 'created');
   return <div className="row">
-    <div className="middler">
-      <div className="col-md-2 col-sm-4 col-xs-4">
-        <ResourceLink kind={ImageStreamTagsReference} name={getImageStreamTagName(imageStream.metadata.name, statusTag.tag)} namespace={imageStream.metadata.namespace} title={statusTag.tag} />
-      </div>
-      <span className="col-md-3 col-sm-4 col-xs-8">
-        {from && referencesTag && <ResourceLink kind={ImageStreamTagsReference} name={getImageStreamTagName(imageStream.metadata.name, from.name)} namespace={imageStream.metadata.namespace} title={from.name} />}
-        {from && !referencesTag && <Overflow value={from.name} />}
-        {!from && <span className="text-muted">pushed image</span>}
-      </span>
-      <span className="col-md-4 col-sm-4 hidden-xs">
-        {image && <Overflow value={image} />}
-        {!image && '-'}
-      </span>
-      <div className="col-md-3 hidden-sm hidden-xs">
-        {created && <Timestamp timestamp={created} />}
-        {!created && '-'}
-      </div>
+    <div className="col-md-2 col-sm-4 col-xs-4 co-break-word">
+      <ResourceLink kind={ImageStreamTagsReference} name={getImageStreamTagName(imageStream.metadata.name, statusTag.tag)} namespace={imageStream.metadata.namespace} title={statusTag.tag} />
+    </div>
+    <span className="col-md-3 col-sm-4 col-xs-8 co-break-word">
+      {from && referencesTag && <ResourceLink kind={ImageStreamTagsReference} name={getImageStreamTagName(imageStream.metadata.name, from.name)} namespace={imageStream.metadata.namespace} title={from.name} />}
+      {from && !referencesTag && <Overflow value={from.name} />}
+      {!from && <span className="text-muted">pushed image</span>}
+    </span>
+    <span className="col-md-4 col-sm-4 hidden-xs">
+      {image && <Overflow value={image} />}
+      {!image && '-'}
+    </span>
+    <div className="col-md-3 hidden-sm hidden-xs">
+      {created && <Timestamp timestamp={created} />}
+      {!created && '-'}
     </div>
   </div>;
 };
@@ -106,11 +104,11 @@ const ImageStreamsHeader = props => <ListHeader>
 </ListHeader>;
 
 const ImageStreamsRow: React.SFC<ImageStreamsRowProps> = ({obj}) => <div className="row co-resource-list__item">
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceCog actions={menuActions} kind={ImageStreamsReference} resource={obj} />
     <ResourceLink kind={ImageStreamsReference} name={obj.metadata.name} namespace={obj.metadata.namespace} title={obj.metadata.name} />
   </div>
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
   </div>
   <div className="col-xs-3">

diff --git a/frontend/public/components/ingress.jsx b/frontend/public/components/ingress.jsx
@@ -53,12 +53,12 @@ const IngressListHeader = props => <ListHeader>
 </ListHeader>;
 
 const IngressListRow = ({obj: ingress}) => <ResourceRow obj={ingress}>
-  <div className="col-md-3 col-sm-4 col-xs-6">
+  <div className="col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceCog actions={menuActions} kind="Ingress" resource={ingress} />
     <ResourceLink kind="Ingress" name={ingress.metadata.name}
       namespace={ingress.metadata.namespace} title={ingress.metadata.uid} />
   </div>
-  <div className="col-md-3 col-sm-4 col-xs-6">
+  <div className="col-md-3 col-sm-4 col-xs-6 co-break-word">
     <ResourceLink kind="Namespace" name={ingress.metadata.namespace} title={ingress.metadata.namespace} />
   </div>
   <div className="col-md-3 col-sm-4 hidden-xs">
@@ -77,10 +77,10 @@ const RulesHeader = () => <div className="row co-m-table-grid__head">
 const RulesRow = ({rule, namespace}) => {
 
   return <div className="row co-resource-list__item">
-    <div className="col-xs-3">
+    <div className="col-xs-3 co-break-word">
       <div>{rule.host}</div>
     </div>
-    <div className="col-xs-3">
+    <div className="col-xs-3 co-break-word">
       <div>{rule.path}</div>
     </div>
     <div className="col-xs-3">

diff --git a/frontend/public/components/job.jsx b/frontend/public/components/job.jsx
@@ -44,11 +44,11 @@ const JobRow = ({obj: job}) => {
   const {type, completions} = getJobTypeAndCompletions(job);
   return (
     <ResourceRow obj={job}>
-      <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+      <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
         <ResourceCog actions={menuActions} kind="Job" resource={job} />
         <ResourceLink kind="Job" name={job.metadata.name} namespace={job.metadata.namespace} title={job.metadata.uid} />
       </div>
-      <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+      <div className="col-lg-2 col-md-3 col-sm-4 col-xs-6 co-break-word">
         <ResourceLink kind="Namespace" name={job.metadata.namespace} title={job.metadata.namespace} />
       </div>
       <div className="col-lg-4 col-md-4 col-sm-4 hidden-xs">

diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
@@ -51,11 +51,11 @@ const NamespaceHeader = props => <ListHeader>
 </ListHeader>;
 
 const NamespaceRow = ({obj: ns}) => <ResourceRow obj={ns}>
-  <div className="col-xs-4">
+  <div className="col-xs-4 co-break-word">
     <ResourceCog actions={nsMenuActions} kind="Namespace" resource={ns} />
     <ResourceLink kind="Namespace" name={ns.metadata.name} title={ns.metadata.uid} />
   </div>
-  <div className="col-xs-4">
+  <div className="col-xs-4 co-break-word">
     {ns.status.phase}
   </div>
   <div className="col-xs-4">
@@ -79,7 +79,7 @@ const ProjectRow = ({obj: project}) => {
   const displayName = getDisplayName(project);
   const requester = getRequester(project);
   return <ResourceRow obj={project}>
-    <div className="col-md-3 col-sm-6 col-xs-8">
+    <div className="col-md-3 col-sm-6 col-xs-8 co-break-word">
       <ResourceCog actions={projectMenuActions} kind="Project" resource={project} />
       <ResourceLink kind="Project" name={project.metadata.name} title={displayName || project.metadata.uid} />
     </div>

diff --git a/frontend/public/components/network-policy.jsx b/frontend/public/components/network-policy.jsx
@@ -43,11 +43,11 @@ const Row = ({obj: np}) => <div className="row co-resource-list__item">
     <ResourceCog actions={menuActions} kind={kind} resource={np} />
     <ResourceLink kind={kind} name={np.metadata.name} namespace={np.metadata.namespace} title={np.metadata.name} />
   </div>
-  <div className="col-xs-3">
+  <div className="col-xs-3 co-break-word">
     <ResourceLink kind={'Namespace'} name={np.metadata.namespace} title={np.metadata.namespace} />
   </div>
 
-  <div className="col-xs-5">
+  <div className="col-xs-5 co-break-word">
     {
       _.isEmpty(np.spec.podSelector) ?
         <Link to={`/search/ns/${np.metadata.namespace}?kind=Pod`}>{`All pods within ${np.metadata.namespace}`}</Link> :