Improvements to field tables.

frontend/src/js/component/wb-common-fields.js

@@ -84,6 +84,8 @@ class WBCommonFields extends Component {
     return (
       rows ? (
         <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          verticalHeader={ true }
           rows={ rows } />
       ) : (
         <div>Loading...</div>

frontend/src/js/component/wb-container-request-fields.js

@@ -113,7 +113,8 @@ class WBContainerRequestFields extends Component {
       rows ? (
         <WBTable columns={ [ "Name", "Value" ] }
           headerClasses={ [ "col-sm-2", "col-sm-4" ] }
-          rows={ rows } />
+          rows={ rows }
+          verticalHeader={ true } />
       ) : (
         <div>Loading...</div>
       )

frontend/src/js/component/wb-name-and-uuid.js

@@ -44,6 +44,9 @@ class WBNameAndUuid extends Component {
       prom = prom.then(xhr => this.setState({
         'item': xhr.response
       }));
+      prom = prom.catch(xhr => this.setState({
+        'error': 'Unable to retrieve: ' + xhr.status + ' (' + xhr.statusText + ')'
+      }));
 
     } else {
       this.setState({
@@ -54,7 +57,7 @@ class WBNameAndUuid extends Component {
     }
   }
 
-  render({ uuid }, { item }) {
+  render({ uuid }, { error, item }) {
     if (!uuid)
       return (
         <div><i>{ String(uuid) }</i></div>
@@ -63,9 +66,9 @@ class WBNameAndUuid extends Component {
     return (
       <div>
         <div>
-          { item ? (
+          { error ? error : (item ? (
             <a href={ urlForObject(item) }>{ arvadosObjectName(item) }</a>
-          ) : 'Loading...' }
+          ) : 'Loading...') }
         </div>
         <div>
           { uuid }

frontend/src/js/widget/wb-table.js

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 class WBTable extends Component {
-  render({ columns, rows, headerClasses }) {
+  render({ columns, rows, headerClasses, verticalHeader }) {
     return (
       <table class="table table-striped table-hover">
         <thead class="thead-light">
@@ -13,7 +13,11 @@ class WBTable extends Component {
           { rows.map(r => (
             <tr>
               { columns.map((_, idx) => (
-                <td>{ r[idx] }</td>
+                (idx == 0 && verticalHeader) ? (
+                  <th scope="row">{ r[idx] }</th>
+                ) : (
+                  <td>{ r[idx] }</td>
+                )
               )) }
             </tr>
           )) }